Merge pull request #713 from Altinity/variables-query-editor

Variables query editor
Altinity · Jan 27, 2025 · f36c00c · f36c00c
2 parents 6c9fa01 + fd20c57
commit f36c00c
Show file tree

Hide file tree

Showing 21 changed files with 531 additions and 249 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "luxon": "^3.5.0",
     "react": "18.3.0",
     "react-dom": "18.3.0",
+    "rxjs": "^7.8.1",
     "tslib": "2.5.3"
   },
   "packageManager": "[email protected]"

diff --git a/src/datasource/datasource.ts b/src/datasource/datasource.ts
@@ -16,7 +16,7 @@ import {
   LogRowContextQueryDirection,
   LogRowModel,
   QueryFilterOptions,
-  TypedVariableModel,
+  TypedVariableModel, VariableSupportType,
 } from '@grafana/data';
 import { BackendSrv, getBackendSrv, getTemplateSrv, TemplateSrv } from '@grafana/runtime';
 
@@ -25,6 +25,7 @@ import { SqlQueryHelper } from './sql-query/sql-query-helper';
 import SqlQueryMacros from './sql-query/sql-query-macros';
 import { QueryEditor } from '../views/QueryEditor/QueryEditor';
 import { getAdhocFilters } from '../views/QueryEditor/helpers/getAdHocFilters';
+import {from, Observable} from "rxjs";
 
 const adhocFilterVariable = 'adhoc_query_filter';
 export class CHDataSource
@@ -90,6 +91,15 @@ export class CHDataSource
     this.templateSrv = getTemplateSrv();
     this.adHocFilter = new AdHocFilter(this);
     this.responseParser = new ResponseParser();
+    this.variables = {
+      getType(): VariableSupportType {
+        return VariableSupportType.Custom;
+      },
+      // @ts-ignore
+      editor: QueryEditor,
+      query: this.query.bind(this),
+    }
+
     this.annotations = {
       QueryEditor: QueryEditor,
     };
@@ -346,62 +356,65 @@ export class CHDataSource
     return query.adHocFilters.some((f) => f.key === filter.key && f.value === filter.value);
   }
 
-  query(options: DataQueryRequest<CHQuery>) {
-    this.options = options;
-    const targets = options.targets.filter((target) => !target.hide && target.query);
-    const queries = targets.map((target) => this.createQuery(options, target));
-    // No valid targets, return the empty result to save a round trip.
-    if (!queries.length) {
-      return Promise.resolve({ data: [] });
-    }
+  query(options: DataQueryRequest<CHQuery>): Observable<any> {
+    const queryProcessing = async () => {
+      this.options = options;
+      const targets = options.targets.filter((target) => !target.hide && target.query);
+      const queries = await Promise.all(targets.map(async (target) => this.createQuery(options, target)));
+      // No valid targets, return the empty result to save a round trip.
+      if (!queries.length) {
+        return from(Promise.resolve({ data: [] }));
+      }
+      const allQueryPromise = queries.map((query) => {
+        return this._seriesQuery(query.stmt, query.requestId);
+      });
 
-    const allQueryPromise = queries.map((query) => {
-      return this._seriesQuery(query.stmt, query.requestId);
-    });
+      return Promise.all(allQueryPromise).then((responses: any): any => {
+        let result: any[] = [],
+          i = 0;
+        _.each(responses, (response) => {
+          const target = options.targets[i];
+          const keys = queries[i].keys;
 
-    return Promise.all(allQueryPromise).then((responses: any): any => {
-      let result: any[] = [],
-        i = 0;
-      _.each(responses, (response) => {
-        const target = options.targets[i];
-        const keys = queries[i].keys;
+          i++;
+          if (!response || !response.rows) {
+            return;
+          }
 
-        i++;
-        if (!response || !response.rows) {
-          return;
-        }
+          let sqlSeries = new SqlSeries({
+            refId: target.refId,
+            series: response.data,
+            meta: response.meta,
+            keys: keys,
+            tillNow: options.rangeRaw?.to === 'now',
+            from: SqlQueryHelper.convertTimestamp(options.range.from),
+            to: SqlQueryHelper.convertTimestamp(options.range.to),
+          });
 
-        let sqlSeries = new SqlSeries({
-          refId: target.refId,
-          series: response.data,
-          meta: response.meta,
-          keys: keys,
-          tillNow: options.rangeRaw?.to === 'now',
-          from: SqlQueryHelper.convertTimestamp(options.range.from),
-          to: SqlQueryHelper.convertTimestamp(options.range.to),
+          if (target.format === 'table') {
+            _.each(sqlSeries.toTable(), (data) => {
+              result.push(data);
+            });
+          } else if (target.format === 'traces') {
+            result = sqlSeries.toTraces();
+          } else if (target.format === 'flamegraph') {
+            result = sqlSeries.toFlamegraph();
+          } else if (target.format === 'logs') {
+            result = sqlSeries.toLogs();
+          } else if (target.refId === 'Anno') {
+            result = sqlSeries.toAnnotation(response.data, response.meta);
+          } else {
+            _.each(sqlSeries.toTimeSeries(target.extrapolate), (data) => {
+              result.push(data);
+            });
+          }
         });
 
-        if (target.format === 'table') {
-          _.each(sqlSeries.toTable(), (data) => {
-            result.push(data);
-          });
-        } else if (target.format === 'traces') {
-          result = sqlSeries.toTraces();
-        } else if (target.format === 'flamegraph') {
-          result = sqlSeries.toFlamegraph();
-        } else if (target.format === 'logs') {
-          result = sqlSeries.toLogs();
-        } else if (target.refId === 'Anno') {
-          result = sqlSeries.toAnnotation(response.data, response.meta);
-        } else {
-          _.each(sqlSeries.toTimeSeries(target.extrapolate), (data) => {
-            result.push(data);
-          });
-        }
+        return { data: result };
       });
+    };
 
-      return { data: result };
-    });
+    return from(queryProcessing());
   }
 
   modifyQuery(query: any, action: any): any {

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -49,6 +49,8 @@ export interface CHQuery extends DataQuery {
   contextWindowSize?: string;
   adHocValuesQuery?: string;
   useWindowFuncForMacros?: boolean;
+  showHelp: boolean;
+  showFormattedSQL: boolean;
 }
 
 /**
@@ -93,4 +95,6 @@ export const DEFAULT_QUERY: CHQuery = {
   rawQuery: '',
   editorMode: EditorMode.SQL,
   adHocFilters: [],
+  showHelp: false,
+  showFormattedSQL: false,
 };
diff --git a/src/views/QueryEditor/QueryEditor.tsx b/src/views/QueryEditor/QueryEditor.tsx
@@ -12,7 +12,7 @@ import { initializeQueryDefaults } from './helpers/initializeQueryDefaults';
 import './QueryEditor.css';
 import { getAdhocFilters } from './helpers/getAdHocFilters';
 
-export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDataSourceOptions>) {
+export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDataSourceOptions>): any {
   const { datasource, query, onChange, onRunQuery } = props;
   const isAnnotationView = !props.app;
   const initializedQuery = initializeQueryDefaults(query, isAnnotationView, datasource, onChange);