fix: invalidate alert details query on toggling alert state

SigNoz · Sep 4, 2024 · 64b5e35 · 64b5e35
1 parent 2b41222
commit 64b5e35
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 37 deletions.
diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx
@@ -19,7 +19,6 @@ import { ResourceProvider } from 'hooks/useResourceAttribute';
 import history from 'lib/history';
 import { identity, pick, pickBy } from 'lodash-es';
 import posthog from 'posthog-js';
-import AlertRuleProvider from 'providers/Alert';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useEffect, useState } from 'react';
@@ -237,24 +236,22 @@ function App(): JSX.Element {
 							<QueryBuilderProvider>
 								<DashboardProvider>
 									<KeyboardHotkeysProvider>
-										<AlertRuleProvider>
-											<AppLayout>
-												<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-													<Switch>
-														{routes.map(({ path, component, exact }) => (
-															<Route
-																key={`${path}`}
-																exact={exact}
-																path={path}
-																component={component}
-															/>
-														))}
-
-														<Route path="*" component={NotFound} />
-													</Switch>
-												</Suspense>
-											</AppLayout>
-										</AlertRuleProvider>
+										<AppLayout>
+											<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+												<Switch>
+													{routes.map(({ path, component, exact }) => (
+														<Route
+															key={`${path}`}
+															exact={exact}
+															path={path}
+															component={component}
+														/>
+													))}
+
+													<Route path="*" component={NotFound} />
+												</Switch>
+											</Suspense>
+										</AppLayout>
 									</KeyboardHotkeysProvider>
 								</DashboardProvider>
 							</QueryBuilderProvider>

diff --git a/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx b/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx
@@ -14,7 +14,6 @@ import {
 	useAlertRuleStatusToggle,
 } from 'pages/AlertDetails/hooks';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
-import { useAlertRule } from 'providers/Alert';
 import React from 'react';
 import { CSSProperties } from 'styled-components';
 import { AlertDef } from 'types/api/alerts/def';
@@ -28,12 +27,19 @@ const menuItemStyle: CSSProperties = {
 function AlertActionButtons({
 	ruleId,
 	alertDetails,
+	isAlertRuleDisabled,
+	setIsAlertRuleDisabled,
 }: {
 	ruleId: string;
 	alertDetails: AlertHeaderProps['alertDetails'];
+	isAlertRuleDisabled: boolean;
+	setIsAlertRuleDisabled: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element {
-	const { isAlertRuleDisabled } = useAlertRule();
-	const { handleAlertStateToggle } = useAlertRuleStatusToggle({ ruleId });
+	const { handleAlertStateToggle } = useAlertRuleStatusToggle({
+		ruleId,
+		isAlertRuleDisabled,
+		setIsAlertRuleDisabled,
+	});
 
 	const { handleAlertDuplicate } = useAlertRuleDuplicate({
 		alertDetails: (alertDetails as unknown) as AlertDef,
@@ -81,8 +87,8 @@ function AlertActionButtons({
 
 	return (
 		<div className="alert-action-buttons">
-			<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
-				{isAlertRuleDisabled !== undefined && (
+			<Tooltip title={alertDetails.disabled ? 'Enable alert' : 'Disable alert'}>
+				{alertDetails.disabled !== undefined && (
 					<Switch
 						size="small"
 						onChange={handleAlertStateToggle}

diff --git a/frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx b/frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx
@@ -1,7 +1,6 @@
 import './AlertHeader.styles.scss';
 
-import { useAlertRule } from 'providers/Alert';
-import { useEffect, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import AlertActionButtons from './ActionButtons/ActionButtons';
 import AlertLabels from './AlertLabels/AlertLabels';
@@ -28,13 +27,7 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 		[labels],
 	);
 
-	const { isAlertRuleDisabled, setIsAlertRuleDisabled } = useAlertRule();
-
-	useEffect(() => {
-		if (isAlertRuleDisabled === undefined) {
-			setIsAlertRuleDisabled(disabled);
-		}
-	}, [disabled, setIsAlertRuleDisabled, isAlertRuleDisabled]);
+	const [isAlertRuleDisabled, setIsAlertRuleDisabled] = useState(disabled);
 
 	return (
 		<div className="alert-info">
@@ -57,7 +50,12 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				</div>
 			</div>
 			<div className="alert-info__action-buttons">
-				<AlertActionButtons alertDetails={alertDetails} ruleId={alertDetails.id} />
+				<AlertActionButtons
+					alertDetails={alertDetails}
+					ruleId={alertDetails.id}
+					isAlertRuleDisabled={isAlertRuleDisabled}
+					setIsAlertRuleDisabled={setIsAlertRuleDisabled}
+				/>
 			</div>
 		</div>
 	);

diff --git a/frontend/src/pages/AlertDetails/hooks.tsx b/frontend/src/pages/AlertDetails/hooks.tsx
@@ -27,7 +27,6 @@ import { History, Table } from 'lucide-react';
 import EditRules from 'pages/EditRules';
 import { OrderPreferenceItems } from 'pages/Logs/config';
 import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
-import { useAlertRule } from 'providers/Alert';
 import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -367,12 +366,15 @@ export const useTimelineTable = ({
 
 export const useAlertRuleStatusToggle = ({
 	ruleId,
+	isAlertRuleDisabled,
+	setIsAlertRuleDisabled,
 }: {
 	ruleId: string;
+	isAlertRuleDisabled: boolean;
+	setIsAlertRuleDisabled: React.Dispatch<React.SetStateAction<boolean>>;
 }): {
 	handleAlertStateToggle: (state: boolean) => void;
 } => {
-	const { isAlertRuleDisabled, setIsAlertRuleDisabled } = useAlertRule();
 	const { notifications } = useNotifications();
 
 	const queryClient = useQueryClient();
@@ -386,12 +388,13 @@ export const useAlertRuleStatusToggle = ({
 				setIsAlertRuleDisabled((prev) => !prev);
 			},
 			onSuccess: () => {
+				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS, ruleId]);
 				notifications.success({
 					message: `Alert has been ${isAlertRuleDisabled ? 'enabled' : 'disabled'}.`,
 				});
 			},
 			onError: (error) => {
-				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS]);
+				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS, ruleId]);
 				handleError(error);
 			},
 		},