Merge pull request #38 from NeedleInAJayStack/feature/id-var-dis

Ref Variable Display Improvements

Author: NeedleInAJayStack

pkg/plugin/datasource.go

@@ -284,7 +284,7 @@ func (datasource *Datasource) CheckHealth(_ context.Context, req *backend.CheckH
 	if err != nil {
 		return &backend.CheckHealthResult{
 			Status:  backend.HealthStatusError,
-			Message: "Uh oh, something's wrong with the connection",
+			Message: err.Error(),
 		}, err
 	}
 

src/README.md

@@ -66,12 +66,12 @@ To use them, simply enter the value in the input string. Below is an example of
 ### Query Variables
 
 You can use the Haystack connector to source new variables. Create a query and then enter the name of the column that
-contains the variable values. If no column is specified, the first one is used.
+contains the variable values. If no column is specified, `id` is used if present. Otherwise, the first column 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).
+The value injected by the variable exactly matches the displayed value, with the exception of Ref types. Instead, Ref
+types display the "display" portion and inject only the "ID" portion (i.e. `@abc "Site A"` will be displayed as `Site A`
+and provide `@abc` when injected). 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).
 
 ### Alerting
 

src/components/VariableQueryEditor.tsx

@@ -1,85 +1,80 @@
 import React, { useState } from 'react';
-import { HaystackQuery, HaystackVariableQuery } from '../types';
+import { HaystackVariableQuery } from '../types';
 import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
 import { HaystackQueryInput } from './HaystackQueryInput';
+import { InlineField, Input } from '@grafana/ui';
 
 interface VariableQueryProps {
   query: HaystackVariableQuery;
   onChange: (query: HaystackVariableQuery, definition: string) => void;
 }
 
-const blankQuery: Partial<HaystackQuery> = {
-  refId: "variable",
-  type: '',
-  eval: '',
-  hisRead: '',
-  read: '',
-};
+const refId = "variable";
 
 export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query: variableQuery }) => {
-  const [state, setState] = useState(variableQuery);
+  const [query, setState] = useState(variableQuery);
 
   const saveQuery = () => {
-    let query =  state.query ?? blankQuery
+    // refId must match but doesn't get set originally so set should set it on every change
+    setState({ ...query, refId: refId});
+
     let type = query.type;
     let queryCmd = "";
-    if (query.type === "hisRead") {
-      queryCmd = query.hisRead
-    } else if (query.type === "eval") {
+    if (query.type === "eval") {
       queryCmd = query.eval
+    } else if (query.type === "hisRead") {
+      queryCmd = query.hisRead
+    } else if (query.type === "hisReadFilter") {
+      queryCmd = query.hisReadFilter
     } else if (query.type === "read") {
       queryCmd = query.read
     }
     let column = "none";
-    if (state.column !== undefined && state.column !== '') {
-      column = `'${state.column}'`;
+    if (query.column !== undefined && query.column !== '') {
+      column = `'${query.column}'`;
     }
-    onChange(state, `Type: '${type}' Query: '${queryCmd}' Column: ${column}`);
+    let displayString = `${type}: '${queryCmd}', Column: ${column}`
+    onChange(query, displayString);
   };
 
   const onTypeChange = (newType: string) => {
-    let query = {...state.query ?? blankQuery};
-    query.type = newType;
-    setState({ ...state, query: query});
+    setState({ ...query, type: newType});
   };
 
   const onQueryChange = (newQuery: string) => {
-    let query = {...state.query ?? blankQuery};
-    if (state.query.type === "hisRead") {
-      query.hisRead = newQuery
-    } else if (state.query.type === "eval") {
-      query.eval = newQuery
-    } else if (state.query.type === "read") {
-      query.read = newQuery
+    if (query.type === "eval") {
+      setState({ ...query, eval: newQuery });
+    } else if (query.type === "hisRead") {
+      setState({ ...query, hisRead: newQuery });
+    } else if (query.type === "hisReadFilter") {
+      setState({ ...query, hisReadFilter: newQuery });
+    } else if (query.type === "read") {
+      setState({ ...query, read: newQuery });
     }
-    setState({ ...state, query: query});
   };
 
   const onColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
-    setState({...state, column: event.currentTarget.value,});
+    setState({...query, column: event.currentTarget.value,});
   };
 
   return (
     <div onBlur={saveQuery}>
       <HaystackQueryTypeSelector
         datasource={null}
-        type={state.query?.type ?? blankQuery.type}
-        refId={state.query?.refId ?? blankQuery.refId}
+        type={query.type}
+        refId={query.refId ?? refId}
         onChange={onTypeChange}
       />
       <HaystackQueryInput
-        query={state.query ?? blankQuery}
+        query={query}
         onChange={onQueryChange}
       />
-      <div className="gf-form">
-        <span className="gf-form-label width-10">Column</span>
-        <input
-          name="column"
-          className="gf-form-input"
+      <InlineField label="Column">
+        <Input
           onChange={onColumnChange}
-          value={state.column}
+          value={query.column}
         />
-      </div>
+      </InlineField>
     </div>
   );
 };

src/datasource.ts

@@ -1,23 +1,16 @@
 import {
   DataSourceInstanceSettings,
-  CoreApp,
   ScopedVars,
   DataQueryRequest,
   DataFrame,
   Field,
   MetricFindValue,
   getDefaultTimeRange,
+  FieldType,
 } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
 
-import {
-  HaystackQuery,
-  OpsQuery,
-  HaystackDataSourceOptions,
-  DEFAULT_QUERY,
-  HaystackVariableQuery,
-  QueryType,
-} from './types';
+import { HaystackQuery, OpsQuery, HaystackDataSourceOptions, HaystackVariableQuery, QueryType } from './types';
 import { firstValueFrom } from 'rxjs';
 
 export const queryTypes: QueryType[] = [
@@ -97,7 +90,7 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
 
   // This is called when the user is selecting a variable value
   async metricFindQuery(variableQuery: HaystackVariableQuery, options?: any) {
-    let request: HaystackQuery = variableQuery.query;
+    let request: HaystackQuery = variableQuery;
     let observable = this.query({ targets: [request] } as DataQueryRequest<HaystackQuery>);
     let response = await firstValueFrom(observable);
 
@@ -106,31 +99,37 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
     }
 
     return response.data.reduce((acc: MetricFindValue[], frame: DataFrame) => {
+      // Default to the first field
       let field = frame.fields[0];
       if (variableQuery.column !== undefined && variableQuery.column !== '') {
         // If a column was input, match the column name
         field = frame.fields.find((field: Field) => field.name === variableQuery.column) ?? field;
+      } else if (frame.fields.some((field: Field) => field.name === 'id')) {
+        // If there is an id column, use that
+        field = frame.fields.find((field: Field) => field.name === 'id') ?? field;
       }
 
       let fieldVals = field.values.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 };
+        switch (field.type) {
+          case FieldType.string:
+            if (value.startsWith('@')) {
+              // Detect ref using @ prefix, and adjust value to just the Ref
+              let spaceIndex = value.indexOf(' ');
+              let id = value.substring(0, spaceIndex);
+              let dis = value.substring(spaceIndex + 2, value.length - 1);
+              return { text: dis, value: id };
+            } else {
+              // Otherwise, just use the value directly
+              return { text: value, value: value };
+            }
+          default:
+            return { text: value, value: value };
         }
       });
       return acc.concat(fieldVals);
     }, []);
   }
 
-  getDefaultQuery(_: CoreApp): Partial<HaystackQuery> {
-    return DEFAULT_QUERY;
-  }
-
   // Returns a DataQueryRequest that gets the available ops from the datasource
   // This applies a bunch of defaults because it's not a time series query
   private opsRequest(refId: string): DataQueryRequest<HaystackQuery> {

src/types.ts

@@ -28,9 +28,9 @@ export interface QueryType extends SelectableValue<string> {
   apiRequirements: string[];
 }
 
-export interface HaystackVariableQuery {
-  query: HaystackQuery;
+export interface HaystackVariableQuery extends HaystackQuery {
   column: string;
+  refId: string;
 }
 
 export const DEFAULT_QUERY: Partial<HaystackQuery> = {