Expand value field as variable result (#28)

Author: haohanyang

src/components/VariableQueryEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { DEFAULT_QUERY, VariableQuery } from "../types";
-import { CodeEditor, Field, InlineField, Input } from "@grafana/ui";
+import { VariableQuery } from "../types";
+import { CodeEditor, Field, InlineField, Input, Button, Alert } from "@grafana/ui";
 
 interface VariableQueryProps {
     query: VariableQuery;
@@ -32,17 +32,21 @@ export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) =>
                 error="Please enter the collection" invalid={!query.collection}>
                 <Input
                     name="collection"
-                    onBlur={saveQuery}
                     onChange={handleCollectionChange}
                     value={state.collection}>
                 </Input>
             </InlineField>
             <Field label="Query Text" description="MongoDB aggregate (JSON)">
                 <CodeEditor width="100%" height={300} language="json" onBlur={saveQuery}
-                    value={query.queryText || DEFAULT_QUERY.queryText!} showMiniMap={false} showLineNumbers={true}
+                    value={query.queryText || ""} showMiniMap={false} showLineNumbers={true}
                     onChange={handleQueryTextChange}
+                    monacoOptions={{ fontSize: 14 }}
                 />
             </Field>
+            <Alert title="Query info" severity="info">
+                The query result is expected to contain <code>value</code> field which has elements of type <code>string</code> or <code>number</code>
+            </Alert>
+            <Button onClick={saveQuery} variant="primary">Query</Button>
         </>
     );
 };

src/utils.ts

@@ -102,27 +102,21 @@ export function randomId(length: number) {
 
 export function getMetricValues(response: DataQueryResponse): MetricFindValue[] {
     const dataframe = response.data[0] as DataFrameSchema;
-    const fields = dataframe.
-        fields.filter(f => f.type === FieldType.string || f.type === FieldType.number)
-        // @ts-ignore
-        .filter(f => f.values && f.values.length > 0);
+    const field = dataframe.fields.find(f => f.name === "value");
 
-    // @ts-ignore
-    return fields.map(function (field) {
-        // @ts-ignore
-        const values: Array<string | number> = field.values;
-        let text: string;
+    if (!field) {
+        throw new Error("Field \"value\" not found");
+    }
 
-        if (values.length === 1) {
-            text = `${field.name}:${values[0]}`;
-        } else {
-            text = `${field.name}:[${values[0]}, ...]`;
-        }
+    if (field.type !== FieldType.string && field.type !== FieldType.number) {
+        throw new Error("Each element should be string or number");
+    }
 
+    // @ts-ignore
+    return field.values.map((value: string | number) => {
         return {
-            text: text,
-            // @ts-ignore
-            value: values.length === 1 ? values[0] : values,
+            text: value.toString(),
+            value: value,
             expandable: true
         };
     });