Add support for JSONata

Author: marcusolsson

package.json

@@ -24,22 +24,24 @@
   },
   "dependencies": {
     "dayjs": "^1.10.4",
+    "jsonata": "^1.8.5",
     "jsonpath-plus": "^4.0.0",
     "memory-cache": "^0.2.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@types/jsonpath": "^0.2.0",
-    "@types/lodash": "^4.14.168",
-    "@types/memory-cache": "^0.2.1",
-    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@emotion/core": "10.0.27",
     "@grafana/data": "8.0.1",
     "@grafana/runtime": "8.0.1",
     "@grafana/toolkit": "8.0.1",
     "@grafana/ui": "8.0.1",
     "@testing-library/jest-dom": "5.4.0",
     "@testing-library/react": "^10.0.2",
-    "@emotion/core": "10.0.27",
+    "@types/jsonata": "^1.5.1",
+    "@types/jsonpath": "^0.2.0",
+    "@types/lodash": "^4.14.168",
+    "@types/memory-cache": "^0.2.1",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
     "emotion": "10.0.27",
     "react-virtualized-auto-sizer": "^1.0.4"
   },

src/components/FieldEditor.tsx

@@ -1,7 +1,8 @@
 import { FieldType, SelectableValue } from '@grafana/data';
 import { Icon, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
 import React from 'react';
-import { JsonField } from 'types';
+import { JsonField, QueryLanguage } from 'types';
+import { JsonataQueryField } from './JsonataQueryField';
 import { JsonPathQueryField } from './JsonPathQueryField';
 
 interface Props {
@@ -15,25 +16,25 @@ export const FieldEditor = ({ value = [], onChange, limit, onComplete }: Props)
   const onChangePath = (i: number) => (e: string) => {
     onChange(value.map((field, n) => (i === n ? { ...value[i], jsonPath: e } : field)));
   };
-
+  const onLanguageChange = (i: number) => (e: SelectableValue<QueryLanguage>) => {
+    onChange(value.map((field, n) => (i === n ? { ...value[i], language: e.value } : field)));
+  };
   const onChangeType = (i: number) => (e: SelectableValue<string>) => {
     onChange(
       value.map((field, n) =>
         i === n ? { ...value[i], type: (e.value === 'auto' ? undefined : e.value) as FieldType } : field
       )
     );
   };
-
   const onAliasChange = (i: number) => (e: any) => {
     onChange(value.map((field, n) => (i === n ? { ...value[i], name: e.currentTarget.value } : field)));
   };
 
-  const addField = (i: number) => () => {
+  const addField = (i: number, defaults?: { language: QueryLanguage }) => () => {
     if (!limit || value.length < limit) {
-      onChange([...value.slice(0, i + 1), { name: '', jsonPath: '' }, ...value.slice(i + 1)]);
+      onChange([...value.slice(0, i + 1), { name: '', jsonPath: '', ...defaults }, ...value.slice(i + 1)]);
     }
   };
-
   const removeField = (i: number) => () => {
     onChange([...value.slice(0, i), ...value.slice(i + 1)]);
   };
@@ -52,13 +53,26 @@ export const FieldEditor = ({ value = [], onChange, limit, onComplete }: Props)
             }
             grow
           >
-            <JsonPathQueryField
-              onBlur={() => {
-                onChange(value);
-              }}
-              onChange={onChangePath(index)}
-              query={field.jsonPath}
-              onData={onComplete}
+            {field.language === 'jsonata' ? (
+              <JsonataQueryField onBlur={() => onChange(value)} onChange={onChangePath(index)} query={field.jsonPath} />
+            ) : (
+              <JsonPathQueryField
+                onBlur={() => onChange(value)}
+                onChange={onChangePath(index)}
+                query={field.jsonPath}
+                onData={onComplete}
+              />
+            )}
+          </InlineField>
+          <InlineField label="Query language">
+            <Select
+              value={field.language ?? 'jsonpath'}
+              width={14}
+              onChange={onLanguageChange(index)}
+              options={[
+                { label: 'JSONPath', value: 'jsonpath' },
+                { label: 'JSONata', value: 'jsonata' },
+              ]}
             />
           </InlineField>
           <InlineField label="Type" tooltip="If Auto is set, the JSON property type is used to detect the field type.">
@@ -80,7 +94,7 @@ export const FieldEditor = ({ value = [], onChange, limit, onComplete }: Props)
           </InlineField>
 
           {(!limit || value.length < limit) && (
-            <a className="gf-form-label" onClick={addField(index)}>
+            <a className="gf-form-label" onClick={addField(index, { language: field.language ?? 'jsonpath' })}>
               <Icon name="plus" />
             </a>
           )}

src/components/JsonataQueryField.tsx

@@ -0,0 +1,35 @@
+import { BracesPlugin, QueryField, SlatePrism } from '@grafana/ui';
+import React from 'react';
+
+interface Props {
+  query: string;
+  onBlur: () => void;
+  onChange: (v: string) => void;
+}
+
+/**
+ * JsonataQueryField is an editor for JSONata expressions.
+ */
+export const JsonataQueryField: React.FC<Props> = ({ query, onBlur, onChange }) => {
+  /**
+   * The QueryField supports Slate plugins, so let's add a few useful ones.
+   */
+  const plugins = [
+    BracesPlugin(),
+    SlatePrism({
+      onlyIn: (node: any) => node.type === 'code_block',
+      getSyntax: () => 'js',
+    }),
+  ];
+
+  return (
+    <QueryField
+      additionalPlugins={plugins}
+      query={query}
+      onRunQuery={onBlur}
+      onChange={onChange}
+      portalOrigin="jsonapi"
+      placeholder="$sum(orders.(price*quantity))"
+    />
+  );
+};

src/datasource.ts

@@ -12,6 +12,7 @@ import {
   toDataFrame,
 } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
+import jsonata from 'jsonata';
 import { JSONPath } from 'jsonpath-plus';
 import _ from 'lodash';
 import API from './api';
@@ -98,7 +99,7 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
           message: response.statusText ? response.statusText : defaultErrorMessage,
         };
       }
-    } catch (err) {
+    } catch (err: any) {
       if (_.isString(err)) {
         return {
           status: 'error',
@@ -130,24 +131,51 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
 
     const fields: Field[] = query.fields
       .filter((field) => field.jsonPath)
-      .map((field) => {
-        const path = replaceWithVars(field.jsonPath);
-        const values = JSONPath({ path, json });
-
-        // Get the path for automatic setting of the field name.
-        //
-        // Casted to any due to typing issues with JSONPath-Plus
-        const paths = (JSONPath as any).toPathArray(path);
-
-        const propertyType = field.type ? field.type : detectFieldType(values);
-        const typedValues = parseValues(values, propertyType);
-
-        return {
-          name: replaceWithVars(field.name ?? '') || paths[paths.length - 1],
-          type: propertyType,
-          values: new ArrayVector(typedValues),
-          config: {},
-        };
+      .map((field, index) => {
+        switch (field.language) {
+          case 'jsonata':
+            const expression = jsonata(field.jsonPath);
+
+            const bindings: Record<string, any> = {};
+
+            // Bind dashboard variables to JSONata variables.
+            getTemplateSrv()
+              .getVariables()
+              .map((v) => ({ name: v.name, value: getVariable(v.name) }))
+              .forEach((v) => {
+                bindings[v.name] = v.value;
+              });
+
+            const result = expression.evaluate(json, bindings);
+
+            // Ensure that we always return an array.
+            const arrayResult = Array.isArray(result) ? result : [result];
+
+            return {
+              name: replaceWithVars(field.name ?? '') || (query.fields.length > 1 ? `result${index}` : 'result'),
+              type: field.type ? field.type : detectFieldType(arrayResult),
+              values: new ArrayVector(arrayResult),
+              config: {},
+            };
+          default:
+            const path = replaceWithVars(field.jsonPath);
+            const values = JSONPath({ path, json });
+
+            // Get the path for automatic setting of the field name.
+            //
+            // Casted to any due to typing issues with JSONPath-Plus
+            const paths = (JSONPath as any).toPathArray(path);
+
+            const propertyType = field.type ? field.type : detectFieldType(values);
+            const typedValues = parseValues(values, propertyType);
+
+            return {
+              name: replaceWithVars(field.name ?? '') || paths[paths.length - 1],
+              type: propertyType,
+              values: new ArrayVector(typedValues),
+              config: {},
+            };
+        }
       });
 
     const fieldLengths = fields.map((field) => field.values.length);
@@ -247,3 +275,22 @@ export const groupBy = (frame: DataFrame, fieldName: string): DataFrame[] => {
 
   return frames;
 };
+
+// Helper function to extract the values of a variable instead of interpolating it.
+const getVariable = (name: any): string[] => {
+  const values: string[] = [];
+
+  // Instead of interpolating the string, we collect the values in an array.
+  getTemplateSrv().replace(`$${name}`, {}, (value: string | string[]) => {
+    if (Array.isArray(value)) {
+      values.push(...value);
+    } else {
+      values.push(value);
+    }
+
+    // We don't really care about the string here.
+    return '';
+  });
+
+  return values;
+};

src/types.ts

@@ -1,9 +1,12 @@
 import { DataQuery, DataSourceJsonData, FieldType } from '@grafana/data';
 
+export type QueryLanguage = 'jsonpath' | 'jsonata';
+
 export interface JsonField {
   name?: string;
   jsonPath: string;
   type?: FieldType;
+  language?: QueryLanguage;
 }
 
 export type Pair<T, K> = [T, K];

yarn.lock

@@ -2226,6 +2226,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
+"@types/jsonata@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/jsonata/-/jsonata-1.5.1.tgz#403176c3f265523c36e799f27752188b2fc08981"
+  integrity sha512-zBVjNYS7FUUIZ4Ckq3p7xOkJKndT6h+kHUeKiud1E6h/OLPkQOagzq8UJYN07QvtkA03XFadQER1zSIWSJj2EA==
+  dependencies:
+    jsonata "*"
+
 "@types/jsonpath@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@types/jsonpath/-/jsonpath-0.2.0.tgz#13c62db22a34d9c411364fac79fd374d63445aa1"
@@ -7793,6 +7800,11 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonata@*, jsonata@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/jsonata/-/jsonata-1.8.5.tgz#c656c929c92b3fb097792cef661c27c52dfa5148"
+  integrity sha512-ilDyTBkg6qhNoNVr8PUPzz5GYvRK+REKOM5MdOGzH2y6V4yvPRMegSvbZLpbTtI0QAgz09QM7drDhSHUlwp9pA==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"