From 4e8e7745c14658ab864f601e88a40309a36b607a Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Wed, 17 Jan 2024 15:17:51 +0530 Subject: [PATCH] [FE]: spaces in legend formatting (#4349) * refactor: spaces in legend formatting * refactor: spaces in legend formatting * chore: string to const string * refactor: replace string by const --- frontend/src/constants/global.ts | 2 ++ .../QuerySection/QueryBuilder/clickHouse/query.tsx | 8 +++++++- .../QuerySection/QueryBuilder/promQL/query.tsx | 8 +++++++- .../container/QueryBuilder/components/Formula/Formula.tsx | 4 +++- .../src/hooks/queryBuilder/useQueryBuilderOperations.ts | 7 ++++++- frontend/src/utils/getFormatedLegend.ts | 2 ++ 6 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 frontend/src/utils/getFormatedLegend.ts diff --git a/frontend/src/constants/global.ts b/frontend/src/constants/global.ts index d2a455ea57..42fb29720b 100644 --- a/frontend/src/constants/global.ts +++ b/frontend/src/constants/global.ts @@ -1,2 +1,4 @@ const MAX_RPS_LIMIT = 100; export { MAX_RPS_LIMIT }; + +export const LEGEND = 'legend'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx index 304680c97c..522b21c803 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx @@ -1,9 +1,11 @@ import { Input } from 'antd'; import MonacoEditor from 'components/Editor'; +import { LEGEND } from 'constants/global'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { ChangeEvent, useCallback } from 'react'; import { IClickHouseQuery } from 'types/api/queryBuilder/queryBuilderData'; import { EQueryType } from 'types/common/dashboard'; +import { getFormatedLegend } from 'utils/getFormatedLegend'; import QueryHeader from '../QueryHeader'; @@ -57,7 +59,11 @@ function ClickHouseQueryBuilder({ const handleUpdateInput = useCallback( (e: ChangeEvent) => { - const { name, value } = e.target; + const { name } = e.target; + let { value } = e.target; + if (name === LEGEND) { + value = getFormatedLegend(value); + } handleUpdateQuery(name as keyof IClickHouseQuery, value); }, [handleUpdateQuery], diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx index 3ff9c7ad7d..2b32c5a6ae 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx @@ -1,8 +1,10 @@ import { Input } from 'antd'; +import { LEGEND } from 'constants/global'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { ChangeEvent, useCallback } from 'react'; import { IPromQLQuery } from 'types/api/queryBuilder/queryBuilderData'; import { EQueryType } from 'types/common/dashboard'; +import { getFormatedLegend } from 'utils/getFormatedLegend'; import QueryHeader from '../QueryHeader'; @@ -28,7 +30,11 @@ function PromQLQueryBuilder({ const handleUpdateQuery = useCallback( (e: ChangeEvent) => { - const { name, value } = e.target; + const { name } = e.target; + let { value } = e.target; + if (name === LEGEND) { + value = getFormatedLegend(value); + } const newQuery: IPromQLQuery = { ...queryData, [name]: value }; handleSetQueryItemData(queryIndex, EQueryType.PROM, newQuery); diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx index a5cf155b2f..dd39a5b1af 100644 --- a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx +++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx @@ -1,4 +1,5 @@ import { Col, Input, Row } from 'antd'; +import { LEGEND } from 'constants/global'; // ** Components import { FilterLabel, @@ -13,6 +14,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations'; import { ChangeEvent, useCallback, useMemo } from 'react'; import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData'; +import { getFormatedLegend } from 'utils/getFormatedLegend'; import { AdditionalFiltersToggler } from '../AdditionalFiltersToggler'; // ** Types @@ -58,7 +60,7 @@ export function Formula({ const { name, value } = e.target; const newFormula: IBuilderFormula = { ...formula, - [name]: value, + [name]: name === LEGEND ? getFormatedLegend(value) : value, }; handleSetFormulaData(index, newFormula); diff --git a/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts b/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts index e87d7007a7..8e883852cb 100644 --- a/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts +++ b/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts @@ -1,3 +1,4 @@ +import { LEGEND } from 'constants/global'; import { initialAutocompleteData, initialQueryBuilderFormValuesMap, @@ -21,6 +22,7 @@ import { } from 'types/common/operations.types'; import { DataSource } from 'types/common/queryBuilder'; import { SelectOption } from 'types/common/select'; +import { getFormatedLegend } from 'utils/getFormatedLegend'; export const useQueryOperations: UseQueryOperations = ({ query, @@ -157,7 +159,10 @@ export const useQueryOperations: UseQueryOperations = ({ (key, value) => { const newQuery: IBuilderQuery = { ...query, - [key]: value, + [key]: + key === LEGEND && typeof value === 'string' + ? getFormatedLegend(value) + : value, }; handleSetQueryData(index, newQuery); diff --git a/frontend/src/utils/getFormatedLegend.ts b/frontend/src/utils/getFormatedLegend.ts new file mode 100644 index 0000000000..1b3a5ea988 --- /dev/null +++ b/frontend/src/utils/getFormatedLegend.ts @@ -0,0 +1,2 @@ +export const getFormatedLegend = (value: string): string => + value.replace(/\{\s*\{\s*(.*?)\s*\}\s*\}/g, '{{$1}}');