Merge pull request #4 from NeedleInAJayStack/feature/variable-support

Feature: Adds variable 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)

pkg/plugin/datasource.go

@@ -306,6 +306,9 @@ func dataFrameFromGrid(grid haystack.Grid) (*data.Frame, error) {
 				case haystack.Str:
 					value := val.String()
 					values = append(values, &value)
+				case haystack.Marker:
+					value := "✓"
+					values = append(values, &value)
 				default:
 					value := val.ToZinc()
 					values = append(values, &value)

pkg/plugin/datasource_test.go

@@ -100,7 +100,7 @@ func TestQueryData_Read(t *testing.T) {
 
 	idVal := "@abcdefg-12345678 \"AHU-1\""
 	disVal := "AHU-1"
-	ahuVal := "M"
+	ahuVal := "✓"
 	expected := data.NewFrame("",
 		data.NewField("id", nil, []*string{&idVal}).SetConfig(&data.FieldConfig{DisplayName: "id"}),
 		data.NewField("dis", nil, []*string{&disVal}).SetConfig(&data.FieldConfig{DisplayName: "dis"}),

src/README.md

@@ -24,24 +24,36 @@ one by selecting `+ New Dashboard` from the Dashboard menu in the left panel.
 Once within the panel editor, select your Haystack data source in the Data Sources menu. Next, select the type of
 Haystack query that should be performed. The supported queries are:
 
-- Eval: Evaluate a free-form Axon expression. Grafana variables may be injected into the query, with the supported
-variables listed below. *Note: Not all Haystack servers support this functionality*
+- Eval: Evaluate a free-form Axon expression. *Note: Not all Haystack servers support this functionality*
 - HisRead: Display the history of a single point over the selected time range.
 - 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
 
-Some queries support injecting values from the Grafana UI. The following variables are supported:
+Grafana template variables can be injected into queries using the ordinary syntax, e.g. `$varName`.
+
+We also support injecting a few special variables from the time-range selector into the Eval and Read requests:
 
 - `$__timeRange_start`: DateTime start of the selected Grafana time range
 - `$__timeRange_end`: DateTime end of the selected Grafana time range
 - `$__maxDataPoints`: Number representing the pixel width of Grafana's display panel.
 - `$__interval`: Number representing Grafana's recommended data interval. This is the duration of the time range, 
 divided by the number of pixels, delivered in units of minutes.
 
-To use them, simply use the value in the input string. Below is an example of using the variables in an Eval query:
+To use them, simply enter the value in the input string. Below is an example of using the variables in an Eval query:
 
 ```
 > [{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,13 +1,60 @@
-import { DataSourceInstanceSettings, CoreApp } from '@grafana/data';
-import { DataSourceWithBackend } from '@grafana/runtime';
+import { DataSourceInstanceSettings, CoreApp, ScopedVars, DataQueryRequest, DataFrame, Field, MetricFindValue } from '@grafana/data';
+import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
 
-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>) {
     super(instanceSettings);
   }
 
+  applyTemplateVariables(query: HaystackQuery, scopedVars: ScopedVars): Record<string, any> {
+    return {
+      ...query,
+      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",