feat(bottom-strip): add the layout shell behind a feature flag

Mounts a 24px strip at the bottom of the app under the same gate as the side
nav, behind the SAVED_VIEW_ENABLED localStorage flag shared with saved views.
Shows the build version on the left for now; the per-page left slot and the
right side actions come in later tickets.

To give the strip a stable box, `.app-content` becomes a column flex and
`LayoutContent` takes the height left over instead of `height: 100%`. Fixed
bottom elements read `--bottom-strip-height`, which only exists while the strip
is mounted, so with the flag off every offset falls back to where it is today.

Hides nothing. Each later ticket hides the piece it replaces.

.github/CODEOWNERS

@@ -200,6 +200,15 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
+/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
+/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
+/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
+/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
+/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
+/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -207,6 +216,8 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv

frontend/.oxlintrc.json

@@ -297,9 +297,6 @@
     // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "signoz/no-msw-in-story-file": "error",
     // Bans msw imports in *.stories.tsx; handlers/mock data belong in the sibling .stories.mocks.tsx
-    "signoz/no-direct-react-router-import": "error",
-    // Steers new call sites to the src/lib/router facade. Warn, not error: ~310 pre-existing
-    // violations are what the v6 migration is working through (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -592,25 +589,6 @@
         "no-console": "off",
         "sonarjs/cognitive-complexity": "off"
       }
-    },
-    {
-      // The react-router allowlist from docs/react-router-v6-migration.md: the facade itself,
-      // the route table, the router mount, the two navigation hooks, the history singleton
-      // and the two harnesses that mount a router (jest and Storybook).
-      // Test files are deliberately absent, their router imports go away outright.
-      "files": [
-        "src/lib/router/**",
-        "src/AppRoutes/**",
-        "src/app/AppRouter.tsx",
-        "src/hooks/useSafeNavigate.ts",
-        "src/hooks/useNavigationBlocker.ts",
-        "src/lib/history.ts",
-        "src/tests/router.tsx",
-        "src/storybook/renderAtRoute.tsx"
-      ],
-      "rules": {
-        "signoz/no-direct-react-router-import": "off"
-      }
     }
   ]
 }

frontend/jest.setup.ts

@@ -5,8 +5,6 @@
 /**
  * Adds custom matchers from the react testing library to all tests
  */
-import { TextDecoder, TextEncoder } from 'node:util';
-
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'jest-styled-components';
@@ -16,14 +14,6 @@ import { server } from './src/mocks-server/server';
 import './src/styles.scss';
 // Establish API mocking before all tests.
 
-// react-router@7's entry point pulls in its server-runtime cookie signing,
-// which builds a TextEncoder at module scope. jsdom ships neither encoder, so
-// importing anything from the router throws before a test starts.
-Object.assign(globalThis, {
-	TextEncoder: globalThis.TextEncoder ?? TextEncoder,
-	TextDecoder: globalThis.TextDecoder ?? TextDecoder,
-});
-
 // Mock window.matchMedia
 window.matchMedia =
 	window.matchMedia ||

frontend/package.json

@@ -82,7 +82,7 @@
     "dompurify": "3.4.15",
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
-    "history": "5.3.0",
+    "history": "4.10.1",
     "html-to-image": "1.11.13",
     "http-status-codes": "2.3.0",
     "i18next": "^21.6.12",
@@ -118,7 +118,8 @@
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
     "react-rnd": "^10.5.3",
-    "react-router": "7.18.4",
+    "react-router-dom": "^5.2.0",
+    "react-router-dom-v5-compat": "6.30.6",
     "react-syntax-highlighter": "15.5.0",
     "react-use": "^17.3.2",
     "react-virtuoso": "4.0.3",
@@ -173,6 +174,7 @@
     "@types/crypto-js": "4.2.2",
     "@types/d3-hierarchy": "1.1.11",
     "@types/event-source-polyfill": "^1.0.0",
+    "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^16.10.3",
@@ -184,6 +186,7 @@
     "@types/react-grid-layout": "^1.1.2",
     "@types/react-redux": "^7.1.11",
     "@types/react-resizable": "3.0.3",
+    "@types/react-router-dom": "^5.1.6",
     "@types/react-syntax-highlighter": "15.5.13",
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",

frontend/plugins/__tests__/no-direct-react-router-import.test.mjs

@@ -1,91 +0,0 @@
-import { ruleTester } from './rule-tester.mjs';
-
-const FACADE = 'src/lib/router facade';
-const HISTORY = 'lib/history singleton';
-
-await ruleTester({
-	rule: 'no-direct-react-router-import',
-	valid: [
-		{
-			name: 'facade import',
-			code: "import { useAppNavigate } from 'lib/router/useAppNavigate';",
-		},
-		{
-			name:
-				'the history package itself is a version-bump concern, not a facade one',
-			code: "import { createBrowserHistory } from 'history';",
-		},
-		{
-			name: 'unrelated module whose name contains history',
-			code: "import { useHistoryPanel } from 'container/HistoryPanel';",
-		},
-		{
-			name: 'jest.mock is not an import',
-			code: "jest.mock('lib/history');",
-		},
-		{
-			name: 'require of an unrelated module',
-			code: "const x = require('lib/dashboardVariables');",
-		},
-		{
-			name: 'export without a source',
-			code: 'const a = 1;\nexport { a };',
-		},
-	],
-	invalid: [
-		{
-			name: 'react-router-dom named import',
-			code: "import { useHistory } from 'react-router-dom';",
-			errors: [{ message: FACADE, line: 1, column: 28 }],
-		},
-		{
-			name: 'react-router named import',
-			code: "import { useLocation } from 'react-router';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'react-router-dom type-only import',
-			code: "import type { RouteProps } from 'react-router-dom';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'react-router-dom is flagged as the v7 re-export shim',
-			code: "import { Outlet } from 'react-router-dom';",
-			errors: [{ message: 'only a re-export shim' }],
-		},
-		{
-			name: 'lib/history default import',
-			code: "import history from 'lib/history';",
-			errors: [{ message: HISTORY }],
-		},
-		{
-			name: 'lib/history require',
-			code: "const history = require('lib/history').default;",
-			errors: [{ message: HISTORY }],
-		},
-		{
-			name: 'dynamic import',
-			code: "const mod = await import('react-router-dom');",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 're-export',
-			code: "export { Link } from 'react-router-dom';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'export all',
-			code: "export * from 'react-router-dom';",
-			errors: [{ message: FACADE }],
-		},
-		{
-			name: 'one report per import statement',
-			code:
-				"import { Link } from 'react-router-dom';\nimport history from 'lib/history';",
-			errors: [
-				{ message: FACADE, line: 1 },
-				{ message: HISTORY, line: 2 },
-			],
-		},
-	],
-});

frontend/plugins/rules/no-direct-react-router-import.mjs

@@ -1,99 +0,0 @@
-/**
- * Rule: no-direct-react-router-import
- *
- * The v5 -> v6 migration (docs/react-router-v6-migration.md) routes every router
- * concern through the `src/lib/router/*` facade, so a version flip is a change to
- * one directory instead of ~300 call sites. This rule keeps new call sites from
- * reaching past it.
- *
- * `react-router-dom` is still flagged even though the package is gone: on v7 it is a
- * re-export shim over `react-router`, so reinstalling it would split the tree again.
- *
- * `history` (the package) is deliberately not flagged: it is a transitive concern of
- * the version bump, not something the facade replaces.
- *
- * The allowlist — the facade itself, the route table, the two navigation hooks, the
- * history singleton and the test harness — is applied via overrides in .oxlintrc.json,
- * not here, so the file list stays visible next to the severity.
- */
-
-import path from 'node:path';
-
-const HISTORY_MODULE_SUFFIX = path.join('src', 'lib', 'history');
-
-const MESSAGE_IDS = {
-	'react-router': 'router',
-	'react-router-dom': 'routerDom',
-	'lib/history': 'historySingleton',
-};
-
-/** Resolves `./history` / `../history` so files inside src/lib count too. */
-function isHistoryModule(specifier, filename) {
-	if (!specifier.startsWith('.') || !filename) {
-		return false;
-	}
-	const resolved = path.resolve(path.dirname(filename), specifier);
-	return (
-		resolved.endsWith(HISTORY_MODULE_SUFFIX) ||
-		resolved.endsWith(`${HISTORY_MODULE_SUFFIX}.ts`)
-	);
-}
-
-function messageIdFor(specifier, filename) {
-	if (MESSAGE_IDS[specifier] !== undefined) {
-		return MESSAGE_IDS[specifier];
-	}
-	return isHistoryModule(specifier, filename) ? 'historySingleton' : null;
-}
-
-export default {
-	meta: {
-		type: 'suggestion',
-		docs: {
-			description:
-				'Disallow direct react-router / lib/history imports; import from src/lib/router instead',
-			category: 'React Router migration',
-		},
-		schema: [],
-		messages: {
-			router:
-				'Do not import react-router directly. Use the src/lib/router facade (useAppNavigate, useAppLocation, useAppParams, AppLink, Redirect, matchRoute) so a version flip stays contained. See frontend/docs/react-router-v6-migration.md.',
-			routerDom:
-				'Do not import react-router-dom. The app is on react-router; on v7 react-router-dom is only a re-export shim, and installing it puts two copies of the router in the tree. Use the src/lib/router facade. See frontend/docs/react-router-v7-upgrade.md.',
-			historySingleton:
-				'Do not import the lib/history singleton. Use useAppNavigate() inside components, or the imperative helpers in src/lib/router/navigation.ts outside them — history loses basename handling under v6. See frontend/docs/react-router-v6-migration.md.',
-		},
-	},
-
-	create(context) {
-		const report = (sourceNode) => {
-			if (
-				sourceNode === null ||
-				sourceNode === undefined ||
-				typeof sourceNode.value !== 'string'
-			) {
-				return;
-			}
-			const messageId = messageIdFor(sourceNode.value, context.filename);
-			if (messageId !== null) {
-				context.report({ node: sourceNode, messageId });
-			}
-		};
-
-		return {
-			ImportDeclaration: (node) => report(node.source),
-			ImportExpression: (node) => report(node.source),
-			ExportAllDeclaration: (node) => report(node.source),
-			ExportNamedDeclaration: (node) => report(node.source),
-			CallExpression(node) {
-				const { callee } = node;
-				if (
-					(callee.type === 'Identifier' && callee.name === 'require') ||
-					callee.type === 'Import'
-				) {
-					report(node.arguments[0]);
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -16,7 +16,6 @@ import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
 import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
 import noMswInStoryFile from './rules/no-msw-in-story-file.mjs';
-import noDirectReactRouterImport from './rules/no-direct-react-router-import.mjs';
 
 export default {
 	meta: {
@@ -34,6 +33,5 @@ export default {
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
 		'no-return-text-nodes': noReturnTextNodes,
 		'no-msw-in-story-file': noMswInStoryFile,
-		'no-direct-react-router-import': noDirectReactRouterImport,
 	},
 };

frontend/pnpm-workspace.yaml

@@ -74,6 +74,11 @@ overrides:
  #      (postcss-selector-parser ^7.0.0)
  # remove: blocked, 4.2.0 is latest and the range is open, so the floor is what pulls the fix
  postcss-selector-parser@>=7.1.0 <7.1.3: '>=7.1.3 <8'
+ # via: @signozhq/ui > nuqs@2 (react-router ^6.4.0 || ^7)
+ # remove: blocked. GHSA-wrjc-x8rr-h8h6 and the deserializeErrors advisory are patched
+ # only in 7.18.0. Do NOT open the cap: react-router >=7 requires React 19 and breaks
+ # the app-wide CompatRouter, so those two moderates stay until the app moves to React 19
+ react-router@>=6.7.0 <6.30.6: '>=6.30.6 <7'
  # via: msw@1.3.2 (devDep) > inquirer@8 > external-editor@3.1.0 (tmp ^0.0.33)
  # remove: upgrade msw to >=2 (drops the inquirer/external-editor chain)
  tmp@<0.2.6: '>=0.2.6 <0.3.0'

frontend/src/AppRoutes/Private.tsx

@@ -1,4 +1,5 @@
 import { ReactChild, useCallback, useMemo } from 'react';
+import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { useListUsers } from 'api/generated/services/users';
@@ -8,9 +9,6 @@ import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { isEmpty } from 'lodash-es';
-import { matchRoute } from 'lib/router/matchRoute';
-import { Redirect } from 'lib/router/Redirect';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
@@ -30,7 +28,7 @@ import routes, {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
-	const location = useAppLocation();
+	const location = useLocation();
 	const { pathname } = location;
 	const {
 		org,
@@ -49,11 +47,10 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		() =>
 			new Map(
 				[...routes, LIST_LICENSES, SUPPORT_ROUTE].map((e) => {
-					const patterns = Array.isArray(e.path) ? e.path : [e.path];
-					const matches = patterns.some(
-						(pattern) => matchRoute(pathname, pattern) !== null,
-					);
-					return [matches ? 'current' : null, e];
+					const currentPath = matchPath(pathname, {
+						path: e.path,
+					});
+					return [currentPath === null ? null : 'current', e];
 				}),
 			),
 		[pathname],
@@ -245,7 +242,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			);
 			if (fromPathname) {
 				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				return <Redirect to={fromPathname} replace={false} />;
+				return <Redirect to={fromPathname} />;
 			}
 			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
 				return <Redirect to={ROUTES.HOME} />;
@@ -259,7 +256,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 		if (fromPathname) {
 			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			return <Redirect to={fromPathname} replace={false} />;
+			return <Redirect to={fromPathname} />;
 		}
 		return <Redirect to={ROUTES.HOME} />;
 	} else {

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter, Route, Routes, useLocation } from 'react-router';
+import { MemoryRouter, Route, Switch, useLocation } from 'react-router-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
@@ -237,17 +237,12 @@ function buildPrivateRouteTree(
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
 					<PrivateRoute>
-						<Routes>
-							<Route
-								path="*"
-								element={
-									<>
-										<div data-testid="children-rendered">Content</div>
-										<LocationDisplay />
-									</>
-								}
-							/>
-						</Routes>
+						<Switch>
+							<Route path="*">
+								<div data-testid="children-rendered">Content</div>
+								<LocationDisplay />
+							</Route>
+						</Switch>
 					</PrivateRoute>
 				</AppContext.Provider>
 			</MemoryRouter>

frontend/src/AppRoutes/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -21,7 +22,7 @@ import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
-import { getCurrentLocation, navigate, subscribe } from 'lib/router/navigation';
+import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
@@ -37,6 +38,12 @@ import defaultRoutes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
+const appRouter = (children: ReactNode): ReactNode => (
+	<Router history={history}>
+		<CompatRouter>{children}</CompatRouter>
+	</Router>
+);
+
 const appLayout = (children: ReactNode): ReactNode => (
 	<AppLayout>{children}</AppLayout>
 );
@@ -61,16 +68,14 @@ function App(): JSX.Element {
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 
 	const { hostname } = window.location;
-	// Through the facade, not the raw history: the router owns the base path
-	// now, so `history.location.pathname` would still carry it.
-	const [pathname, setPathname] = useState(getCurrentLocation().pathname);
+	const [pathname, setPathname] = useState(history.location.pathname);
 
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
 
 	const [isSentryInitialized, setIsSentryInitialized] = useState(false);
 
 	useEffect(() => {
-		return subscribe(({ location }) => {
+		return history.listen((location) => {
 			setPathname(location.pathname);
 		});
 	}, []);
@@ -434,7 +439,7 @@ function App(): JSX.Element {
 		// this needs to be on top of data missing error because if there is an error, data will never be loaded and it will
 		// move to indefinitive loading
 		if (userFetchError && pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-			navigate(ROUTES.SOMETHING_WENT_WRONG, { replace: true });
+			history.replace(ROUTES.SOMETHING_WENT_WRONG);
 		}
 
 		// if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting
@@ -450,6 +455,7 @@ function App(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<AppShell
+				router={appRouter}
 				overlays={
 					isLoggedInState && (
 						<>
@@ -462,19 +468,18 @@ function App(): JSX.Element {
 				<PrivateRoute>
 					<AppPageProviders layout={appLayout}>
 						<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-							<Routes>
-								{routes.flatMap(({ path, component: Component, nested }) =>
-									(Array.isArray(path) ? path : [path]).map((pattern) => (
-										<Route
-											key={pattern}
-											path={nested ? `${pattern}/*` : pattern}
-											element={<Component />}
-										/>
-									)),
-								)}
-								<Route path="/" element={<Home />} />
-								<Route path="*" element={<NotFound />} />
-							</Routes>
+							<Switch>
+								{routes.map(({ path, component, exact }) => (
+									<Route
+										key={`${path}`}
+										exact={exact}
+										path={path}
+										component={component}
+									/>
+								))}
+								<Route exact path="/" component={Home} />
+								<Route path="*" component={NotFound} />
+							</Switch>
 						</Suspense>
 					</AppPageProviders>
 				</PrivateRoute>

frontend/src/AppRoutes/routes.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 
 import {
@@ -61,25 +61,27 @@ const routes: AppRoutes[] = [
 	{
 		component: SignupPage,
 		path: ROUTES.SIGN_UP,
+		exact: true,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		nested: true,
+		exact: false,
 		component: OnboardingV2,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
+		exact: true,
 		component: Home,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		nested: true,
+		exact: false,
 		component: OrgOnboarding,
 		isPrivate: true,
 		key: 'ONBOARDING',
@@ -87,23 +89,27 @@ const routes: AppRoutes[] = [
 	{
 		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
+		exact: true,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
 		component: ServicesTablePage,
 		path: ROUTES.APPLICATION,
+		exact: true,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
+		exact: true,
 		component: ServiceMetricsPage,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
+		exact: true,
 		component: ServiceTopLevelOperationsPage,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
@@ -112,276 +118,320 @@ const routes: AppRoutes[] = [
 		path: ROUTES.SERVICE_MAP,
 		component: ServiceMapPage,
 		isPrivate: true,
+		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.LOGS_SAVE_VIEWS,
 		component: LogsSaveViews,
 		isPrivate: true,
+		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
+		exact: true,
 		component: TraceDetailV3,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		nested: true,
+		exact: false,
 		component: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
+		exact: true,
 		component: UsageExplorerPage,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
+		exact: true,
 		component: DashboardsListPage,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
+		exact: true,
 		component: DashboardPage,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.PUBLIC_DASHBOARD,
-		nested: true,
+		exact: false,
 		component: PublicDashboardPage,
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
+		exact: true,
 		component: DashboardPanelEditorPage,
 		isPrivate: true,
 		key: 'DASHBOARD_PANEL_EDITOR',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
+		exact: true,
 		component: EditRulesPage,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
+		exact: true,
 		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
+		exact: true,
 		component: CreateNewAlerts,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
+		exact: true,
 		component: AlertHistory,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
+		exact: true,
 		component: AlertOverview,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
+		exact: true,
 		component: TracesExplorer,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_SAVE_VIEWS,
+		exact: true,
 		component: TracesSaveViews,
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
+		exact: true,
 		component: TracesFunnels,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
+		exact: true,
 		component: TracesFunnelDetails,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
 	{
 		path: ROUTES.CHANNELS_NEW,
+		exact: true,
 		component: ChannelsNew,
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
 	{
 		path: ROUTES.CHANNELS_EDIT,
+		exact: true,
 		component: ChannelsEdit,
 		isPrivate: true,
 		key: 'CHANNELS_EDIT',
 	},
 	{
 		path: ROUTES.ALL_ERROR,
+		exact: true,
 		isPrivate: true,
 		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
+		exact: true,
 		component: ErrorDetails,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
+		exact: true,
 		component: StatusPage,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.LOGS,
+		exact: true,
 		component: Logs,
 		key: 'LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LIVE_LOGS,
+		exact: true,
 		component: LiveLogs,
 		key: 'LIVE_LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
+		exact: true,
 		component: PipelinePage,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
+		exact: true,
 		component: Login,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.FORGOT_PASSWORD,
+		exact: true,
 		component: ForgotPassword,
 		isPrivate: false,
 		key: 'FORGOT_PASSWORD',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
+		exact: true,
 		component: UnAuthorized,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
+		exact: true,
 		component: PasswordReset,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
+		exact: true,
 		component: SomethingWentWrong,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
+		exact: true,
 		component: WorkspaceBlocked,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
+		exact: true,
 		component: WorkspaceSuspended,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
+		exact: true,
 		component: WorkspaceAccessRestricted,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.INTEGRATIONS_DETAIL,
+		exact: true,
 		component: IntegrationsDetailsPage,
 		isPrivate: true,
 		key: 'INTEGRATIONS_DETAIL',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
+		exact: true,
 		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		exact: true,
 		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
+		exact: true,
 		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VOLUME_CONTROL',
 		isPrivate: true,
@@ -389,54 +439,63 @@ const routes: AppRoutes[] = [
 
 	{
 		path: ROUTES.METER,
+		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
+		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
+		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
+		exact: true,
 		component: ApiMonitoring,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
 	{
 		path: [ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT],
+		exact: true,
 		component: AIAssistantPage,
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_EXPLORER,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
@@ -445,6 +504,7 @@ const routes: AppRoutes[] = [
 
 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
+	exact: true,
 	component: SupportPage,
 	key: 'SUPPORT',
 	isPrivate: true,
@@ -452,6 +512,7 @@ export const SUPPORT_ROUTE: AppRoutes = {
 
 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
+	exact: true,
 	component: LicensePage,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
@@ -480,15 +541,9 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];
 
 export interface AppRoutes {
-	component: ComponentType;
-	/** An array registers the same component under each pattern. */
-	path: string | string[];
-	/**
-	 * The route renders its own child routes, so it matches as a prefix. v6
-	 * matches the whole path by default, so the mount appends a `/*` splat for
-	 * these and nothing for the rest.
-	 */
-	nested?: boolean;
+	component: RouteProps['component'];
+	path: RouteProps['path'];
+	exact: RouteProps['exact'];
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
 }

frontend/src/api/utils.ts

@@ -1,7 +1,7 @@
 import deleteLocalStorageKey from 'api/browser/localstorage/remove';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 
 import deleteSession from './v2/sessions/delete';
 
@@ -21,5 +21,5 @@ export const Logout = async (): Promise<void> => {
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
-	navigate(ROUTES.LOGIN);
+	history.push(ROUTES.LOGIN);
 };

frontend/src/app/AppProviders.tsx

@@ -16,7 +16,6 @@ export interface AppProvidersProps {
 	store: Store;
 	queryClient: QueryClient;
 	appContext: AppLayer;
-	router: AppLayer;
 	searchParams: AppLayer;
 }
 
@@ -28,34 +27,27 @@ export interface AppProvidersProps {
  * A new provider belongs here only if it holds process-wide state that does not
  * depend on the user, the license or the route. One that fetches on mount would
  * fire unauthenticated from here; put it in `AppShell` or lower.
- *
- * `router` is the outermost layer because `searchParams` (nuqs) reads the
- * router's `useNavigate` / `useSearchParams`. Everything below, including the
- * boot spinner, therefore renders inside the router.
  */
 function AppProviders({
 	children,
 	store,
 	queryClient,
 	appContext,
-	router,
 	searchParams,
 }: AppProvidersProps): JSX.Element {
 	return (
 		<HelmetProvider>
-			{router(
-				searchParams(
-					<ThemeProvider>
-						<TimezoneProvider>
-							<QueryClientProvider client={queryClient}>
-								<Provider store={store}>
-									<GlobalTimeStoreAdapter />
-									{appContext(children)}
-								</Provider>
-							</QueryClientProvider>
-						</TimezoneProvider>
-					</ThemeProvider>,
-				),
+			{searchParams(
+				<ThemeProvider>
+					<TimezoneProvider>
+						<QueryClientProvider client={queryClient}>
+							<Provider store={store}>
+								<GlobalTimeStoreAdapter />
+								{appContext(children)}
+							</Provider>
+						</QueryClientProvider>
+					</TimezoneProvider>
+				</ThemeProvider>,
 			)}
 		</HelmetProvider>
 	);

frontend/src/app/AppRouter.tsx

@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-import { unstable_HistoryRouter as HistoryRouter } from 'react-router';
-import history from 'lib/history';
-import { getBasePath } from 'utils/basePath';
-
-/**
- * The outermost layer. It is above `NuqsAdapter` on purpose:
- * `nuqs/adapters/react-router/v7` calls `useNavigate` and `useSearchParams`, so
- * it only works inside a router.
- *
- * Transitions are off on purpose: under one React keeps the previous screen up
- * instead of committing the Suspense fallback, so a route whose chunk is not
- * cached yet renders no loader at all. Rendering pending UI under it needs
- * `useNavigation()` and a data router. See docs/react-router-v7-upgrade.md.
- */
-export function appRouter(children: ReactNode): ReactNode {
-	return (
-		<HistoryRouter
-			basename={getBasePath()}
-			history={history}
-			useTransitions={false}
-		>
-			{children}
-		</HistoryRouter>
-	);
-}

frontend/src/app/AppShell.tsx

@@ -5,8 +5,11 @@ import { NotificationProvider } from 'hooks/useNotifications';
 import { CmdKProvider } from 'providers/cmdKProvider';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 
+import { AppLayer } from './types';
+
 export interface AppShellProps {
 	children: ReactNode;
+	router: AppLayer;
 	/** Mounted beside the routed content: the command palette and its siblings. */
 	overlays?: ReactNode;
 }
@@ -16,26 +19,28 @@ export interface AppShellProps {
  * fetches settle, above `PrivateRoute`, so it also covers the redirects and the
  * not-found route, and it survives every navigation.
  *
- * A new provider belongs here if it needs the user and has to outlive the page:
- * a global overlay, a shortcut host, anything one route opens and the next one
- * keeps. The router itself is higher up, in `AppProviders`.
+ * A new provider belongs here if it needs the router or the user and has to
+ * outlive the page: a global overlay, a shortcut host, anything one route opens
+ * and the next one keeps.
  *
  * `ConfigProvider` reads `useThemeConfig`, which needs `ThemeProvider` above it,
  * so the antd theme is settled here instead of by the caller.
  */
-function AppShell({ children, overlays }: AppShellProps): JSX.Element {
+function AppShell({ children, router, overlays }: AppShellProps): JSX.Element {
 	const themeConfig = useThemeConfig();
 
 	return (
 		<ConfigProvider theme={themeConfig}>
-			<CmdKProvider>
-				<NotificationProvider>
-					<ErrorModalProvider>
-						{overlays}
-						{children}
-					</ErrorModalProvider>
-				</NotificationProvider>
-			</CmdKProvider>
+			{router(
+				<CmdKProvider>
+					<NotificationProvider>
+						<ErrorModalProvider>
+							{overlays}
+							{children}
+						</ErrorModalProvider>
+					</NotificationProvider>
+				</CmdKProvider>,
+			)}
 		</ConfigProvider>
 	);
 }

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Row, Select, Spin } from 'antd';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
@@ -36,7 +35,8 @@ export function FilterSelect({
 		useCeleryFilterOptions(filterType);
 
 	const urlQuery = useUrlQuery();
-	const location = useAppLocation();
+	const history = useHistory();
+	const location = useLocation();
 
 	// Add state to track the current search input
 	const [searchValue, setSearchValue] = useState<string>('');
@@ -66,7 +66,7 @@ export function FilterSelect({
 				setQueryParamsFromOptions(
 					value as string[],
 					urlQuery,
-					navigate,
+					history,
 					location,
 					queryParam,
 				);
@@ -77,6 +77,7 @@ export function FilterSelect({
 			handleSearch,
 			shouldSetQueryParams,
 			urlQuery,
+			history,
 			location,
 			queryParam,
 			onChange,

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,5 @@
+import { useHistory, useLocation } from 'react-router-dom';
 import { Select, Spin } from 'antd';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { Typography } from '@signozhq/ui/typography';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
@@ -17,7 +16,8 @@ import './CeleryTaskConfigOptions.styles.scss';
 function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } =
 		useCeleryFilterOptions('celery.task_name');
-	const location = useAppLocation();
+	const history = useHistory();
+	const location = useLocation();
 
 	const urlQuery = useUrlQuery();
 
@@ -52,7 +52,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 						setQueryParamsFromOptions(
 							value,
 							urlQuery,
-							navigate,
+							history,
 							location,
 							QueryParams.taskName,
 						);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/WidgetCard/config';
@@ -51,7 +50,8 @@ function CeleryTaskBar({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -68,13 +68,13 @@ function CeleryTaskBar({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/WidgetCard/config';
@@ -55,7 +54,8 @@ function CeleryTaskGraph({
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 	analyticsEvent?: string;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -83,13 +83,13 @@ function CeleryTaskGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	return (

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Col, Row } from 'antd';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -49,7 +48,8 @@ function CeleryTaskLatencyGraph({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -80,13 +80,13 @@ function CeleryTaskLatencyGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	const selectedFilters = useMemo(

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,5 +1,5 @@
 import { QueryParams } from 'constants/query';
-import type { AppLocation } from 'lib/router/types';
+import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
 import { Widgets } from 'types/api/widgets/widget';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -17,13 +17,13 @@ export function getValuesFromQueryParams(
 export function setQueryParamsFromOptions(
 	value: string[],
 	urlQuery: URLSearchParams,
-	navigate: (to: string, options?: { replace?: boolean }) => void,
-	location: AppLocation,
+	history: History<unknown>,
+	location: Location<unknown>,
 	queryParams: QueryParams,
 ): void {
 	urlQuery.set(queryParams, value.join(','));
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-	navigate(generatedUrl, { replace: true });
+	history.replace(generatedUrl);
 }
 
 export function getFiltersFromQueryParams(

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
+import { useLocation } from 'react-router-dom';
 import { Button, Modal } from 'antd';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { createSubscription } from 'api/generated/services/subscriptions';
@@ -45,7 +45,7 @@ export default function ChatSupportGateway(): JSX.Element {
 			onError: handleBillingOnError,
 		},
 	);
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -5,8 +5,8 @@ import * as timeUtils from 'utils/timeUtils';
 
 import CustomTimePicker from './CustomTimePicker';
 
-jest.mock('react-router', () => {
-	const actual = jest.requireActual('react-router');
+jest.mock('react-router-dom', () => {
+	const actual = jest.requireActual('react-router-dom');
 
 	return {
 		...actual,

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
@@ -72,8 +72,6 @@ interface CustomTimePickerProps {
 	maxTime: number;
 	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
 	isModalTimeSelection?: boolean;
-	/** Lands on the trigger input. Not spread — the component takes no rest props. */
-	'data-testid'?: string;
 }
 
 function CustomTimePicker({
@@ -97,7 +95,6 @@ function CustomTimePicker({
 	minTime,
 	maxTime,
 	isModalTimeSelection = false,
-	'data-testid': dataTestId,
 }: CustomTimePickerProps): JSX.Element {
 	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
 		useState('Select / Enter Time Range');
@@ -109,7 +106,7 @@ function CustomTimePicker({
 	const [inputErrorDetails, setInputErrorDetails] = useState<
 		TimeRangeValidationResult['errorDetails'] | null
 	>(null);
-	const location = useAppLocation();
+	const location = useLocation();
 
 	const inputRef = useRef<InputRef>(null);
 	const initialInputValueOnOpenRef = useRef<string>('');
@@ -599,7 +596,6 @@ function CustomTimePicker({
 				>
 					<Input
 						ref={inputRef}
-						data-testid={dataTestId}
 						autoComplete="off"
 						className={cx(
 							'timeSelection-input',
@@ -686,5 +682,4 @@ CustomTimePicker.defaultProps = {
 	onExitLiveLogs: noop,
 	showLiveLogs: false,
 	showRecentlyUsed: true,
-	'data-testid': undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -114,7 +114,7 @@ function CustomTimePickerPopoverContent({
 	customDateTimeInputStatus = CustomTimePickerInputStatus.UNSET,
 	inputErrorDetails,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 
 	const isLogsExplorerPage = useMemo(
 		() => pathname === ROUTES.LOGS_EXPLORER,
@@ -180,7 +180,6 @@ function CustomTimePickerPopoverContent({
 						type="text"
 						className="time-btns"
 						key={option.label + option.value}
-						data-testid={`time-chip-${option.value}`}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
@@ -260,7 +259,6 @@ function CustomTimePickerPopoverContent({
 						<Button
 							type="text"
 							key={option.label + option.value}
-							data-testid={`time-option-${option.value}`}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
 								e.preventDefault();

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -59,7 +59,7 @@ jest.mock('providers/Timezone', () => ({
 	}),
 }));
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
 	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
 }));
 

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -7,11 +7,17 @@ import { DataSource } from 'types/common/queryBuilder';
 import { viewMockData } from '../__mock__/viewData';
 import ExplorerCard from '../ExplorerCard';
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+const historyReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
 	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
+	}),
 }));
 
 jest.mock('hooks/useSafeNavigate', () => ({

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -6,8 +6,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { viewMockData } from '../__mock__/viewData';
 import MenuItemGenerator from '../MenuItemGenerator';
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
 	}),

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -5,8 +5,8 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import SaveViewWithName from '../SaveViewWithName';
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
 	}),

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
@@ -11,7 +11,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');
 	const [feedback, setFeedback] = useState('');
-	const location = useAppLocation();
+	const location = useLocation();
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const [isLoading, setIsLoading] = useState(false);
 

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
@@ -39,7 +39,7 @@ function HeaderRightSection({
 	enableFeedback,
 	shareModalExtraOption,
 }: HeaderRightSectionProps): JSX.Element | null {
-	const location = useAppLocation();
+	const location = useLocation();
 
 	const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
 	const [openShareURLModal, setOpenShareURLModal] = useState(false);

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { matchRoute } from 'lib/router/matchRoute';
+import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
@@ -42,7 +41,7 @@ interface ShareURLModalProps {
 
 function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const location = useAppLocation();
+	const location = useLocation();
 	const { selectedTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -76,7 +75,7 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const isRouteToBeSharedWithTime = useMemo(
 		() =>
 			routesToBeSharedWithTime.some((route) =>
-				matchRoute(location.pathname, route, { exact: true }),
+				matchPath(location.pathname, { path: route, exact: true }),
 			),
 		[location.pathname],
 	);

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,5 +1,5 @@
 // Mock dependencies before imports
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -9,8 +9,9 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
-jest.mock('lib/router/useAppLocation', () => ({
-	useAppLocation: jest.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
 }));
 
 jest.mock('@signozhq/ui/sonner', () => ({
@@ -29,7 +30,7 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
-const mockUseAppLocation = useAppLocation as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
 const mockToast = toast as jest.Mocked<typeof toast>;
@@ -44,7 +45,7 @@ describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		logEventMock.mockReturnValue(Promise.resolve() as never);
-		mockUseAppLocation.mockReturnValue(mockLocation);
+		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
 		});

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -1,5 +1,5 @@
 // Mock dependencies before imports
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { logEventMock } from '__tests__/logEventMock';
@@ -7,8 +7,9 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
-jest.mock('lib/router/useAppLocation', () => ({
-	useAppLocation: jest.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
 }));
 
 jest.mock('../FeedbackModal', () => ({
@@ -44,7 +45,7 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
-const mockUseAppLocation = useAppLocation as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
 const defaultProps = {
@@ -60,7 +61,7 @@ const mockLocation = {
 describe('HeaderRightSection', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockUseAppLocation.mockReturnValue(mockLocation);
+		mockUseLocation.mockReturnValue(mockLocation);
 		// Default to licensed user (Enterprise or Cloud)
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: true,

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -1,8 +1,7 @@
 // Mock dependencies before imports
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { matchRoute } from 'lib/router/matchRoute';
+import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -13,12 +12,10 @@ import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
-jest.mock('lib/router/useAppLocation', () => ({
-	useAppLocation: jest.fn(),
-}));
-
-jest.mock('lib/router/matchRoute', () => ({
-	matchRoute: jest.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn(),
+	matchPath: jest.fn(),
 }));
 
 jest.mock('hooks/useUrlQuery', () => ({
@@ -51,12 +48,12 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
-const mockUseAppLocation = useAppLocation as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
 const mockGetMinMax = GetMinMax as jest.Mock;
 const mockUseCopyToClipboard = useCopyToClipboard as jest.Mock;
-const mockMatchRoute = matchRoute as jest.Mock;
+const mockMatchPath = matchPath as jest.Mock;
 
 const mockUrlQuery = {
 	get: jest.fn(),
@@ -74,7 +71,7 @@ describe('ShareURLModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 
-		mockUseAppLocation.mockReturnValue({
+		mockUseLocation.mockReturnValue({
 			pathname: TEST_PATH,
 		});
 
@@ -91,7 +88,7 @@ describe('ShareURLModal', () => {
 
 		mockUseCopyToClipboard.mockReturnValue([null, mockHandleCopyToClipboard]);
 
-		mockMatchRoute.mockReturnValue(null);
+		mockMatchPath.mockReturnValue(false);
 
 		// Reset URL query mocks - all return null by default
 		mockUrlQuery.get.mockReturnValue(null);
@@ -129,7 +126,7 @@ describe('ShareURLModal', () => {
 	});
 
 	it('should show absolute time toggle when on time-enabled route', () => {
-		mockMatchRoute.mockReturnValue({}); // Simulate being on a route that supports time
+		mockMatchPath.mockReturnValue(true); // Simulate being on a route that supports time
 
 		render(<ShareURLModal />);
 
@@ -149,7 +146,7 @@ describe('ShareURLModal', () => {
 
 	it('should toggle absolute time switch', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min', // Non-custom time should enable absolute time by default
 		});
@@ -172,7 +169,7 @@ describe('ShareURLModal', () => {
 		// Invalid - missing start and end time for custom
 		mockUrlQuery.get.mockReturnValue(null);
 
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 
 		render(<ShareURLModal />);
 
@@ -184,7 +181,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with absolute time for non-custom time', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min',
 		});
@@ -203,7 +200,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with custom time parameters', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: 'custom',
 		});
@@ -231,7 +228,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with relative time when absolute time is disabled', async () => {
 		const user = userEvent.setup();
-		mockMatchRoute.mockReturnValue({});
+		mockMatchPath.mockReturnValue(true);
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min',
 		});
@@ -252,12 +249,12 @@ describe('ShareURLModal', () => {
 
 	it('should handle routes that should be shared with time', async () => {
 		const user = userEvent.setup();
-		mockUseAppLocation.mockReturnValue({
+		mockUseLocation.mockReturnValue({
 			pathname: ROUTES.LOGS_EXPLORER,
 		});
 
-		mockMatchRoute.mockImplementation((pathname: string, route: string) =>
-			route === ROUTES.LOGS_EXPLORER ? {} : null,
+		mockMatchPath.mockImplementation(
+			(pathname: string, options: any) => options.path === ROUTES.LOGS_EXPLORER,
 		);
 
 		render(<ShareURLModal />);

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -52,7 +52,7 @@ function LaunchChatSupport({
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 
 	const isChatSupportEnabled = useMemo(() => {
 		if (!isFetchingFeatureFlags && (featureFlags || featureFlagsFetchError)) {

frontend/src/components/LogDetail/LogHighlights/TraceIdField.tsx

@@ -1,4 +1,4 @@
-import { AppLink } from 'lib/router/AppLink';
+import { Link } from 'react-router-dom';
 
 import styles from './LogHighlights.module.scss';
 
@@ -8,7 +8,7 @@ interface TraceIdFieldProps {
 
 function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
 	return (
-		<AppLink
+		<Link
 			to={{ pathname: `/trace/${traceId}` }}
 			target="_blank"
 			rel="noreferrer"
@@ -16,7 +16,7 @@ function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
 			title={traceId}
 		>
 			{traceId}
-		</AppLink>
+		</Link>
 	);
 }
 

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -1,8 +1,8 @@
 import ROUTES from 'constants/routes';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 
 export function useIsLogDetailsV2(): boolean {
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 	return (
 		pathname === ROUTES.LOGS_EXPLORER ||
 		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@signozhq/ui/typography';
 import { ReactNode, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
 	OctagonAlert,
 	Bolt,
@@ -13,7 +14,7 @@ import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { navigate } from 'lib/router/navigation';
+import { History } from 'history';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import {
 	KAFKA_SETUP_DOC_LINK,
@@ -44,6 +45,7 @@ export enum AttributesFilters {
 function ErrorTitleAndKey({
 	title,
 	parentTitle,
+	history,
 	isCloudUserVal,
 	errorMsg,
 	isLeaf,
@@ -51,6 +53,7 @@ function ErrorTitleAndKey({
 	title: string;
 	parentTitle: string;
 	isCloudUserVal: boolean;
+	history: History<unknown>;
 	errorMsg?: string;
 	isLeaf?: boolean;
 }): TreeDataNode {
@@ -72,7 +75,7 @@ function ErrorTitleAndKey({
 		}
 
 		if (isCloudUserVal && !!link) {
-			navigate(link);
+			history.push(link);
 		} else {
 			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
@@ -146,6 +149,7 @@ function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
 	parentTitle: string,
 	isCloudUserVal: boolean,
+	history: History<unknown>,
 ): TreeDataNode[] {
 	return response
 		.map((item) => {
@@ -158,6 +162,7 @@ function generateTreeDataNodes(
 						title: item.attribute,
 						errorMsg: item.error_message || '',
 						parentTitle,
+						history,
 						isCloudUserVal,
 					});
 				}
@@ -180,6 +185,7 @@ function AttributeCheckList({
 		setFilter(value);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const history = useHistory();
 
 	useEffect(() => {
 		const filteredData = onboardingStatusResponses.map((response) => {
@@ -189,6 +195,7 @@ function AttributeCheckList({
 					errorMsg: response.errorMsg,
 					isLeaf: true,
 					parentTitle: response.title,
+					history,
 					isCloudUserVal,
 				});
 			}
@@ -206,6 +213,7 @@ function AttributeCheckList({
 					filteredData,
 					response.title,
 					isCloudUserVal,
+					history,
 				),
 			};
 		});

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,19 +1,19 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import store from 'store';
-import { TestRouter } from 'tests/router';
 
 import NotFound from './index';
 
 describe('Not Found page test', () => {
 	it('should render Not Found page without errors', () => {
 		const { asFragment } = render(
-			<TestRouter>
+			<MemoryRouter>
 				<Provider store={store}>
 					<NotFound />
 				</Provider>
-			</TestRouter>,
+			</MemoryRouter>,
 		);
 		expect(asFragment()).toMatchSnapshot();
 	});

frontend/src/components/NotFound/__snapshots__/NotFound.test.tsx.snap

@@ -98,7 +98,6 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
 
 <div
     class="c0"
-    data-testid="not-found"
   >
     <img
       alt="not-found"
@@ -121,7 +120,6 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
     </div>
     <a
       class="c3"
-      data-discover="true"
       href="/home"
       tabindex="0"
     >

frontend/src/components/NotFound/index.tsx

@@ -6,7 +6,7 @@ import { Button, Container, Text, TextContainer } from './styles';
 
 function NotFound({ text = defaultText }: Props): JSX.Element {
 	return (
-		<Container data-testid="not-found">
+		<Container>
 			<NotFoundImage />
 
 			<TextContainer>

frontend/src/components/NotFound/styles.ts

@@ -1,7 +1,7 @@
-import { AppLink } from 'lib/router/AppLink';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const Button = styled(AppLink)`
+export const Button = styled(Link)`
 	border: 2px solid #2f80ed;
 	box-sizing: border-box;
 	border-radius: 10px;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx

@@ -47,29 +47,23 @@ export function QuerySearchV2Provider({
 		store.getState().setInitialExpression(initialExpression);
 	}, [initialExpression, store]);
 
-	// The URL owns the expression, in both directions. A provider can outlive the
-	// navigation away from the page it belongs to (a route-driven tab keeps the
-	// leaving pane mounted until its animation ends), so treating a param that
-	// disappeared as something to restore republishes it onto the URL of the page
-	// being entered.
+	const isInitialized = useRef(false);
 	useEffect(() => {
-		const userExpression = getUserExpressionFromCombined(
-			initialExpression,
-			urlExpression,
-		);
-		if (userExpression !== store.getState().committedExpression) {
-			store.getState().initializeFromUrl(userExpression);
+		if (!isInitialized.current && urlExpression) {
+			const cleanedExpression = getUserExpressionFromCombined(
+				initialExpression,
+				urlExpression,
+			);
+			store.getState().initializeFromUrl(cleanedExpression);
+			isInitialized.current = true;
 		}
 	}, [urlExpression, initialExpression, store]);
 
-	const publishedExpression = useRef(committedExpression);
 	useEffect(() => {
-		if (committedExpression === publishedExpression.current) {
-			return;
+		if (isInitialized.current || !urlExpression) {
+			setUrlExpression(committedExpression || null);
 		}
-		publishedExpression.current = committedExpression;
-		setUrlExpression(committedExpression || null);
-	}, [committedExpression, setUrlExpression]);
+	}, [committedExpression, setUrlExpression, urlExpression]);
 
 	useEffect(() => {
 		return (): void => {

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/QuerySearchExpressionProvider.test.tsx

@@ -110,22 +110,6 @@ describe('QuerySearchExpressionProvider', () => {
 		expect(result.current.expression).toBe('status = 500');
 	});
 
-	it('should follow the URL when the param is dropped', () => {
-		mockUrlValue = 'status = 500';
-
-		const { result, rerender } = renderHook(() => useTestHooks(), {
-			wrapper: createWrapper(),
-		});
-		expect(result.current.expression).toBe('status = 500');
-
-		mockSetQueryState.mockClear();
-		mockUrlValue = null;
-		rerender();
-
-		expect(result.current.expression).toBe('');
-		expect(mockSetQueryState).not.toHaveBeenCalledWith('status = 500');
-	});
-
 	it('should throw error when used outside provider', () => {
 		expect(() => {
 			renderHook(() => useExpression());

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
+	flex: 1;
+	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -0,0 +1,33 @@
+// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
+// only hand height down; each pane below owns its own scroll.
+.layout {
+	display: flex;
+	flex: 1;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+}
+
+// Positioned so overlays (settings drawer) paint above the content pane
+// without changing this pane's layout width.
+.filters {
+	width: 280px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	position: relative;
+	overflow: visible;
+	z-index: 2;
+}
+
+// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
+// `height: 100%`), which owns the scrolling.
+.content {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from 'react';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import QuickFilters from '../QuickFilters';
+
+import styles from './QuickFiltersLayout.module.scss';
+
+// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
+type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
+	typeof QuickFilters,
+	ComponentProps<typeof QuickFilters>
+>;
+
+export interface QuickFiltersLayoutProps {
+	quickFilterProps: QuickFiltersElementProps;
+	showFilters: boolean;
+	className?: string;
+	contentClassName?: string;
+	testId?: string;
+	children: ReactNode;
+}
+
+function QuickFiltersLayout({
+	quickFilterProps,
+	showFilters,
+	className,
+	contentClassName,
+	testId,
+	children,
+}: QuickFiltersLayoutProps): JSX.Element {
+	return (
+		<div className={cx(styles.layout, className)} data-testid={testId}>
+			{showFilters && (
+				<aside
+					className={styles.filters}
+					data-testid="quick-filters-layout-filters"
+				>
+					<QuickFilters {...quickFilterProps} />
+				</aside>
+			)}
+			<section
+				className={cx(styles.content, contentClassName)}
+				data-testid="quick-filters-layout-content"
+			>
+				<OverlayScrollbar>
+					<div>{children}</div>
+				</OverlayScrollbar>
+			</section>
+		</div>
+	);
+}
+
+export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../types';
+import QuickFiltersLayout from '../QuickFiltersLayout';
+
+jest.mock('../QuickFiltersLayout.module.scss', () => ({
+	__esModule: true,
+	default: {
+		layout: 'layout',
+		filters: 'filters',
+		content: 'content',
+	},
+}));
+
+jest.mock('../../QuickFilters', () => ({
+	__esModule: true,
+	default: ({ source }: { source: string }): JSX.Element => (
+		<div data-testid="quick-filters">{source}</div>
+	),
+}));
+
+const quickFilterProps = {
+	source: QuickFiltersSource.TRACES_EXPLORER,
+	handleFilterVisibilityChange: jest.fn(),
+};
+
+describe('QuickFiltersLayout', () => {
+	it('renders QuickFilters with the given props inside the filters pane', () => {
+		render(
+			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
+		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
+		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
+			QuickFiltersSource.TRACES_EXPLORER,
+		);
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
+			'content',
+		);
+	});
+
+	it('does not render the filters pane when showFilters is false', () => {
+		render(
+			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
+	it('merges classNames onto the root and content panes', () => {
+		render(
+			<QuickFiltersLayout
+				showFilters
+				quickFilterProps={quickFilterProps}
+				className="page-root"
+				contentClassName="page-content"
+				testId="page"
+			>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const root = screen.getByTestId('page');
+		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
+			'content',
+			'page-content',
+		);
+	});
+});

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -6,27 +6,12 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
+	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
-	&.qf-logs-explorer {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-exceptions {
-		height: 100vh;
-	}
-
-	&.qf-api-monitoring {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-traces-explorer {
-		height: calc(100vh - 45px);
-	}
-
 	&.hidden {
 		width: 0;
 	}

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -0,0 +1,38 @@
+// Hands the parent's height down to the active pane and lets the pane scroll
+// its own content, so TopNav and the tab bar stay put. Child combinators only
+// (nested Tabs must not be caught).
+.routeTab {
+	flex: 1;
+	min-height: 0;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) {
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active)
+	> :global(.overlay-scrollbar) {
+	flex: 1;
+	min-height: 0;
+}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -1,12 +1,13 @@
-import { navigate } from 'lib/router/navigation';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
-jest.mock('lib/router/navigation', () => ({
-	...jest.requireActual('lib/router/navigation'),
-	navigate: jest.fn(),
+jest.mock('./RouteTab.module.scss', () => ({
+	__esModule: true,
+	default: { routeTab: 'routeTab' },
 }));
 
 function DummyComponent1(): JSX.Element {
@@ -32,44 +33,94 @@ const testRoutes: RouteTabProps['routes'] = [
 ];
 
 describe('RouteTab component', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
 	it('renders correctly', () => {
-		render(<RouteTab routes={testRoutes} activeKey="Tab1" />);
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
 		expect(screen.getByRole('tab', { name: 'Tab1' })).toBeInTheDocument();
 		expect(screen.getByRole('tab', { name: 'Tab2' })).toBeInTheDocument();
 	});
 
 	it('renders correct number of tabs', () => {
-		render(<RouteTab routes={testRoutes} activeKey="Tab1" />);
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
 		const tabs = screen.getAllByRole('tab');
 		expect(tabs).toHaveLength(testRoutes.length);
 	});
 
 	it('sets provided activeKey as active tab', () => {
-		render(<RouteTab routes={testRoutes} activeKey="Tab2" />);
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab2" />
+			</Router>,
+		);
 		expect(
 			screen.getByRole('tab', { name: 'Tab2', selected: true }),
 		).toBeInTheDocument();
 	});
 
 	it('navigates to correct route on tab click', () => {
-		render(<RouteTab routes={testRoutes} activeKey="Tab1" />);
-		expect(navigate).not.toHaveBeenCalled();
+		const history = createMemoryHistory();
+		render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(history.location.pathname).toBe('/');
 		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
-		expect(navigate).toHaveBeenCalledWith('/tab2');
+		expect(history.location.pathname).toBe('/tab2');
+	});
+
+	it('applies the layout class alongside a custom className', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab
+					history={history}
+					routes={testRoutes}
+					activeKey="Tab1"
+					className="custom-tabs"
+				/>
+			</Router>,
+		);
+		expect(container.querySelector('.ant-tabs')).toHaveClass(
+			'routeTab',
+			'custom-tabs',
+		);
+	});
+
+	it('renders the active tab content inside an overlay scrollbar', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(
+			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
+		).toHaveTextContent('Dummy Component 1');
 	});
 
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
+		const history = createMemoryHistory();
 		render(
-			<RouteTab
-				routes={testRoutes}
-				activeKey="Tab1"
-				onChangeHandler={onChangeHandler}
-			/>,
+			<Router history={history}>
+				<RouteTab
+					routes={testRoutes}
+					activeKey="Tab1"
+					onChangeHandler={onChangeHandler}
+					history={history}
+				/>
+			</Router>,
 		);
 		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();

frontend/src/components/RouteTab/index.tsx

@@ -1,31 +1,48 @@
+import {
+	generatePath,
+	matchPath,
+	useLocation,
+	useParams,
+} from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import { buildRoutePath } from 'lib/router/buildRoutePath';
-import { matchRoute } from 'lib/router/matchRoute';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { useAppParams } from 'lib/router/useAppParams';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
+import styles from './RouteTab.module.scss';
+
 interface Params {
 	[key: string]: string;
 }
 
+/**
+ * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
+ * stays put. Mounted as the page root the pane is bounded to the viewport; inside
+ * a plain block wrapper the scroller is inert and the page scrolls as usual.
+ * Pane content that needs a bounded box must size itself with `height: 100%`
+ * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
+ */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
+	history,
 	showRightSection,
+	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
-	const params = useAppParams<Params>();
-	const location = useAppLocation();
+	const params = useParams<Params>();
+	const location = useLocation();
 
 	// Find the matching route for the current pathname
 	const currentRoute = routes.find((route) => {
 		const routePath = route.route.split('?')[0];
-		return matchRoute(location.pathname, routePath, { exact: true });
+		return matchPath(location.pathname, {
+			path: routePath,
+			exact: true,
+		});
 	});
 
 	const onChange = (activeRoute: string): void => {
@@ -36,13 +53,8 @@ function RouteTab({
 		const selectedRoute = routes.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			const resolvedRoute = buildRoutePath(
-				selectedRoute.route,
-				Object.fromEntries(
-					Object.entries(params).filter(([, v]) => v !== undefined),
-				) as Record<string, string>,
-			);
-			navigate(resolvedRoute);
+			const resolvedRoute = generatePath(selectedRoute.route, params);
+			history.push(resolvedRoute);
 		}
 	};
 
@@ -50,11 +62,16 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: <Component />,
+		children: (
+			<OverlayScrollbar>
+				<Component />
+			</OverlayScrollbar>
+		),
 	}));
 
 	return (
 		<Tabs
+			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/components/RouteTab/types.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { TabsProps } from 'antd';
+import { History } from 'history';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -12,5 +13,6 @@ export interface RouteTabProps {
 	routes: TabRoutes[];
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: (key: string) => void;
+	history: History<unknown>;
 	showRightSection: boolean;
 }

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -3,7 +3,7 @@
  */
 // ---- Mocks (must run BEFORE importing the component) ----
 import ROUTES from 'constants/routes';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import '@testing-library/jest-dom/extend-expect';
@@ -24,12 +24,61 @@ afterAll(() => {
 	delete (HTMLElement.prototype as any).scrollIntoView;
 });
 
-jest.mock('lib/router/navigation', () => ({
-	...jest.requireActual('lib/router/navigation'),
-	navigate: jest.fn(),
-}));
+// mock history.push / replace / go / location
+jest.mock('lib/history', () => {
+	const location = { pathname: '/', search: '', hash: '' };
 
-const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
+	const stack: { pathname: string; search: string }[] = [
+		{ pathname: '/', search: '' },
+	];
+
+	const push = jest.fn((path: string) => {
+		const [rawPath, rawQuery] = path.split('?');
+		const pathname = rawPath || '/';
+		const search = path.includes('?') ? `?${rawQuery || ''}` : '';
+
+		location.pathname = pathname;
+		location.search = search;
+
+		stack.push({ pathname, search });
+		return undefined;
+	});
+
+	const replace = jest.fn((path: string) => {
+		const [rawPath, rawQuery] = path.split('?');
+		const pathname = rawPath || '/';
+		const search = path.includes('?') ? `?${rawQuery || ''}` : '';
+
+		location.pathname = pathname;
+		location.search = search;
+
+		if (stack.length > 0) {
+			stack[stack.length - 1] = { pathname, search };
+		} else {
+			stack.push({ pathname, search });
+		}
+		return undefined;
+	});
+
+	const listen = jest.fn();
+	const go = jest.fn((n: number) => {
+		if (n < 0 && stack.length > 1) {
+			stack.pop();
+		}
+		const top = stack[stack.length - 1] || { pathname: '/', search: '' };
+		location.pathname = top.pathname;
+		location.search = top.search;
+	});
+
+	return {
+		push,
+		replace,
+		listen,
+		go,
+		location,
+		__stack: stack,
+	};
+});
 
 // Mock ResizeObserver for Jest/jsdom
 class ResizeObserver {
@@ -110,14 +159,14 @@ describe('CmdKPalette', () => {
 		expect(screen.getByText('Switch to Dark Mode')).toBeInTheDocument();
 	});
 
-	it('clicking a navigation item navigates to the correct route', async () => {
+	it('clicking a navigation item calls history.push with correct route', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const homeItem = screen.getByText(HOME_LABEL);
 		await user.click(homeItem);
 
-		expect(mockNavigate).toHaveBeenCalledWith(ROUTES.HOME);
+		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
 	});
 
 	it('role-based filtering (basic smoke)', () => {

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import cx from 'classnames';
+import { useLocation } from 'react-router-dom';
 import {
 	CommandDialog,
 	CommandEmpty,
@@ -22,8 +23,7 @@ import {
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { IS_DEV } from 'lib/env';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
 import { createShortcutActions } from '../../constants/shortcutActions';
@@ -77,7 +77,7 @@ export function CmdKPalette({
 	const { open, setOpen } = useCmdK();
 
 	const { setAutoSwitch, setTheme, theme } = useThemeMode();
-	const location = useAppLocation();
+	const location = useLocation();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const startNewConversation = useAIAssistantStore(
 		(s) => s.startNewConversation,
@@ -120,7 +120,7 @@ export function CmdKPalette({
 	}
 
 	function onClickHandler(key: string): void {
-		navigate(key);
+		history.push(key);
 	}
 
 	const handleOpenAIAssistant = (): void => {

frontend/src/constants/localStorage.ts

@@ -47,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/theme.ts

@@ -129,6 +129,10 @@ const themeColors = {
 		salmon2: '#FFAB91',
 		salmon3: '#E0876A',
 	},
+	/* Series palette (dark). Hues in the red band are deliberately absent: red is
+	   reserved for thresholds and error states, so an arbitrary series must never
+	   claim it. generateColor indexes by `hash % Object.keys(...).length`, so
+	   adding or removing an entry recolors every existing chart. */
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
@@ -152,13 +156,13 @@ const themeColors = {
 
 		// Oranges (3)
 		festivalOrange: '#F2994A',
-		coralOrange: '#E17055',
+		amber1: '#E1A155',
 		pumpkin: '#FF7F50',
 
-		// Reds (3)
-		radicalRed: '#FF1A66',
-		crimsonRed: '#EB5757',
-		fireRed: '#E10600',
+		// Olives / Greens (3)
+		olive1: '#DFC33A',
+		olive2: '#D5E55D',
+		green7: '#81C220',
 
 		// Pinks (3)
 		hotPink: '#E84393',
@@ -191,9 +195,9 @@ const themeColors = {
 		orange1: '#D35400',
 		orange2: '#E67E22',
 		orange3: '#F5B041',
-		red1: '#C0392B',
-		red2: '#E74C3C',
-		red3: '#EC7063',
+		green8: '#5AC02B',
+		green9: '#48E043',
+		green10: '#68E788',
 		pink1: '#D81B60',
 		pink2: '#E91E63',
 		pink3: '#F06292',
@@ -212,9 +216,9 @@ const themeColors = {
 		coral1: '#E67E22',
 		coral2: '#F39C12',
 		coral3: '#F5B041',
-		crimson1: '#C0392B',
-		crimson2: '#E74C3C',
-		crimson3: '#EC7063',
+		teal7: '#2BC07B',
+		teal8: '#43E0C5',
+		teal9: '#68D9E7',
 		violet1: '#8E44AD',
 		violet2: '#9B59B6',
 		violet3: '#BB8FCE',
@@ -224,18 +228,18 @@ const themeColors = {
 		forest1: '#27AE60',
 		forest2: '#2ECC71',
 		forest3: '#58D68D',
-		blush1: '#FF6F91',
+		cyan4: '#83C2EB',
 		blush2: '#FF85A2',
 		blush3: '#FFA0B3',
 		lavender1: '#9B59B6',
 		lavender2: '#AF7AC5',
 		lavender3: '#C39BD3',
-		tomato1: '#E74C3C',
-		tomato2: '#EC7063',
-		tomato3: '#F1948A',
-		salmon1: '#FF6B6B',
-		salmon2: '#FF8787',
-		salmon3: '#FFA1A1',
+		blue7: '#4375E0',
+		blue8: '#686DE7',
+		indigo1: '#A68EED',
+		indigo2: '#B980EA',
+		purple6: '#EE98D9',
+		olive3: '#F2F0AE',
 		mustard1: '#F1C40F',
 		mustard2: '#F7DC6F',
 		mustard3: '#F9E79F',
@@ -254,9 +258,9 @@ const themeColors = {
 		blue4: '#2874A6',
 		blue5: '#2E86C1',
 		blue6: '#3498DB',
-		red4: '#C0392B',
-		red5: '#E74C3C',
-		red6: '#EC7063',
+		purple4: '#A52BC0',
+		purple5: '#E043D0',
+		magenta4: '#E768B5',
 		orange4: '#D35400',
 		orange5: '#E67E22',
 		orange6: '#EB984E',
@@ -267,18 +271,19 @@ const themeColors = {
 		gold5: '#F1C40F',
 		gold6: '#F4D03F',
 	},
+	/* Series palette (light). Same red-free constraint as chartcolors above. */
 	lightModeColor: {
-		radicalRed: '#D81B60',
+		magenta1: '#D81B60',
 
 		dodgerBlueDark: '#1E5BD9',
 		steelgrey: '#344B6B',
 		steelpurple: '#5E548E',
 		steelindigo: '#8E4A7C',
 		steelpink: '#B63A6F',
-		steelcoral: '#E14B5A',
+		amber1: '#E1A14B',
 		steelorange: '#E76F2F',
 		steelgold: '#E09B00',
-		steelrust: '#C93A50',
+		olive1: '#C9BD3A',
 		steelgreen: '#2F7D69',
 
 		mediumOrchidDark: '#8E24AA',
@@ -286,17 +291,17 @@ const themeColors = {
 		seaGreen: '#1E7F5A',
 		turquoiseBlueDark: '#007EA7',
 		silverDark: '#5F5F5F',
-		outrageousOrangeDark: '#E64A19',
-		roseBudDark: '#D84315',
+		green1: '#ACDB24',
+		green2: '#66CC21',
 		deepSkyBlueDark: '#0277BD',
 		royalBlue: '#2A4FDB',
 
 		avocadoDark: '#6B6B1E',
 		mintGreenDark: '#2E9E55',
-		chestnut: '#8B3A3A',
+		green3: '#3F8B3A',
 		limaDark: '#5C7F00',
 		olive: '#6E7F00',
-		beautyBushDark: '#C93C3C',
+		green4: '#3CC964',
 
 		danube: '#4F6FB3',
 		oliveDrab: '#4F7F1A',
@@ -304,13 +309,13 @@ const themeColors = {
 		electricLimeDark: '#6B8F00',
 		robin: '#2F4FCC',
 
-		harleyOrange: '#CC2E12',
+		teal1: '#1FBF83',
 		gladeGreen: '#4F7F46',
 		hemlock: '#5C5C45',
 		vidaLoca: '#3D6B00',
 		rust: '#993300',
 
-		red: '#C62828',
+		teal2: '#28C6C1',
 		blue: '#1A237E',
 		green: '#1B7F3A',
 		purple: '#6A1B9A',
@@ -320,7 +325,7 @@ const themeColors = {
 		brown: '#7A3A1E',
 		teal: '#006D6F',
 		limeDark: '#4C8C2B',
-		maroon: '#6D1B1B',
+		cyan1: '#1B546D',
 		navy: '#0D1B5E',
 		gray: '#616161',
 
@@ -328,25 +333,25 @@ const themeColors = {
 		indigo: '#303F9F',
 		slateGray: '#556B7C',
 		chocolate: '#9C4A1A',
-		tomato: '#E53935',
+		blue1: '#3B74DF',
 		steelBlue: '#3A6EA5',
 
 		peruDark: '#B35E00',
 		darkOliveGreen: '#445B1F',
-		indianRed: '#B04040',
+		blue2: '#4041B0',
 		mediumSlateBlue: '#5C6BC0',
-		rosyBrownDark: '#A94444',
+		indigo1: '#6644A9',
 		darkSlateGray: '#2E4A4A',
 
 		fuchsia: '#C511C5',
-		salmonDark: '#E64A3C',
-		darkSalmonDark: '#C85A3A',
+		indigo2: '#AD42E0',
+		purple1: '#C83AC5',
 		paleVioletRedDark: '#C2186A',
 
 		mediumPurple: '#7E57C2',
 		darkOrchid: '#7B1FA2',
 		mediumSeaGreenDark: '#2E8B57',
-		lightCoralDark: '#E57373',
+		purple2: '#E573BC',
 
 		gold: '#D4AF37',
 		sandyBrownDark: '#C76A15',

frontend/src/container/AIAssistant/AIAssistantDrawer/AIAssistantDrawer.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { navigate } from 'lib/router/navigation';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Drawer } from 'antd';
 import ROUTES from 'constants/routes';
@@ -12,6 +12,8 @@ import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { VariantContext } from '../VariantContext';
 
 export default function AIAssistantDrawer(): JSX.Element {
+	const history = useHistory();
+
 	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
 	const activeConversationId = useAIAssistantStore(
 		(s) => s.activeConversationId,
@@ -26,10 +28,10 @@ export default function AIAssistantDrawer(): JSX.Element {
 			return;
 		}
 		closeDrawer();
-		navigate(
+		history.push(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
 		);
-	}, [activeConversationId, closeDrawer]);
+	}, [activeConversationId, closeDrawer, history]);
 
 	const handleNewConversation = useCallback(() => {
 		startNewConversation();

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Minus, Plus, X } from '@signozhq/icons';
@@ -32,7 +31,8 @@ import styles from './AIAssistantModal.module.scss';
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function AIAssistantModal(): JSX.Element | null {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const [showHistory, setShowHistory] = useState(false);
 
 	const isOpen = useAIAssistantStore((s) => s.isModalOpen);
@@ -94,11 +94,11 @@ export default function AIAssistantModal(): JSX.Element | null {
 		// Router state tells AIAssistantPage to skip its mount-time Opened fire:
 		// the assistant was already open in the modal, so this is a surface
 		// switch, not a new open.
-		navigate(
+		history.push(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
-			{ state: { fromInApp: true } },
+			{ fromInApp: true },
 		);
-	}, [activeConversationId, closeModal]);
+	}, [activeConversationId, closeModal, history]);
 
 	const handleNew = useCallback(() => {
 		void logEvent(AIAssistantEvents.NewChatClicked, {

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { matchRoute } from 'lib/router/matchRoute';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Plus, X } from '@signozhq/icons';
@@ -23,11 +21,13 @@ const AI_ASSISTANT_PANEL_OPEN_CLASS = 'ai-assistant-panel-open';
 const AI_ASSISTANT_PANEL_WIDTH_VAR = '--ai-assistant-panel-width';
 
 export default function AIAssistantPanel(): JSX.Element | null {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const [showHistory, setShowHistory] = useState(false);
 
 	const isOpen = useAIAssistantStore((s) => s.isDrawerOpen);
-	const isFullScreenPage = !!matchRoute(pathname, ROUTES.AI_ASSISTANT, {
+	const isFullScreenPage = !!matchPath(pathname, {
+		path: ROUTES.AI_ASSISTANT,
 		exact: true,
 	});
 	const activeConversationId = useAIAssistantStore(
@@ -47,11 +47,11 @@ export default function AIAssistantPanel(): JSX.Element | null {
 		// Router state tells AIAssistantPage to skip its mount-time Opened fire:
 		// the assistant was already open in the drawer, so this is a surface
 		// switch, not a new open.
-		navigate(
+		history.push(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
-			{ state: { fromInApp: true } },
+			{ fromInApp: true },
 		);
-	}, [activeConversationId, closeDrawer]);
+	}, [activeConversationId, closeDrawer, history]);
 
 	const handleNew = useCallback(() => {
 		void logEvent(AIAssistantEvents.NewChatClicked, {

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { matchRoute } from 'lib/router/matchRoute';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
@@ -22,11 +21,12 @@ import styles from './AIAssistantTrigger.module.scss';
  * Hidden when the panel is already open or when on the full-screen AI Assistant page.
  */
 export default function AIAssistantTrigger(): JSX.Element | null {
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
 	const isModalOpen = useAIAssistantStore((s) => s.isModalOpen);
 
-	const isFullScreenPage = !!matchRoute(pathname, ROUTES.AI_ASSISTANT, {
+	const isFullScreenPage = !!matchPath(pathname, {
+		path: ROUTES.AI_ASSISTANT,
 		exact: true,
 	});
 

frontend/src/container/AIAssistant/ConversationView/ConversationView.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import cx from 'classnames';
-import { useAppLocation } from 'lib/router/useAppLocation';
 
 import logEvent from 'api/common/logEvent';
 
@@ -26,7 +26,7 @@ export default function ConversationView({
 }: ConversationViewProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
-	const location = useAppLocation();
+	const location = useLocation();
 
 	const conversation = useAIAssistantStore(
 		(s) => s.conversations[conversationId],

frontend/src/container/AIAssistant/ConversationView/__tests__/ConversationView.test.tsx

@@ -1,8 +1,9 @@
+import { MemoryRouter } from 'react-router-dom';
+// eslint-disable-next-line no-restricted-imports
 import { fireEvent, render } from '@testing-library/react';
 import { MessageContext } from 'api/ai-assistant/chat';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
 import { VariantContext } from 'container/AIAssistant/VariantContext';
-import { TestRouter } from 'tests/router';
 
 const CHIP_ID = 'recent-errors';
 const CHIP_TEXT = 'Show me recent errors';
@@ -86,11 +87,11 @@ function renderView(variant: 'panel' | 'page' | 'modal'): {
 	getByTestId: (id: string) => HTMLElement;
 } {
 	return render(
-		<TestRouter initialRoute="/dashboard/dashboard-123">
+		<MemoryRouter initialEntries={['/dashboard/dashboard-123']}>
 			<VariantContext.Provider value={variant}>
 				<ConversationView conversationId={CONVERSATION_ID} />
 			</VariantContext.Provider>
-		</TestRouter>,
+		</MemoryRouter>,
 	);
 }
 

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
+import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import { matchRoute } from 'lib/router/matchRoute';
-import { navigate } from 'lib/router/navigation';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
@@ -217,11 +215,20 @@ function signalMatchesPathname(
 ): boolean {
 	switch (signal) {
 		case ApplyFilterSignalDTO.logs:
-			return Boolean(matchRoute(pathname, ROUTES.LOGS_EXPLORER));
+			return Boolean(
+				matchPath(pathname, { path: ROUTES.LOGS_EXPLORER, exact: false }),
+			);
 		case ApplyFilterSignalDTO.traces:
-			return Boolean(matchRoute(pathname, ROUTES.TRACES_EXPLORER));
+			return Boolean(
+				matchPath(pathname, { path: ROUTES.TRACES_EXPLORER, exact: false }),
+			);
 		case ApplyFilterSignalDTO.metrics:
-			return Boolean(matchRoute(pathname, ROUTES.METRICS_EXPLORER_EXPLORER));
+			return Boolean(
+				matchPath(pathname, {
+					path: ROUTES.METRICS_EXPLORER_EXPLORER,
+					exact: false,
+				}),
+			);
 		default:
 			return false;
 	}
@@ -270,6 +277,7 @@ function explorerRouteForSignal(signal: ApplyFilterSignalDTO): string | null {
 }
 
 interface ApplyFilterDeps {
+	history: ReturnType<typeof useHistory>;
 	pathname: string;
 	redirectWithQueryBuilderData: ReturnType<
 		typeof useQueryBuilder
@@ -354,9 +362,9 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 		return;
 	}
 	// eslint-disable-next-line no-console
-	console.log('[apply_filter] off-page → navigate', base);
+	console.log('[apply_filter] off-page → history.push', base);
 	const encoded = encodeURIComponent(JSON.stringify(normalized));
-	navigate(`${base}?${QueryParams.compositeQuery}=${encoded}`);
+	deps.history.push(`${base}?${QueryParams.compositeQuery}=${encoded}`);
 }
 
 /** Picks the right rollback API call for a given action kind. */
@@ -385,7 +393,8 @@ export default function ActionsSection({
 	actions,
 	messageId,
 }: ActionsSectionProps): JSX.Element | null {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
 	const { threadId, page, mode } = useAIAssistantAnalyticsContext();
 	const { redirectWithQueryBuilderData, handleSetQueryData } = useQueryBuilder();
@@ -417,12 +426,19 @@ export default function ActionsSection({
 			}
 			autoAppliedFilterKeys.add(key);
 			applyFilter(action, {
+				history,
 				pathname,
 				redirectWithQueryBuilderData,
 				handleSetQueryData,
 			});
 		});
-	}, [actions, pathname, redirectWithQueryBuilderData, handleSetQueryData]);
+	}, [
+		actions,
+		pathname,
+		history,
+		redirectWithQueryBuilderData,
+		handleSetQueryData,
+	]);
 
 	if (actions.length === 0) {
 		return null;
@@ -442,7 +458,11 @@ export default function ActionsSection({
 		}
 		setResult(key, { state: 'loading' });
 		try {
-			await openSavedViewByKey(resourceId, resolveSavedViewSourceHint(action));
+			await openSavedViewByKey(
+				resourceId,
+				resolveSavedViewSourceHint(action),
+				history,
+			);
 			void logEvent(AIAssistantEvents.ResourceOpened, {
 				threadId,
 				messageId,
@@ -497,7 +517,7 @@ export default function ActionsSection({
 			targetModule: targetModuleForResource(resourceType),
 			resourceId,
 		});
-		navigate(path);
+		history.push(path);
 	};
 
 	const handleClick = (key: string, action: MessageActionDTO): void => {
@@ -558,6 +578,7 @@ export default function ActionsSection({
 					});
 				}
 				applyFilter(action, {
+					history,
 					pathname,
 					redirectWithQueryBuilderData,
 					handleSetQueryData,

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/openSavedView.test.ts

@@ -6,13 +6,13 @@ import {
 import { getAllViews } from 'api/saveView/getAllViews';
 import { getViewById } from 'api/saveView/getViewById';
 import ROUTES from 'constants/routes';
-import { navigate } from 'lib/router/navigation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { AxiosResponse } from 'axios';
+import type { History } from 'history';
 
 import {
 	buildExplorerNavigationUrl,
@@ -33,9 +33,6 @@ import { resourceRoute, ResourceType } from '../resourceRoute';
 
 jest.mock('api/saveView/getAllViews');
 jest.mock('api/saveView/getViewById');
-jest.mock('lib/router/navigation', () => ({
-	navigate: jest.fn(),
-}));
 
 jest.mock(
 	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
@@ -57,7 +54,6 @@ const mockedGetAllViews = getAllViews as jest.MockedFunction<
 const mockedGetViewById = getViewById as jest.MockedFunction<
 	typeof getViewById
 >;
-const mockedNavigate = navigate as jest.MockedFunction<typeof navigate>;
 
 function makeView(id: string, sourcePage: DataSource): ViewProps {
 	return {
@@ -228,17 +224,15 @@ describe('buildExplorerNavigationUrl', () => {
 });
 
 describe('openSavedView', () => {
-	beforeEach(() => {
-		mockedNavigate.mockClear();
-	});
-
-	it('navigates with the view query params', () => {
+	it('navigates with history.push and view query params', () => {
+		const push = jest.fn();
+		const history = { push } as unknown as History;
 		const view = makeView('view-logs', DataSource.LOGS);
 
-		openSavedView(view);
+		openSavedView(view, history);
 
-		expect(mockedNavigate).toHaveBeenCalledTimes(1);
-		const pushedUrl = mockedNavigate.mock.calls[0][0] as string;
+		expect(push).toHaveBeenCalledTimes(1);
+		const pushedUrl = push.mock.calls[0][0] as string;
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
 		expect(pushedUrl).toContain(QueryParams.viewKey);
 	});
@@ -248,37 +242,42 @@ describe('openSavedViewByKey', () => {
 	beforeEach(() => {
 		mockedGetAllViews.mockReset();
 		mockedGetViewById.mockReset();
-		mockedNavigate.mockClear();
 	});
 
 	it('prefers the direct view lookup endpoint', async () => {
 		const view = makeView('view-logs', DataSource.LOGS);
 		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
+		const push = jest.fn();
+		const history = { push } as unknown as History;
 
-		await openSavedViewByKey('view-logs', DataSource.LOGS);
+		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
 
 		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
 		expect(mockedGetAllViews).not.toHaveBeenCalled();
-		expect(mockedNavigate).toHaveBeenCalled();
+		expect(push).toHaveBeenCalled();
 	});
 
 	it('falls back to list probing when direct lookup fails', async () => {
 		const view = makeView('view-traces', DataSource.TRACES);
 		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
 		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
+		const push = jest.fn();
+		const history = { push } as unknown as History;
 
-		await openSavedViewByKey('view-traces', DataSource.TRACES);
+		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
 
 		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
-		expect(mockedNavigate).toHaveBeenCalled();
+		expect(push).toHaveBeenCalled();
 	});
 
 	it('throws when the saved view does not exist', async () => {
 		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
 		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));
 
-		await expect(openSavedViewByKey('missing', DataSource.LOGS)).rejects.toThrow(
-			'Saved view not found',
-		);
+		await expect(
+			openSavedViewByKey('missing', DataSource.LOGS, {
+				push: jest.fn(),
+			} as unknown as History),
+		).rejects.toThrow('Saved view not found');
 	});
 });

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -3,11 +3,11 @@ import { getViewById } from 'api/saveView/getViewById';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { navigate } from 'lib/router/navigation';
 import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { History } from 'history';
 
 type SavedViewSourceHint = DataSource | 'meter';
 
@@ -85,7 +85,7 @@ export function buildExplorerNavigationUrl(
 	return `${route}?${params.toString()}`;
 }
 
-export function openSavedView(view: ViewProps): void {
+export function openSavedView(view: ViewProps, history: History): void {
 	const route = explorerRouteForSourcePage(view.sourcePage);
 	if (!route) {
 		throw new Error('Unsupported saved view source');
@@ -101,15 +101,16 @@ export function openSavedView(view: ViewProps): void {
 		[QueryParams.viewName]: view.name,
 		[QueryParams.viewKey]: view.id,
 	});
-	navigate(url);
+	history.push(url);
 }
 
 export async function openSavedViewByKey(
 	viewKey: string,
 	sourceHint: SavedViewSourceHint | null | undefined,
+	history: History,
 ): Promise<void> {
 	const view = await loadSavedView(viewKey, sourceHint);
-	openSavedView(view);
+	openSavedView(view, history);
 }
 
 /** @deprecated Use findSavedViewInLists — kept for tests. */

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -1,9 +1,9 @@
 import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { matchRoute } from 'lib/router/matchRoute';
 import { AlertListTabs } from 'pages/AlertList/types';
 import { NEW_PANEL_ID } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+import { matchPath } from 'react-router-dom';
 
 /**
  * Resolves the page the user is currently on into structured `MessageContext`
@@ -33,10 +33,9 @@ export function getAutoContexts(
 
 	// Panel editor (V2). `panel/new` has no widget id yet and the schema requires
 	// a non-empty `panel_edit.widgetId`, so it reports `panel_create` instead.
-	const panelEditorMatch = matchRoute<'dashboardId' | 'panelId'>(
+	const panelEditorMatch = matchPath<{ dashboardId: string; panelId: string }>(
 		pathname,
-		ROUTES.DASHBOARD_PANEL_EDITOR,
-		{ exact: true },
+		{ path: ROUTES.DASHBOARD_PANEL_EDITOR, exact: true },
 	);
 	if (panelEditorMatch) {
 		const { dashboardId, panelId } = panelEditorMatch.params;
@@ -56,7 +55,8 @@ export function getAutoContexts(
 	// Dashboard detail — `/dashboard/:dashboardId`. The `expandedWidgetId`
 	// query param signals the panel-fullscreen overlay; otherwise it's the
 	// plain dashboard view.
-	const dashboardMatch = matchRoute<'dashboardId'>(pathname, ROUTES.DASHBOARD, {
+	const dashboardMatch = matchPath<{ dashboardId: string }>(pathname, {
+		path: ROUTES.DASHBOARD,
 		exact: true,
 	});
 	if (dashboardMatch) {
@@ -89,7 +89,7 @@ export function getAutoContexts(
 	}
 
 	// Dashboard list — `/dashboard`.
-	if (matchRoute(pathname, ROUTES.ALL_DASHBOARD, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.ALL_DASHBOARD, exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -106,8 +106,8 @@ export function getAutoContexts(
 	// or `/alerts/history?ruleId=…`. Mirrors dashboard_detail: resourceId is the
 	// rule id and shared metadata carries the URL time range when present.
 	if (
-		matchRoute(pathname, ROUTES.ALERT_OVERVIEW, { exact: true }) ||
-		matchRoute(pathname, ROUTES.ALERT_HISTORY, { exact: true })
+		matchPath(pathname, { path: ROUTES.ALERT_OVERVIEW, exact: true }) ||
+		matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })
 	) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
@@ -129,7 +129,7 @@ export function getAutoContexts(
 	// Alert edit — `/alerts/edit?ruleId=…`. The form syncs its query-builder
 	// state to the URL (`useShareBuilderUrl`), so shared metadata carries the
 	// alert's query + time range, mirroring the dashboard panel editor.
-	if (matchRoute(pathname, ROUTES.EDIT_ALERTS, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
 			return [
@@ -145,7 +145,7 @@ export function getAutoContexts(
 
 	// Alert new — `/alerts/new`. No rule id yet (draft), but the query-builder
 	// state is on the URL, so shared metadata carries the in-progress query.
-	if (matchRoute(pathname, ROUTES.ALERTS_NEW, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.ALERTS_NEW, exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -157,7 +157,7 @@ export function getAutoContexts(
 	}
 
 	// Triggered-alerts index — `/alerts/history` without a rule id.
-	if (matchRoute(pathname, ROUTES.ALERT_HISTORY, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -172,7 +172,7 @@ export function getAutoContexts(
 	}
 
 	// Alerts index — `/alerts` with tab query param (defaults to Alert Rules).
-	if (matchRoute(pathname, ROUTES.LIST_ALL_ALERT, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.LIST_ALL_ALERT, exact: true })) {
 		const page = resolveAlertsIndexPage(params.get(QueryParams.tab));
 		return [
 			{
@@ -191,10 +191,10 @@ export function getAutoContexts(
 
 	// Service detail (covers sub-routes like top-level-operations) —
 	// `/services/:servicename[/...]`.
-	const serviceMatch = matchRoute<'servicename'>(
-		pathname,
-		ROUTES.SERVICE_METRICS,
-	);
+	const serviceMatch = matchPath<{ servicename: string }>(pathname, {
+		path: ROUTES.SERVICE_METRICS,
+		exact: false,
+	});
 	if (serviceMatch?.params.servicename) {
 		return [
 			{
@@ -210,7 +210,7 @@ export function getAutoContexts(
 	}
 
 	// Services list — `/services`.
-	if (matchRoute(pathname, ROUTES.APPLICATION, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.APPLICATION, exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -226,7 +226,7 @@ export function getAutoContexts(
 
 	// ── Logs ──────────────────────────────────────────────────────────────────
 
-	if (matchRoute(pathname, ROUTES.LOGS_EXPLORER)) {
+	if (matchPath(pathname, { path: ROUTES.LOGS_EXPLORER, exact: false })) {
 		const activeLogId = params.get(QueryParams.activeLogId);
 		// `?activeLogId=…` indicates a log-detail panel is open. Per the
 		// schema, log_detail requires payload fields (timestamp, service,
@@ -251,7 +251,8 @@ export function getAutoContexts(
 
 	// Trace detail — `/trace/:id`. Treated as a detail-as-metadata page
 	// (resourceId null, `traceId` lives in metadata).
-	const traceMatch = matchRoute<'id'>(pathname, ROUTES.TRACE_DETAIL, {
+	const traceMatch = matchPath<{ id: string }>(pathname, {
+		path: ROUTES.TRACE_DETAIL,
 		exact: true,
 	});
 	if (traceMatch?.params.id) {
@@ -271,7 +272,7 @@ export function getAutoContexts(
 		];
 	}
 
-	if (matchRoute(pathname, ROUTES.TRACES_EXPLORER)) {
+	if (matchPath(pathname, { path: ROUTES.TRACES_EXPLORER, exact: false })) {
 		return [
 			{
 				source: 'auto',
@@ -288,7 +289,9 @@ export function getAutoContexts(
 	// ── Metrics ───────────────────────────────────────────────────────────────
 
 	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer, views).
-	if (matchRoute(pathname, ROUTES.METRICS_EXPLORER_BASE)) {
+	if (
+		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_BASE, exact: false })
+	) {
 		return [
 			{
 				source: 'auto',

frontend/src/container/AIAssistant/hooks/useAIAssistantAnalyticsContext.ts

@@ -1,6 +1,6 @@
+import { matchPath, useLocation } from 'react-router-dom';
+
 import ROUTES from 'constants/routes';
-import { matchRoute } from 'lib/router/matchRoute';
-import { useAppLocation } from 'lib/router/useAppLocation';
 
 import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { useVariant } from '../VariantContext';
@@ -28,7 +28,7 @@ const ROUTE_TEMPLATES = Object.values(ROUTES).sort(
 
 export function normalizePage(pathname: string): string {
 	for (const template of ROUTE_TEMPLATES) {
-		if (matchRoute(pathname, template, { exact: true })) {
+		if (matchPath(pathname, { path: template, exact: true })) {
 			return template;
 		}
 	}
@@ -46,7 +46,7 @@ export function normalizePage(pathname: string): string {
 export function useAIAssistantAnalyticsContext(
 	conversationId?: string,
 ): AIAssistantAnalyticsContext {
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 	const variant = useVariant();
 	const threadId = useAIAssistantStore((s) => {
 		const id = conversationId ?? s.activeConversationId;

frontend/src/container/AIAssistant/resolvePageType.ts

@@ -1,7 +1,7 @@
 import { PageTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { matchRoute } from 'lib/router/matchRoute';
+import { matchPath } from 'react-router-dom';
 
 import { getAutoContexts } from './getAutoContexts';
 
@@ -45,10 +45,15 @@ export function resolvePageType(
 	// Pseudo-pages with no attachable resource: resolved straight from the
 	// route. They deliberately emit no auto-context chip (see `getAutoContexts`),
 	// so they can't be derived from `metadata.page` like the pages below.
-	if (matchRoute(pathname, ROUTES.HOME, { exact: true })) {
+	if (matchPath(pathname, { path: ROUTES.HOME, exact: true })) {
 		return PageTypeDTO.homepage;
 	}
-	if (matchRoute(pathname, ROUTES.INFRASTRUCTURE_MONITORING_BASE)) {
+	if (
+		matchPath(pathname, {
+			path: ROUTES.INFRASTRUCTURE_MONITORING_BASE,
+			exact: false,
+		})
+	) {
 		return PageTypeDTO.infra_entity_detail;
 	}
 

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppLink } from 'lib/router/AppLink';
+import { Link } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Popover } from 'antd';
 import LogsIcon from 'assets/AlertHistory/LogsIcon';
@@ -26,7 +26,7 @@ function PopoverContent({
 	return (
 		<div className="contributor-row-popover-buttons">
 			{!!relatedLogsLink && (
-				<AppLink
+				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
 					data-testid="alert-popover-view-logs"
@@ -35,10 +35,10 @@ function PopoverContent({
 						<LogsIcon />
 					</div>
 					<div className="text">View Logs</div>
-				</AppLink>
+				</Link>
 			)}
 			{!!relatedTracesLink && (
-				<AppLink
+				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
 					data-testid="alert-popover-view-traces"
@@ -50,7 +50,7 @@ function PopoverContent({
 						/>
 					</div>
 					<div className="text">View Traces</div>
-				</AppLink>
+				</Link>
 			)}
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -1,9 +1,9 @@
 import { useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { ArrowRight } from '@signozhq/icons';
 
 import TopContributorsContent from './TopContributorsContent';
@@ -16,7 +16,7 @@ function TopContributorsCard({
 	topContributorsData,
 	totalCurrentTriggers,
 }: TopContributorsCardProps): JSX.Element {
-	const { search } = useAppLocation();
+	const { search } = useLocation();
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const viewAllTopContributorsParam = searchParams.get('viewAllTopContributors');
@@ -43,7 +43,7 @@ function TopContributorsCard({
 
 			return newState;
 		});
-		navigate({ search: searchParams.toString() });
+		history.push({ search: searchParams.toString() });
 	};
 
 	return (

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -7,7 +7,7 @@ import { QueryParams } from 'constants/query';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
@@ -103,7 +103,7 @@ function HorizontalTimelineGraph({
 								urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 								urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 
-								navigate({
+								history.push({
 									search: urlQuery.toString(),
 								});
 							}

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { Info } from '@signozhq/icons';
 import Tabs2 from 'periscope/components/Tabs2';
 
@@ -42,7 +42,7 @@ function TimelineTabs(): JSX.Element {
 }
 
 function TimelineFilters(): JSX.Element {
-	const { search } = useAppLocation();
+	const { search } = useLocation();
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const initialSelectedTab = useMemo(
@@ -52,7 +52,7 @@ function TimelineFilters(): JSX.Element {
 
 	const handleFilter = (value: TimelineFilter): void => {
 		searchParams.set('timelineFilter', value);
-		navigate({ search: searchParams.toString() });
+		history.push({ search: searchParams.toString() });
 	};
 
 	const tabs = [

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { generatePath } from 'react-router-dom';
 import { Button } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
-import { buildRoutePath } from 'lib/router/buildRoutePath';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { Channels } from 'types/api/channels/getAll';
 
@@ -20,8 +20,8 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
 	const onClickEditHandler = useCallback((id: string) => {
-		navigate(
-			buildRoutePath(ROUTES.CHANNELS_EDIT, {
+		history.push(
+			generatePath(ROUTES.CHANNELS_EDIT, {
 				channelId: id,
 			}),
 		);

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -13,8 +13,8 @@ jest.mock('hooks/useNotifications', () => ({
 	})),
 }));
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALL_CHANNELS}`,
 	}),

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -18,8 +18,8 @@ jest.mock('hooks/useComponentPermission', () => ({
 	default: jest.fn().mockImplementation(() => [false]),
 }));
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALL_CHANNELS}`,
 	}),

frontend/src/container/AllAlertChannels/index.tsx

@@ -10,7 +10,7 @@ import Spinner from 'components/Spinner';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
@@ -32,7 +32,7 @@ function AlertChannels(): JSX.Element {
 		user.role,
 	);
 	const onToggleHandler = useCallback(() => {
-		navigate(ROUTES.CHANNELS_NEW);
+		history.push(ROUTES.CHANNELS_NEW);
 	}, []);
 
 	const { isLoading, data, error } = useQuery<

frontend/src/container/AllError/index.tsx

@@ -4,8 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AppLink } from 'lib/router/AppLink';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { Link, useLocation } from 'react-router-dom';
 import { Button, Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
 import { Search } from '@signozhq/icons';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
@@ -29,7 +28,7 @@ import {
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
@@ -67,7 +66,7 @@ function AllErrors(): JSX.Element {
 	const { maxTime, minTime, loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 	const params = useUrlQuery();
 	const { t } = useTranslation(['common']);
 	const {
@@ -223,9 +222,7 @@ function AllErrors(): JSX.Element {
 					queryParams.serviceName = serviceFilterValue;
 				}
 
-				navigate(`${pathname}?${createQueryParams(queryParams)}`, {
-					replace: true,
-				});
+				history.replace(`${pathname}?${createQueryParams(queryParams)}`);
 				confirm();
 			},
 		[
@@ -333,13 +330,13 @@ function AllErrors(): JSX.Element {
 			...getFilter(onExceptionTypeFilter, 'Search By Exception', 'exceptionType'),
 			render: (value, record): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
-					<AppLink
+					<Link
 						to={`${ROUTES.ERROR_DETAIL}?groupId=${
 							record.groupID
 						}&timestamp=${getNanoSeconds(record.lastSeen)}`}
 					>
 						{value}
-					</AppLink>
+					</Link>
 				</Tooltip>
 			),
 			sorter: true,
@@ -435,7 +432,7 @@ function AllErrors(): JSX.Element {
 					exceptionType: getFilterString(params.get(urlKey.exceptionType)),
 				});
 				const compositeQuery = params.get(urlKey.compositeQuery) || '';
-				navigate(
+				history.replace(
 					`${pathname}?${createQueryParams({
 						order: updatedOrder,
 						offset: (current - 1) * pageSize,
@@ -445,7 +442,6 @@ function AllErrors(): JSX.Element {
 						serviceName,
 						compositeQuery,
 					})}`,
-					{ replace: true },
 				);
 			}
 		},

frontend/src/container/AllError/tests/AllError.test.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider, useSelector } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ENVIRONMENT } from 'constants/env';
 import { server } from 'mocks-server/server';
@@ -7,7 +8,6 @@ import { rest } from 'msw';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
-import { TestRouter } from 'tests/router';
 
 import '@testing-library/jest-dom';
 
@@ -55,9 +55,9 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 	},
 } as any);
 
-function Exceptions({ initUrl }: { initUrl?: string }): JSX.Element {
+function Exceptions({ initUrl }: { initUrl?: string[] }): JSX.Element {
 	return (
-		<TestRouter initialRoute={initUrl ?? '/exceptions'}>
+		<MemoryRouter initialEntries={initUrl ?? ['/exceptions']}>
 			<TimezoneProvider>
 				<Provider store={store}>
 					<MockQueryClientProvider>
@@ -65,12 +65,12 @@ function Exceptions({ initUrl }: { initUrl?: string }): JSX.Element {
 					</MockQueryClientProvider>
 				</Provider>
 			</TimezoneProvider>
-		</TestRouter>
+		</MemoryRouter>
 	);
 }
 
 Exceptions.defaultProps = {
-	initUrl: '/exceptions',
+	initUrl: ['/exceptions'],
 };
 
 const BASE_URL = ENVIRONMENT.baseURL;
@@ -130,7 +130,7 @@ describe('Exceptions - All Errors', () => {
 	});
 
 	it('should call useQueries with exact composite query object', async () => {
-		render(<Exceptions initUrl={INIT_URL_WITH_COMMON_QUERY} />);
+		render(<Exceptions initUrl={[INIT_URL_WITH_COMMON_QUERY]} />);
 		await screen.findByText(/redis timeout/i);
 		expect(postListErrorsSpy).toHaveBeenCalledWith(
 			expect.objectContaining({
@@ -143,7 +143,11 @@ describe('Exceptions - All Errors', () => {
 		it('should navigate to page 2 when pageSize=100 and clicking next', async () => {
 			// Arrange: start with pageSize=100 and offset=0
 			render(
-				<Exceptions initUrl="/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName" />,
+				<Exceptions
+					initUrl={[
+						`/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName`,
+					]}
+				/>,
 			);
 
 			// Wait for initial load
@@ -167,7 +171,11 @@ describe('Exceptions - All Errors', () => {
 		it('initializes current page from URL (offset/pageSize)', async () => {
 			// offset=100, pageSize=100 => current page should be 2
 			render(
-				<Exceptions initUrl="/exceptions?pageSize=100&offset=100&order=ascending&orderParam=serviceName" />,
+				<Exceptions
+					initUrl={[
+						`/exceptions?pageSize=100&offset=100&order=ascending&orderParam=serviceName`,
+					]}
+				/>,
 			);
 			await screen.findByText(/redis timeout/i);
 			const activeItem = document.querySelector('.ant-pagination-item-active');
@@ -180,7 +188,11 @@ describe('Exceptions - All Errors', () => {
 		it('clicking a numbered page updates offset correctly', async () => {
 			// pageSize=100, click page 3 => offset = 200
 			render(
-				<Exceptions initUrl="/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName" />,
+				<Exceptions
+					initUrl={[
+						`/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName`,
+					]}
+				/>,
 			);
 			await screen.findByText(/redis timeout/i);
 			const page3Item = screen.getByTitle('3');

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -1,23 +1,15 @@
-.api-monitoring-page {
-	display: flex;
-	height: 100%;
+.api-monitoring-explorer {
+	.api-quick-filters-header {
+		padding: 12px;
+		border-bottom: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
 
-	.api-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: 6px;
 
-		.api-quick-filters-header {
-			padding: 12px;
-			border-bottom: 1px solid var(--l1-border);
-			border-right: 1px solid var(--l1-border);
-
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			font-size: 14px;
-			line-height: 18px;
-		}
+		font-size: 14px;
+		line-height: 18px;
 	}
 
 	.api-module-right-section {
@@ -161,16 +153,6 @@
 			}
 		}
 	}
-
-	&.filter-visible {
-		.api-quick-filter-left-section {
-			width: 260px;
-		}
-
-		.api-module-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }
 
 .no-filtered-domains-message-container {

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -20,20 +19,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
-					<QuickFilters
-						className="qf-api-monitoring"
-						source={QuickFiltersSource.API_MONITORING}
-						signal={SignalType.API_MONITORING}
-						showFilterCollapse={false}
-						showQueryName={false}
-						handleFilterVisibilityChange={(): void => {}}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</section>
+			<QuickFiltersLayout
+				className="api-monitoring-explorer"
+				showFilters
+				quickFilterProps={{
+					className: 'qf-api-monitoring',
+					source: QuickFiltersSource.API_MONITORING,
+					signal: SignalType.API_MONITORING,
+					showFilterCollapse: false,
+					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {},
+					useFieldApis: quickFilterFieldApis,
+				}}
+			>
 				<DomainList />
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/ApiMonitoring/__tests__/queryParams.test.tsx

@@ -5,11 +5,15 @@ import {
 	setApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
 
-// Mock navigation module
-const mockNavigate = jest.fn();
-jest.mock('lib/router/navigation', () => ({
-	navigate: (...args: any[]) => mockNavigate(...args),
-}));
+// Mock react-router-dom hooks
+jest.mock('react-router-dom', () => {
+	const originalModule = jest.requireActual('react-router-dom');
+	return {
+		...originalModule,
+		useLocation: jest.fn(),
+		useHistory: jest.fn(),
+	};
+});
 
 describe('API Monitoring Query Params', () => {
 	describe('getApiMonitoringParams', () => {
@@ -53,26 +57,26 @@ describe('API Monitoring Query Params', () => {
 	});
 
 	describe('setApiMonitoringParams', () => {
-		beforeEach(() => {
-			mockNavigate.mockClear();
-		});
-
 		it('updates URL with new params (push mode)', () => {
+			const history = {
+				push: jest.fn(),
+				replace: jest.fn(),
+			};
 			const search = '';
 			const newParams: Partial<ApiMonitoringParams> = {
 				showIP: false,
 				selectedDomain: 'updated-domain',
 			};
 
-			setApiMonitoringParams(newParams, search, false);
+			setApiMonitoringParams(newParams, search, history as any, false);
 
-			expect(mockNavigate).toHaveBeenCalledWith(
-				{ search: expect.stringContaining('apiMonitoringParams') },
-				{ replace: false },
-			);
+			expect(history.push).toHaveBeenCalledWith({
+				search: expect.stringContaining('apiMonitoringParams'),
+			});
+			expect(history.replace).not.toHaveBeenCalled();
 
 			// Verify that the search string contains the expected encoded params
-			const searchArg = mockNavigate.mock.calls[0][0].search;
+			const searchArg = history.push.mock.calls[0][0].search;
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),
@@ -84,21 +88,30 @@ describe('API Monitoring Query Params', () => {
 		});
 
 		it('updates URL with new params (replace mode)', () => {
+			const history = {
+				push: jest.fn(),
+				replace: jest.fn(),
+			};
 			const search = '';
 			const newParams: Partial<ApiMonitoringParams> = {
 				showIP: false,
 				selectedDomain: 'updated-domain',
 			};
 
-			setApiMonitoringParams(newParams, search, true);
+			setApiMonitoringParams(newParams, search, history as any, true);
 
-			expect(mockNavigate).toHaveBeenCalledWith(
-				{ search: expect.stringContaining('apiMonitoringParams') },
-				{ replace: true },
-			);
+			expect(history.replace).toHaveBeenCalledWith({
+				search: expect.stringContaining('apiMonitoringParams'),
+			});
+			expect(history.push).not.toHaveBeenCalled();
 		});
 
 		it('merges new params with existing params', () => {
+			const history = {
+				push: jest.fn(),
+				replace: jest.fn(),
+			};
+
 			// Start with some existing params
 			const existingParams: Partial<ApiMonitoringParams> = {
 				showIP: true,
@@ -119,10 +132,10 @@ describe('API Monitoring Query Params', () => {
 				selectedEndPointName: '/api/test',
 			};
 
-			setApiMonitoringParams(newParams, search, false);
+			setApiMonitoringParams(newParams, search, history as any, false);
 
 			// Verify merged params
-			const searchArg = mockNavigate.mock.calls[0][0].search;
+			const searchArg = history.push.mock.calls[0][0].search;
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),
@@ -148,7 +161,27 @@ describe('API Monitoring Query Params', () => {
 				state: null,
 			};
 
-			return { location };
+			// Create mock history object
+			const history = {
+				push: jest.fn((args) => {
+					// Simulate updating the location search
+					location.search = args.search;
+				}),
+				replace: jest.fn((args) => {
+					location.search = args.search;
+				}),
+				length: 1,
+				location,
+			};
+
+			// Set up mocks for useLocation and useHistory
+			const useLocationMock = jest.requireMock('react-router-dom').useLocation;
+			const useHistoryMock = jest.requireMock('react-router-dom').useHistory;
+
+			useLocationMock.mockReturnValue(location);
+			useHistoryMock.mockReturnValue(history);
+
+			return { location, history };
 		};
 
 		it('retrieves URL params correctly from location', () => {
@@ -174,7 +207,7 @@ describe('API Monitoring Query Params', () => {
 		});
 
 		it('updates URL correctly with new params', () => {
-			const { location } = mockUseLocationAndHistory();
+			const { location, history } = mockUseLocationAndHistory();
 
 			const newParams: Partial<ApiMonitoringParams> = {
 				selectedDomain: 'new-domain',
@@ -182,14 +215,13 @@ describe('API Monitoring Query Params', () => {
 			};
 
 			// Manually execute the core logic of the hook's setParams function
-			setApiMonitoringParams(newParams, location.search);
+			setApiMonitoringParams(newParams, location.search, history as any);
 
-			expect(mockNavigate).toHaveBeenCalledWith(
-				{ search: expect.stringContaining('apiMonitoringParams') },
-				{ replace: false },
-			);
+			expect(history.push).toHaveBeenCalledWith({
+				search: expect.stringContaining('apiMonitoringParams'),
+			});
 
-			const searchArg = mockNavigate.mock.calls[0][0].search;
+			const searchArg = history.push.mock.calls[0][0].search;
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),
@@ -215,16 +247,20 @@ describe('API Monitoring Query Params', () => {
 			const initialSearch = `?${urlParams.toString()}`;
 
 			// Set up mocks
-			const { location } = mockUseLocationAndHistory(initialSearch);
+			const { location, history } = mockUseLocationAndHistory(initialSearch);
 
 			// Manually execute the core logic
-			setApiMonitoringParams({ selectedView: 'new-view' }, location.search);
+			setApiMonitoringParams(
+				{ selectedView: 'new-view' },
+				location.search,
+				history as any,
+			);
 
 			// Verify history was updated
-			expect(mockNavigate).toHaveBeenCalled();
+			expect(history.push).toHaveBeenCalled();
 
 			// Parse the new query params from the URL
-			const searchArg = mockNavigate.mock.calls[0][0].search;
+			const searchArg = history.push.mock.calls[0][0].search;
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),

frontend/src/container/ApiMonitoring/queryParams.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { navigate } from 'lib/router/navigation';
+import { useHistory, useLocation } from 'react-router-dom';
 
 // --- Types for all API Monitoring query params ---
 export interface ApiMonitoringParams {
@@ -56,6 +55,7 @@ export function getApiMonitoringParams(search: string): ApiMonitoringParams {
 export function setApiMonitoringParams(
 	newParams: Partial<ApiMonitoringParams>,
 	search: string,
+	history: ReturnType<typeof useHistory>,
 	replace = false,
 ): void {
 	const urlParams = new URLSearchParams(search);
@@ -63,7 +63,11 @@ export function setApiMonitoringParams(
 	const merged = { ...current, ...newParams };
 	urlParams.set(PARAM_KEY, encodeParams(merged));
 	const newSearch = `?${urlParams.toString()}`;
-	navigate({ search: newSearch }, { replace });
+	if (replace) {
+		history.replace({ search: newSearch });
+	} else {
+		history.push({ search: newSearch });
+	}
 }
 
 // --- React hook to use query params in a component ---
@@ -71,14 +75,15 @@ export function useApiMonitoringParams(): [
 	ApiMonitoringParams,
 	(newParams: Partial<ApiMonitoringParams>, replace?: boolean) => void,
 ] {
-	const location = useAppLocation();
+	const location = useLocation();
+	const history = useHistory();
 	const params = getApiMonitoringParams(location.search);
 
 	const setParams = useCallback(
 		(newParams: Partial<ApiMonitoringParams>, replace = false) => {
-			setApiMonitoringParams(newParams, location.search, replace);
+			setApiMonitoringParams(newParams, location.search, history, replace);
 		},
-		[location.search],
+		[location.search, history],
 	);
 
 	return [params, setParams];

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -53,6 +53,10 @@
 		z-index: 0;
 		background: var(--l1-background);
 
+		// Column so the bottom strip sits under the scrolling content, not inside it.
+		display: flex;
+		flex-direction: column;
+
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -70,7 +74,9 @@
 
 .chat-support-gateway {
 	position: fixed;
-	bottom: 20px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
 import { Toaster } from '@signozhq/ui/sonner';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
@@ -43,6 +43,7 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -51,8 +52,9 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useAppContext } from 'providers/App/App';
@@ -194,7 +196,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const isDarkMode = useIsDarkMode();
 
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
@@ -402,6 +404,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -468,7 +471,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		navigate(ROUTES.BILLING);
+		history.push(ROUTES.BILLING);
 	}, []);
 
 	const handleFailedPayment = useCallback((): void => {
@@ -868,6 +871,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
+
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (

frontend/src/container/AppLayout/styles.ts

@@ -12,8 +12,12 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
+// Takes the height left in `.app-content` after the bottom strip.
+// `min-height: 0` is not needed right now, overlayscrollbars already sets
+// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -9,7 +9,8 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 
 jest.mock('utils/basePath', () => ({
-	...jest.requireActual('utils/basePath'),
+	getBasePath: (): string => '/',
+	withBasePath: (path: string): string => path,
 	getAbsoluteUrl: (path: string): string => `https://test.signoz.io${path}`,
 	getBaseUrl: (): string => 'https://test.signoz.io',
 }));

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -0,0 +1,40 @@
+.strip {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+
+	flex-shrink: 0;
+	height: var(--bottom-strip-height);
+	padding: 0 12px;
+
+	background: var(--l2-background);
+	border-top: 1px solid var(--l2-border);
+
+	// font styles
+	font-family: var(--font-family-sf-mono, monospace);
+	font-size: 13px;
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-none);
+
+	// Above page content, below the body-portalled overlays that are meant to
+	// cover the strip.
+	position: relative;
+	z-index: 1;
+}
+
+.left,
+.right {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-width: 0;
+}
+
+// Temporary placeholder for the left slot. Replaced later.
+.version {
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -0,0 +1,49 @@
+import { render } from 'tests/test-utils';
+
+import BottomStrip, {
+	BOTTOM_STRIP_HEIGHT,
+	BOTTOM_STRIP_HEIGHT_VAR,
+	BOTTOM_STRIP_ON_CLASS,
+} from '..';
+
+describe('BottomStrip', () => {
+	it('publishes the body class and height property while mounted', () => {
+		const { unmount } = render(<BottomStrip />);
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		unmount();
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			'',
+		);
+	});
+
+	// The string is whatever the Go build injected, so it is rendered untouched —
+	// same as SideNav. Release tags carry the "v", local builds do not.
+	it.each([['v0.134.67'], ['main-64f1c2a']])(
+		'renders the build version %p exactly as given',
+		(version) => {
+			const { getByTestId } = render(<BottomStrip />, undefined, {
+				appContextOverrides: {
+					versionData: { version, ee: 'Y', setupCompleted: true },
+				},
+			});
+
+			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
+		},
+	);
+
+	it('renders the strip without a version when none is available', () => {
+		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
+			appContextOverrides: { versionData: null },
+		});
+
+		expect(getByTestId('bottom-strip')).toBeInTheDocument();
+		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/BottomStrip/index.tsx

@@ -0,0 +1,42 @@
+import { useLayoutEffect } from 'react';
+import { useAppContext } from 'providers/App/App';
+
+import styles from './BottomStrip.module.scss';
+
+export const BOTTOM_STRIP_HEIGHT = 24;
+
+export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
+export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
+
+function BottomStrip(): JSX.Element {
+	const { versionData } = useAppContext();
+	const version = versionData?.version?.trim();
+
+	useLayoutEffect(() => {
+		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
+		document.body.style.setProperty(
+			BOTTOM_STRIP_HEIGHT_VAR,
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		return (): void => {
+			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
+			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
+		};
+	}, []);
+
+	return (
+		<div className={styles.strip} data-testid="bottom-strip">
+			<div className={styles.left}>
+				{version && (
+					<span className={styles.version} data-testid="bottom-strip-version">
+						{version}
+					</span>
+				)}
+			</div>
+			<div className={styles.right} />
+		</div>
+	);
+}
+
+export default BottomStrip;

frontend/src/container/CreateAlertChannels/index.tsx

@@ -23,7 +23,7 @@ import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
-import { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
@@ -143,7 +143,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(error as APIError);
@@ -205,7 +205,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(error as APIError);
@@ -258,7 +258,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				navigate(ROUTES.ALL_CHANNELS, { replace: true });
+				history.replace(ROUTES.ALL_CHANNELS);
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			return { status: 'failed', statusMessage: t('channel_creation_failed') };
@@ -298,7 +298,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(error as APIError);
@@ -342,7 +342,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(error as APIError);
@@ -380,7 +380,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(error as APIError);
@@ -429,7 +429,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
@@ -496,7 +496,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
@@ -537,7 +537,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
@@ -587,7 +587,7 @@ function CreateAlertChannels({
 				message: 'Success',
 				description: t('channel_creation_done'),
 			});
-			navigate(ROUTES.ALL_CHANNELS, { replace: true });
+			history.replace(ROUTES.ALL_CHANNELS);
 			return { status: 'success', statusMessage: t('channel_creation_done') };
 		} catch (error) {
 			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -6,6 +6,18 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: '',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 jest
 	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
 	.mockReturnValue({

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -1,3 +1,4 @@
+import { MemoryRouter, Route } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
 import CreateAlertPage from 'pages/CreateAlert';
@@ -6,6 +7,26 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_URL_MAP } from './constants';
 
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string; search: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERTS_NEW}`,
+		search: 'ruleType=anomaly_rule',
+	}),
+}));
+
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: 'ruleType=anomaly_rule',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({
@@ -37,9 +58,13 @@ describe('Anomaly Alert Documentation Redirection', () => {
 	});
 
 	it('should handle anomaly alert documentation redirection correctly', () => {
-		const { getByRole } = render(<CreateAlertPage />, undefined, {
-			initialRoute: `${ROUTES.ALERTS_NEW}?ruleType=anomaly_rule`,
-		});
+		const { getByRole } = render(
+			<MemoryRouter initialEntries={['/alerts/new']}>
+				<Route path={ROUTES.ALERTS_NEW}>
+					<CreateAlertPage />
+				</Route>
+			</MemoryRouter>,
+		);
 
 		const alertType = AlertTypes.ANOMALY_BASED_ALERT;
 

frontend/src/container/CreateAlertRule/__tests__/CreateAlertRule.test.tsx

@@ -13,6 +13,18 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import CreateAlertRule from '../index';
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: '',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	__esModule: true,
 	default: function MockDateTimeSelector(): JSX.Element {

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertCondition.test.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { CreateAlertProvider } from '../../context';
@@ -100,15 +100,15 @@ const renderAlertCondition = (
 	alertType?: string,
 ): ReturnType<typeof render> => {
 	const queryClient = createTestQueryClient();
-	const initialRoute = alertType ? `/?alertType=${alertType}` : '/';
+	const initialEntries = alertType ? [`/?alertType=${alertType}`] : undefined;
 	return render(
-		<TestRouter initialRoute={initialRoute}>
+		<MemoryRouter initialEntries={initialEntries}>
 			<QueryClientProvider client={queryClient}>
 				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 					<AlertCondition />
 				</CreateAlertProvider>
 			</QueryClientProvider>
-		</TestRouter>,
+		</MemoryRouter>,
 	);
 };
 

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { Channels } from 'types/api/channels/getAll';
 
@@ -128,13 +128,13 @@ const createTestQueryClient = (): QueryClient =>
 const renderAlertThreshold = (): ReturnType<typeof render> => {
 	const queryClient = createTestQueryClient();
 	return render(
-		<TestRouter>
+		<MemoryRouter>
 			<QueryClientProvider client={queryClient}>
 				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 					<AlertThreshold {...mockProps} />
 				</CreateAlertProvider>
 			</QueryClientProvider>
-		</TestRouter>,
+		</MemoryRouter>,
 	);
 };
 

frontend/src/container/CreateAlertV2/CreateAlertHeader/__tests__/CreateAlertHeader.test.tsx

@@ -42,8 +42,8 @@ jest.mock('uplot', () => {
 	};
 });
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { search: string } => ({
 		search: '',
 	}),