Merge pull request #10 from NeedleInAJayStack/feature/noneval-variable-support

NeedleInAJayStack · web-flow · commit 9f748ed1c842 · 2023-04-12T00:21:29.000-06:00
Feature/noneval variable support
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "haystack-datasource",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A Grafana data source for Haystack tagged data",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
diff --git a/src/README.md b/src/README.md
@@ -49,9 +49,8 @@ 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 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.
+You can use the Haystack connector to source variables. Create a query and then enter the column that contains the
+variable values. 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
diff --git a/src/components/HaystackQueryInput.tsx b/src/components/HaystackQueryInput.tsx
@@ -0,0 +1,55 @@
+import { Icon, InlineField, Input } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+import { DEFAULT_QUERY, HaystackQuery } from 'types';
+
+export interface HaystackQueryInputProps {
+  query: HaystackQuery;
+  onChange: (query: string) => void;
+}
+
+export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps) {
+  const onQueryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  let width = 100;
+  switch (query.type) {
+    case "eval":
+      return (
+        <InlineField>
+          <Input
+            width={width}
+            prefix={<Icon name="angle-right" />}
+            onChange={onQueryChange}
+            value={query.eval}
+            placeholder={DEFAULT_QUERY.eval}
+          />
+        </InlineField>
+      );
+    case "hisRead":
+      return (
+        <InlineField>
+          <Input
+            width={width}
+            prefix={'@'}
+            onChange={onQueryChange}
+            value={query.hisRead}
+            placeholder={DEFAULT_QUERY.hisRead}
+          />
+        </InlineField>
+      );
+    case "read":
+      return (
+        <InlineField>
+          <Input
+            width={width}
+            prefix={<Icon name="filter" />}
+            onChange={onQueryChange}
+            value={query.read}
+            placeholder={DEFAULT_QUERY.read}
+          />
+        </InlineField>
+      );
+  }
+  return <p>Select a query type</p>;
+}
diff --git a/src/components/HaystackQueryTypeSelector.tsx b/src/components/HaystackQueryTypeSelector.tsx
@@ -0,0 +1,37 @@
+import { AsyncSelect, InlineField } from '@grafana/ui';
+import React, { } from 'react';
+import { QueryType } from 'types';
+import { DataSource, queryTypes } from '../datasource';
+
+export interface HaystackQueryTypeSelectorProps {
+  datasource: DataSource | null;
+  type: string;
+  refId: string;
+  onChange: (type: string) => void;
+}
+
+export function HaystackQueryTypeSelector({ datasource, type, refId, onChange }: HaystackQueryTypeSelectorProps) {
+  const onTypeChange = (event: QueryType | null) => {
+    onChange(event?.value ?? queryTypeDefault.value!);
+  };
+
+  const queryTypeDefault = queryTypes[0];
+  function queryTypeFromValue(value: string): QueryType | null {
+    return queryTypes.find((queryType) => queryType.value === value) ?? null;
+  }
+  
+  return (
+    <InlineField label="Type">
+      <AsyncSelect
+        loadOptions={() => {return datasource?.loadOps(refId) ?? new Promise<QueryType[]>((resolve) => { resolve(queryTypes);})}}
+        defaultOptions
+        value={queryTypeFromValue(type)}
+        width={30}
+        onChange={(queryType) => {
+          // QueryType comes back as a SelectableValue, so we just convert it to the QueryType
+          onTypeChange(queryTypeFromValue(queryType.value ?? ""));
+        }}
+      />
+    </InlineField>
+  );
+}
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
@@ -1,141 +1,26 @@
-import React, { ChangeEvent, ReactNode } from 'react';
-import { AsyncSelect, Button, Form, Icon, InlineField, Input, VerticalGroup } from '@grafana/ui';
-import { DataFrame, DataQueryRequest, Field, getDefaultTimeRange, QueryEditorProps, SelectableValue, Vector } from '@grafana/data';
+import React, {  } from 'react';
+import { Button, Form, VerticalGroup } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../datasource';
-import { DEFAULT_QUERY, HaystackDataSourceOptions, HaystackQuery } from '../types';
+import { HaystackDataSourceOptions, HaystackQuery } from '../types';
+import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
+import { HaystackQueryInput } from './HaystackQueryInput';
 
 type Props = QueryEditorProps<DataSource, HaystackQuery, HaystackDataSourceOptions>;
 
-export function QueryEditor({ datasource, query, onChange, onRunQuery, range, app }: Props) {
-  const onTypeChange = (event: SelectableValue<string>) => {
-    onChange({ ...query, type: event.value ?? queryTypeDefault.value! });
+export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) {
+  const onTypeChange = (newType: string) => {
+    onChange({ ...query, type: newType });
   };
-  const onEvalChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, type: 'eval', eval: event.target.value });
-  };
-  const onHisReadChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, type: 'hisRead', hisRead: event.target.value });
-  };
-  const onReadChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, type: 'read', read: event.target.value });
-  };
-
-  interface QueryType extends SelectableValue<string> {
-    apiRequirements: string[];
-  } 
-
-  const queryTypes: QueryType[] = [
-    { label: 'Read', value: "read", apiRequirements: ["read"], description: 'Read the records matched by a filter' },
-    { label: 'HisRead', value: "hisRead", apiRequirements: ["hisRead"], description: 'Read the history of a point' },
-    { label: 'Eval', value: "eval", apiRequirements: ["eval"], description: 'Evaluate an Axon expression' },
-  ];
-  const queryTypeDefault = queryTypes[0];
-  function queryTypeFromLabel(label: string) {
-    return queryTypes.find((queryType) => queryType.value === label);
-  }
-
-  const SelectComponent = () => {
-    return (
-      <InlineField label="Type">
-        <AsyncSelect
-          loadOptions={loadOps}
-          defaultOptions
-          value={queryTypeFromLabel(query.type)}
-          width={30}
-          onChange={(queryType) => {
-            onTypeChange(queryType);
-          }}
-        />
-      </InlineField>
-    );
-  };
-
-  // Queries the available ops from the datasource on only returns the ones that are supported.
-  const loadOps = () => {
-    let opsRequest: DataQueryRequest<HaystackQuery> = {
-      requestId: 'ops',
-      dashboardId: 0,
-      interval: '0',
-      intervalMs: 0,
-      panelId: 0,
-      range: range ?? getDefaultTimeRange(),
-      scopedVars: {},
-      targets: [{ type: 'ops' , eval: "", read: "", hisRead: "", refId: query.refId}],
-      timezone: 'UTC',
-      app: 'ops',
-      startTime: 0,
+  const onQueryChange = (newQuery: string) => {
+    if (query.type === "hisRead") {
+      onChange({ ...query, hisRead: newQuery });
+    } else if (query.type === "eval") {
+      onChange({ ...query, eval: newQuery });
+    } else if (query.type === "read") {
+      onChange({ ...query, read: newQuery });
     }
-    return datasource.query(opsRequest).toPromise().then((result) => {
-      if(result?.state === 'Error') {
-        return [];
-      }
-      let frame = result?.data?.find((frame: DataFrame) => {
-        return frame.refId === query.refId
-      })
-      let opSymbols = frame?.fields?.find((field: Field<any, Vector<string>>) => {
-        return field.name === 'def'
-      }).values ?? [];
-      let ops: string[] = opSymbols.map((opSymbol: string) => {
-        if (opSymbol.startsWith('^op:')) {
-          return opSymbol.substring(4);
-        } else {
-          return opSymbol;
-        }
-      });
-
-      return queryTypes.filter((queryType) => {
-        return queryType.apiRequirements.every((apiRequirement) => {
-          return ops.find((op) => {
-            return op === apiRequirement
-          }) !== undefined;
-        });
-      });
-    });
-  }
-
-  function renderQuery(): ReactNode {
-    let width = 100;
-    let queryType = queryTypeFromLabel(query.type);
-    switch (queryType?.value) {
-      case "eval":
-        return (
-          <InlineField>
-            <Input
-              width={width}
-              prefix={<Icon name="angle-right" />}
-              onChange={onEvalChange}
-              value={query.eval}
-              placeholder={DEFAULT_QUERY.eval}
-            />
-          </InlineField>
-        );
-      case "hisRead":
-        return (
-          <InlineField>
-            <Input
-              width={width}
-              prefix={'@'}
-              onChange={onHisReadChange}
-              value={query.hisRead}
-              placeholder={DEFAULT_QUERY.hisRead}
-            />
-          </InlineField>
-        );
-      case "read":
-        return (
-          <InlineField>
-            <Input
-              width={width}
-              prefix={<Icon name="filter" />}
-              onChange={onReadChange}
-              value={query.read}
-              placeholder={DEFAULT_QUERY.read}
-            />
-          </InlineField>
-        );
-    }
-    return <p>Select a query type</p>;
-  }
+  };
 
   function onSubmit(newQuery: Partial<HaystackQuery>) {
     query = { ...query, ...newQuery };
@@ -149,8 +34,16 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery, range, ap
         {({ register, errors }) => {
           return (
             <VerticalGroup>
-              <SelectComponent />
-              {renderQuery()}
+              <HaystackQueryTypeSelector
+                datasource={datasource}
+                type={query.type}
+                refId={query.refId}
+                onChange={onTypeChange}
+              />
+              <HaystackQueryInput
+                query={query}
+                onChange={onQueryChange}
+              />
               <Button type="submit" >Run</Button>
             </VerticalGroup>
           );
diff --git a/src/components/VariableQueryEditor.tsx b/src/components/VariableQueryEditor.tsx
@@ -1,40 +1,85 @@
 import React, { useState } from 'react';
-import { HaystackVariableQuery } from '../types';
+import { HaystackQuery, HaystackVariableQuery } from '../types';
+import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
+import { HaystackQueryInput } from './HaystackQueryInput';
 
 interface VariableQueryProps {
   query: HaystackVariableQuery;
   onChange: (query: HaystackVariableQuery, definition: string) => void;
 }
 
-export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
-  const [state, setState] = useState(query);
+const blankQuery: Partial<HaystackQuery> = {
+  refId: "variable",
+  type: '',
+  eval: '',
+  hisRead: '',
+  read: '',
+};
+
+export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query: variableQuery }) => {
+  const [state, setState] = useState(variableQuery);
 
   const saveQuery = () => {
-    onChange(state, `Eval: ${state.eval} Column: ${state.column}`);
+    let query =  state.query ?? blankQuery
+    let type = query.type;
+    let queryCmd = "";
+    if (query.type === "hisRead") {
+      queryCmd = query.hisRead
+    } else if (query.type === "eval") {
+      queryCmd = query.eval
+    } else if (query.type === "read") {
+      queryCmd = query.read
+    }
+    let column = "none";
+    if (state.column !== undefined && state.column !== '') {
+      column = `'${state.column}'`;
+    }
+    onChange(state, `Type: '${type}' Query: '${queryCmd}' Column: ${column}`);
   };
 
-  const handleChange = (event: React.FormEvent<HTMLInputElement>) =>
-    setState({
-      ...state,
-      [event.currentTarget.name]: event.currentTarget.value,
-    });
+  const onTypeChange = (newType: string) => {
+    let query = {...state.query ?? blankQuery};
+    query.type = newType;
+    setState({ ...state, query: query});
+  };
+
+  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
+    }
+    setState({ ...state, query: query});
+  };
+
+  const onColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setState({...state, column: 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 onBlur={saveQuery}>
+      <HaystackQueryTypeSelector
+        datasource={null}
+        type={state.query?.type ?? blankQuery.type}
+        refId={state.query?.refId ?? blankQuery.refId}
+        onChange={onTypeChange}
+      />
+      <HaystackQueryInput
+        query={state.query ?? blankQuery}
+        onChange={onQueryChange}
+      />
       <div className="gf-form">
         <span className="gf-form-label width-10">Column</span>
         <input
           name="column"
           className="gf-form-input"
-          onBlur={saveQuery}
-          onChange={handleChange}
+          onChange={onColumnChange}
           value={state.column}
         />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/datasource.ts b/src/datasource.ts
diff --git a/src/types.ts b/src/types.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "haystack-datasource",`
`3`		`- "version": "0.0.1",`
	`3`	`+ "version": "0.0.3",`
`4`	`4`	`"description": "A Grafana data source for Haystack tagged data",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",`