feature: Variable query support

Author: NeedleInAJayStack

README.md

@@ -24,7 +24,6 @@ Contributions are very welcome! For details on how to develop this plugin, see t
 
 ## Continuing Work
 
-* [ ] Check variable support
 * [ ] Add alert support
 * [ ] Publish plugin
 * [ ] Consider enabling multi-point hisRead (through filters)

src/README.md

@@ -29,7 +29,7 @@ Haystack query that should be performed. The supported queries are:
 - Read: Display the records matching a filter. Since this is not timeseries data, it can only be viewed in Grafana's
 "Table" view.
 
-#### Variables
+#### Variable Usage
 
 Grafana template variables can be injected into queries using the ordinary syntax, e.g. `$varName`.
 
@@ -46,3 +46,14 @@ To use them, simply enter the value in the input string. Below is an example of
 ```
 > [{ts: $__timeRange_start, v0: 0}, {ts: $__timeRange_end, v0: 10}].toGrid
 ```
+
+### Query Variables
+
+You can use the Haystack connector to source variables. Currently, only "Eval"-style variable queries are supported,
+where an Axon string is used to retrieve a grid and the column that contains the variable values is specified. If no
+column is specified, the first one is used.
+
+The value injected by the variable exactly matches the displayed value, with the exception of Ref types, where the
+injected value is only the ID portion (i.e. the dis name is not included in the interpolation). Multiple-select values
+are combined with commas, (`red,blue`), but this may be customized using the
+[advanced variable format options](https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/#advanced-variable-format-options).

src/components/VariableQueryEditor.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { HaystackVariableQuery } from '../types';
+
+interface VariableQueryProps {
+  query: HaystackVariableQuery;
+  onChange: (query: HaystackVariableQuery, definition: string) => void;
+}
+
+export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
+  const [state, setState] = useState(query);
+
+  const saveQuery = () => {
+    onChange(state, `Eval: ${state.eval} Column: ${state.column}`);
+  };
+
+  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">Eval</span>
+        <input
+          name="eval"
+          className="gf-form-input"
+          onBlur={saveQuery}
+          onChange={handleChange}
+          value={state.eval}
+        />
+      </div>
+      <div className="gf-form">
+        <span className="gf-form-label width-10">Column</span>
+        <input
+          name="column"
+          className="gf-form-input"
+          onBlur={saveQuery}
+          onChange={handleChange}
+          value={state.column}
+        />
+      </div>
+    </>
+  );
+};

src/datasource.ts

@@ -1,8 +1,7 @@
-import { DataSourceInstanceSettings, CoreApp, ScopedVars, DataQueryRequest, DataQueryResponse } from '@grafana/data';
+import { DataSourceInstanceSettings, CoreApp, ScopedVars, DataQueryRequest, DataFrame, Field, MetricFindValue } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
-import { Observable } from 'rxjs';
 
-import { HaystackQuery, HaystackDataSourceOptions, DEFAULT_QUERY } from './types';
+import { HaystackQuery, HaystackDataSourceOptions, DEFAULT_QUERY, HaystackVariableQuery } from './types';
 
 export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDataSourceOptions> {
   constructor(instanceSettings: DataSourceInstanceSettings<HaystackDataSourceOptions>) {
@@ -12,12 +11,50 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
   applyTemplateVariables(query: HaystackQuery, scopedVars: ScopedVars): Record<string, any> {
     return {
       ...query,
-      eval: getTemplateSrv().replace(query.eval, scopedVars),
-      hisRead: getTemplateSrv().replace(query.hisRead, scopedVars),
-      read: getTemplateSrv().replace(query.read, scopedVars),
+      eval: getTemplateSrv().replace(query.eval, scopedVars, "csv"),
+      hisRead: getTemplateSrv().replace(query.hisRead, scopedVars, "csv"),
+      read: getTemplateSrv().replace(query.read, scopedVars, "csv"),
     };
   }
 
+  // This is called when the user is selecting a variable value
+  async metricFindQuery(query: HaystackVariableQuery, options?: any) {
+    let request: HaystackQuery = {
+      refId: "VariableQuery",
+      type: "Eval",
+      eval: query.eval,
+      hisRead: "",
+      read: ""
+    };
+    let response = await this.query({ targets: [request] } as DataQueryRequest<HaystackQuery>).toPromise()
+
+    if (response === undefined || response.data === undefined) {
+      return [];
+    }
+
+    return response.data.reduce((acc: MetricFindValue[], frame: DataFrame) => {
+      let field = frame.fields[0];
+      if (query.column !== undefined && query.column !== "") {
+        // If a column was input, match the column name
+        field = frame.fields.find((field: Field) => field.name === query.column) ?? field;
+      }
+
+      let fieldVals = field.values.toArray().map((value) => {
+        if (value.startsWith("@")) {
+          // Detect ref using @ prefix, and adjust value to just the Ref
+          let spaceIndex = value.indexOf(" ");
+          let id = value.substring(0, spaceIndex);
+          return {text: value, value: id};
+        } else {
+          // Otherwise, just use the value directly
+          return {text: value, value: value};
+        }
+      });
+      return acc.concat(fieldVals);
+    }, []);
+  }
+  
+
   getDefaultQuery(_: CoreApp): Partial<HaystackQuery> {
     return DEFAULT_QUERY
   }

src/module.ts

@@ -2,8 +2,10 @@ import { DataSourcePlugin } from '@grafana/data';
 import { DataSource } from './datasource';
 import { ConfigEditor } from './components/ConfigEditor';
 import { QueryEditor } from './components/QueryEditor';
+import { VariableQueryEditor } from './components/VariableQueryEditor';
 import { HaystackQuery, HaystackDataSourceOptions } from './types';
 
 export const plugin = new DataSourcePlugin<DataSource, HaystackQuery, HaystackDataSourceOptions>(DataSource)
   .setConfigEditor(ConfigEditor)
-  .setQueryEditor(QueryEditor);
+  .setQueryEditor(QueryEditor)
+  .setVariableQueryEditor(VariableQueryEditor);

src/types.ts

@@ -7,6 +7,11 @@ export interface HaystackQuery extends DataQuery {
   read: string;
 }
 
+export interface HaystackVariableQuery {
+  column: string;
+  eval: string;
+}
+
 export const DEFAULT_QUERY: Partial<HaystackQuery> = {
   type: "Eval",
   eval: "[{ts: $__timeRange_start, v0: 0}, {ts: $__timeRange_end, v0: 10}].toGrid",