test(api-monitoring): mock /fields/keys for quick filters settings stories (#12980)

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description

Add missing mocks for stories on api monitoring after
https://github.com/SigNoz/signoz/pull/12968

.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

docs/contributing/go/handler.md

@@ -179,6 +179,7 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
+- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.
 
 The generic handler:
 

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,6 +23,15 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	sql := f.TextToJsonColumn(column)
+	sql = append(sql, "->"...)
+	sql = schema.Append(f.bunf, sql, mapField)
+	sql = append(sql, "->>"...)
+	sql = schema.Append(f.bunf, sql, key)
+	return sql
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,6 +55,67 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `"data"::jsonb->'labels'->>'team'`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `"data"::jsonb->'labels'->>'o''brien'`,
+		},
+		{
+			name:     "BackslashInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `"data"::jsonb->'labels'->>'a\b'`,
+		},
+		{
+			name:     "DoubleQuoteInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a"b`,
+			expected: `"data"::jsonb->'labels'->>'a"b'`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

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/generated/services/rules/index.ts

@@ -41,6 +41,8 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -73,7 +75,8 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -115,6 +118,7 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 
@@ -134,6 +138,7 @@ export function useListRules<
 }
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1388,3 +1393,97 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
+/**
+ * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
+ * @summary List alert rules (v3)
+ */
+export const listRulesV3 = (
+	params?: ListRulesV3Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListRulesV3200>({
+		url: `/api/v3/rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
+	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListRulesV3QueryOptions = <
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
+		signal,
+	}) => listRulesV3(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRulesV3>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesV3QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRulesV3>>
+>;
+export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules (v3)
+ */
+
+export function useListRulesV3<
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesV3QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List alert rules (v3)
+ */
+export const invalidateListRulesV3 = async (
+	queryClient: QueryClient,
+	params?: ListRulesV3Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesV3QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -10188,6 +10188,99 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export interface RuletypesLabelPairDTO {
+	/**
+	 * @type string
+	 */
+	key: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export enum RuletypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum RuletypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+	state = 'state',
+	severity = 'severity',
+}
+export type RuletypesListableRuleDTOLabels = { [key: string]: string };
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesListableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType: RuletypesAlertTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesListableRuleDTOLabels;
+	ruleType: RuletypesRuleTypeDTO;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesListableRulesDTO {
+	/**
+	 * @type array
+	 */
+	labels: RuletypesLabelPairDTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
+	/**
+	 * @type array
+	 */
+	rules: RuletypesListableRuleDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	total: number;
+}
+
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10284,11 +10377,6 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14189,6 +14277,45 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
+export type ListRulesV3Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	query?: string;
+	/**
+	 * @type array
+	 * @description undefined
+	 */
+	states?: string[];
+	/**
+	 * @description undefined
+	 */
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+};
+
+export type ListRulesV3200 = {
+	data: RuletypesListableRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

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/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/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';
@@ -52,7 +52,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
 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 +194,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const isDarkMode = useIsDarkMode();
 
-	const { pathname } = useAppLocation();
+	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
@@ -468,7 +468,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		navigate(ROUTES.BILLING);
+		history.push(ROUTES.BILLING);
 	}, []);
 
 	const handleFailedPayment = useCallback((): void => {

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/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: '',
 	}),