Add variable query editor

fixes camptocamp#140

README.md

@@ -39,6 +39,12 @@ Whether the alerts gathered should be inhibited.
 
 ![Parameters](https://raw.githubusercontent.com/camptocamp/grafana-prometheus-alertmanager-datasource/master/img/table.png)
 
+# Variable Query Editor
+
+Additionally, to the query editor options, the `Field` must be filled whose values are used for the variable.
+
+![Parameters](https://raw.githubusercontent.com/camptocamp/grafana-prometheus-alertmanager-datasource/master/img/variablequeryeditor.png)
+
 # Panels
 
 ## Stat

src/DataSource.ts

@@ -3,7 +3,9 @@ import {
   DataSourceApi,
   DataSourceInstanceSettings,
   FieldType,
+  MetricFindValue,
   MutableDataFrame,
+  ScopedVars,
 } from '@grafana/data';
 import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 import { GenericOptions, CustomQuery, QueryRequest, defaultQuery } from './types';
@@ -26,8 +28,8 @@ export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOp
     }
   }
 
-  async query(options: QueryRequest): Promise<DataQueryResponse> {
-    const promises = options.targets.map((query) => {
+  async doQuery(queries: CustomQuery[], scopedVars?: ScopedVars): Promise<MutableDataFrame[]> {
+    const promises = queries.map((query) => {
       query = { ...defaultQuery, ...query };
       if (query.hide) {
         return Promise.resolve(new MutableDataFrame());
@@ -44,25 +46,61 @@ export class AlertmanagerDataSource extends DataSourceApi<CustomQuery, GenericOp
         params.push(`receiver=${query.receiver}`);
       }
       if (query.filters !== undefined && query.filters.length > 0) {
-        query.filters = getTemplateSrv().replace(query.filters, options.scopedVars, this.interpolateQueryExpr);
+        query.filters = getTemplateSrv().replace(query.filters, scopedVars, this.interpolateQueryExpr);
         query.filters.split(',').forEach((value) => {
           params.push(`filter=${encodeURIComponent(value)}`);
         });
       }
 
-      const request = this.doRequest({
+      return this.doRequest({
         url: `${this.url}/api/v2/alerts?${params.join('&')}`,
         method: 'GET',
-      }).then((data) => lastValueFrom(data));
-
-      return request.then((data: any) => this.retrieveData(query, data));
+      })
+        .then((data) => lastValueFrom(data))
+        .then((data) => {
+          return this.retrieveData(query, data);
+        })
+        .catch(() => {
+          return new MutableDataFrame();
+        });
     });
 
     return Promise.all(promises).then((data) => {
+      return data;
+    });
+  }
+
+  async query(options: QueryRequest): Promise<DataQueryResponse> {
+    return this.doQuery(options.targets, options.scopedVars).then((data) => {
       return { data };
     });
   }
 
+  async metricFindQuery(query: CustomQuery, options?: any): Promise<MetricFindValue[]> {
+    if (typeof query.field === undefined) {
+      return [];
+    }
+    const response = (await this.doQuery([query], options.scopedVars))[0];
+
+    let fieldIndex = -1;
+    response.fields.forEach((field, index) => {
+      if (field.name === query.field) {
+        fieldIndex = index;
+      }
+    });
+    if (fieldIndex === -1) {
+      return [];
+    }
+
+    const values = response.fields[fieldIndex].values.toArray().map((val) => {
+      return val.toString();
+    });
+    const unique = [...new Set(values)];
+    return unique.map((val) => {
+      return { text: val };
+    });
+  }
+
   async testDatasource() {
     return this.doRequest({
       url: this.url,

src/QueryEditor.tsx

@@ -27,27 +27,36 @@ export class QueryEditor extends PureComponent<Props> {
 
   onActiveChange = () => {
     const { onChange, query, onRunQuery } = this.props;
-    query.active = !query.active;
-    onChange({ ...query });
+    let newQuery = { ...query };
+    newQuery.active = !query.active;
+    onChange(newQuery);
     onRunQuery();
   };
 
   onSilencedChange = () => {
     const { onChange, query, onRunQuery } = this.props;
-    query.silenced = !query.silenced;
-    onChange({ ...query });
+    let newQuery = { ...query };
+    newQuery.silenced = !query.silenced;
+    onChange(newQuery);
     onRunQuery();
   };
 
   onInhibitedChange = () => {
     const { onChange, query, onRunQuery } = this.props;
-    query.inhibited = !query.inhibited;
-    onChange({ ...query });
+    let newQuery = { ...query };
+    newQuery.inhibited = !query.inhibited;
+    onChange(newQuery);
     onRunQuery();
   };
 
-  render() {
-    const { receiver, filters, active, silenced, inhibited } = { ...defaultQuery, ...this.props.query };
+  onFieldChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { onChange, query, onRunQuery } = this.props;
+    onChange({ ...query, field: event.target.value });
+    onRunQuery();
+  };
+
+  baseRender(showField: boolean) {
+    let { receiver, filters, active, silenced, inhibited, field } = { ...defaultQuery, ...this.props.query };
 
     return (
       <>
@@ -70,6 +79,18 @@ export class QueryEditor extends PureComponent<Props> {
               label="Filters (comma separated key=value)"
             />
           </div>
+          {showField && (
+            <div className="gf-form">
+              <FormField
+                value={field}
+                inputWidth={10}
+                onChange={this.onFieldChange}
+                labelWidth={5}
+                label="Field"
+                tooltip="Variables are taken from the values of this field in the query result"
+              />
+            </div>
+          )}
           <div className="gf-form">
             <Switch label="Active" checked={active} onChange={this.onActiveChange} />
           </div>
@@ -83,4 +104,8 @@ export class QueryEditor extends PureComponent<Props> {
       </>
     );
   }
+
+  render() {
+    return this.baseRender(false);
+  }
 }

src/VariableQueryEditor.tsx

@@ -0,0 +1,7 @@
+import { QueryEditor } from './QueryEditor';
+
+export class CustomVariableQueryEditor extends QueryEditor {
+  render() {
+    return super.baseRender(true);
+  }
+}

src/module.ts

@@ -3,6 +3,7 @@ import { ConfigEditor } from './ConfigEditor';
 import { AlertmanagerDataSource } from './DataSource';
 import { QueryEditor } from './QueryEditor';
 import { CustomQuery, GenericOptions } from './types';
+import { CustomVariableQueryEditor } from './VariableQueryEditor';
 
 class GenericAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
@@ -11,4 +12,5 @@ class GenericAnnotationsQueryCtrl {
 export const plugin = new DataSourcePlugin<AlertmanagerDataSource, CustomQuery, GenericOptions>(AlertmanagerDataSource)
   .setAnnotationQueryCtrl(GenericAnnotationsQueryCtrl)
   .setConfigEditor(ConfigEditor)
-  .setQueryEditor(QueryEditor);
+  .setQueryEditor(QueryEditor)
+  .setVariableQueryEditor(CustomVariableQueryEditor);

src/types.ts

@@ -11,6 +11,7 @@ export interface CustomQuery extends DataQuery {
   active: boolean;
   silenced: boolean;
   inhibited: boolean;
+  field: string;
 }
 
 export const defaultQuery: Partial<CustomQuery> = {