GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-31 00:22:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: clickhouse and promQL queries table column headers not handled (#5164)

Browse Source 
* fix: clickhouse and promQL queries table column headers not handled

* fix: handling of per query units for clickhouse and promQL queries as well
This commit is contained in:
Vikrant Gupta 2024-06-10 12:43:03 +05:30 committed by GitHub
parent 8a9c8031f5
commit 6af5aa0253
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 118 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx
View File

@ -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;

144
frontend/src/lib/query/createTableColumnsFromQuery.ts
View File

@ -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 => {
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', ''),
);
}