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
This commit is contained in:
Vikrant Gupta 2025-05-06 22:37:59 +05:30 committed by GitHub
parent b80626f5e2
commit 3648027576
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 0 deletions

View File

@ -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[] = [

View File

@ -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 ||