Merge branch 'develop' into GH-4325

frontend/src/constants/global.ts

@@ -1,2 +1,4 @@
 const MAX_RPS_LIMIT = 100;
 export { MAX_RPS_LIMIT };
+
+export const LEGEND = 'legend';

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<HTMLInputElement>) => {
-			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],

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<HTMLInputElement>) => {
-			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);

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

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

frontend/src/utils/getFormatedLegend.ts

@@ -0,0 +1,2 @@
+export const getFormatedLegend = (value: string): string =>
+	value.replace(/\{\s*\{\s*(.*?)\s*\}\s*\}/g, '{{$1}}');