handle dashboard variables

Author: Loggy

src/QueryEditor.tsx

@@ -1,7 +1,7 @@
 import defaults from 'lodash/defaults';
 
 import React, { useState, useEffect } from 'react';
-import { AsyncSelect, Label, Field } from '@grafana/ui';
+import { Label, Select } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from './datasource';
 import { defaultQuery, MyDataSourceOptions, FlamegraphQuery } from './types';
@@ -11,6 +11,7 @@ type Props = QueryEditorProps<DataSource, FlamegraphQuery, MyDataSourceOptions>;
 
 export const QueryEditor = (props: Props) => {
   const query = defaults(props.query, defaultQuery);
+  console.log(props);
   const [appName, setAppName] = useState<SelectableValue<string>>({ label: query.name, value: query.name });
   const [names, setNames] = useState<SelectableValue<string>[]>([]);
   const loadAppNames = (query: string) => {
@@ -28,8 +29,10 @@ export const QueryEditor = (props: Props) => {
 
   useEffect(() => {
     const { onChange, query, onRunQuery } = props;
-    onChange({ ...query, name: appName.value });
-    onRunQuery();
+    if(appName.value) {
+      onChange({ ...query, name: appName.value });
+      onRunQuery();
+    }
   }, [appName]);
 
     return (
@@ -42,15 +45,14 @@ export const QueryEditor = (props: Props) => {
         /> */}
         <div style={{display: 'flex', flexDirection: 'row', marginTop: '10px'}}>
         <Label style={{marginTop: '8px', marginRight: '10px'}}>Application</Label>
-        <Field>
-          <AsyncSelect
-            placeholder='Application name'
-            value={appName}
-            onChange={setAppName}
-            defaultOptions={names}
-            loadOptions={(query: string) => Promise.resolve(names.filter(name => name.value?.includes(query)))}
-          />
-        </Field>
+        <Select
+          onChange={(v) => v ? setAppName(v) : setAppName({label:'', value: ''})}
+          value={appName}
+          options={names}
+          backspaceRemovesValue
+          isClearable
+          allowCustomValue
+        />
         </div>
       </div>
     );

src/datasource.ts

@@ -9,6 +9,7 @@ import {
 import { getBackendSrv, BackendSrv } from "@grafana/runtime";
 
 import { FlamegraphQuery, MyDataSourceOptions } from './types';
+import { getTemplateSrv } from '@grafana/runtime';
 
 
 
@@ -48,22 +49,31 @@ export class DataSource extends DataSourceApi<FlamegraphQuery, MyDataSourceOptio
     const from = range.raw.from.valueOf();
     const until = range.raw.to.valueOf();
 
-    const promises = options.targets.map((query) =>
-    this.getFlamegraph({ ...query, from, until }).then((response: any) => {
-      const frame = new MutableDataFrame({
-        refId: query.refId,
-        name: query.name,
-        fields: [
-          { name: "flamebearer", type: FieldType.other },
-        ],
-      });
-
-      frame.appendRow([response.data.flamebearer]);
-
-      return frame;
-    })
-  );
-
+    const promises = options.targets.map((query) => {
+      let nameFromVar: string | undefined;
+      if(query?.name?.startsWith('$')) {
+        const appNameVar = getTemplateSrv().getVariables().find((vari => query?.name?.slice(1) === vari.name));
+        // @ts-ignore
+        nameFromVar = appNameVar?.query;
+      }
+      return this.getFlamegraph({ ...query, name: nameFromVar || query.name, from, until }).then((response: any) => {
+        const frame = new MutableDataFrame({
+          refId: query.refId,
+          name: nameFromVar || query.name,
+          fields: [
+            { name: "flamebearer", type: FieldType.other },
+          ],
+          meta: {
+              preferredVisualisationType: 'table',
+          },
+        });
+
+        frame.appendRow([response.data.flamebearer]);
+
+        return frame;
+      })
+    }
+    );
     return Promise.all(promises).then((data) => ({ data }));
   }