add simple scripting with javascript (#11)

Author: Nobodyno-boop

package-lock.json

@@ -68,7 +68,8 @@
     "@grafana/ui": "^11.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "shadowrealm-api": "^0.8.3",
     "tslib": "2.5.3"
   },
   "packageManager": "[email protected]"
-}
+}

package.json

@@ -1,9 +1,20 @@
 import React, { ChangeEvent, useRef, useState } from "react";
-import { Button, CodeEditor, Divider, Field, InlineField, InlineFieldRow, InlineSwitch, Input, Select } from "@grafana/ui";
+import {
+  ActionMeta,
+  Button,
+  CodeEditor,
+  Divider,
+  Field,
+  InlineField,
+  InlineFieldRow,
+  Input,
+  Select,
+
+} from "@grafana/ui";
 import { QueryEditorProps, SelectableValue } from "@grafana/data";
 import { DataSource } from "../datasource";
 import { MongoDataSourceOptions, MongoQuery, QueryLanguage, QueryType, DEFAULT_QUERY } from "../types";
-import { parseJsQuery, validateJsonQueryText } from "../utils";
+import {parseJsQuery, parseJsQueryLegacy, validateJsonQueryText} from "../utils";
 import * as monacoType from "monaco-editor/esm/vs/editor/editor.api";
 
 type Props = QueryEditorProps<DataSource, MongoQuery, MongoDataSourceOptions>;
@@ -25,10 +36,18 @@ export function QueryEditor({ query, onChange, onRunQuery }: Props) {
   const codeEditorRef = useRef<monacoType.editor.IStandaloneCodeEditor | null>(null);
   const [queryTextError, setQueryTextError] = useState<string | null>(null);
 
+  const optionsLanguage = [
+    { label: "JSON", value: QueryLanguage.JSON},
+    { label: "JavaScript", value: QueryLanguage.JAVASCRIPT, description: "javascript legacy" },
+    { label: "JavaScriptShadow", value: QueryLanguage.JAVASCRIPT_SHADOW, description: "javascript with evaluation" }
+  ];
+
   const onQueryTextChange = (queryText: string) => {
-    if (query.queryLanguage === QueryLanguage.JAVASCRIPT) {
-      const { collection, error } = parseJsQuery(queryText);
-      onChange({ ...query, collection: collection, queryText: queryText });
+    if (query.queryLanguage === QueryLanguage.JAVASCRIPT || query.queryLanguage === QueryLanguage.JAVASCRIPT_SHADOW) {
+      // parse the JavaScript query
+      const { error, collection } = query.queryLanguage === QueryLanguage.JAVASCRIPT_SHADOW ? parseJsQuery(queryText) : parseJsQueryLegacy(queryText);
+      // let the same query text as it is
+      onChange({ ...query, queryText: queryText, ...(collection ? {collection} : {}) });
       setQueryTextError(error);
       if (!error) {
         onRunQuery();
@@ -43,13 +62,8 @@ export function QueryEditor({ query, onChange, onRunQuery }: Props) {
     }
   };
 
-  const onQueryLanguageChange = (e: React.FormEvent<HTMLInputElement>) => {
-    if (e.currentTarget.checked) {
-      onChange({ ...query, queryLanguage: QueryLanguage.JAVASCRIPT });
-
-    } else {
-      onChange({ ...query, queryLanguage: QueryLanguage.JSON });
-    }
+  const onQueryLanguageChange = (value: SelectableValue<string>, actionMeta: ActionMeta) => {
+    onChange({ ...query, queryLanguage: value.value });
   };
 
   const onQueryTypeChange = (sv: SelectableValue<string>) => {
@@ -80,18 +94,18 @@ export function QueryEditor({ query, onChange, onRunQuery }: Props) {
         <InlineField label="Query Type">
           <Select id="query-editor-query-type" options={queryTypes} value={query.queryType || QueryType.TIMESERIES} onChange={onQueryTypeChange}></Select>
         </InlineField>
-        {query.queryLanguage === QueryLanguage.JSON && <InlineField label="Collection" tooltip="Enter the collection to query"
-          error="Please enter the collection" invalid={!query.collection}>
+        <InlineField label="Collection" tooltip="Enter the collection to query"
+                     error="Please enter the collection" invalid={!query.collection}>
           <Input id="query-editor-collection" onChange={onCollectionChange} value={query.collection} required />
-        </InlineField>}
+        </InlineField>
       </InlineFieldRow>
       <Divider />
-      <InlineField label="Use JavaScript Query">
-        <InlineSwitch id="query-editor-use-js-query" value={query.queryLanguage === QueryLanguage.JAVASCRIPT} onChange={onQueryLanguageChange} />
+      <InlineField label="Query language">
+        <Select id="query-editor-use-js-query" onChange={onQueryLanguageChange} options={optionsLanguage} value={query.queryLanguage} />
       </InlineField>
-      <Field label="Query Text" description={`Enter the Mongo Aggregation Pipeline (${query.queryLanguage === QueryLanguage.JSON ? "JSON" : "JavaScript"})`}
+      <Field label="Query Text" description={`Enter the Mongo Aggregation Pipeline (${query.queryLanguage})`}
         error={queryTextError} invalid={queryTextError != null}>
-        <CodeEditor onEditorDidMount={onCodeEditorDidMount} width="100%" height={300} language={query.queryLanguage || ""}
+        <CodeEditor onEditorDidMount={onCodeEditorDidMount} width="100%" height={300} language={query.queryLanguage === QueryLanguage.JAVASCRIPT || query.queryLanguage === QueryLanguage.JAVASCRIPT_SHADOW ? "javascript" : "json"}
           onBlur={onQueryTextChange} value={query.queryText || ""} showMiniMap={false} showLineNumbers={true} />
       </Field>
       <Button onClick={onFormatQueryText}>Format</Button>

src/components/QueryEditor.tsx

@@ -1,6 +1,36 @@
 import React from "react";
 import { QueryEditorHelpProps } from "@grafana/data";
+import {Divider, Text} from "@grafana/ui";
 
 export function QueryHelper(_props: QueryEditorHelpProps) {
-    return <p>TODO</p>;
-};
+  return (
+    <div>
+      <Text element="h1" color="primary">
+        Query Language Types and Differences
+      </Text>
+
+      <Divider></Divider>
+      <div>
+        <p>
+          <Text element="span" weight="bold" color="info">
+            JSON
+          </Text>
+          : JSON aggregate of mongodb query.
+        </p>
+        <p>
+          <Text element="span" weight="bold" color="info">
+            JavaScript
+          </Text>
+          :JavaScript aggregate of mongodb query for the legacy support
+        </p>
+        <p>
+          <Text element="span" weight="bold" color="info">
+            JavaScript Shadow
+          </Text>
+          : JavaScript function that return aggregate of mongodb query with evaluation
+          support.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/QueryHelper.tsx

@@ -1,6 +1,6 @@
 import { DataSourceInstanceSettings, CoreApp, ScopedVars, DataQueryRequest, DataQueryResponse } from "@grafana/data";
 import { DataSourceWithBackend, getTemplateSrv } from "@grafana/runtime";
-import { parseJsQuery, datetimeToJson, getBucketCount } from "./utils";
+import {parseJsQuery, datetimeToJson, getBucketCount, parseJsQueryLegacy} from "./utils";
 import { MongoQuery, MongoDataSourceOptions, DEFAULT_QUERY, QueryLanguage } from "./types";
 import { Observable } from "rxjs";
 
@@ -26,18 +26,25 @@ export class DataSource extends DataSourceWithBackend<MongoQuery, MongoDataSourc
   }
 
   query(request: DataQueryRequest<MongoQuery>): Observable<DataQueryResponse> {
-    const queries = request.targets.map(query => {
+    const queries = request.targets.map((query) => {
       let queryText = query.queryText!;
-      if (query.queryLanguage === QueryLanguage.JAVASCRIPT) {
-        const { jsonQuery } = parseJsQuery(queryText);
+      if (query.queryLanguage === QueryLanguage.JAVASCRIPT || query.queryLanguage === QueryLanguage.JAVASCRIPT_SHADOW) {
+        const { jsonQuery } =
+          query.queryLanguage === QueryLanguage.JAVASCRIPT_SHADOW
+            ? parseJsQuery(queryText)
+            : parseJsQueryLegacy(queryText);
         queryText = jsonQuery!;
       }
 
       return {
         ...query,
-        queryText: queryText.replaceAll(/"\$from"/g, datetimeToJson(request.range.from))
+        queryText: queryText
+          .replaceAll(/"\$from"/g, datetimeToJson(request.range.from))
           .replaceAll(/"\$to"/g, datetimeToJson(request.range.to))
-          .replaceAll(/"\$dateBucketCount"/g, getBucketCount(request.range.from, request.range.to, request.intervalMs).toString())
+          .replaceAll(
+            /"\$dateBucketCount"/g,
+            getBucketCount(request.range.from, request.range.to, request.intervalMs).toString()
+          ),
       };
     });
 

src/datasource.ts

@@ -15,7 +15,8 @@ export const QueryType = {
 
 export const QueryLanguage = {
   JSON: "json",
-  JAVASCRIPT: "javascript"
+  JAVASCRIPT: "javascript",
+  JAVASCRIPT_SHADOW: "javascriptShadow"
 };
 
 

src/types.ts

@@ -1,5 +1,7 @@
 import { DateTime } from "@grafana/data";
 import { JsQueryResult } from "types";
+import shadow from "shadowrealm-api";
+import {getTemplateSrv} from "@grafana/runtime";
 
 export function validateJsonQueryText(queryText?: string): string | null {
     if (!queryText) {
@@ -19,7 +21,7 @@ export function validateJsonQueryText(queryText?: string): string | null {
     }
 }
 
-export function parseJsQuery(queryText: string): JsQueryResult {
+export function parseJsQueryLegacy(queryText: string): JsQueryResult {
     const regex = /^db\.(.+)\.aggregate\((.+)\)$/;
     const match = queryText.trim().replace(/(;$)/g, "").replace(/(\r\n|\n|\r)/gm, "")
         .match(regex);
@@ -39,14 +41,32 @@ export function parseJsQuery(queryText: string): JsQueryResult {
     }
 }
 
-export function validateJsQueryText(queryText?: string): string | null {
-    if (!queryText) {
-        return "Please enter the query";
+export function parseJsQuery(queryText: string): JsQueryResult {
+    // use shadow realm to evaluate the JavaScript query
+    const realm = new shadow();
+    try {
+        // replace the template variables in the query
+        const script = getTemplateSrv().replace(queryText);
+        // realm.evaluate will execute the JavaScript code and return the result
+        const result = realm.evaluate(`
+            const fn = ${script}
+            const result = fn()
+            JSON.stringify(result)
+        `) as string;
+        return {
+            jsonQuery: result,
+            error: null
+        };
+    }catch (e: Error | any) {
+        // if there is an error, return the error message
+        return {
+            error: e?.message
+        };
     }
-    const { error } = parseJsQuery(queryText);
-    return error;
 }
 
+
+
 export function datetimeToJson(datetime: DateTime) {
     return JSON.stringify({
         $date: {