Refactor variable editor

Author: haohanyang

src/components/QueryEditor.tsx

@@ -11,14 +11,14 @@ import {
 } from '@grafana/ui';
 import { EditorHeader, InlineSelect, FlexItem } from '@grafana/plugin-ui';
 import { CoreApp, QueryEditorProps, SelectableValue, LoadingState } from '@grafana/data';
-import { DataSource } from '../datasource';
+import { MongoDBDataSource } from '../datasource';
 import { MongoDataSourceOptions, MongoQuery, QueryLanguage, QueryType, DEFAULT_QUERY } from '../types';
 import { parseJsQuery, parseJsQueryLegacy } from '../utils';
 import { QueryEditorRaw } from './QueryEditorRaw';
 import { QueryToolbox } from './QueryToolbox';
 import validator from 'validator';
 
-type Props = QueryEditorProps<DataSource, MongoQuery, MongoDataSourceOptions>;
+type Props = QueryEditorProps<MongoDBDataSource, MongoQuery, MongoDataSourceOptions>;
 
 const queryTypes: Array<SelectableValue<string>> = [
   {

src/components/QueryToolbox.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { css } from '@emotion/css';
-import { useMemo, useState } from 'react';
 import { Stack, IconButton, useTheme2 } from '@grafana/ui';
 
 interface QueryToolboxProps {

src/components/VariableQueryEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { VariableQuery } from '../types';
-import { CodeEditor, Field, InlineField, Input, Button, Alert } from '@grafana/ui';
+import { InlineField, Input, Alert, InlineFieldRow, Button } from '@grafana/ui';
+import { QueryEditorRaw } from './QueryEditorRaw';
 
 interface VariableQueryProps {
   query: VariableQuery;
@@ -9,53 +10,44 @@ interface VariableQueryProps {
 
 export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) => {
   const [state, setState] = useState(query);
-
-  const saveQuery = () => {
-    onChange(state, `${state.collection} (${state.queryText})`);
-  };
-
-  const handleCollectionChange = (event: React.FormEvent<HTMLInputElement>) =>
-    setState({
-      ...state,
-      collection: event.currentTarget.value,
-    });
-
-  const handleQueryTextChange = (text: string) =>
-    setState({
-      ...state,
-      queryText: text,
-    });
-
   return (
     <>
-      <InlineField
-        label="Collection"
-        tooltip="Enter the MongoDB collection"
-        error="Please enter the collection"
-        invalid={!query.collection}
-      >
-        <Input name="collection" onChange={handleCollectionChange} value={state.collection}></Input>
-      </InlineField>
-      <Field label="Query Text" description="MongoDB aggregate (JSON)">
-        <CodeEditor
-          width="100%"
-          height={300}
-          language="json"
-          onBlur={saveQuery}
-          value={query.queryText || ''}
-          showMiniMap={false}
-          showLineNumbers={true}
-          onChange={handleQueryTextChange}
-          monacoOptions={{ fontSize: 14 }}
-        />
-      </Field>
-      <Alert title="Query info" severity="info">
+      <InlineFieldRow>
+        <InlineField
+          label="Collection"
+          tooltip="Name of MongoDB collection to query"
+          error="Collection is required"
+          invalid={!state.collection}
+        >
+          <Input
+            name="collection"
+            onChange={(evt) => setState({ ...state, collection: evt.currentTarget.value })}
+            value={state.collection}
+          ></Input>
+        </InlineField>
+        <Button
+          onClick={() => {
+            onChange(
+              { queryText: state.queryText, collection: state.collection },
+              `${state.collection} (${state.queryText})`,
+            );
+          }}
+        >
+          Save and Query
+        </Button>
+      </InlineFieldRow>
+
+      <QueryEditorRaw
+        query={query.queryText ?? ''}
+        language="json"
+        onBlur={(queryText) => setState({ ...query, queryText: queryText })}
+        height={300}
+        fontSize={14}
+      />
+      <Alert title="Query info" severity="info" style={{ marginTop: 2 }}>
         The query result is expected to contain <code>value</code> field which has elements of type <code>string</code>{' '}
         or <code>number</code>
       </Alert>
-      <Button onClick={saveQuery} variant="primary">
-        Query
-      </Button>
     </>
   );
 };

src/datasource.ts

@@ -10,7 +10,7 @@ import {
   DataQueryResponse,
   LoadingState
 } from '@grafana/data';
-import { DataSourceWithBackend, getGrafanaLiveSrv, getTemplateSrv } from '@grafana/runtime';
+import { DataSourceWithBackend, getGrafanaLiveSrv, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
 import {
   parseJsQuery,
   getBucketCount,
@@ -23,10 +23,13 @@ import {
 } from './utils';
 import { MongoQuery, MongoDataSourceOptions, DEFAULT_QUERY, QueryLanguage, VariableQuery } from './types';
 import { firstValueFrom, merge, Observable, of } from 'rxjs';
+import { MongoDBVariableSupport } from 'variables'
 
-export class DataSource extends DataSourceWithBackend<MongoQuery, MongoDataSourceOptions> {
-  constructor(instanceSettings: DataSourceInstanceSettings<MongoDataSourceOptions>) {
+export class MongoDBDataSource extends DataSourceWithBackend<MongoQuery, MongoDataSourceOptions> {
+  constructor(instanceSettings: DataSourceInstanceSettings<MongoDataSourceOptions>,
+    private readonly templateSrv: TemplateSrv = getTemplateSrv()) {
     super(instanceSettings);
+    this.variables = new MongoDBVariableSupport(this, this.templateSrv);
   }
 
   getDefaultQuery(_: CoreApp): Partial<MongoQuery> {

src/module.ts

@@ -1,13 +1,11 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { DataSource } from './datasource';
+import { MongoDBDataSource } from './datasource';
 import { ConfigEditor } from './components/ConfigEditor';
 import { QueryEditor } from './components/QueryEditor';
 import { QueryHelper } from './components/QueryHelper';
-import { VariableQueryEditor } from './components/VariableQueryEditor';
 import { MongoQuery, MongoDataSourceOptions } from './types';
 
-export const plugin = new DataSourcePlugin<DataSource, MongoQuery, MongoDataSourceOptions>(DataSource)
+export const plugin = new DataSourcePlugin<MongoDBDataSource, MongoQuery, MongoDataSourceOptions>(MongoDBDataSource)
   .setConfigEditor(ConfigEditor)
   .setQueryEditor(QueryEditor)
   .setQueryEditorHelp(QueryHelper)
-  .setVariableQueryEditor(VariableQueryEditor);

src/variables.ts

@@ -0,0 +1,20 @@
+import { CustomVariableSupport, DataQueryRequest, DataQueryResponse, QueryEditorProps, StandardVariableQuery, StandardVariableSupport } from '@grafana/data';
+import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
+import { MongoDBDataSource } from 'datasource';
+import { Observable } from 'rxjs';
+import { VariableQueryEditor } from './components/VariableQueryEditor';
+
+
+export class MongoDBVariableSupport extends CustomVariableSupport<MongoDBDataSource> {
+  constructor(
+    private readonly datasource: MongoDBDataSource,
+    private readonly templateSrv: TemplateSrv = getTemplateSrv()
+  ) {
+    super();
+  }
+  query(request: DataQueryRequest<any>): Observable<DataQueryResponse> {
+    throw new Error('Method not implemented.');
+  }
+
+  editor = VariableQueryEditor
+}