Skip to content

Commit 81d30f3

Browse files
committed
Add custom query parameters
1 parent 8f03b5b commit 81d30f3

File tree

5 files changed

+52
-21
lines changed

5 files changed

+52
-21
lines changed

src/ConfigEditor.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,20 @@ import React from 'react';
22
import { DataSourceHttpSettings } from '@grafana/ui';
33
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
44
import { MyDataSourceOptions } from './types';
5+
import { ConfigSettings } from './ConfigSettings';
56

67
interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
78

89
export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
910
return (
10-
<DataSourceHttpSettings defaultUrl="http://localhost:8080" dataSourceConfig={options} onChange={onOptionsChange} />
11+
<>
12+
<DataSourceHttpSettings
13+
defaultUrl="http://localhost:8080"
14+
dataSourceConfig={options}
15+
onChange={onOptionsChange}
16+
/>
17+
18+
<ConfigSettings options={options} onOptionsChange={onOptionsChange} />
19+
</>
1120
);
1221
};

src/ConfigSettings.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { ChangeEvent } from 'react';
2+
3+
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
4+
5+
import { Field, Input } from '@grafana/ui';
6+
import { MyDataSourceOptions } from './types';
7+
import {} from '@emotion/core';
8+
9+
type Props = Pick<DataSourcePluginOptionsEditorProps<MyDataSourceOptions>, 'options' | 'onOptionsChange'>;
10+
11+
export const ConfigSettings: React.FC<Props> = ({ options, onOptionsChange }) => {
12+
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
13+
onOptionsChange({
14+
...options,
15+
jsonData: {
16+
...options.jsonData,
17+
queryParams: e.currentTarget.value,
18+
},
19+
});
20+
};
21+
return (
22+
<Field label="Query parameters" description="Add custom query parameters to your query." className="width-16">
23+
<Input value={options.jsonData.queryParams} onChange={onChange} placeholder="page=1&limit=100" />
24+
</Field>
25+
);
26+
};

src/DataSource.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,17 @@ import { JsonApiQuery, MyVariableQuery, MyDataSourceOptions } from './types';
1717

1818
export class DataSource extends DataSourceApi<JsonApiQuery, MyDataSourceOptions> {
1919
api: API;
20+
queryParams: string;
2021

2122
constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
2223
super(instanceSettings);
2324
this.api = new API(instanceSettings.url!);
25+
this.queryParams = instanceSettings.jsonData.queryParams || '';
2426
}
2527

26-
async query(options: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {
27-
const promises = options.targets.map(async query => {
28-
const response = await this.api.cachedGet(query.cacheDurationSeconds);
28+
async query(request: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {
29+
const promises = request.targets.map(async query => {
30+
const response = await this.api.cachedGet(query.cacheDurationSeconds, this.queryParams);
2931

3032
const fields = query.fields
3133
.filter(field => field.jsonPath)

src/api.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ export default class Api {
1414
/**
1515
* Queries the API and returns the response data.
1616
*/
17-
async get() {
18-
const response = await getBackendSrv().datasourceRequest({
19-
url: this.baseUrl,
17+
async get(params?: string) {
18+
const req = {
19+
url: `${this.baseUrl}${params?.length ? `?${params}` : ''}`,
2020
method: 'GET',
21-
});
21+
};
22+
23+
const response = await getBackendSrv().datasourceRequest(req);
2224

2325
return response.data;
2426
}
@@ -36,9 +38,9 @@ export default class Api {
3638
/**
3739
* Returns a cached API response if it exists, otherwise queries the API.
3840
*/
39-
async cachedGet(cacheDurationSeconds: number) {
41+
async cachedGet(cacheDurationSeconds: number, params?: string) {
4042
if (cacheDurationSeconds === 0) {
41-
return await this.get();
43+
return await this.get(params);
4244
}
4345

4446
const force = this.lastCacheDuration !== cacheDurationSeconds;
@@ -53,7 +55,7 @@ export default class Api {
5355
}
5456
this.lastCacheDuration = cacheDurationSeconds;
5557

56-
const result = await this.get();
58+
const result = await this.get(params);
5759

5860
this.cache.put(this.baseUrl, result, Math.max(cacheDurationSeconds * 1000, 1));
5961

src/types.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,8 @@ export const defaultQuery: Partial<JsonApiQuery> = {
1919
cacheDurationSeconds: 300,
2020
};
2121

22-
/**
23-
* These are options configured for each DataSource instance
24-
*/
2522
export interface MyDataSourceOptions extends DataSourceJsonData {
26-
path?: string;
23+
queryParams?: string;
2724
}
2825

29-
/**
30-
* Value that is used in the backend, but never sent over HTTP to the frontend
31-
*/
32-
export interface MySecureJsonData {
33-
apiKey?: string;
34-
}
26+
export interface MySecureJsonData {}

0 commit comments

Comments
 (0)