Add custom query parameters

Author: marcusolsson

src/ConfigEditor.tsx

@@ -2,11 +2,20 @@ import React from 'react';
 import { DataSourceHttpSettings } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { MyDataSourceOptions } from './types';
+import { ConfigSettings } from './ConfigSettings';
 
 interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
 
 export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
   return (
-    <DataSourceHttpSettings defaultUrl="http://localhost:8080" dataSourceConfig={options} onChange={onOptionsChange} />
+    <>
+      <DataSourceHttpSettings
+        defaultUrl="http://localhost:8080"
+        dataSourceConfig={options}
+        onChange={onOptionsChange}
+      />
+
+      <ConfigSettings options={options} onOptionsChange={onOptionsChange} />
+    </>
   );
 };

src/ConfigSettings.tsx

@@ -0,0 +1,26 @@
+import React, { ChangeEvent } from 'react';
+
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+
+import { Field, Input } from '@grafana/ui';
+import { MyDataSourceOptions } from './types';
+import {} from '@emotion/core';
+
+type Props = Pick<DataSourcePluginOptionsEditorProps<MyDataSourceOptions>, 'options' | 'onOptionsChange'>;
+
+export const ConfigSettings: React.FC<Props> = ({ options, onOptionsChange }) => {
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onOptionsChange({
+      ...options,
+      jsonData: {
+        ...options.jsonData,
+        queryParams: e.currentTarget.value,
+      },
+    });
+  };
+  return (
+    <Field label="Query parameters" description="Add custom query parameters to your query." className="width-16">
+      <Input value={options.jsonData.queryParams} onChange={onChange} placeholder="page=1&limit=100" />
+    </Field>
+  );
+};

src/DataSource.ts

@@ -17,15 +17,17 @@ import { JsonApiQuery, MyVariableQuery, MyDataSourceOptions } from './types';
 
 export class DataSource extends DataSourceApi<JsonApiQuery, MyDataSourceOptions> {
   api: API;
+  queryParams: string;
 
   constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
     super(instanceSettings);
     this.api = new API(instanceSettings.url!);
+    this.queryParams = instanceSettings.jsonData.queryParams || '';
   }
 
-  async query(options: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {
-    const promises = options.targets.map(async query => {
-      const response = await this.api.cachedGet(query.cacheDurationSeconds);
+  async query(request: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {
+    const promises = request.targets.map(async query => {
+      const response = await this.api.cachedGet(query.cacheDurationSeconds, this.queryParams);
 
       const fields = query.fields
         .filter(field => field.jsonPath)

src/api.ts

@@ -14,11 +14,13 @@ export default class Api {
   /**
    * Queries the API and returns the response data.
    */
-  async get() {
-    const response = await getBackendSrv().datasourceRequest({
-      url: this.baseUrl,
+  async get(params?: string) {
+    const req = {
+      url: `${this.baseUrl}${params?.length ? `?${params}` : ''}`,
       method: 'GET',
-    });
+    };
+
+    const response = await getBackendSrv().datasourceRequest(req);
 
     return response.data;
   }
@@ -36,9 +38,9 @@ export default class Api {
   /**
    * Returns a cached API response if it exists, otherwise queries the API.
    */
-  async cachedGet(cacheDurationSeconds: number) {
+  async cachedGet(cacheDurationSeconds: number, params?: string) {
     if (cacheDurationSeconds === 0) {
-      return await this.get();
+      return await this.get(params);
     }
 
     const force = this.lastCacheDuration !== cacheDurationSeconds;
@@ -53,7 +55,7 @@ export default class Api {
     }
     this.lastCacheDuration = cacheDurationSeconds;
 
-    const result = await this.get();
+    const result = await this.get(params);
 
     this.cache.put(this.baseUrl, result, Math.max(cacheDurationSeconds * 1000, 1));
 

src/types.ts

@@ -19,16 +19,8 @@ export const defaultQuery: Partial<JsonApiQuery> = {
   cacheDurationSeconds: 300,
 };
 
-/**
- * These are options configured for each DataSource instance
- */
 export interface MyDataSourceOptions extends DataSourceJsonData {
-  path?: string;
+  queryParams?: string;
 }
 
-/**
- * Value that is used in the backend, but never sent over HTTP to the frontend
- */
-export interface MySecureJsonData {
-  apiKey?: string;
-}
+export interface MySecureJsonData {}