From 6170b2c5dc4dd517e9e12f2dc9c8668c8b0d4408 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Mon, 11 Dec 2023 18:34:24 +0530
Subject: [PATCH] [Refactor]: added percent 0 - 100 in yaxis for alerts (#4173)

---
 .../container/FormAlertRules/ChartPreview/index.tsx  | 10 ++++++----
 .../container/FormAlertRules/ChartPreview/utils.ts   | 12 ++++++++++++
 frontend/src/container/FormAlertRules/index.tsx      | 11 +++++++++--
 .../NewWidget/RightContainer/alertFomatCategories.ts |  1 +
 .../filters/BuilderUnitsFilter/BuilderUnits.tsx      |  3 ++-
 .../QueryBuilder/filters/BuilderUnitsFilter/types.ts |  1 +
 frontend/src/lib/getConvertedValue.ts                |  5 +++++
 7 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
index 400a6f85be..3551c3a87a 100644
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -32,6 +32,7 @@ export interface ChartPreviewProps {
 	alertDef?: AlertDef;
 	userQueryKey?: string;
 	allowSelectedIntervalForStepGen?: boolean;
+	yAxisUnit: string;
 }
 
 function ChartPreview({
@@ -44,6 +45,7 @@ function ChartPreview({
 	userQueryKey,
 	allowSelectedIntervalForStepGen = false,
 	alertDef,
+	yAxisUnit,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const threshold = alertDef?.condition.target || 0;
@@ -112,7 +114,7 @@ function ChartPreview({
 		() =>
 			getUPlotChartOptions({
 				id: 'alert_legend_widget',
-				yAxisUnit: query?.unit,
+				yAxisUnit,
 				apiResponse: queryResponse?.data?.payload,
 				dimensions: containerDimensions,
 				isDarkMode,
@@ -129,14 +131,14 @@ function ChartPreview({
 							optionName,
 							threshold,
 							alertDef?.condition.targetUnit,
-							query?.unit,
+							yAxisUnit,
 						)})`,
 						thresholdUnit: alertDef?.condition.targetUnit,
 					},
 				],
 			}),
 		[
-			query?.unit,
+			yAxisUnit,
 			queryResponse?.data?.payload,
 			containerDimensions,
 			isDarkMode,
@@ -168,7 +170,7 @@ function ChartPreview({
 						name={name || 'Chart Preview'}
 						panelData={queryResponse.data?.payload.data.newResult.data.result || []}
 						query={query || initialQueriesMap.metrics}
-						yAxisUnit={query?.unit}
+						yAxisUnit={yAxisUnit}
 					/>
 				</div>
 			)}
diff --git a/frontend/src/container/FormAlertRules/ChartPreview/utils.ts b/frontend/src/container/FormAlertRules/ChartPreview/utils.ts
index f17a6e3865..1fc2a2e247 100644
--- a/frontend/src/container/FormAlertRules/ChartPreview/utils.ts
+++ b/frontend/src/container/FormAlertRules/ChartPreview/utils.ts
@@ -61,8 +61,20 @@ export const getThresholdLabel = (
 		unit === MiscellaneousFormats.PercentUnit ||
 		yAxisUnit === MiscellaneousFormats.PercentUnit
 	) {
+		if (unit === MiscellaneousFormats.Percent) {
+			return `${value}%`;
+		}
 		return `${value * 100}%`;
 	}
+	if (
+		unit === MiscellaneousFormats.Percent ||
+		yAxisUnit === MiscellaneousFormats.Percent
+	) {
+		if (unit === MiscellaneousFormats.PercentUnit) {
+			return `${value * 100}%`;
+		}
+		return `${value}%`;
+	}
 	return `${value} ${optionName}`;
 };
 
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
index 0076449faf..eafbcd363a 100644
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -82,6 +82,7 @@ function FormAlertRules({
 
 	// alertDef holds the form values to be posted
 	const [alertDef, setAlertDef] = useState<AlertDef>(initialValue);
+	const [yAxisUnit, setYAxisUnit] = useState<string>(currentQuery.unit || '');
 
 	// initQuery contains initial query when component was mounted
 	const initQuery = useMemo(() => initialValue.condition.compositeQuery, [
@@ -400,6 +401,7 @@ function FormAlertRules({
 			query={stagedQuery}
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
+			yAxisUnit={yAxisUnit || ''}
 		/>
 	);
 
@@ -415,6 +417,7 @@ function FormAlertRules({
 			query={stagedQuery}
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}
+			yAxisUnit={yAxisUnit || ''}
 		/>
 	);
 
@@ -427,7 +430,8 @@ function FormAlertRules({
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
 		alertType !== AlertTypes.METRICS_BASED_ALERT;
 
-	const onUnitChangeHandler = (): void => {
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
 		// reset target unit
 		setAlertDef((def) => ({
 			...def,
@@ -457,7 +461,10 @@ function FormAlertRules({
 							renderPromAndChQueryChartPreview()}
 
 						<StepContainer>
-							<BuilderUnitsFilter onChange={onUnitChangeHandler} />
+							<BuilderUnitsFilter
+								onChange={onUnitChangeHandler}
+								yAxisUnit={yAxisUnit}
+							/>
 						</StepContainer>
 
 						<QuerySection
diff --git a/frontend/src/container/NewWidget/RightContainer/alertFomatCategories.ts b/frontend/src/container/NewWidget/RightContainer/alertFomatCategories.ts
index 09acc57d0a..aa29303926 100644
--- a/frontend/src/container/NewWidget/RightContainer/alertFomatCategories.ts
+++ b/frontend/src/container/NewWidget/RightContainer/alertFomatCategories.ts
@@ -78,6 +78,7 @@ export const alertsCategory = [
 		name: CategoryNames.Miscellaneous,
 		formats: [
 			{ name: 'Percent (0.0-1.0)', id: MiscellaneousFormats.PercentUnit },
+			{ name: 'Percent (0 - 100)', id: MiscellaneousFormats.Percent },
 		],
 	},
 	{
diff --git a/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx b/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx
index 47aa20aaf1..c128abc484 100644
--- a/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx
+++ b/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx
@@ -10,10 +10,11 @@ import { filterOption } from './utils';
 
 function BuilderUnitsFilter({
 	onChange,
+	yAxisUnit,
 }: IBuilderUnitsFilterProps): JSX.Element {
 	const { currentQuery, handleOnUnitsChange } = useQueryBuilder();
 
-	const selectedValue = currentQuery?.unit;
+	const selectedValue = yAxisUnit || currentQuery?.unit;
 
 	const allOptions = categoryToSupport.map((category) => ({
 		label: category,
diff --git a/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/types.ts b/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/types.ts
index 693dab7be6..4474c7d20f 100644
--- a/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/types.ts
+++ b/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/types.ts
@@ -1,3 +1,4 @@
 export interface IBuilderUnitsFilterProps {
 	onChange?: (value: string) => void;
+	yAxisUnit?: string;
 }
diff --git a/frontend/src/lib/getConvertedValue.ts b/frontend/src/lib/getConvertedValue.ts
index 229b2d2677..0e8c267236 100644
--- a/frontend/src/lib/getConvertedValue.ts
+++ b/frontend/src/lib/getConvertedValue.ts
@@ -232,6 +232,11 @@ const unitsMapping = [
 			{
 				label: 'Percent (0.0-1.0)',
 				value: 'percentunit',
+				factor: 100,
+			},
+			{
+				label: 'Percent (0 - 100)',
+				value: 'percent',
 				factor: 1,
 			},
 		],