Merge pull request #41 from NeedleInAJayStack/feature/variable-display-column

Adds variable display column selection

Author: NeedleInAJayStack

src/components/VariableQueryEditor.tsx

@@ -12,6 +12,7 @@ interface VariableQueryProps {
 const refId = "variable";
 
 export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query: variableQuery }) => {
+  let variableInputWidth = 30;
   const [query, setState] = useState(variableQuery);
 
   const saveQuery = () => {
@@ -33,7 +34,11 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
     if (query.column !== undefined && query.column !== '') {
       column = `'${query.column}'`;
     }
-    let displayString = `${type}: '${queryCmd}', Column: ${column}`
+    let displayColumn = "none";
+    if (query.displayColumn !== undefined && query.displayColumn !== '') {
+      displayColumn = `'${query.displayColumn}'`;
+    }
+    let displayString = `${type}: '${queryCmd}', Column: ${column}, Display: ${displayColumn}`
     onChange(query, displayString);
   };
 
@@ -57,6 +62,10 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
     setState({...query, column: event.currentTarget.value,});
   };
 
+  const onDisplayColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setState({...query, displayColumn: event.currentTarget.value,});
+  };
+
   return (
     <div onBlur={saveQuery}>
       <HaystackQueryTypeSelector
@@ -71,8 +80,18 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
       />
       <InlineField label="Column">
         <Input
+          width={variableInputWidth}
           onChange={onColumnChange}
           value={query.column}
+          placeholder="Defaults to 'id' or first column"
+        />
+      </InlineField>
+      <InlineField label="Display Column">
+        <Input
+          width={variableInputWidth}
+          onChange={onDisplayColumnChange}
+          value={query.displayColumn}
+          placeholder="Defaults to 'Column'"
         />
       </InlineField>
     </div>

src/datasource.ts

@@ -12,6 +12,7 @@ import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
 
 import { HaystackQuery, OpsQuery, HaystackDataSourceOptions, HaystackVariableQuery, QueryType } from './types';
 import { firstValueFrom } from 'rxjs';
+import { isRef, parseRef } from 'haystack';
 
 export const queryTypes: QueryType[] = [
   { label: 'Eval', value: 'eval', apiRequirements: ['eval'], description: 'Evaluate an Axon expression' },
@@ -100,39 +101,33 @@ 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];
+      let column = 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;
+        column = frame.fields.find((field: Field) => field.name === variableQuery.column) ?? column;
       } 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;
+        column = frame.fields.find((field: Field) => field.name === 'id') ?? column;
       }
 
-      let fieldVals = field.values.map((value) => {
-        switch (field.type) {
-          case FieldType.string:
-            if (value.startsWith('@')) {
-              // Detect ref using @ prefix, and adjust value to just the Ref
-              const spaceIndex = value.indexOf(' ');
-              if (spaceIndex > -1) {
-                // Display name exists
-                const id = value.substring(0, spaceIndex);
-                const dis = value.substring(spaceIndex + 2, value.length - 1);
-                return { text: dis, value: id };
-              } else {
-                // Otherwise, just use id
-                return { text: value, value: value };
-              }
-            } else {
-              // Otherwise, just use the value directly
-              return { text: value, value: value };
-            }
-          default:
-            return { text: value, value: value };
-        }
+      // Default to the selected column
+      let displayColumn = column;
+      if (variableQuery.displayColumn !== undefined && variableQuery.displayColumn !== '') {
+        // If a column was input, match the column name
+        displayColumn =
+          frame.fields.find((field: Field) => field.name === variableQuery.displayColumn) ?? displayColumn;
+      }
+
+      let variableValues = column.values.map((value, index) => {
+        let variableValue = variableValueFromCell(value, column.type);
+
+        let displayValue = displayColumn.values[index];
+        let variableText = variableTextFromCell(displayValue, displayColumn.type);
+
+        return { text: variableText, value: variableValue };
       });
-      return acc.concat(fieldVals);
+
+      return acc.concat(variableValues);
     }, []);
   }
 
@@ -154,3 +149,24 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
     };
   }
 }
+
+function variableValueFromCell(value: string, columnType: FieldType): string {
+  switch (columnType) {
+    case FieldType.string:
+      if (isRef(value)) {
+        return parseRef(value).id;
+      }
+  }
+  return value;
+}
+
+function variableTextFromCell(value: string, columnType: FieldType): string {
+  switch (columnType) {
+    case FieldType.string:
+      if (isRef(value)) {
+        let ref = parseRef(value);
+        return ref.dis ?? ref.id;
+      }
+  }
+  return value;
+}

src/haystack.test.ts

@@ -0,0 +1,18 @@
+import { isRef, parseRef } from 'haystack';
+
+// Just a stub test
+describe('haystack test', () => {
+  it('isRef', () => {
+    expect(isRef('@abc')).toBe(true);
+    expect(isRef('@abc 123')).toBe(true);
+    expect(isRef('@abc 123 abc')).toBe(true);
+    expect(isRef('abc 123')).toBe(false);
+    expect(isRef('abc @123')).toBe(false);
+  });
+
+  it('parseRef', () => {
+    expect(parseRef('@abc')).toStrictEqual({ id: '@abc', dis: null });
+    expect(parseRef('@abc "123"')).toStrictEqual({ id: '@abc', dis: '123' });
+    expect(parseRef('@abc "123 abc"')).toStrictEqual({ id: '@abc', dis: '123 abc' });
+  });
+});

src/haystack.ts

@@ -0,0 +1,19 @@
+// Detect refs using @ prefix
+export function isRef(value: string): boolean {
+  return value.startsWith('@');
+}
+
+// Converts a string into ref components by detecting the first space. Assumes format `@id "dis"`
+export function parseRef(value: string): { id: string; dis: string | null } {
+  let id = value;
+  let dis: string | null = null;
+  const spaceIndex = value.indexOf(' ');
+
+  if (spaceIndex > -1) {
+    // Display name exists
+    id = value.substring(0, spaceIndex);
+    // Cut off leading and trailing quotes
+    dis = value.substring(spaceIndex + 2, value.length - 1);
+  }
+  return { id: id, dis: dis };
+}

src/module.test.ts

@@ -30,6 +30,7 @@ export interface QueryType extends SelectableValue<string> {
 
 export interface HaystackVariableQuery extends HaystackQuery {
   column: string;
+  displayColumn: string;
   refId: string;
 }