better query editor

Author: wtao

README.md

@@ -26,20 +26,15 @@ there are two types of query the plugin supports, `table` or `timeserie`.
 <img src="./imgs/query-type.png" alt="frontend" style="width: 40%;" />
 
 ### query schema
+
+after the frontend collects a query, it sends data of the following schema to its backend
 ```javascript
   {
     collection: "collection name",
     aggregations: [
       {
-        string: "string",
-        date: new Date(),
-        id: new ObjectId("573a1393f29313caabcdc50e"),
-        bool: true,
-        number: 12345.4,
-        expandable1: $from,
-        expandable2: $to,
-        expandable3: $intervalMs
-      },
+        pipeline stage (s)
+      }
     ],
   }
 ```
@@ -48,11 +43,22 @@ there are two types of query the plugin supports, `table` or `timeserie`.
 
 a query is a `javascript` object.
 
-the `collection` field specifies the name of the collection to perform an aggregation.
+the `Collection Name` field specifies the name of the collection to perform an aggregation.
+
+the `Aggregation Pipeline` field can have multiple aggregation steps. if you're familiar with `MongoDB Compass`, you can contruct your aggregations in the tool, then copy/paste the aggregration's `Node.js` export to the field - it's just simple as that. the supported data types are listed below.
 
-the `aggregations` field can have multiple aggregation steps. the supported data types are listed above.
+```
+  string: "string",
+  date: new Date(),
+  id: new ObjectId("573a1393f29313caabcdc50e"),
+  bool: true,
+  number: 12345.4,
+  expandable1: $from,
+  expandable2: $to,
+  expandable3: $intervalMs
+```
 
-`timeserie` in detail
+### `timeserie` in detail
 
 - `$from`, `$to`, `$intervalMs` are grafana expandable variables for using as a time boundary and an interval
 - `__name`, `__value`, `__timestamp` are the plugin's internal variables to construct a named grafana timeserie data frame

frontend/src/components/QueryEditor.tsx

@@ -16,9 +16,7 @@ import { lastValueFrom } from 'rxjs';
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
-const queryHint = `{
-  collection: "collection name",
-  aggregations: [
+const queryHint = `[
     {
       string: "string",
       date: new Date(),
@@ -28,9 +26,11 @@ const queryHint = `{
       expandable1: $from,
       expandable2: $to,
       expandable3: $intervalMs
-    },
-  ],
-}`;
+    }
+    {
+      ...more stages
+    }
+  ]`;
 
 export function QueryEditor(props: Props) {
   const {
@@ -56,19 +56,24 @@ export function QueryEditor(props: Props) {
             },
             data: JSON.stringify(db),
           });
-          const collections = await lastValueFrom(response);
-          setCollections(collections.data);
+          const values = await lastValueFrom(response);
+          const collections = values.data;
+          if (collections.length > 0) {
+            onChange({ ...query, collection: collections[0] });
+          }
+          setCollections(collections);
           setSpinner(false);
         } catch (err: any) {
           setErrorMsg(err?.message ?? err);
         }
       })();
     }
+    // eslint-disable-next-line
   }, [db, baseUrl]);
 
   const queryUI = (
     <Stack gap={0} direction="column">
-      <InlineField label="Type" labelWidth={16} tooltip="Not used yet">
+      <InlineField label="Type" labelWidth={20}>
         <Select
           width={20}
           options={[
@@ -79,7 +84,7 @@ export function QueryEditor(props: Props) {
           onChange={(sv) => onChange({ ...query, queryType: sv.value!! })}
         />
       </InlineField>
-      <InlineField label="Type" labelWidth={16} tooltip="Not used yet">
+      <InlineField label="Collection Name" labelWidth={20}>
         <Select
           width={50}
           options={collections.map((collection) => ({
@@ -90,7 +95,7 @@ export function QueryEditor(props: Props) {
           onChange={(sv) => onChange({ ...query, collection: sv.value!! })}
         />
       </InlineField>
-      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
+      <InlineField label="Aggregation Pipeline" labelWidth={20}>
         <TextArea
           style={{ width: 500, minHeight: 200 }}
           value={queryText ?? ''}

frontend/src/datasource.ts

@@ -50,10 +50,14 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
 
   async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
     try {
+      const { targets } = options;
       const payload = {
         ...options,
+        targets: targets.map((target) => ({
+          ...target,
+          queryText: `{collection: "${target.collection}", aggregations: ${target.queryText}}`,
+        })),
         db: { ...this.db },
-        targets: options.targets.filter((target) => !!target.queryType),
       };
       const response = (await this.request('/query', payload)) as FetchResponse<
         TimeSeriesResponse[] | TableResponse[]