chore: fill y axis unit in alerts coming from dashboards (#9982)

frontend/src/constants/query.ts

@@ -53,4 +53,5 @@ export enum QueryParams {
 	variables = 'variables',
 	version = 'version',
 	showNewCreateAlertsPage = 'showNewCreateAlertsPage',
+	source = 'source',
 }

frontend/src/constants/queryBuilder.ts

@@ -301,6 +301,7 @@ export const initialQueryState: QueryState = {
 	builder: initialQueryBuilderData,
 	clickhouse_sql: [initialClickHouseData],
 	promql: [initialQueryPromQLData],
+	unit: '',
 };
 
 const initialQueryWithType: Query = {

frontend/src/container/FormAlertRules/index.tsx

@@ -788,11 +788,18 @@ function FormAlertRules({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
 			?.active || false;
 
+	const source = useMemo(() => urlQuery.get(QueryParams.source) as YAxisSource, [
+		urlQuery,
+	]);
+
 	// Only update automatically when creating a new metrics-based alert rule
-	const shouldUpdateYAxisUnit = useMemo(
-		() => isNewRule && alertType === AlertTypes.METRICS_BASED_ALERT,
-		[isNewRule, alertType],
-	);
+	const shouldUpdateYAxisUnit = useMemo(() => {
+		// Do not update if we are coming to the page from dashboards (we still show warning)
+		if (source === YAxisSource.DASHBOARDS) {
+			return false;
+		}
+		return isNewRule && alertType === AlertTypes.METRICS_BASED_ALERT;
+	}, [isNewRule, alertType, source]);
 
 	const { yAxisUnit: initialYAxisUnit, isLoading } = useGetYAxisUnit(
 		alertDef.condition.selectedQueryName,

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -80,14 +80,14 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 		expect(result[2].builder.queryData).toHaveLength(2); // 2 disabled queries
 		expect(result[2].builder.queryData[0].disabled).toBe(true);
 		expect(result[2].builder.queryData[1].disabled).toBe(true);
-		expect(result[2].unit).toBeUndefined();
+		expect(result[2].unit).toBe('');
 		// Verify query 4 has the correct data
 		expect(result[3].builder.queryFormulas).toHaveLength(1);
 		expect(result[3].builder.queryFormulas[0]).toEqual(MOCK_FORMULA_DATA);
 		expect(result[3].builder.queryData).toHaveLength(2); // 2 disabled queries
 		expect(result[3].builder.queryData[0].disabled).toBe(true);
 		expect(result[3].builder.queryData[1].disabled).toBe(true);
-		expect(result[3].unit).toBeUndefined();
+		expect(result[3].unit).toBe('');
 	});
 });
 

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/__tests__/ColumnSelector.test.tsx

@@ -73,6 +73,7 @@ const compositeQueryParam = {
 		},
 	],
 	id: '12e1d311-cb47-4b76-af68-65d8e85c9e0d',
+	unit: '',
 };
 
 jest.mock('react-router-dom', () => ({

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -1,6 +1,7 @@
 import logEvent from 'api/common/logEvent';
 import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -9,6 +10,7 @@ import { MenuItemKeys } from 'container/GridCardLayout/WidgetHeader/contants';
 import { useNotifications } from 'hooks/useNotifications';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useMemo } from 'react';
 import { useMutation } from 'react-query';
@@ -71,11 +73,21 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 		queryRangeMutation.mutate(queryPayload, {
 			onSuccess: (data) => {
 				const updatedQuery = mapQueryDataFromApi(data.data.compositeQuery);
-				const url = `${ROUTES.ALERTS_NEW}?${
-					QueryParams.compositeQuery
-				}=${encodeURIComponent(JSON.stringify(updatedQuery))}&${
-					QueryParams.panelTypes
-				}=${widget.panelTypes}&version=${ENTITY_VERSION_V5}`;
+				// If widget has a y-axis unit, set it to the updated query if it is not already set
+				if (widget.yAxisUnit && !isEmpty(widget.yAxisUnit)) {
+					updatedQuery.unit = widget.yAxisUnit;
+				}
+
+				const params = new URLSearchParams();
+				params.set(
+					QueryParams.compositeQuery,
+					encodeURIComponent(JSON.stringify(updatedQuery)),
+				);
+				params.set(QueryParams.panelTypes, widget.panelTypes);
+				params.set(QueryParams.version, ENTITY_VERSION_V5);
+				params.set(QueryParams.source, YAxisSource.DASHBOARDS);
+
+				const url = `${ROUTES.ALERTS_NEW}?${params.toString()}`;
 
 				window.open(url, '_blank', 'noreferrer');
 			},