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

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;

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 = <T extends keyof QueryBuilderData>(
-	builder: QueryBuilderData,
+	query: Query,
 	currentQueryName: string,
 	type: T,
-): T extends 'queryData' ? IBuilderQuery : IBuilderFormula => {
+): IBuilderQuery | IBuilderFormula | IClickHouseQuery | IPromQLQuery => {
-	const queryArray = builder[type];
+	if (query.queryType === EQueryType.CLICKHOUSE) {
-	const defaultValue =
+		const queryArray = query.clickhouse_sql;
-		type === 'queryData'
+		const defaultQueryValue = initialClickHouseData;
-			? initialQueryBuilderFormValues
-			: initialFormulaBuilderFormValues;
 
-	const currentQuery =
+		return (
-		queryArray.find((q) => q.queryName === currentQueryName) || defaultValue;
+			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.legend) {
-	if (currentQueryData.aggregateAttribute.key) {
+			operatorLabel = currentQueryData.legend;
-		operatorLabel += `(${currentQueryData.aggregateAttribute.key})`;
+		}
+
+		const operatorColumn: DynamicColumn = {
+			query,
+			field: currentQueryData.queryName,
+			dataIndex: currentQueryData.queryName,
+			title: customLabel || operatorLabel,
+			data: [],
+			type: 'operator',
+		};
+
+		dynamicColumns.push(operatorColumn);
 	}
 
-	if (currentQueryData.legend) {
+	if (queryType === EQueryType.CLICKHOUSE) {
-		operatorLabel = currentQueryData.legend;
+		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 = {
+	if (queryType === EQueryType.PROM) {
-		query,
+		const currentQueryData = query as IPromQLQuery;
-		field: currentQueryData.queryName,
+		let operatorLabel = `${currentQueryData.name}`;
-		dataIndex: currentQueryData.queryName,
-		title: customLabel || operatorLabel,
-		data: [],
-		type: 'operator',
-	};
 
-	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}`,
+				dataIndex: `${item.title} - ${get(
-				title: `${item.title} - ${item.query.queryName}`,
+					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', ''),
 				);
 			}