From 3648027576a6f08e7bfb5ef3b2de546e1ba3e6a6 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant@signoz.io>
Date: Tue, 6 May 2025 22:37:59 +0530
Subject: [PATCH] fix(ruler): improve the user experience for rule id migration
 (#7841)

* fix(ruler): improve the user experience for rule id migration

* fix(ruler): improve the user experience for rule id migration
---
 frontend/src/AppRoutes/routes.ts              |  2 ++
 .../src/pages/AlertDetails/AlertDetails.tsx   | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts
index b0492a8a18..5cf14278c2 100644
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -531,6 +531,7 @@ export const oldRoutes = [
 	'/traces-save-views',
 	'/settings/access-tokens',
 	'/messaging-queues',
+	'/alerts/edit',
 ];
 
 export const oldNewRoutesMapping: Record<string, string> = {
@@ -541,6 +542,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/api-keys',
 	'/messaging-queues': '/messaging-queues/overview',
+	'/alerts/edit': '/alerts/overview',
 };
 
 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
diff --git a/frontend/src/pages/AlertDetails/AlertDetails.tsx b/frontend/src/pages/AlertDetails/AlertDetails.tsx
index 29bb8df2f9..8b0c850dd4 100644
--- a/frontend/src/pages/AlertDetails/AlertDetails.tsx
+++ b/frontend/src/pages/AlertDetails/AlertDetails.tsx
@@ -6,7 +6,11 @@ import { Filters } from 'components/AlertDetailsFilters/Filters';
 import NotFound from 'components/NotFound';
 import RouteTab from 'components/RouteTab';
 import Spinner from 'components/Spinner';
+import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -70,6 +74,9 @@ BreadCrumbItem.defaultProps = {
 function AlertDetails(): JSX.Element {
 	const { pathname } = useLocation();
 	const { routes } = useRouteTabUtils();
+	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
+	const { notifications } = useNotifications();
 
 	const {
 		isLoading,
@@ -85,6 +92,27 @@ function AlertDetails(): JSX.Element {
 		document.title = alertTitle || document.title;
 	}, [alertDetailsResponse?.payload?.data.alert, isRefetching]);
 
+	useEffect(() => {
+		if (alertDetailsResponse?.payload?.data?.id) {
+			const ruleUUID = alertDetailsResponse.payload.data.id;
+			if (ruleId !== ruleUUID) {
+				urlQuery.set(QueryParams.ruleId, ruleUUID);
+				const generatedUrl = `${window.location.pathname}?${urlQuery}`;
+				notifications.info({
+					message:
+						"We're transitioning alert rule IDs from integers to UUIDs.Both old and new alert links will continue to work after this change - existing notifications using integer IDs will remain functional while new alerts will use the UUID format. Please use the updated link in the URL for future references",
+				});
+				safeNavigate(generatedUrl);
+			}
+		}
+	}, [
+		alertDetailsResponse?.payload?.data.id,
+		notifications,
+		ruleId,
+		safeNavigate,
+		urlQuery,
+	]);
+
 	if (
 		isError ||
 		!isValidRuleId ||