feat: add support for dynamic variables from parseable

src/components/VariableQueryEditor.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+interface VariableQueryProps {
+  query: string;
+  onChange: (query: string, definition: string) => void;
+}
+
+export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) => {
+  const [state, setState] = useState(query);
+
+  const saveQuery = () => {
+    onChange(state, state);
+  };
+
+  const handleChange = (event: React.FormEvent<HTMLInputElement>) =>
+    setState(event.currentTarget.value);
+
+  return (
+    <>
+      <div className="gf-form">
+        <span className="gf-form-label width-10">Query</span>
+        <input
+          name="rawQuery"
+          className="gf-form-input"
+          onBlur={saveQuery}
+          onChange={handleChange}
+          value={state}
+        />
+      </div>
+    </>
+  );
+};
+

src/datasource.ts

@@ -8,6 +8,7 @@ import {
   DataFrame,
   FieldType,
   guessFieldTypeFromValue,
+  MetricFindValue
 } from '@grafana/data';
 import { lastValueFrom, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -89,6 +90,30 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     };
   }
 
+  async metricFindQuery(query: string, options?: any): Promise<MetricFindValue[]> {
+    const to = new Date();
+    const from = new Date();
+    from.setFullYear(to.getFullYear() - 1);
+
+    options = options || {};
+    options.range = options.range || { 
+      from: from,
+      to: to
+    }
+
+    options.targets = [];
+    options.targets.push({ queryText: query, scopedVars: {} });
+
+    const response = await this.query(options);
+
+    return response.data.map((dataFrame) => {
+      return dataFrame.fields[0].values.toArray();
+    }
+    ).flat().map((value) => {
+      return { text: value };
+    });
+  }
+
   arrayToDataFrame(array: any[]): DataFrame {
     let dataFrame: MutableDataFrame = new MutableDataFrame();
 

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 { MyQuery, MyDataSourceOptions } from './types';
 
 export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
   .setConfigEditor(ConfigEditor)
-  .setQueryEditor(QueryEditor);
+  .setQueryEditor(QueryEditor)
+  .setVariableQueryEditor(VariableQueryEditor);