Add experimental Metric option

Author: marcusolsson

src/components/ExperimentalEditor.tsx

@@ -20,6 +20,14 @@ export const ExperimentalEditor = ({ query, onChange, onRunQuery, editorContext
     onRunQuery();
   };
 
+  // Metric
+  const { metricField } = query;
+
+  const onMetricChange = (field?: string) => {
+    onChange({ ...query, metricField: field });
+    onRunQuery();
+  };
+
   // Variable label
   const { variableTextField } = query;
 
@@ -80,6 +88,32 @@ export const ExperimentalEditor = ({ query, onChange, onRunQuery, editorContext
               />
             </InlineField>
           </InlineFieldRow>
+          <InlineFieldRow>
+            <InlineField
+              label="Metric"
+              tooltip={
+                <>
+                  <p>{'Set the display name of the selected field to the name of the query result.'}</p>
+                  <a
+                    href="https://github.com/marcusolsson/grafana-json-datasource/issues/36"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Share feedback
+                  </a>
+                </>
+              }
+            >
+              <Select
+                placeholder={'Field'}
+                width={12}
+                isClearable={true}
+                value={fieldNames.find((v) => v.value === metricField)}
+                options={fieldNames}
+                onChange={(value) => onMetricChange(value?.value)}
+              />
+            </InlineField>
+          </InlineFieldRow>
         </>
       )}
       {editorContext === 'variables' && (

src/components/FieldEditor.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 
 import { SelectableValue, FieldType } from '@grafana/data';
-import { Icon, InlineFieldRow, InlineField, Select } from '@grafana/ui';
+import { Icon, InlineFieldRow, InlineField, Select, Input } from '@grafana/ui';
 
 import { JsonPathQueryField } from './JsonPathQueryField';
+import { JsonField } from 'types';
 
 interface Props {
   limit?: number;
-  onChange: (value: any) => void;
+  onChange: (value: JsonField[]) => void;
   onComplete: () => Promise<any>;
-  value: any[];
+  value: JsonField[];
 }
 
 export const FieldEditor = ({ value, onChange, limit, onComplete }: Props) => {
@@ -25,6 +26,10 @@ export const FieldEditor = ({ value, onChange, limit, onComplete }: Props) => {
     );
   };
 
+  const onAliasChange = (i: number) => (e: any) => {
+    onChange(value.map((field, n) => (i === n ? { ...value[i], name: e.currentTarget.value } : field)));
+  };
+
   const addField = (i: number) => () => {
     if (!limit || value.length < limit) {
       onChange([...value.slice(0, i + 1), { name: '', jsonPath: '' }, ...value.slice(i + 1)]);
@@ -72,6 +77,9 @@ export const FieldEditor = ({ value, onChange, limit, onComplete }: Props) => {
               ]}
             />
           </InlineField>
+          <InlineField label="Alias" tooltip="If left blank, the field uses the name of the queried element.">
+            <Input width={12} value={field.name} onChange={onAliasChange(index)} />
+          </InlineField>
 
           {(!limit || value.length < limit) && (
             <a className="gf-form-label" onClick={addField(index)}>

src/datasource.ts

@@ -129,7 +129,7 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
       throw new Error('Query returned empty data');
     }
 
-    const fields = query.fields
+    const fields: Field[] = query.fields
       .filter((field) => field.jsonPath)
       .map((field) => {
         const path = replaceWithVars(field.jsonPath);
@@ -144,9 +144,10 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
         const typedValues = parseValues(values, propertyType);
 
         return {
-          name: paths[paths.length - 1],
+          name: field.name || paths[paths.length - 1],
           type: propertyType,
-          values: typedValues,
+          values: new ArrayVector(typedValues),
+          config: {},
         };
       });
 
@@ -158,24 +159,32 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
       throw new Error('Fields have different lengths');
     }
 
-    if (query.groupByField) {
-      return groupBy(
-        toDataFrame({
-          name: query.refId,
-          refId: query.refId,
-          fields: fields,
-        }),
-        query.groupByField
-      );
-    }
+    const frames = query.groupByField
+      ? groupBy(
+          toDataFrame({
+            name: query.refId,
+            refId: query.refId,
+            fields: fields,
+          }),
+          query.groupByField
+        )
+      : [
+          toDataFrame({
+            name: query.refId,
+            refId: query.refId,
+            fields: fields,
+          }),
+        ];
+
+    const res = frames.map((frame) => ({
+      ...frame,
+      fields: fields.map(
+        (field: Field): Field =>
+          field.name === query.metricField ? { ...field, config: { displayNameFromDS: frame.name } } : field
+      ),
+    }));
 
-    return [
-      toDataFrame({
-        name: query.refId,
-        refId: query.refId,
-        fields: fields,
-      }),
-    ];
+    return res;
   }
 
   async requestJson(query: JsonApiQuery, interpolate: (text: string) => string) {

src/types.ts

@@ -1,6 +1,6 @@
 import { DataQuery, DataSourceJsonData, FieldType } from '@grafana/data';
 
-interface JsonField {
+export interface JsonField {
   name?: string;
   jsonPath: string;
   type?: FieldType;
@@ -23,6 +23,7 @@ export interface JsonApiQuery extends DataQuery {
 
   // Experimental
   groupByField?: string;
+  metricField?: string;
   variableTextField?: string;
   variableValueField?: string;
 }