From 6af5aa0253f60b5bd859bdbe92c72d5cb4dc76af Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Mon, 10 Jun 2024 12:43:03 +0530 Subject: [PATCH] fix: clickhouse and promQL queries table column headers not handled (#5164) * fix: clickhouse and promQL queries table column headers not handled * fix: handling of per query units for clickhouse and promQL queries as well --- .../ColumnUnitSelector/ColumnUnitSelector.tsx | 9 +- .../lib/query/createTableColumnsFromQuery.ts | 144 +++++++++++++----- 2 files changed, 118 insertions(+), 35 deletions(-) diff --git a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx index 6eff73fdf6..8ed4c898a7 100644 --- a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx +++ b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx @@ -4,6 +4,7 @@ import { Typography } from 'antd'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { Dispatch, SetStateAction } from 'react'; import { ColumnUnit } from 'types/api/dashboard/getAll'; +import { EQueryType } from 'types/common/dashboard'; import YAxisUnitSelector from '../YAxisUnitSelector'; @@ -18,7 +19,13 @@ export function ColumnUnitSelector( const { currentQuery } = useQueryBuilder(); function getAggregateColumnsNamesAndLabels(): string[] { - return currentQuery.builder.queryData.map((q) => q.queryName); + if (currentQuery.queryType === EQueryType.QUERY_BUILDER) { + return currentQuery.builder.queryData.map((q) => q.queryName); + } + if (currentQuery.queryType === EQueryType.CLICKHOUSE) { + return currentQuery.clickhouse_sql.map((q) => q.name); + } + return currentQuery.promql.map((q) => q.name); } const { columnUnits, setColumnUnits } = props; diff --git a/frontend/src/lib/query/createTableColumnsFromQuery.ts b/frontend/src/lib/query/createTableColumnsFromQuery.ts index 85b876dc11..28b5b3dc67 100644 --- a/frontend/src/lib/query/createTableColumnsFromQuery.ts +++ b/frontend/src/lib/query/createTableColumnsFromQuery.ts @@ -1,20 +1,25 @@ import { ColumnsType } from 'antd/es/table'; import { ColumnType } from 'antd/lib/table'; import { + initialClickHouseData, initialFormulaBuilderFormValues, initialQueryBuilderFormValues, + initialQueryPromQLData, } from 'constants/queryBuilder'; import { FORMULA_REGEXP } from 'constants/regExp'; import { QUERY_TABLE_CONFIG } from 'container/QueryTable/config'; import { QueryTableProps } from 'container/QueryTable/QueryTable.intefaces'; -import { isEqual, isNaN, isObject } from 'lodash-es'; +import { get, isEqual, isNaN, isObject } from 'lodash-es'; import { ReactNode } from 'react'; import { IBuilderFormula, IBuilderQuery, + IClickHouseQuery, + IPromQLQuery, Query, } from 'types/api/queryBuilder/queryBuilderData'; import { ListItem, QueryDataV3, SeriesItem } from 'types/api/widgets/getQuery'; +import { EQueryType } from 'types/common/dashboard'; import { QueryBuilderData } from 'types/common/queryBuilder'; import { v4 as uuid } from 'uuid'; @@ -30,7 +35,7 @@ export type RowData = { }; export type DynamicColumn = { - query: IBuilderQuery | IBuilderFormula; + query: IBuilderQuery | IBuilderFormula | IClickHouseQuery | IPromQLQuery; field: string; dataIndex: string; title: string; @@ -75,24 +80,43 @@ const isValueExist = ( }; const getQueryByName = ( - builder: QueryBuilderData, + query: Query, currentQueryName: string, type: T, -): T extends 'queryData' ? IBuilderQuery : IBuilderFormula => { - const queryArray = builder[type]; - const defaultValue = - type === 'queryData' - ? initialQueryBuilderFormValues - : initialFormulaBuilderFormValues; +): IBuilderQuery | IBuilderFormula | IClickHouseQuery | IPromQLQuery => { + if (query.queryType === EQueryType.CLICKHOUSE) { + const queryArray = query.clickhouse_sql; + const defaultQueryValue = initialClickHouseData; - const currentQuery = - queryArray.find((q) => q.queryName === currentQueryName) || defaultValue; + return ( + queryArray.find((q) => q.name === currentQueryName) || defaultQueryValue + ); + } + if (query.queryType === EQueryType.QUERY_BUILDER) { + const queryArray = query.builder[type]; + const defaultValue = + type === 'queryData' + ? initialQueryBuilderFormValues + : initialFormulaBuilderFormValues; - return currentQuery as T extends 'queryData' ? IBuilderQuery : IBuilderFormula; + const currentQuery = + queryArray.find((q) => q.queryName === currentQueryName) || defaultValue; + + return currentQuery as T extends 'queryData' + ? IBuilderQuery + : IBuilderFormula; + } + + const queryArray = query.promql; + const defaultQueryValue = initialQueryPromQLData; + + return ( + queryArray.find((q) => q.name === currentQueryName) || defaultQueryValue + ); }; const addLabels = ( - query: IBuilderQuery | IBuilderFormula, + query: IBuilderQuery | IBuilderFormula | IClickHouseQuery | IPromQLQuery, label: string, dynamicColumns: DynamicColumns, ): void => { @@ -111,11 +135,13 @@ const addLabels = ( }; const addOperatorFormulaColumns = ( - query: IBuilderFormula | IBuilderQuery, + query: IBuilderFormula | IBuilderQuery | IClickHouseQuery | IPromQLQuery, dynamicColumns: DynamicColumns, + queryType: EQueryType, customLabel?: string, + // eslint-disable-next-line sonarjs/cognitive-complexity ): void => { - if (isFormula(query.queryName)) { + if (isFormula(get(query, 'queryName', ''))) { const formulaQuery = query as IBuilderFormula; let formulaLabel = `${formulaQuery.queryName}(${formulaQuery.expression})`; @@ -137,27 +163,68 @@ const addOperatorFormulaColumns = ( return; } - const currentQueryData = query as IBuilderQuery; + if (queryType === EQueryType.QUERY_BUILDER) { + const currentQueryData = query as IBuilderQuery; + let operatorLabel = `${currentQueryData.aggregateOperator}`; + if (currentQueryData.aggregateAttribute.key) { + operatorLabel += `(${currentQueryData.aggregateAttribute.key})`; + } - let operatorLabel = `${currentQueryData.aggregateOperator}`; - if (currentQueryData.aggregateAttribute.key) { - operatorLabel += `(${currentQueryData.aggregateAttribute.key})`; + if (currentQueryData.legend) { + operatorLabel = currentQueryData.legend; + } + + const operatorColumn: DynamicColumn = { + query, + field: currentQueryData.queryName, + dataIndex: currentQueryData.queryName, + title: customLabel || operatorLabel, + data: [], + type: 'operator', + }; + + dynamicColumns.push(operatorColumn); } - if (currentQueryData.legend) { - operatorLabel = currentQueryData.legend; + if (queryType === EQueryType.CLICKHOUSE) { + const currentQueryData = query as IClickHouseQuery; + let operatorLabel = `${currentQueryData.name}`; + + if (currentQueryData.legend) { + operatorLabel = currentQueryData.legend; + } + + const operatorColumn: DynamicColumn = { + query, + field: currentQueryData.name, + dataIndex: currentQueryData.name, + title: customLabel || operatorLabel, + data: [], + type: 'operator', + }; + + dynamicColumns.push(operatorColumn); } - const operatorColumn: DynamicColumn = { - query, - field: currentQueryData.queryName, - dataIndex: currentQueryData.queryName, - title: customLabel || operatorLabel, - data: [], - type: 'operator', - }; + if (queryType === EQueryType.PROM) { + const currentQueryData = query as IPromQLQuery; + let operatorLabel = `${currentQueryData.name}`; - dynamicColumns.push(operatorColumn); + if (currentQueryData.legend) { + operatorLabel = currentQueryData.legend; + } + + const operatorColumn: DynamicColumn = { + query, + field: currentQueryData.name, + dataIndex: currentQueryData.name, + title: customLabel || operatorLabel, + data: [], + type: 'operator', + }; + + dynamicColumns.push(operatorColumn); + } }; const transformColumnTitles = ( @@ -175,8 +242,16 @@ const transformColumnTitles = ( if (sameValues.length > 1) { return { ...item, - dataIndex: `${item.title} - ${item.query.queryName}`, - title: `${item.title} - ${item.query.queryName}`, + dataIndex: `${item.title} - ${get( + item.query, + 'queryName', + get(item.query, 'name', ''), + )}`, + title: `${item.title} - ${get( + item.query, + 'queryName', + get(item.query, 'name', ''), + )}`, }; } @@ -190,7 +265,7 @@ const getDynamicColumns: GetDynamicColumns = (queryTableData, query) => { const { series, queryName, list } = currentQuery; const currentStagedQuery = getQueryByName( - query.builder, + query, queryName, isFormula(queryName) ? 'queryFormulas' : 'queryData', ); @@ -210,7 +285,8 @@ const getDynamicColumns: GetDynamicColumns = (queryTableData, query) => { addOperatorFormulaColumns( currentStagedQuery, dynamicColumns, - isEveryValuesExist ? undefined : currentStagedQuery.queryName, + query.queryType, + isEveryValuesExist ? undefined : get(currentStagedQuery, 'queryName', ''), ); }