supported value and label

Author: ye11ow

src/components/VariableQueryEditor.tsx

@@ -1,3 +1,4 @@
+import { Alert, CodeEditor, Field, Label, Stack } from '@grafana/ui';
 import React, { useState } from 'react';
 
 import { VariableQueryProps } from '../types';
@@ -9,18 +10,27 @@ export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) =>
     onChange(state, `${state.query}`);
   };
 
-  const handleChange = (event: React.FormEvent<HTMLInputElement>) =>
+  const onSQLChange = (sql: string) => {
     setState({
-      ...state,
-      [event.currentTarget.name]: event.currentTarget.value,
+      query: sql,
     });
+  };
 
   return (
-    <>
-      <div className="gf-form">
-        <span className="gf-form-label width-10">Query</span>
-        <input name="query" className="gf-form-input" onBlur={saveQuery} onChange={handleChange} value={state.query} />
-      </div>
-    </>
+    <Field
+      label=""
+      description="Make sure your query returns either 1 or 2 columns. If your query returns 1 column only, it will be used as the value and label. If it returns 2 columns, the first column will be used as the value while the second column will be used as the label."
+    >
+      <CodeEditor
+        onChange={onSQLChange}
+        onBlur={saveQuery}
+        width={600}
+        height={100}
+        language="sql"
+        showLineNumbers={true}
+        showMiniMap={false}
+        value={state.query}
+      />
+    </Field>
   );
 };

src/datasource.ts

@@ -1,40 +1,47 @@
-import { DataSourceInstanceSettings, ScopedVars } from '@grafana/data';
+import { DataQueryRequest, DataSourceInstanceSettings, MetricFindValue, ScopedVars } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
-import { MyVariableQuery, TpDataSourceOptions, TpQuery } from './types';
+import { TpDataSourceOptions, TpQuery, TpVariableQuery } from './types';
 
 export class DataSource extends DataSourceWithBackend<TpQuery, TpDataSourceOptions> {
   constructor(instanceSettings: DataSourceInstanceSettings<TpDataSourceOptions>) {
     super(instanceSettings);
   }
 
 
-  metricFindQuery(query: MyVariableQuery, options?: any) {
+  metricFindQuery(query: TpVariableQuery, options?: any) {
+    let metrics: MetricFindValue[] = []
     if (!query || !options.variable.datasource) {
-      return Promise.resolve([]);
+      return Promise.resolve(metrics);
     }
 
-    const prom = new Promise((resolve) => {
+    const prom = new Promise<MetricFindValue[]>((resolve) => {
       const req = {
         targets: [{ datasource: options.variable.datasource,
           sql: query.query,
           refId: String(Math.random()) }],
         range: options ? options.range : (getTemplateSrv() as any).timeRange,
-      };
+      } as  DataQueryRequest<TpQuery> ;
 
       this.query(req).subscribe((res) => {
         const result = res.data[0] || { fields: [] }
 
-        if (result.fields.length > 0)  {
-          const labels = result.fields[0].values.map((v) => {
+
+        if (result.fields.length === 2) {
+          for (let i = 0; i < result.fields[0].values.length; i++) {
+            metrics.push({
+              text: result.fields[1].values[i],
+              value: result.fields[0].values[i]
+            })
+          }
+        } else if (result.fields.length === 1) {
+          metrics = result.fields[0].values.map((v: string) => {
             return {
             text: v,
             value: v
           }});
-
-          resolve(labels);
-          return
         }
-        resolve([]);
+        
+        resolve(metrics);
       });
     })
 

src/types.ts

@@ -22,11 +22,11 @@ export interface TpSecureJsonData {
   password?: string;
 }
 
-export interface MyVariableQuery {
+export interface TpVariableQuery {
   query: string;
 }
 
 export interface VariableQueryProps {
-  query: MyVariableQuery;
-  onChange: (query: MyVariableQuery, definition: string) => void;
+  query: TpVariableQuery;
+  onChange: (query: TpVariableQuery, definition: string) => void;
 }