Fixes Grafana for v11.0.0 to v11.5.0

src/components/HaystackQueryInput.tsx

@@ -20,7 +20,7 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
           <AutoSizeInput
             minWidth={minWidth}
             prefix={<Icon name="angle-right" />}
-            onChange={onQueryChange}
+            onBlur={onQueryChange}
             value={query.eval}
             placeholder={DEFAULT_QUERY.eval}
           />
@@ -32,7 +32,7 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
           <AutoSizeInput
             minWidth={minWidth}
             prefix={'@'}
-            onChange={onQueryChange}
+            onBlur={onQueryChange}
             value={query.hisRead}
             placeholder={DEFAULT_QUERY.hisRead}
           />
@@ -44,7 +44,7 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
           <AutoSizeInput
             minWidth={minWidth}
             prefix={<Icon name="filter" />}
-            onChange={onQueryChange}
+            onBlur={onQueryChange}
             value={query.hisReadFilter}
             placeholder={DEFAULT_QUERY.hisReadFilter}
           />
@@ -56,7 +56,7 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
           <AutoSizeInput
             minWidth={minWidth}
             prefix={<Icon name="filter" />}
-            onChange={onQueryChange}
+            onBlur={onQueryChange}
             value={query.read}
             placeholder={DEFAULT_QUERY.read}
           />

src/components/HaystackQueryTypeSelector.tsx

@@ -5,7 +5,7 @@ import { DataSource, queryTypes } from '../datasource';
 
 export interface HaystackQueryTypeSelectorProps {
   datasource: DataSource | null;
-  type: string;
+  type?: string;
   refId: string;
   onChange: (type: string) => void;
 }
@@ -16,7 +16,7 @@ export function HaystackQueryTypeSelector({ datasource, type, refId, onChange }:
   };
 
   const queryTypeDefault = queryTypes[0];
-  function queryTypeFromValue(value: string): QueryType | null {
+  function queryTypeFromValue(value?: string): QueryType | null {
     return queryTypes.find((queryType) => queryType.value === value) ?? null;
   }
 

src/components/VariableQueryEditor.tsx

@@ -1,34 +1,28 @@
-import React, { useState } from 'react';
-import { HaystackVariableQuery } from '../types';
+import React from 'react';
+import { HaystackDataSourceOptions, HaystackQuery, HaystackVariableQuery } from '../types';
 import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
 import { HaystackQueryInput } from './HaystackQueryInput';
-import { InlineField, Input } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data';
+import { InlineField, Input, Stack } from '@grafana/ui';
+import { DataSource } from 'datasource';
 
-interface VariableQueryProps {
-  query: HaystackVariableQuery;
-  onChange: (query: HaystackVariableQuery, definition: string) => void;
-}
+type Props = QueryEditorProps<DataSource, HaystackQuery, HaystackDataSourceOptions, HaystackVariableQuery>;
 
-export const VARIABLE_REF_ID = "variable";
-
-export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query: variableQuery }) => {
+export const VariableQueryEditor = ({ onChange, query }: Props) => {
   let variableInputWidth = 30;
-  const [query, setState] = useState(variableQuery);
-
-  const saveQuery = () => {
-    // refId must match but doesn't get set originally so set should set it on every change
-    setState({ ...query, refId: VARIABLE_REF_ID});
 
+  // Computes the query string and calls the onChange function. Should be used instead of onChange for all mutating functions.
+  const onChangeAndSave = (query: HaystackVariableQuery) => {
     let type = query.type;
     let queryCmd = "";
     if (query.type === "eval") {
-      queryCmd = query.eval
+      queryCmd = query.eval ?? "";
     } else if (query.type === "hisRead") {
-      queryCmd = query.hisRead
+      queryCmd = query.hisRead ?? "";
     } else if (query.type === "hisReadFilter") {
-      queryCmd = query.hisReadFilter
+      queryCmd = query.hisReadFilter ?? "";
     } else if (query.type === "read") {
-      queryCmd = query.read
+      queryCmd = query.read ?? "";
     }
     let column = "none";
     if (query.column !== undefined && query.column !== '') {
@@ -39,39 +33,42 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
       displayColumn = `'${query.displayColumn}'`;
     }
     let displayString = `${type}: '${queryCmd}', Column: ${column}, Display: ${displayColumn}`
-    onChange(query, displayString);
+    onChange({ ...query, query: displayString });
   };
 
   const onTypeChange = (newType: string) => {
-    setState({ ...query, type: newType});
+    onChangeAndSave({ ...query, type: newType});
   };
 
   const onQueryChange = (newQuery: string) => {
     if (query.type === "eval") {
-      setState({ ...query, eval: newQuery });
+      onChangeAndSave({ ...query, eval: newQuery });
     } else if (query.type === "hisRead") {
-      setState({ ...query, hisRead: newQuery });
+      onChangeAndSave({ ...query, hisRead: newQuery });
     } else if (query.type === "hisReadFilter") {
-      setState({ ...query, hisReadFilter: newQuery });
+      onChangeAndSave({ ...query, hisReadFilter: newQuery });
     } else if (query.type === "read") {
-      setState({ ...query, read: newQuery });
+      onChangeAndSave({ ...query, read: newQuery });
     }
   };
 
   const onColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
-    setState({...query, column: event.currentTarget.value,});
+    onChangeAndSave({...query, column: event.currentTarget.value,});
   };
 
   const onDisplayColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
-    setState({...query, displayColumn: event.currentTarget.value,});
+    onChangeAndSave({...query, displayColumn: event.currentTarget.value,});
   };
 
   return (
-    <div onBlur={saveQuery}>
+    <Stack
+      direction="column"
+      alignItems="flex-start"
+    >
       <HaystackQueryTypeSelector
         datasource={null}
         type={query.type}
-        refId={query.refId ?? VARIABLE_REF_ID}
+        refId={query.refId}
         onChange={onTypeChange}
       />
       <HaystackQueryInput
@@ -94,6 +91,6 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
           placeholder="Defaults to 'Column'"
         />
       </InlineField>
-    </div>
+    </Stack>
   );
 };

src/datasource.ts

@@ -17,7 +17,7 @@ import { HaystackQuery, OpsQuery, HaystackDataSourceOptions, HaystackVariableQue
 import { firstValueFrom, map, Observable } from 'rxjs';
 import { isRef, parseRef } from 'haystack';
 import { ComponentType } from 'react';
-import { VARIABLE_REF_ID, VariableQueryEditor } from 'components/VariableQueryEditor';
+import { VariableQueryEditor } from 'components/VariableQueryEditor';
 
 export const queryTypes: QueryType[] = [
   { label: 'Eval', value: 'eval', apiRequirements: ['eval'], description: 'Evaluate an Axon expression' },
@@ -130,7 +130,6 @@ export class HaystackVariableSupport extends CustomVariableSupport<DataSource, H
 
   query(request: DataQueryRequest<HaystackVariableQuery>): Observable<DataQueryResponse> {
     let variableQuery = request.targets[0];
-    variableQuery.refId = VARIABLE_REF_ID;
     let observable = this.onQuery(request);
     return observable.pipe(
       map((response) => {

src/plugin.json

@@ -40,7 +40,7 @@
     "updated": "%TODAY%"
   },
   "dependencies": {
-    "grafanaDependency": ">=10.0.0",
+    "grafanaDependency": ">=11.0.0",
     "plugins": []
   }
 }

src/types.ts

@@ -2,11 +2,11 @@ import { DataSourceJsonData, SelectableValue } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
 
 export interface HaystackQuery extends DataQuery {
-  type: string; // Defines the type of query that should be executed
-  eval: string;
-  hisRead: string;
-  hisReadFilter: string;
-  read: string;
+  type?: string; // Defines the type of query that should be executed
+  eval?: string;
+  hisRead?: string;
+  hisReadFilter?: string;
+  read?: string;
 }
 
 // OpsQuery is a query that is used to get the available ops from the datasource.
@@ -29,6 +29,7 @@ export interface QueryType extends SelectableValue<string> {
 }
 
 export interface HaystackVariableQuery extends HaystackQuery {
+  query: string; // Used to set 'definition' display string in the UI
   column: string;
   displayColumn: string;
   refId: string;