Add experimental group by feature

Author: marcusolsson

src/components/ExperimentalEditor.tsx

@@ -0,0 +1,59 @@
+import { InfoBox } from '@grafana/ui';
+import React from 'react';
+import { InlineFieldRow, InlineField, Select } from '@grafana/ui';
+import { JsonApiQuery } from 'types';
+import { JSONPath } from 'jsonpath-plus';
+
+interface Props {
+  query: JsonApiQuery;
+  onChange: (query: JsonApiQuery) => void;
+  onRunQuery: () => void;
+}
+
+export const ExperimentalEditor = ({ query, onChange, onRunQuery }: Props) => {
+  const { groupByField } = query;
+
+  const onGroupByChange = (field?: string) => {
+    onChange({ ...query, groupByField: field });
+    onRunQuery();
+  };
+
+  const fieldNames = query.fields
+    .map((field) => {
+      const pathArray = (JSONPath as any).toPathArray(field.jsonPath);
+      return pathArray[pathArray.length - 1];
+    })
+    .map((path) => ({ label: path, value: path }));
+
+  return (
+    <>
+      <InfoBox severity="warning">
+        {`The features listed here are experimental. They might change or be removed without notice. In the tooltip for each feature, there's a link to a pull request where you can submit feedback for that feature.`}
+      </InfoBox>
+      <InlineFieldRow>
+        <InlineField
+          label="Group by"
+          tooltip={
+            <>
+              <p>
+                {
+                  'Groups the query result into multiple results. This can be useful when you want to graph multiple time series in the same panel.'
+                }
+              </p>
+              <a href="https://github.com/marcusolsson/grafana-json-datasource">Submit feedback</a>
+            </>
+          }
+        >
+          <Select
+            placeholder={'Field'}
+            width={12}
+            isClearable={true}
+            value={fieldNames.find((v) => v.value === groupByField)}
+            options={fieldNames}
+            onChange={(value) => onGroupByChange(value?.value)}
+          />
+        </InlineField>
+      </InlineFieldRow>
+    </>
+  );
+};

src/components/FieldEditor.tsx

@@ -27,16 +27,12 @@ export const FieldEditor = ({ value, onChange, limit, onComplete }: Props) => {
 
   const addField = (i: number) => () => {
     if (!limit || value.length < limit) {
-      onChange({
-        fields: [...value.slice(0, i + 1), { name: '', jsonPath: '' }, ...value.slice(i + 1)],
-      });
+      onChange([...value.slice(0, i + 1), { name: '', jsonPath: '' }, ...value.slice(i + 1)]);
     }
   };
 
   const removeField = (i: number) => () => {
-    onChange({
-      fields: [...value.slice(0, i), ...value.slice(i + 1)],
-    });
+    onChange([...value.slice(0, i), ...value.slice(i + 1)]);
   };
 
   return (

src/components/QueryEditor.tsx

@@ -10,6 +10,7 @@ import { Pair } from '../types';
 import { JsonDataSource } from 'datasource';
 import { FieldEditor } from './FieldEditor';
 import { PathEditor } from './PathEditor';
+import { ExperimentalEditor } from './ExperimentalEditor';
 
 // Display a warning message when user adds any of the following headers.
 const sensitiveHeaders = ['authorization', 'proxy-authorization', 'x-api-key'];
@@ -141,6 +142,10 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, limitFields
         </>
       ),
     },
+    {
+      title: 'Experimental',
+      content: <ExperimentalEditor query={query} onChange={onChange} onRunQuery={onRunQuery} />,
+    },
   ];
 
   return (

src/datasource.ts

@@ -10,6 +10,9 @@ import {
   MetricFindValue,
   ScopedVars,
   TimeRange,
+  DataFrame,
+  Field,
+  ArrayVector,
 } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 
@@ -39,12 +42,14 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
   }
 
   async query(request: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {
-    const promises = request.targets
+    const promises = await request.targets
       .filter((query) => !query.hide)
-      .map((query) => this.doRequest(query, request.range, request.scopedVars));
+      .flatMap((query) => this.doRequest(query, request.range, request.scopedVars));
+
+    const res: DataFrame[][] = await Promise.all(promises);
 
     // Wait for all queries to finish before returning the result.
-    return Promise.all(promises).then((data) => ({ data }));
+    return { data: res.flatMap((frames) => frames) };
   }
 
   /**
@@ -53,7 +58,8 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
    * @param query
    */
   async metricFindQuery?(query: JsonApiQuery): Promise<MetricFindValue[]> {
-    const frame = await this.doRequest(query);
+    const frames = await this.doRequest(query);
+    const frame = frames[0];
     return frame.fields.length > 0 ? frame.fields[0].values.toArray().map((_) => ({ text: _ })) : [];
   }
 
@@ -103,7 +109,7 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
     }
   }
 
-  async doRequest(query: JsonApiQuery, range?: TimeRange, scopedVars?: ScopedVars) {
+  async doRequest(query: JsonApiQuery, range?: TimeRange, scopedVars?: ScopedVars): Promise<DataFrame[]> {
     const replaceWithVars = replace(scopedVars, range);
 
     const json = await this.requestJson(query, replaceWithVars);
@@ -141,11 +147,24 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
       throw new Error('Fields have different lengths');
     }
 
-    return toDataFrame({
-      name: query.refId,
-      refId: query.refId,
-      fields: fields,
-    });
+    if (query.groupByField) {
+      return groupBy(
+        toDataFrame({
+          name: query.refId,
+          refId: query.refId,
+          fields: fields,
+        }),
+        query.groupByField
+      );
+    }
+
+    return [
+      toDataFrame({
+        name: query.refId,
+        refId: query.refId,
+        fields: fields,
+      }),
+    ];
   }
 
   async requestJson(query: JsonApiQuery, interpolate: (text: string) => string) {
@@ -176,3 +195,37 @@ const replaceMacros = (str: string, range?: TimeRange) => {
         .replace(/\$__unixEpochTo\(\)/g, range.to.unix().toString())
     : str;
 };
+
+export const groupBy = (frame: DataFrame, fieldName: string): DataFrame[] => {
+  const groupByField = frame.fields.find((field) => field.name === fieldName);
+  if (!groupByField) {
+    return [frame];
+  }
+
+  const uniqueValues = new Set<string>(groupByField.values.toArray());
+
+  const frames = [...uniqueValues].map((groupByValue) => {
+    const fields: Field[] = frame.fields
+      // Skip the field we're grouping on.
+      .filter((field) => field.name !== groupByField.name)
+      .map((field) => ({
+        ...field,
+        config: {
+          // displayNameFromDS: groupByValue,
+        },
+        values: new ArrayVector(
+          field.values.toArray().filter((_, idx) => {
+            return groupByField.values.get(idx) === groupByValue;
+          })
+        ),
+      }));
+
+    return toDataFrame({
+      name: groupByValue,
+      refId: frame.refId,
+      fields,
+    });
+  });
+
+  return frames;
+};

src/types.ts

@@ -20,6 +20,9 @@ export interface JsonApiQuery extends DataQuery {
 
   // Keep for backwards compatibility with older version of variables query editor.
   jsonPath?: string;
+
+  // Experimental
+  groupByField?: string;
 }
 
 export const defaultQuery: Partial<JsonApiQuery> = {