prepare query upgrade

Author: wtao

backend/Dockerfile

@@ -0,0 +1,20 @@
+# Use the official Node.js image as base
+FROM node:20
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose port 4000 to the outside world
+EXPOSE 4000
+
+# Command to run the application
+CMD ["node", "index.mjs"]

backend/express.mjs

@@ -41,3 +41,18 @@ export const dbQuery = async (req, res, next) => {
     next(err);
   }
 };
+
+// grafana: getall collection names
+export const dbCollections = async (req, res) => {
+  const { url, db } = req.body;
+  let client = null;
+  try {
+    client = new MongoClient(url);
+    await client.connect();
+    const cursor = await client.db(db).listCollections().toArray();
+    const collections = cursor.map((collection) => collection.name);
+    res.json(collections);
+  } finally {
+    client?.close();
+  }
+};

backend/index-sls.mjs

@@ -1,6 +1,6 @@
 import express from "express";
 import serverless from "serverless-http";
-import { dbConfig, dbQuery } from "./express.mjs";
+import { dbConfig, dbQuery, dbCollections } from "./express.mjs";
 
 const app = express();
 app.use(express.json());
@@ -18,6 +18,9 @@ app.all(`${awsApiGatewayRoute}/`, dbConfig);
 // grafana: qeury
 app.all(`${awsApiGatewayRoute}/query`, dbQuery);
 
+// grafana: getall collection names
+app.all(`${awsApiGatewayRoute}/collections`, dbCollections);
+
 //default error handler
 app.use((err, req, res, next) => {
   console.error(err.stack);

backend/index.mjs

@@ -1,6 +1,6 @@
 import express from "express";
 import cors from "cors";
-import { dbConfig, dbQuery } from "./express.mjs";
+import { dbConfig, dbQuery, dbCollections } from "./express.mjs";
 
 const app = express();
 app.use(express.json());
@@ -12,6 +12,9 @@ app.all("/", dbConfig);
 // grafana: qeury
 app.all("/query", dbQuery);
 
+// grafana: getall collection names
+app.all("/collections", dbCollections);
+
 //default error handler
 app.use((err, req, res, next) => {
   console.error(err.stack);

frontend/src/components/QueryEditor.tsx

@@ -1,8 +1,18 @@
 import React from 'react';
-import { InlineField, TextArea, Stack, Select } from '@grafana/ui';
+import {
+  InlineField,
+  TextArea,
+  Stack,
+  Select,
+  Modal,
+  Button,
+  Spinner,
+} from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../datasource';
 import { MyDataSourceOptions, MyQuery, QueryType } from '../types';
+import { getBackendSrv } from '@grafana/runtime';
+import { lastValueFrom } from 'rxjs';
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
@@ -22,10 +32,41 @@ const queryHint = `{
   ],
 }`;
 
-export function QueryEditor({ query, onChange, onRunQuery }: Props) {
-  const { queryText, queryType } = query;
+export function QueryEditor(props: Props) {
+  const {
+    query,
+    datasource: { baseUrl, db },
+    onChange,
+    onRunQuery,
+  } = props;
+  const { collection, queryText, queryType } = query;
+  const [collections, setCollections] = React.useState<string[]>([]);
+  const [spinner, setSpinner] = React.useState(true);
+  const [errorMsg, setErrorMsg] = React.useState('');
 
-  return (
+  React.useEffect(() => {
+    if (!!db && !!baseUrl) {
+      (async () => {
+        try {
+          const response = await getBackendSrv().fetch<string[]>({
+            url: `${baseUrl}/collections`,
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            data: JSON.stringify(db),
+          });
+          const collections = await lastValueFrom(response);
+          setCollections(collections.data);
+          setSpinner(false);
+        } catch (err: any) {
+          setErrorMsg(err?.message ?? err);
+        }
+      })();
+    }
+  }, [db, baseUrl]);
+
+  const queryUI = (
     <Stack gap={0} direction="column">
       <InlineField label="Type" labelWidth={16} tooltip="Not used yet">
         <Select
@@ -38,9 +79,20 @@ export function QueryEditor({ query, onChange, onRunQuery }: Props) {
           onChange={(sv) => onChange({ ...query, queryType: sv.value!! })}
         />
       </InlineField>
+      <InlineField label="Type" labelWidth={16} tooltip="Not used yet">
+        <Select
+          width={50}
+          options={collections.map((collection) => ({
+            label: collection,
+            value: collection,
+          }))}
+          value={collection}
+          onChange={(sv) => onChange({ ...query, collection: sv.value!! })}
+        />
+      </InlineField>
       <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
         <TextArea
-          style={{ width: 500, minHeight:200 }}
+          style={{ width: 500, minHeight: 200 }}
           value={queryText ?? ''}
           placeholder={queryHint}
           onChange={(event) => {
@@ -54,4 +106,18 @@ export function QueryEditor({ query, onChange, onRunQuery }: Props) {
       </InlineField>
     </Stack>
   );
+
+  const loadingUI = (
+    <Stack gap={0} direction="column">
+      <Spinner />
+      <Modal title="error" isOpen={!!errorMsg}>
+        {errorMsg}
+        <Modal.ButtonRow>
+          <Button onClick={() => setErrorMsg('')}>Ok</Button>
+        </Modal.ButtonRow>
+      </Modal>
+    </Stack>
+  );
+
+  return spinner ? loadingUI : queryUI;
 }

frontend/src/datasource.ts

@@ -1,4 +1,4 @@
-import { FetchResponse, getBackendSrv, isFetchError } from '@grafana/runtime';
+import { FetchResponse, getBackendSrv } from '@grafana/runtime';
 import {
   CoreApp,
   DataQueryRequest,
@@ -15,7 +15,6 @@ import {
   QueryType,
 } from './types';
 import { lastValueFrom } from 'rxjs';
-import _ from 'lodash';
 
 interface PluginConfigs {
   url: string;
@@ -25,7 +24,6 @@ interface PluginConfigs {
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
   baseUrl: string;
   db: PluginConfigs;
-  defaultErrorMessage = 'unknown error';
 
   constructor(
     instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>,
@@ -61,18 +59,8 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
         TimeSeriesResponse[] | TableResponse[]
       >;
       return { data: response.data };
-    } catch (err) {
-      let message = '';
-      if (_.isString(err)) {
-        message = err;
-      } else if (isFetchError(err)) {
-        message =
-          'Fetch error: ' + (err.statusText ?? this.defaultErrorMessage);
-        if (err.data && err.data.error && err.data.error.code) {
-          message += ': ' + err.data.error.code + '. ' + err.data.error.message;
-        }
-      }
-      return { data: [], error: { message } };
+    } catch (err: any) {
+      return { data: [], error: { message: err?.message ?? err } };
     }
   }
 
@@ -111,23 +99,13 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
       } else {
         return {
           status: 'error',
-          message: response.data.message ?? this.defaultErrorMessage,
+          message: response.data.message ?? 'unknown',
         };
       }
-    } catch (err) {
-      let message = '';
-      if (_.isString(err)) {
-        message = err;
-      } else if (isFetchError(err)) {
-        message =
-          'Fetch error: ' + (err.statusText ?? this.defaultErrorMessage);
-        if (err.data && err.data.error && err.data.error.code) {
-          message += ': ' + err.data.error.code + '. ' + err.data.error.message;
-        }
-      }
+    } catch (err: any) {
       return {
         status: 'error',
-        message,
+        message: err?.message ?? err,
       };
     }
   }

frontend/src/types.ts

@@ -7,6 +7,7 @@ export enum QueryType {
 }
 
 export interface MyQuery extends DataQuery {
+  collection: string;
   queryText: string;
   queryType: QueryType;
 }