feat: on create alerts query range format is called to fill the variables (#4204)

frontend/src/api/dashboard/queryRangeFormat.ts

@@ -0,0 +1,15 @@
+import { ApiV3Instance as axios } from 'api';
+import { ApiResponse } from 'types/api';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
+
+interface IQueryRangeFormat {
+	compositeQuery: ICompositeMetricQuery;
+}
+
+export const getQueryRangeFormat = (
+	props?: Partial<QueryRangePayload>,
+): Promise<IQueryRangeFormat> =>
+	axios
+		.post<ApiResponse<IQueryRangeFormat>>('/query_range/format', props)
+		.then((res) => res.data.data);

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -14,7 +14,7 @@ import { Dropdown, MenuProps, Tooltip, Typography } from 'antd';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
+import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { ReactNode, useCallback, useMemo } from 'react';
@@ -71,13 +71,7 @@ function WidgetHeader({
 		);
 	}, [widget.id, widget.panelTypes, widget.query]);
 
-	const onCreateAlertsHandler = useCallback(() => {
+	const onCreateAlertsHandler = useCreateAlerts(widget);
-		history.push(
-			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-				JSON.stringify(widget.query),
-			)}`,
-		);
-	}, [widget]);
 
 	const keyMethodMapping = useMemo(
 		() => ({

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -10,11 +10,9 @@ import {
 } from 'antd';
 import InputComponent from 'components/Input';
 import TimePreference from 'components/TimePreferenceDropDown';
-import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
-import history from 'lib/history';
+import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 
@@ -55,15 +53,7 @@ function RightContainer({
 	const selectedGraphType =
 		GraphTypes.find((e) => e.name === selectedGraph)?.display || '';
 
-	const onCreateAlertsHandler = useCallback(() => {
+	const onCreateAlertsHandler = useCreateAlerts(selectedWidget);
-		if (!selectedWidget) return;
-
-		history.push(
-			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-				JSON.stringify(selectedWidget?.query),
-			)}`,
-		);
-	}, [selectedWidget]);
 
 	const allowThreshold = panelTypeVsThreshold[selectedGraph];
 

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -0,0 +1,65 @@
+import { getQueryRangeFormat } from 'api/dashboard/queryRangeFormat';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { useNotifications } from 'hooks/useNotifications';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import { prepareQueryRangePayload } from 'lib/dashboard/prepareQueryRangePayload';
+import history from 'lib/history';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useCallback } from 'react';
+import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+const useCreateAlerts = (widget?: Widgets): VoidFunction => {
+	const queryRangeMutation = useMutation(getQueryRangeFormat);
+
+	const { selectedTime: globalSelectedInterval } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const { notifications } = useNotifications();
+
+	const { selectedDashboard } = useDashboard();
+
+	return useCallback(() => {
+		if (!widget) return;
+
+		const { queryPayload } = prepareQueryRangePayload({
+			query: widget.query,
+			globalSelectedInterval,
+			graphType: widget.panelTypes,
+			selectedTime: widget.timePreferance,
+			variables: getDashboardVariables(selectedDashboard?.data.variables),
+		});
+		queryRangeMutation.mutate(queryPayload, {
+			onSuccess: (data) => {
+				const updatedQuery = mapQueryDataFromApi(data.compositeQuery);
+
+				history.push(
+					`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
+						JSON.stringify(updatedQuery),
+					)}`,
+				);
+			},
+			onError: () => {
+				notifications.error({
+					message: SOMETHING_WENT_WRONG,
+				});
+			},
+		});
+	}, [
+		globalSelectedInterval,
+		notifications,
+		queryRangeMutation,
+		selectedDashboard?.data.variables,
+		widget,
+	]);
+};
+
+export default useCreateAlerts;