added support for basic variables queries (#38)

Co-authored-by: George Granberry <george.granberry@disneystreaming.com>
Co-authored-by: Kevin Retzke <kretzke@fnal.gov>

Author: 3 people

dist/module.js

@@ -25,7 +25,7 @@
       { "name": "GitHub Security Advisories", "path": "img/github_security_advisories.png"}
     ],
     "version": "1.1.4",
-    "updated": "2020-11-04"
+    "updated": "2021-01-14"
   },
 
   "dependencies": {

dist/module.js.map

@@ -6,17 +6,28 @@ import {
   DataQueryRequest,
   DataQueryResponse,
   DataSourceApi,
+  MetricFindValue,
   DataSourceInstanceSettings,
   ScopedVars,
   TimeRange,
 } from '@grafana/data';
 
-import { MyQuery, MyDataSourceOptions, defaultQuery } from './types';
+import {
+  MyQuery,
+  MyDataSourceOptions,
+  defaultQuery,
+  MyVariableQuery,
+  MultiValueVariable,
+  TextValuePair,
+} from './types';
 import { dateTime, MutableDataFrame, FieldType, DataFrame } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import _ from 'lodash';
+import { isEqual } from 'lodash';
 import { flatten, isRFC3339_ISO6801 } from './util';
 
+const supportedVariableTypes = ['constant', 'custom', 'query', 'textbox'];
+
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
   basicAuth: string | undefined;
   withCredentials: boolean | undefined;
@@ -290,4 +301,54 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
       }
     );
   }
+
+  async metricFindQuery(query: MyVariableQuery, options?: any) {
+    const metricFindValues: MetricFindValue[] = [];
+
+    query = defaults(query, defaultQuery);
+
+    let payload = query.queryText;
+    payload = getTemplateSrv().replace(payload, { ...this.getVariables });
+
+    const response = await this.postQuery(query, payload);
+
+    const docs: any[] = DataSource.getDocs(response.results.data, query.dataPath);
+
+    for (const doc of docs) {
+      for (const fieldName in doc) {
+        metricFindValues.push({ text: doc[fieldName] });
+      }
+    }
+
+    return metricFindValues;
+  }
+
+  getVariables() {
+    const variables: { [id: string]: TextValuePair } = {};
+    Object.values(getTemplateSrv().getVariables()).forEach(variable => {
+      if (!supportedVariableTypes.includes(variable.type)) {
+        console.warn(`Variable of type "${variable.type}" is not supported`);
+
+        return;
+      }
+
+      const supportedVariable = variable as MultiValueVariable;
+
+      let variableValue = supportedVariable.current.value;
+      if (variableValue === '$__all' || isEqual(variableValue, ['$__all'])) {
+        if (supportedVariable.allValue === null || supportedVariable.allValue === '') {
+          variableValue = supportedVariable.options.slice(1).map(textValuePair => textValuePair.value);
+        } else {
+          variableValue = supportedVariable.allValue;
+        }
+      }
+
+      variables[supportedVariable.id] = {
+        text: supportedVariable.current.text,
+        value: variableValue,
+      };
+    });
+
+    return variables;
+  }
 }

dist/plugin.json

@@ -0,0 +1,47 @@
+import { QueryField } from '@grafana/ui';
+import React, { useState } from 'react';
+import { MyQuery } from './types';
+
+interface VariableQueryProps {
+  query: MyQuery;
+  onChange: (query: MyQuery, definition: string) => void;
+}
+
+export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
+  const [state, setState] = useState(query);
+
+  const saveQuery = () => {
+    onChange(state, `${state.queryText} (${state.dataPath})`);
+  };
+
+  const onChangeQuery = (value: string, override?: boolean) =>
+    setState({
+      ...state,
+      queryText: value,
+    });
+
+  const handleChange = (event: React.FormEvent<HTMLInputElement>) =>
+    setState({
+      ...state,
+      [event.currentTarget.name]: event.currentTarget.value,
+    });
+
+  return (
+    <>
+      <div className="gf-form">
+        <span className="gf-form-label width-10">Data Path</span>
+        <input
+          name="dataPath"
+          className="gf-form-input"
+          onBlur={saveQuery}
+          onChange={handleChange}
+          value={state.dataPath}
+        />
+      </div>
+      <div className="gf-form">
+        <span className="gf-form-label width-10">Query</span>
+        <QueryField query={state.queryText || ''} onBlur={saveQuery} onChange={onChangeQuery} portalOrigin="graphQL" />
+      </div>
+    </>
+  );
+};

src/DataSource.ts

@@ -4,8 +4,10 @@ import { ConfigEditor } from './ConfigEditor';
 import { QueryEditor } from './QueryEditor';
 import { MyQuery, MyDataSourceOptions } from './types';
 import { GraphQLAnnotationsQueryCtrl } from './GraphQLAnnotationsQueryCtrl';
+import { VariableQueryEditor } from './VariableQueryEditor';
 
 export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
   .setConfigEditor(ConfigEditor)
   .setAnnotationQueryCtrl(GraphQLAnnotationsQueryCtrl)
-  .setQueryEditor(QueryEditor);
+  .setQueryEditor(QueryEditor)
+  .setVariableQueryEditor(VariableQueryEditor);

src/VariableQueryEditor.tsx

@@ -1,4 +1,4 @@
-import { DataQuery, DataSourceJsonData } from '@grafana/data';
+import { DataQuery, DataSourceJsonData, VariableModel } from '@grafana/data';
 
 export interface MyQuery extends DataQuery {
   queryText: string;
@@ -33,3 +33,20 @@ export const defaultQuery: Partial<MyQuery> = {
 export interface MyDataSourceOptions extends DataSourceJsonData {
   apiKey?: string;
 }
+
+export interface MyVariableQuery extends DataQuery {
+  dataPath: string;
+  queryText: string;
+}
+
+export interface TextValuePair {
+  text: string;
+  value: any;
+}
+
+export interface MultiValueVariable extends VariableModel {
+  allValue: string | null;
+  id: string;
+  current: TextValuePair;
+  options: TextValuePair[];
+}