Support log volume for SQL editor

package.json

@@ -47,7 +47,11 @@
     "copy-webpack-plugin": "^12.0.2",
     "cspell": "^9.4.0",
     "css-loader": "^7.1.2",
+    "eslint": "8.57.0",
     "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-jsdoc": "^61.5.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-webpack-plugin": "^4.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "glob": "^11.0.0",
@@ -76,10 +80,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",
     "react": "18.3.1",

src/components/configEditor/AliasTableConfig.tsx

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

src/components/configEditor/HttpHeadersConfig.tsx

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

src/components/queryBuilder/AggregateEditor.tsx

@@ -43,7 +43,7 @@
   }
 
   return (
     <HorizontalGroup wrap align="flex-start" justify="flex-start">
       <Select
         width={20}
         className={styles.Common.inlineSelect}
@@ -82,6 +82,7 @@
         size="sm"
         icon="trash-alt"
         onClick={() => removeAggregate(index)}
+        aria-label="aggregate-remove-item"
       />
     </HorizontalGroup>
   );

src/components/queryBuilder/ColumnsEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { InlineFormLabel, MultiSelect } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { TableColumn, SelectedColumn } from 'types/queryBuilder';
@@ -34,15 +34,11 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
 
   const options = [...allColumnNames, ...customColumns];
 
-  useEffect(() => {
-    if (allColumns.length === 0) {
-      return;
-    }
-
+  if (allColumns.length !== 0) {
     const columnNames = selectedColumns.map((c) => c.name);
     const customColumns = getCustomColumns(columnNames, allColumns);
     setCustomColumns(customColumns);
-  }, [allColumns, selectedColumns]);
+  }
 
   const onChange = (selected: Array<SelectableValue<string>>): void => {
     setIsOpen(false);

src/components/queryBuilder/FilterEditor.tsx

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

src/components/queryBuilder/OrderByEditor.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/views/logsQueryBuilderHooks.ts

@@ -1,6 +1,7 @@
 import { Datasource } from 'data/CHDatasource';
 import { columnFilterDateTime } from 'data/columnFilters';
 import { BuilderOptionsReducerAction, setColumnByHint, setOptions } from 'hooks/useBuilderOptionsState';
+import otel from 'otel';
 import { useEffect, useMemo, useRef } from 'react';
 import {
   ColumnHint,
@@ -14,7 +15,6 @@ import {
   StringFilter,
   TableColumn,
 } from 'types/queryBuilder';
-import otel from 'otel';
 
 /**
  * Loads the default configuration for new queries. (Only runs on new queries)
@@ -90,12 +90,9 @@ export const useOtelColumns = (
   builderOptionsDispatch: React.Dispatch<BuilderOptionsReducerAction>
 ) => {
   const didSetColumns = useRef<boolean>(otelEnabled);
-  if (!otelEnabled) {
-    didSetColumns.current = false;
-  }
 
   useEffect(() => {
-    if (!otelEnabled || didSetColumns.current || allColumns.length === 0) {
+    if (!otelEnabled || allColumns.length === 0) {
       return;
     }
 
@@ -145,14 +142,17 @@ export const useDefaultTimeColumn = (
   );
   const didSetDefaultTime = useRef<boolean>(Boolean(timeColumn) || hasDefaultColumnConfigured);
   const lastTable = useRef<string>(table || '');
-  if (table !== lastTable.current) {
-    didSetDefaultTime.current = false;
-  }
 
-  if (Boolean(timeColumn) || otelEnabled) {
-    lastTable.current = table;
-    didSetDefaultTime.current = true;
-  }
+  useEffect(() => {
+    if (table !== lastTable.current) {
+      didSetDefaultTime.current = false;
+    }
+
+    if (Boolean(timeColumn) || otelEnabled) {
+      lastTable.current = table;
+      didSetDefaultTime.current = true;
+    }
+  }, [table, timeColumn, otelEnabled]);
 
   useEffect(() => {
     if (didSetDefaultTime.current || allColumns.length === 0 || !table) {
@@ -184,9 +184,12 @@ export const useDefaultFilters = (
 ) => {
   const appliedDefaultFilters = useRef<boolean>(!isNewQuery);
   const lastTable = useRef<string>(table || '');
-  if (table !== lastTable.current) {
-    appliedDefaultFilters.current = false;
-  }
+
+  useEffect(() => {
+    if (table !== lastTable.current) {
+      appliedDefaultFilters.current = false;
+    }
+  }, [table]);
 
   useEffect(() => {
     if (!table || appliedDefaultFilters.current) {

src/components/queryBuilder/views/timeSeriesQueryBuilderHooks.ts

@@ -21,9 +21,12 @@ export const useDefaultTimeColumn = (
 ) => {
   const didSetDefaultTime = useRef<boolean>(Boolean(timeColumn));
   const lastTable = useRef<string>(table || '');
-  if (table !== lastTable.current) {
-    didSetDefaultTime.current = false;
-  }
+
+  useEffect(() => {
+    if (table !== lastTable.current) {
+      didSetDefaultTime.current = false;
+    }
+  }, [table]);
 
   useEffect(() => {
     if (didSetDefaultTime.current || allColumns.length === 0 || !table) {
@@ -55,9 +58,12 @@ export const useDefaultFilters = (
 ) => {
   const appliedDefaultFilters = useRef<boolean>(!isNewQuery);
   const lastTable = useRef<string>(table || '');
-  if (table !== lastTable.current) {
-    appliedDefaultFilters.current = false;
-  }
+
+  useEffect(() => {
+    if (table !== lastTable.current) {
+      appliedDefaultFilters.current = false;
+    }
+  }, [table]);
 
   useEffect(() => {
     if (!table || appliedDefaultFilters.current) {

src/components/queryBuilder/views/traceQueryBuilderHooks.ts

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef } from 'react';
 import { Datasource } from 'data/CHDatasource';
+import { BuilderOptionsReducerAction, setOptions } from 'hooks/useBuilderOptionsState';
 import otel from 'otel';
+import React, { useEffect, useRef } from 'react';
 import {
   ColumnHint,
   DateFilterWithoutValue,
@@ -13,7 +14,6 @@ import {
   SelectedColumn,
   StringFilter,
 } from 'types/queryBuilder';
-import { BuilderOptionsReducerAction, setOptions } from 'hooks/useBuilderOptionsState';
 
 /**
  * Loads the default configuration for new queries. (Only runs on new queries)
@@ -80,9 +80,12 @@ export const useOtelColumns = (
   builderOptionsDispatch: React.Dispatch<BuilderOptionsReducerAction>
 ) => {
   const didSetColumns = useRef<boolean>(otelEnabled);
-  if (!otelEnabled) {
-    didSetColumns.current = false;
-  }
+
+  useEffect(() => {
+    if (!otelEnabled) {
+      didSetColumns.current = false;
+    }
+  }, [otelEnabled]);
 
   useEffect(() => {
     if (!otelEnabled || didSetColumns.current) {
@@ -124,9 +127,12 @@ export const useDefaultFilters = (
 ) => {
   const appliedDefaultFilters = useRef<boolean>(!isNewQuery);
   const lastTable = useRef<string>(table || '');
-  if (table !== lastTable.current) {
-    appliedDefaultFilters.current = false;
-  }
+
+  useEffect(() => {
+    if (table !== lastTable.current) {
+      appliedDefaultFilters.current = false;
+    }
+  }, [table]);
 
   useEffect(() => {
     if (isTraceIdMode || !table || appliedDefaultFilters.current) {

src/data/CHDatasource.test.ts

@@ -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.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];
   }
 
@@ -228,7 +231,7 @@ export class Datasource
     }
     // convention - assume the first field is an id field
     const ids = frame?.fields[0]?.values;
-    return frame?.fields[1]?.values.map((text, i) => ({ text, value: ids.get(i) }));
+    return frame?.fields[1]?.values.map((text, i) => ({ text, value: ids[i] }));
   }
 
   applyTemplateVariables(query: CHQuery, scoped: ScopedVars, filters: AdHocVariableFilter[] = []): CHQuery {
@@ -963,7 +966,7 @@ export class Datasource
         continue;
       }
 
-      let value = field.values.get(row.rowIndex);
+      let value = field.values[row.rowIndex];
       if (value && field.type === 'other' && isMapKey) {
         value = value[keyName];
       }

src/views/config-v2/AliasTableConfigV2.tsx

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