From 9d44ce3ee290e510fe7945a5f3d8c32920b9f731 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Fri, 15 Dec 2023 17:08:35 +0530 Subject: [PATCH] feat: on create alerts query range format is called to fill the variables (#4204) --- .../src/api/dashboard/queryRangeFormat.ts | 15 +++++ .../GridCardLayout/WidgetHeader/index.tsx | 10 +-- .../NewWidget/RightContainer/index.tsx | 14 +--- .../hooks/queryBuilder/useCreateAlerts.tsx | 65 +++++++++++++++++++ 4 files changed, 84 insertions(+), 20 deletions(-) create mode 100644 frontend/src/api/dashboard/queryRangeFormat.ts create mode 100644 frontend/src/hooks/queryBuilder/useCreateAlerts.tsx diff --git a/frontend/src/api/dashboard/queryRangeFormat.ts b/frontend/src/api/dashboard/queryRangeFormat.ts new file mode 100644 index 0000000000..02e020bfb5 --- /dev/null +++ b/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, +): Promise => + axios + .post>('/query_range/format', props) + .then((res) => res.data.data); diff --git a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx index b70e16585c..820c3b8a07 100644 --- a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx +++ b/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(() => { - history.push( - `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent( - JSON.stringify(widget.query), - )}`, - ); - }, [widget]); + const onCreateAlertsHandler = useCreateAlerts(widget); const keyMethodMapping = useMemo( () => ({ diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx index 023dd584b2..c39039c04f 100644 --- a/frontend/src/container/NewWidget/RightContainer/index.tsx +++ b/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(() => { - if (!selectedWidget) return; - - history.push( - `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent( - JSON.stringify(selectedWidget?.query), - )}`, - ); - }, [selectedWidget]); + const onCreateAlertsHandler = useCreateAlerts(selectedWidget); const allowThreshold = panelTypeVsThreshold[selectedGraph]; diff --git a/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx b/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx new file mode 100644 index 0000000000..a80806a8fd --- /dev/null +++ b/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;