diff --git a/thirdeye-ui/src/app/components/alert-view/sub-header/alert-sub-header.component.tsx b/thirdeye-ui/src/app/components/alert-view/sub-header/alert-sub-header.component.tsx index 4ae3b75d1b..366938a0d4 100644 --- a/thirdeye-ui/src/app/components/alert-view/sub-header/alert-sub-header.component.tsx +++ b/thirdeye-ui/src/app/components/alert-view/sub-header/alert-sub-header.component.tsx @@ -46,7 +46,7 @@ export const AlertViewSubHeader: FunctionComponent = ({ const getAlertInsightQuery = useFetchQuery({ queryKey: ["alertInsight", alert.id], queryFn: () => { - return getAlertInsight({ alertId: alert.id }); + return getAlertInsight({ alert }); }, }); diff --git a/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx b/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx index bb3de9ea86..47cd7c6a2e 100644 --- a/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx +++ b/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx @@ -52,10 +52,7 @@ import { useNotificationProviderV1, } from "../../platform/components"; import { ActionStatus } from "../../rest/actions.interfaces"; -import { - useGetAlertInsight, - useResetAlert, -} from "../../rest/alerts/alerts.actions"; +import { useResetAlert } from "../../rest/alerts/alerts.actions"; import { getAlert, getAlertStats, @@ -97,7 +94,6 @@ export const AlertsViewPage: FunctionComponent = () => { useState(null); const [resetStatusNotification, setResetStatusNotification] = useState(null); - const { alertInsight, getAlertInsight } = useGetAlertInsight(); const [taskStatusLoading, setTaskStatusLoading] = useState(false); const [searchParams, setSearchParams] = useSearchParams(); @@ -153,7 +149,6 @@ export const AlertsViewPage: FunctionComponent = () => { getAlertQuery.refetch(); getEnumerationItemsQuery.refetch(); getAnomaliesQuery.refetch(); - getAlertInsight({ alertId: Number(alertId) }); fetchStats(); setNextAttemptTime(0); } @@ -172,7 +167,6 @@ export const AlertsViewPage: FunctionComponent = () => { getAlertQuery.refetch(); getEnumerationItemsQuery.refetch(); getAnomaliesQuery.refetch(); - getAlertInsight({ alertId: Number(alertId) }); fetchStats(); setNextAttemptTime(0); } @@ -239,26 +233,6 @@ export const AlertsViewPage: FunctionComponent = () => { [searchParams] ); - useEffect(() => { - getAlertInsight({ alertId: Number(alertId) }); - }, []); - - useEffect(() => { - if ( - !alertInsight?.analysisRunInfo?.success && - alertInsight?.analysisRunInfo?.message - ) { - notifyIfErrors( - ActionStatus.Error, - [{ message: alertInsight.analysisRunInfo.message }], - notify, - t("message.error-while-fetching", { - entity: t("label.alert-insight"), - }) - ); - } - }, [alertInsight?.analysisRunInfo]); - const fetchStats = (): void => { getAlertStats({ alertId: Number(alertId), diff --git a/thirdeye-ui/src/app/routers/alerts/alerts.router.test.tsx b/thirdeye-ui/src/app/routers/alerts/alerts.router.test.tsx index 128452c3f2..acf637615c 100644 --- a/thirdeye-ui/src/app/routers/alerts/alerts.router.test.tsx +++ b/thirdeye-ui/src/app/routers/alerts/alerts.router.test.tsx @@ -18,6 +18,7 @@ import { MemoryRouter, Route, Routes } from "react-router-dom"; import { AppLoadingIndicatorV1 } from "../../platform/components/app-loading-indicator-v1/app-loading-indicator-v1.component"; import { AppRoute, AppRouteRelative } from "../../utils/routes/routes.util"; import { AlertsRouter } from "./alerts.router"; +import axios from "axios"; jest.mock("react-i18next", () => ({ useTranslation: jest.fn().mockReturnValue({ @@ -133,6 +134,9 @@ describe("Alerts Router", () => { }); it("should render alerts view page at exact alerts view path", async () => { + jest.spyOn(axios, "get").mockResolvedValueOnce({ + data: {}, + }); render( diff --git a/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.component.tsx b/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.component.tsx index 59a96e4af8..36089cdff4 100644 --- a/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.component.tsx +++ b/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.component.tsx @@ -25,7 +25,10 @@ import { TimeRangeQueryStringKey, } from "../../../components/time-range/time-range-provider/time-range-provider.interfaces"; import { AppLoadingIndicatorV1 } from "../../../platform/components"; -import { useGetAlertInsight } from "../../../rest/alerts/alerts.actions"; +import { + useGetAlert, + useGetAlertInsight, +} from "../../../rest/alerts/alerts.actions"; import { useLastUsedSearchParams } from "../../../stores/last-used-params/last-used-search-params.store"; import { AlertFetchRedirectParamsProps } from "./alert-fetch-redirect-params.interfaces"; @@ -34,6 +37,7 @@ export const AlertFetchRedirectParams: FunctionComponent { - if (alertId) { - getAlertInsight({ alertId: Number(alertId) }).finally(() => + getAlert(Number(alertId)); + }, [alertId]); + + useEffect(() => { + if (alert) { + getAlertInsight({ alert: alert }).finally(() => setIsLoading(false) ); - } else { - setIsLoading(false); } - }, []); + }, [alert]); useEffect(() => { if (isLoading) { diff --git a/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.test.tsx b/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.test.tsx index c6080824ee..23abe3bc00 100644 --- a/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.test.tsx +++ b/thirdeye-ui/src/app/utils/routes/alert-fetch-redirect-params/alert-fetch-redirect-params.test.tsx @@ -48,6 +48,9 @@ jest.mock( describe("Alert Fetch Redirect Params", () => { it("should have called navigate with the time range values in query string returned from API request", async () => { + jest.spyOn(axios, "get").mockResolvedValueOnce({ + data: {}, + }); jest.spyOn(axios, "post").mockResolvedValueOnce({ data: { defaultStartTime: 10, @@ -72,6 +75,9 @@ describe("Alert Fetch Redirect Params", () => { }); it("should have called navigate with the time range values from fallbackDurationGenerator in query string is API request fails", async () => { + jest.spyOn(axios, "get").mockResolvedValueOnce({ + data: {}, + }); jest.spyOn(axios, "post").mockRejectedValueOnce({ data: {}, }); @@ -93,7 +99,10 @@ describe("Alert Fetch Redirect Params", () => { }); it("should have called navigate with the time range values in query string if there are no last used paths for key", async () => { - jest.spyOn(axios, "get").mockRejectedValueOnce({ + jest.spyOn(axios, "get").mockResolvedValueOnce({ + data: {}, + }); + jest.spyOn(axios, "post").mockRejectedValue({ data: {}, }); mockGetLastUsedForPath.mockReturnValue(undefined);