feat: support for legend in query builderformulas (#1530)

frontend/src/constants/dashboard.ts

@@ -30,4 +30,5 @@ export const QueryBuilderQueryTemplate = {
 export const QueryBuilderFormulaTemplate = {
 	expression: '',
 	disabled: false,
+	legend: '',
 };

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -68,15 +68,20 @@ function QuerySection({
 	const handleFormulaChange = ({
 		formulaIndex,
 		expression,
+		legend,
 		toggleDisable,
 		toggleDelete,
 	}: IQueryBuilderFormulaHandleChange): void => {
 		const allFormulas = formulaQueries;
 		const current = allFormulas[formulaIndex];
-		if (expression) {
+		if (expression !== undefined) {
 			current.expression = expression;
 		}
 
+		if (legend !== undefined) {
+			current.legend = legend;
+		}
+
 		if (toggleDisable) {
 			current.disabled = !current.disabled;
 		}
@@ -179,6 +184,7 @@ function QuerySection({
 			formulaOnly: true,
 			expression: 'A',
 			disabled: false,
+			legend: '',
 		};
 
 		setFormulaQueries({ ...formulas });

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/formula.tsx

@@ -37,6 +37,14 @@ function MetricsBuilderFormula({
 				style={{ marginBottom: '0.5rem' }}
 				rows={2}
 			/>
+			<Input
+				onChange={(event): void => {
+					handleFormulaChange({ formulaIndex, legend: event.target.value });
+				}}
+				size="middle"
+				defaultValue={formulaData.legend}
+				addonBefore="Legend Format"
+			/>
 		</QueryHeader>
 	);
 }

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/index.tsx

@@ -85,6 +85,7 @@ function QueryBuilderQueryContainer({
 	const handleQueryBuilderFormulaChange = ({
 		formulaIndex,
 		expression,
+		legend,
 		toggleDisable,
 		toggleDelete,
 	}: IQueryBuilderFormulaHandleChange): void => {
@@ -94,9 +95,12 @@ function QueryBuilderQueryContainer({
 			];
 		const currentIndexFormula = allFormulas[formulaIndex as number];
 
-		if (expression) {
+		if (expression !== undefined) {
 			currentIndexFormula.expression = expression;
 		}
+		if (legend !== undefined) {
+			currentIndexFormula.legend = legend;
+		}
 
 		if (toggleDisable) {
 			currentIndexFormula.disabled = !currentIndexFormula.disabled;

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/types.ts

@@ -19,5 +19,6 @@ export interface IQueryBuilderFormulaHandleChange {
 	formulaIndex: number | string;
 	expression?: IMetricsBuilderFormula['expression'];
 	toggleDisable?: IMetricsBuilderFormula['disabled'];
+	legend?: IMetricsBuilderFormula['legend'];
 	toggleDelete?: boolean;
 }

frontend/src/store/actions/dashboard/getQueryResults.ts

@@ -76,9 +76,11 @@ export async function GetMetricQueryRange({
 
 			queryData[WIDGET_QUERY_BUILDER_FORMULA_KEY_NAME].map((formula) => {
 				const generatedFormulaPayload = {};
+				legendMap[formula.name] = formula.legend || formula.name;
 				generatedFormulaPayload.queryName = formula.name;
 				generatedFormulaPayload.expression = formula.expression;
 				generatedFormulaPayload.disabled = formula.disabled;
+				generatedFormulaPayload.legend = formula.legend;
 				builderQueries[formula.name] = generatedFormulaPayload;
 			});
 			QueryPayload.compositeMetricQuery.builderQueries = builderQueries;

frontend/src/types/api/alerts/compositeQuery.ts

@@ -28,10 +28,9 @@ export interface IBuilderQueries {
 // for api calls
 export interface IBuilderQuery
 	extends Omit<
-			IMetricQuery,
-			'aggregateOperator' | 'legend' | 'metricName' | 'tagFilters'
-		>,
-		Omit<IFormulaQuery, 'expression'> {
+		IMetricQuery,
+		'aggregateOperator' | 'legend' | 'metricName' | 'tagFilters'
+	> {
 	aggregateOperator: EAggregateOperator | undefined;
 	disabled: boolean;
 	name: string;

frontend/src/types/api/dashboard/getAll.ts

@@ -71,6 +71,7 @@ export interface IMetricsBuilderFormula {
 	expression: string;
 	disabled: boolean;
 	name: string;
+	legend: string;
 }
 export interface IMetricsBuilderQuery {
 	aggregateOperator: EAggregateOperator;