fix: properly handle preserving alert toggle between overview and his…

…tory tabs
SigNoz · Sep 4, 2024 · df46918 · df46918
1 parent 9381730
commit df46918
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 52 deletions.
diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx
@@ -19,6 +19,7 @@ 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';
@@ -236,22 +237,24 @@ function App(): JSX.Element {
 							<QueryBuilderProvider>
 								<DashboardProvider>
 									<KeyboardHotkeysProvider>
-										<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>
+										</AlertRuleProvider>
 									</KeyboardHotkeysProvider>
 								</DashboardProvider>
 							</QueryBuilderProvider>

diff --git a/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx b/frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx
@@ -14,6 +14,7 @@ import {
 	useAlertRuleStatusToggle,
 } from 'pages/AlertDetails/hooks';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
+import { useAlertRule } from 'providers/Alert';
 import React, { useCallback, useState } from 'react';
 import { AlertDef } from 'types/api/alerts/def';
 
@@ -49,19 +50,14 @@ function DropdownMenuRenderer(
 
 function AlertActionButtons({
 	ruleId,
-	state,
 	alertDetails,
 }: {
 	ruleId: string;
-	state: string;
 	alertDetails: AlertHeaderProps['alertDetails'];
 }): JSX.Element {
 	const [dropdownOpen, setDropdownOpen] = useState(false);
-
-	const {
-		handleAlertStateToggle,
-		isAlertRuleEnabled,
-	} = useAlertRuleStatusToggle({ ruleId, state });
+	const { isAlertRuleDisabled } = useAlertRule();
+	const { handleAlertStateToggle } = useAlertRuleStatusToggle({ ruleId });
 
 	const { handleAlertDuplicate } = useAlertRuleDuplicate({
 		alertDetails: (alertDetails as unknown) as AlertDef,
@@ -101,12 +97,14 @@ function AlertActionButtons({
 
 	return (
 		<div className="alert-action-buttons">
-			<Tooltip title={!isAlertRuleEnabled ? 'Enable alert' : 'Disable alert'}>
-				<Switch
-					size="small"
-					onChange={handleAlertStateToggle}
-					checked={isAlertRuleEnabled}
-				/>
+			<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
+				{isAlertRuleDisabled !== undefined && (
+					<Switch
+						size="small"
+						onChange={handleAlertStateToggle}
+						checked={!isAlertRuleDisabled}
+					/>
+				)}
 			</Tooltip>
 			<CopyToClipboard textToCopy={window.location.href} />
 

diff --git a/frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx b/frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx
@@ -1,6 +1,7 @@
 import './AlertHeader.styles.scss';
 
-import { useMemo } from 'react';
+import { useAlertRule } from 'providers/Alert';
+import { useEffect, useMemo } from 'react';
 
 import AlertActionButtons from './ActionButtons/ActionButtons';
 import AlertLabels from './AlertLabels/AlertLabels';
@@ -13,10 +14,11 @@ export type AlertHeaderProps = {
 		alert: string;
 		id: string;
 		labels: Record<string, string>;
+		disabled: boolean;
 	};
 };
 function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
-	const { state, alert, labels } = alertDetails;
+	const { state, alert, labels, disabled } = alertDetails;
 
 	const labelsWithoutSeverity = useMemo(
 		() =>
@@ -26,6 +28,14 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 		[labels],
 	);
 
+	const { isAlertRuleDisabled, setIsAlertRuleDisabled } = useAlertRule();
+
+	useEffect(() => {
+		if (isAlertRuleDisabled === undefined) {
+			setIsAlertRuleDisabled(disabled);
+		}
+	}, [disabled, setIsAlertRuleDisabled, isAlertRuleDisabled]);
+
 	return (
 		<div className="alert-info">
 			<div className="alert-info__info-wrapper">
@@ -47,11 +57,7 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				</div>
 			</div>
 			<div className="alert-info__action-buttons">
-				<AlertActionButtons
-					alertDetails={alertDetails}
-					ruleId={alertDetails.id}
-					state={state}
-				/>
+				<AlertActionButtons alertDetails={alertDetails} ruleId={alertDetails.id} />
 			</div>
 		</div>
 	);

diff --git a/frontend/src/pages/AlertDetails/hooks.tsx b/frontend/src/pages/AlertDetails/hooks.tsx
@@ -27,7 +27,8 @@ 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 { useCallback, useMemo, useState } from 'react';
+import { useAlertRule } from 'providers/Alert';
+import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { generatePath, useLocation } from 'react-router-dom';
@@ -363,20 +364,14 @@ export const useTimelineTable = ({
 };
 
 export const useAlertRuleStatusToggle = ({
-	state,
 	ruleId,
 }: {
-	state: string;
 	ruleId: string;
 }): {
 	handleAlertStateToggle: (state: boolean) => void;
-	isAlertRuleEnabled: boolean;
 } => {
+	const { isAlertRuleDisabled, setIsAlertRuleDisabled } = useAlertRule();
 	const { notifications } = useNotifications();
-	const isAlertRuleInitiallyEnabled = state !== 'disabled';
-	const [isAlertRuleEnabled, setIsAlertRuleEnabled] = useState(
-		isAlertRuleInitiallyEnabled,
-	);
 
 	const queryClient = useQueryClient();
 	const handleError = useAxiosError();
@@ -386,28 +381,29 @@ export const useAlertRuleStatusToggle = ({
 		patchAlert,
 		{
 			onMutate: () => {
-				setIsAlertRuleEnabled((prev) => !prev);
+				setIsAlertRuleDisabled((prev) => !prev);
 			},
 			onSuccess: () => {
 				notifications.success({
-					message: `Alert has been ${!isAlertRuleEnabled ? 'enabled' : 'disabled'}.`,
+					message: `Alert has been ${isAlertRuleDisabled ? 'enabled' : 'disabled'}.`,
 				});
-
-				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS]);
 			},
 			onError: (error) => {
-				setIsAlertRuleEnabled(isAlertRuleInitiallyEnabled);
+				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS]);
 				handleError(error);
 			},
 		},
 	);
 
-	const handleAlertStateToggle = (state: boolean): void => {
-		const args = { id: parseInt(ruleId, 10), data: { disabled: !state } };
+	const handleAlertStateToggle = (): void => {
+		const args = {
+			id: parseInt(ruleId, 10),
+			data: { disabled: !isAlertRuleDisabled },
+		};
 		toggleAlertState(args);
 	};
 
-	return { handleAlertStateToggle, isAlertRuleEnabled };
+	return { handleAlertStateToggle };
 };
 
 export const useAlertRuleDuplicate = ({

diff --git a/frontend/src/providers/Alert.tsx b/frontend/src/providers/Alert.tsx
@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface AlertRuleContextType {
+	isAlertRuleDisabled: boolean | undefined;
+	setIsAlertRuleDisabled: React.Dispatch<
+		React.SetStateAction<boolean | undefined>
+	>;
+}
+
+const AlertRuleContext = createContext<AlertRuleContextType | undefined>(
+	undefined,
+);
+
+function AlertRuleProvider({
+	children,
+}: {
+	children: React.ReactNode;
+}): JSX.Element {
+	const [isAlertRuleDisabled, setIsAlertRuleDisabled] = useState<
+		boolean | undefined
+	>(undefined);
+
+	const value = React.useMemo(
+		() => ({ isAlertRuleDisabled, setIsAlertRuleDisabled }),
+		[isAlertRuleDisabled],
+	);
+
+	return (
+		<AlertRuleContext.Provider value={value}>
+			{children}
+		</AlertRuleContext.Provider>
+	);
+}
+
+export const useAlertRule = (): AlertRuleContextType => {
+	const context = useContext(AlertRuleContext);
+	if (context === undefined) {
+		throw new Error('useAlertRule must be used within an AlertRuleProvider');
+	}
+	return context;
+};
+
+export default AlertRuleProvider;