Support log volume for SQL editor (#1475)

Author: aangelisc

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Features
+
+- Support log volume queries for the SQL editor. Note that this will only work for Grafana versions >= 12.4.0 (#1475)
+
 ## 4.11.4
 
 ## Fixes
@@ -11,7 +17,7 @@
 
 ## 4.11.3
 
-## Fixes
+### Fixes
 
 - Fix config UI bugs (#1409) and update design (#1422)
 - Dependency updates

package-lock.json

@@ -86,10 +86,10 @@
   },
   "dependencies": {
     "@emotion/css": "11.13.5",
-    "@grafana/data": "^11.6.6",
-    "@grafana/runtime": "^11.6.6",
-    "@grafana/schema": "^11.6.6",
-    "@grafana/ui": "^11.6.6",
+    "@grafana/data": "12.4.0-20238213662",
+    "@grafana/runtime": "12.4.0-20238213662",
+    "@grafana/schema": "12.4.0-20238213662",
+    "@grafana/ui": "12.4.0-20238213662",
     "js-sql-parser": "^1.6.0",
     "pgsql-ast-parser": "^12.0.1",
     "semver": "^7.7.3",

package.json

@@ -172,6 +172,7 @@ const AliasTableEditor = (props: AliasTableEditorProps) => {
             size="sm"
             icon="trash-alt"
             onClick={onRemove}
+            aria-label="alias-remove-entry"
           />
         )}
       </Stack>

src/components/configEditor/AliasTableConfig.tsx

@@ -170,6 +170,7 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
             size="sm"
             icon="trash-alt"
             onClick={onRemove}
+            aria-label="http-header-remove"
           />
         )}
       </Stack>

src/components/configEditor/HttpHeadersConfig.tsx

@@ -82,6 +82,7 @@ const Aggregate = (props: AggregateProps) => {
         size="sm"
         icon="trash-alt"
         onClick={() => removeAggregate(index)}
+        aria-label="aggregate-remove-item"
       />
     </HorizontalGroup>
   );

src/components/queryBuilder/AggregateEditor.tsx

@@ -406,6 +406,7 @@ export const FilterEditor = (props: {
         size="sm"
         className={styles.Common.smallBtn}
         onClick={() => removeFilter(index)}
+        aria-label="query-builder-filters-remove-button"
       />
     </HorizontalGroup>
   );

src/components/queryBuilder/FilterEditor.tsx

@@ -50,6 +50,7 @@ const OrderByItem = (props: OrderByItemProps) => {
         size="sm"
         icon="trash-alt"
         onClick={() => removeOrderByItem(index)}
+        aria-label="order-by-remove-item"
       />
     </>
   );

src/components/queryBuilder/OrderByEditor.tsx

@@ -5,19 +5,19 @@ import {
   DataQueryResponse,
   SupplementaryQueryType,
   TimeRange,
-  TypedVariableModel,
   toDataFrame,
+  TypedVariableModel,
 } from '@grafana/data';
-import { DataQuery } from '@grafana/schema';
-import { Observable, of } from 'rxjs';
 import { DataSourceWithBackend } from '@grafana/runtime';
+import { DataQuery } from '@grafana/schema';
 import { mockDatasource } from '__mocks__/datasource';
-import { CHBuilderQuery, CHQuery, CHSqlQuery, EditorType } from 'types/sql';
-import { ColumnHint, QueryType, BuilderMode, QueryBuilderOptions } from 'types/queryBuilder';
 import { cloneDeep } from 'lodash';
+import { Observable, of } from 'rxjs';
+import { BuilderMode, ColumnHint, QueryBuilderOptions, QueryType } from 'types/queryBuilder';
+import { CHBuilderQuery, CHQuery, CHSqlQuery, EditorType } from 'types/sql';
+import { AdHocFilter } from './adHocFilter';
 import { Datasource } from './CHDatasource';
 import * as logs from './logs';
-import { AdHocFilter } from './adHocFilter';
 
 jest.mock('./logs', () => ({
   getTimeFieldRoundingClause: jest.fn(),
@@ -517,6 +517,42 @@ describe('ClickHouseDatasource', () => {
       datasource = cloneDeep(mockDatasource);
     });
 
+    describe('getSupportedSupplementaryQueryTypes', () => {
+      it('should return LogsVolume for empty dsRequest', async () => {
+        const result = datasource.getSupportedSupplementaryQueryTypes();
+        expect(result).toEqual([SupplementaryQueryType.LogsVolume]);
+      });
+
+      it('should return LogsVolume when all targets use Builder editor', async () => {
+        const dsRequest: DataQueryRequest<CHQuery> = {
+          ...request,
+          targets: [
+            {
+              ...query,
+              editorType: EditorType.Builder,
+            },
+          ],
+        };
+        const result = datasource.getSupportedSupplementaryQueryTypes(dsRequest);
+        expect(result).toEqual([SupplementaryQueryType.LogsVolume]);
+      });
+
+      it('should return empty array when any target uses SQL editor', async () => {
+        const dsRequest: DataQueryRequest<CHQuery> = {
+          ...request,
+          targets: [
+            {
+              ...query,
+              editorType: EditorType.SQL,
+              queryType: query.builderOptions.queryType,
+            },
+          ],
+        };
+        const result = datasource.getSupportedSupplementaryQueryTypes(dsRequest);
+        expect(result).toEqual([]);
+      });
+    });
+
     describe('getSupplementaryLogsVolumeQuery', () => {
       it('should return undefined if any of the conditions are not met', async () => {
         [QueryType.Table, QueryType.TimeSeries, QueryType.Traces].forEach((queryType) => {

src/data/CHDatasource.test.ts

@@ -20,26 +20,30 @@ import {
   TypedVariableModel,
 } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
-import { Observable, map, firstValueFrom } from 'rxjs';
+import LogsContextPanel from 'components/LogsContextPanel';
+import { cloneDeep, isEmpty, isString } from 'lodash';
+import otel from 'otel';
+import { createElement as createReactElement, ReactNode } from 'react';
+import { firstValueFrom, map, Observable } from 'rxjs';
 import { CHConfig } from 'types/config';
-import { EditorType, CHQuery } from 'types/sql';
 import {
-  QueryType,
   AggregateColumn,
   AggregateType,
   BuilderMode,
+  ColumnHint,
   Filter,
   FilterOperator,
-  TableColumn,
   OrderByDirection,
   QueryBuilderOptions,
-  ColumnHint,
-  TimeUnit,
+  QueryType,
   SelectedColumn,
   SqlFunction,
+  TableColumn,
+  TimeUnit,
 } from 'types/queryBuilder';
+import { CHQuery, EditorType } from 'types/sql';
+import { pluginVersion } from 'utils/version';
 import { AdHocFilter } from './adHocFilter';
-import { cloneDeep, isEmpty, isString } from 'lodash';
 import {
   DEFAULT_LOGS_ALIAS,
   getIntervalInfo,
@@ -49,11 +53,7 @@ import {
   TIME_FIELD_ALIAS,
 } from './logs';
 import { generateSql, getColumnByHint, logAliasToColumnHints } from './sqlGenerator';
-import otel from 'otel';
-import { createElement as createReactElement, ReactNode } from 'react';
 import { dataFrameHasLogLabelWithName, transformQueryResponseWithTraceAndLogLinks } from './utils';
-import { pluginVersion } from 'utils/version';
-import LogsContextPanel from 'components/LogsContextPanel';
 
 export class Datasource
   extends DataSourceWithBackend<CHQuery, CHConfig>
@@ -121,7 +121,10 @@ export class Datasource
     }
   }
 
-  getSupportedSupplementaryQueryTypes(): SupplementaryQueryType[] {
+  getSupportedSupplementaryQueryTypes(dsRequest?: DataQueryRequest<CHQuery>): SupplementaryQueryType[] {
+    if (dsRequest && dsRequest.targets.some((t) => t.editorType !== EditorType.Builder)) {
+      return [];
+    }
     return [SupplementaryQueryType.LogsVolume];
   }