feat(boot-settings): move SDK config from build-time env vars to runtime boot data injection

* fix(date-time-selection-v2): out of sync query params

* chore(get-current-search-params): explain why we have that file

* fix(pr): address comments

docs/api/openapi.yml

@@ -2689,7 +2689,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesClusterRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2759,7 +2758,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesDaemonSetRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2829,7 +2827,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesDeploymentRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2908,7 +2905,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesHostRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2984,7 +2980,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesJobRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3032,7 +3027,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesNamespaceRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3110,7 +3104,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3209,7 +3202,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesPodRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3554,7 +3546,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesStatefulSetRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3615,7 +3606,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesVolumeRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'

frontend/index.html

@@ -94,12 +94,15 @@
 				}
 			})();
 		</script>
+		<script>
+			window.signozBootData = { settings: [[.BootSettings]] };
+		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 
 		<script>
-			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
-			if (PYLON_APP_ID) {
+			var pylonAppId = (window.signozBootData?.settings?.pylon || {}).appId || '';
+			if (pylonAppId) {
 				(function () {
 					var e = window;
 					var t = document;
@@ -115,10 +118,7 @@
 						var e = t.createElement('script');
 						e.setAttribute('type', 'text/javascript');
 						e.setAttribute('async', 'true');
-						e.setAttribute(
-							'src',
-							'https://widget.usepylon.com/widget/' + PYLON_APP_ID,
-						);
+						e.setAttribute('src', 'https://widget.usepylon.com/widget/' + pylonAppId);
 						var n = t.getElementsByTagName('script')[0];
 						n.parentNode.insertBefore(e, n);
 					};
@@ -130,16 +130,15 @@
 				})();
 			}
 		</script>
-		<script type="text/javascript">
-			window.AppcuesSettings = { enableURLDetection: true };
-		</script>
 		<script>
-			var APPCUES_APP_ID = '<%- APPCUES_APP_ID %>';
-			if (APPCUES_APP_ID) {
+			var appcuesAppId =
+				(window.signozBootData?.settings?.appcues || {}).appId || '';
+			if (appcuesAppId) {
+				window.AppcuesSettings = { enableURLDetection: true };
 				(function (d, t) {
 					var a = d.createElement(t);
 					a.async = 1;
-					a.src = '//fast.appcues.com/' + APPCUES_APP_ID + '.js';
+					a.src = '//fast.appcues.com/' + appcuesAppId + '.js';
 					var s = d.getElementsByTagName(t)[0];
 					s.parentNode.insertBefore(a, s);
 				})(document, 'script');

frontend/package.json

@@ -49,7 +49,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.19",
+    "@signozhq/ui": "0.0.21",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/plugins/rules/no-antd-components.mjs

@@ -14,7 +14,9 @@
  */
 
 const BANNED_COMPONENTS = {
-	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Typography:
+		'Use @signozhq/ui/typography Typography instead of antd Typography.',
+	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };
 

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.19
-        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.21
+        version: 0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3269,8 +3269,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.19':
-    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
+  '@signozhq/ui@0.0.21':
+    resolution: {integrity: sha512-uLM3Vqwxlk2USXbwtb3qRLpjZR9b9QSHFQq/jtcfYNMDmIE/sNjSj0nRkEhX4RqqRgsLRt2PVA33aeWxDOLO3g==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -3851,27 +3851,6 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
-
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
-
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
@@ -12034,7 +12013,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.21(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

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

@@ -166,6 +166,7 @@ function createMockAppContext(
 		userPreferences: [],
 		hostsData: null,
 		isLoggedIn: true,
+		isPreflightLoading: false,
 		org: [{ createdAt: 0, id: 'org-id', displayName: 'Test Org' }],
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,

frontend/src/AppRoutes/index.tsx

@@ -35,6 +35,7 @@ import { PreferenceContextProvider } from 'providers/preferences/context/Prefere
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
+import { bootSettings } from 'utils/bootData';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -59,6 +60,7 @@ function App(): JSX.Element {
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
+		isPreflightLoading,
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
@@ -292,7 +294,7 @@ function App(): JSX.Element {
 				(isCloudUser || isEnterpriseSelfHostedUser)
 			) {
 				const email = user.email || '';
-				const secret = process.env.PYLON_IDENTITY_SECRET || '';
+				const secret = bootSettings.pylon.identSecret ?? '';
 				let emailHash = '';
 
 				if (email && secret) {
@@ -301,7 +303,7 @@ function App(): JSX.Element {
 
 				window.pylon = {
 					chat_settings: {
-						app_id: process.env.PYLON_APP_ID,
+						app_id: bootSettings.pylon.appId,
 						email: user.email,
 						name: user.displayName || user.email,
 						email_hash: emailHash,
@@ -331,8 +333,8 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (process.env.POSTHOG_KEY) {
-				posthog.init(process.env.POSTHOG_KEY, {
+			if (bootSettings.posthog.key) {
+				posthog.init(bootSettings.posthog.key, {
 					api_host: 'https://us.i.posthog.com',
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
 				});
@@ -340,8 +342,8 @@ function App(): JSX.Element {
 
 			if (!isSentryInitialized) {
 				Sentry.init({
-					dsn: process.env.SENTRY_DSN,
-					tunnel: process.env.TUNNEL_URL,
+					dsn: bootSettings.sentry.dsn,
+					tunnel: bootSettings.sentry.tunnelUrl,
 					environment: 'production',
 					integrations: [
 						Sentry.browserTracingIntegration(),
@@ -386,6 +388,10 @@ function App(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);
 
+	if (isPreflightLoading) {
+		return <Spinner tip="Loading..." />;
+	}
+
 	// if the user is in logged in state
 	if (isLoggedInState) {
 		// if the setup calls are loading then return a spinner

frontend/src/api/__tests__/interceptorRejected.no-auth.test.ts

@@ -0,0 +1,72 @@
+import axios from 'axios';
+import { getIsNoAuthMode } from 'utils/noAuthMode';
+
+import { interceptorRejected } from '../index';
+
+jest.mock('utils/noAuthMode', () => ({
+	getIsNoAuthMode: jest.fn(),
+}));
+
+jest.mock('api/v2/sessions/rotate/post', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('AppRoutes/utils', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('../utils', () => ({
+	Logout: jest.fn(),
+}));
+
+// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
+const post = require('api/v2/sessions/rotate/post').default;
+// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
+const { Logout } = require('../utils');
+
+describe('interceptorRejected — no-auth mode', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(axios, 'isAxiosError').mockReturnValue(true);
+	});
+
+	it('does NOT call rotate or Logout when no-auth mode is enabled on 401', async () => {
+		(getIsNoAuthMode as jest.Mock).mockReturnValue(true);
+
+		const error = {
+			isAxiosError: true,
+			response: {
+				status: 401,
+				config: { url: '/dashboards', method: 'get' },
+			},
+			config: { url: '/dashboards', headers: {} },
+		};
+
+		await interceptorRejected(error as any).catch(() => {});
+
+		expect(post).not.toHaveBeenCalled();
+		expect(Logout).not.toHaveBeenCalled();
+	});
+
+	it('DOES attempt rotate when no-auth mode is disabled on 401', async () => {
+		(getIsNoAuthMode as jest.Mock).mockReturnValue(false);
+		(post as jest.Mock).mockResolvedValue({
+			data: { accessToken: 'a', refreshToken: 'b' },
+		});
+
+		const error = {
+			isAxiosError: true,
+			response: {
+				status: 401,
+				config: { url: '/dashboards', method: 'get' },
+			},
+			config: { url: '/dashboards', headers: {} },
+		};
+
+		await interceptorRejected(error as any).catch(() => {});
+
+		expect(post).toHaveBeenCalled();
+	});
+});

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

@@ -3488,9 +3488,9 @@ export interface InframonitoringtypesClustersDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesClusterRecordDTO[] | null;
+	records: InframonitoringtypesClusterRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3566,9 +3566,9 @@ export interface InframonitoringtypesDaemonSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDaemonSetRecordDTO[] | null;
+	records: InframonitoringtypesDaemonSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3644,9 +3644,9 @@ export interface InframonitoringtypesDeploymentsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDeploymentRecordDTO[] | null;
+	records: InframonitoringtypesDeploymentRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3730,9 +3730,9 @@ export interface InframonitoringtypesHostsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesHostRecordDTO[] | null;
+	records: InframonitoringtypesHostRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3816,9 +3816,9 @@ export interface InframonitoringtypesJobsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesJobRecordDTO[] | null;
+	records: InframonitoringtypesJobRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3866,9 +3866,9 @@ export interface InframonitoringtypesNamespacesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNamespaceRecordDTO[] | null;
+	records: InframonitoringtypesNamespaceRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3933,9 +3933,9 @@ export interface InframonitoringtypesNodesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNodeRecordDTO[] | null;
+	records: InframonitoringtypesNodeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4017,9 +4017,9 @@ export interface InframonitoringtypesPodsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesPodRecordDTO[] | null;
+	records: InframonitoringtypesPodRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4437,9 +4437,9 @@ export interface InframonitoringtypesStatefulSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesStatefulSetRecordDTO[] | null;
+	records: InframonitoringtypesStatefulSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4506,9 +4506,9 @@ export interface InframonitoringtypesVolumesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesVolumeRecordDTO[] | null;
+	records: InframonitoringtypesVolumeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer

frontend/src/api/index.ts

@@ -13,6 +13,7 @@ import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
+import { getIsNoAuthMode } from 'utils/noAuthMode';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
 import { Logout } from './utils';
@@ -108,7 +109,10 @@ export const interceptorRejected = async (
 		if (axios.isAxiosError(value) && value.response) {
 			const { response } = value;
 
+			const isNoAuthMode = getIsNoAuthMode();
+
 			if (
+				!isNoAuthMode &&
 				response.status === 401 &&
 				// if the session rotate call or the create session errors out with 401 or the delete sessions call returns 401 then we do not retry!
 				response.config.url !== '/sessions/rotate' &&
@@ -140,16 +144,20 @@ export const interceptorRejected = async (
 						return await Promise.resolve(reResponse);
 					} catch (error) {
 						if ((error as AxiosError)?.response?.status === 401) {
-							Logout();
+							void Logout();
 						}
 					}
 				} catch (error) {
-					Logout();
+					void Logout();
 				}
 			}
 
-			if (response.status === 401 && response.config.url === '/sessions/rotate') {
-				Logout();
+			if (
+				!isNoAuthMode &&
+				response.status === 401 &&
+				response.config.url === '/sessions/rotate'
+			) {
+				void Logout();
 			}
 		}
 		return await Promise.reject(value);

frontend/src/assets/Logos/apache-druid.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
+</svg>

frontend/src/assets/Logos/aspnet.svg

@@ -0,0 +1,7 @@
+<svg width="456" height="456" viewBox="0 0 456 456" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="456" height="456" rx="50" fill="#512BD4"/>
+<path d="M81.2738 291.333C78.0496 291.333 75.309 290.259 73.052 288.11C70.795 285.906 69.6665 283.289 69.6665 280.259C69.6665 277.173 70.795 274.529 73.052 272.325C75.309 270.121 78.0496 269.019 81.2738 269.019C84.5518 269.019 87.3193 270.121 89.5763 272.325C91.887 274.529 93.0424 277.173 93.0424 280.259C93.0424 283.289 91.887 285.906 89.5763 288.11C87.3193 290.259 84.5518 291.333 81.2738 291.333Z" fill="white"/>
+<path d="M210.167 289.515H189.209L133.994 202.406C132.597 200.202 131.441 197.915 130.528 195.546H130.044C130.474 198.081 130.689 203.508 130.689 211.827V289.515H112.149V171H134.477L187.839 256.043C190.096 259.57 191.547 261.994 192.192 263.316H192.514C191.977 260.176 191.708 254.859 191.708 247.365V171H210.167V289.515Z" fill="white"/>
+<path d="M300.449 289.515H235.561V171H297.87V187.695H254.746V221.249H294.485V237.861H254.746V272.903H300.449V289.515Z" fill="white"/>
+<path d="M392.667 187.695H359.457V289.515H340.272V187.695H307.143V171H392.667V187.695Z" fill="white"/>
+</svg>

frontend/src/assets/Logos/azure-cdn-frontdoor.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <linearGradient id="a" x1="9" y1="17" x2="9" y2="1" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0078d4"/>
+      <stop offset="1" stop-color="#5ea0ef"/>
+    </linearGradient>
+  </defs>
+  <circle cx="9" cy="9" r="8" fill="url(#a)"/>
+  <ellipse cx="9" cy="9" rx="3.2" ry="8" fill="none" stroke="#fff" stroke-width=".7"/>
+  <line x1="1" y1="9" x2="17" y2="9" stroke="#fff" stroke-width=".7"/>
+  <line x1="2" y1="5.5" x2="16" y2="5.5" stroke="#fff" stroke-width=".5"/>
+  <line x1="2" y1="12.5" x2="16" y2="12.5" stroke="#fff" stroke-width=".5"/>
+  <circle cx="9" cy="9" r="8" fill="none" stroke="#fff" stroke-width=".7"/>
+  <path d="M13.5 10.5l1.5-1.5-1.5-1.5M4.5 10.5L3 9l1.5-1.5" stroke="#50e6ff" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/Logos/cert-manager.svg

@@ -0,0 +1,15 @@
+<svg width="142" height="142" viewBox="0 0 142 142" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clipPath="url(#clip0_0_812)" transform="matrix(1.002103,0,0,1.0377318,6.9399999e-7,-2.5317276e-4)">
+    <path d="m 141.702,68.418 c 0,7.4632 -4.567,14.1123 -6.748,20.8385 -2.263,6.9789 -2.552,15.0285 -6.776,20.8385 -4.267,5.868 -11.856,8.611 -17.719,12.881 -5.805,4.228 -10.7345,10.628 -17.7061,12.895 -6.7286,2.186 -14.4463,-0.021 -21.9018,-0.021 -7.4555,0 -15.1731,2.207 -21.8998,0.021 C 41.9778,133.604 37.048,127.204 31.2428,122.976 25.3799,118.706 17.7913,115.963 13.5247,110.095 9.30055,104.287 9.01135,96.2374 6.74791,89.2565 4.56351,82.5225 0,75.8735 0,68.418 0,60.9624 4.56737,54.3057 6.74791,47.5795 9.01135,40.6005 9.30055,32.5507 13.5247,26.741 17.7913,20.8753 25.3799,18.1297 31.2428,13.8617 37.048,9.63414 41.9778,3.23209 48.9513,0.966872 55.678,-1.21924 63.3956,0.986167 70.8511,0.986167 c 7.4555,0 15.1732,-2.205407 21.8999,-0.019295 6.9735,2.265218 11.903,8.667268 17.708,12.894828 5.863,4.268 13.452,7.0136 17.719,12.8793 4.224,5.8097 4.513,13.8595 6.776,20.8385 2.181,6.7262 6.748,13.3771 6.748,20.8385 z" fill="#326ce5"/>
+    <path d="m 70.8473,8.18683 c -33.2383,0 -60.1837,26.96657 -60.1837,60.23097 0,33.2642 26.9454,60.2312 60.1837,60.2312 33.2387,0 60.1837,-26.959 60.1837,-60.2312 0,-33.2721 -26.945,-60.23097 -60.1837,-60.23097 z M 70.8319,123.408 C 40.4778,123.408 15.9058,98.8053 15.9,68.4274 15.9,38.0167 40.5357,13.3791 70.9109,13.437 c 30.3751,0.0579 54.9111,24.6589 54.8841,55.0329 -0.027,30.374 -24.609,54.9481 -54.9631,54.9381 z" fill="#ffffff"/>
+    <path d="m 13.5883,60.53 c 8.1804,0 8.1804,3.859 16.3589,3.859 8.1784,0 8.1804,-3.859 16.3607,-3.859 8.1804,0 8.1785,3.859 16.3589,3.859 8.1804,0 8.1785,-3.859 16.3589,-3.859 8.1804,0 8.1803,3.859 16.3588,3.859 8.1785,0 8.1805,-3.859 16.3605,-3.859 8.181,0 8.181,3.859 16.361,3.859" stroke="#ffffff" strokeMiterlimit="10"/>
+    <path d="m 13.5883,68.248 c 8.1804,0 8.1804,3.859 16.3589,3.859 8.1784,0 8.1804,-3.859 16.3607,-3.859 8.1804,0 8.1785,3.859 16.3589,3.859 8.1804,0 8.1785,-3.859 16.3589,-3.859 8.1804,0 8.1803,3.859 16.3588,3.859 8.1785,0 8.1805,-3.859 16.3605,-3.859 8.181,0 8.181,3.859 16.361,3.859" stroke="#ffffff" strokeMiterlimit="10"/>
+    <path d="m 13.5883,77.5095 c 8.1804,0 8.1804,3.859 16.3589,3.859 8.1784,0 8.1804,-3.859 16.3607,-3.859 8.1804,0 8.1785,3.859 16.3589,3.859 8.1804,0 8.1785,-3.859 16.3589,-3.859 8.1804,0 8.1803,3.859 16.3588,3.859 8.1785,0 8.1805,-3.859 16.3605,-3.859 8.181,0 8.181,3.859 16.361,3.859" stroke="#ffffff" strokeMiterlimit="10"/>
+    <path d="m 70.8473,8.18683 c -33.2383,0 -60.1837,26.96657 -60.1837,60.23097 0,33.2642 26.9454,60.2312 60.1837,60.2312 33.2387,0 60.1837,-26.959 60.1837,-60.2312 0,-33.2721 -26.945,-60.23097 -60.1837,-60.23097 z M 70.8319,123.408 C 40.4778,123.408 15.9058,98.8053 15.9,68.4274 15.9,38.0167 40.5357,13.3791 70.9109,13.437 c 30.3751,0.0579 54.9111,24.6589 54.8841,55.0329 -0.027,30.374 -24.609,54.9481 -54.9631,54.9381 z" fill="#ffffff"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_0_812">
+      <rect width="141.702" height="136.837" fill="#ffffff"/>
+    </clipPath>
+  </defs>
+</svg>

frontend/src/assets/Logos/graphql.svg

@@ -0,0 +1,55 @@
+<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+<g>
+	<g>
+		<g>
+			<rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#E535AB" width="16.6" height="320.3"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="39.8" y="272.2" fill="#E535AB" width="320.3" height="16.6"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="37.9" y="312.2" transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)" fill="#E535AB" width="185" height="16.6"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="177.1" y="71.1" transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)" fill="#E535AB" width="185" height="16.6"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="122.1" y="-13" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)" fill="#E535AB" width="16.6" height="185"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="109.6" y="151.6" transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)" fill="#E535AB" width="320.3" height="16.6"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="52.5" y="107.5" fill="#E535AB" width="16.6" height="185"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="330.9" y="107.5" fill="#E535AB" width="16.6" height="185"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<rect x="262.4" y="240.1" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)" fill="#E535AB" width="14.5" height="160.9"/>
+		</g>
+	</g>
+	<path fill="#E535AB" d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C373.5,259.9,379.2,281.2,369.5,297.9"/>
+	<path fill="#E535AB" d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C94.8,99,100.5,120.3,90.9,137"/>
+	<path fill="#E535AB" d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C61.4,320.3,40.1,314.6,30.5,297.9"/>
+	<path fill="#E535AB" d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C340.1,159.4,318.7,153.7,309.1,137"/>
+	<path fill="#E535AB" d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,380.1,219.3,395.8,200,395.8"/>
+	<path fill="#E535AB" d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,58.4,219.3,74,200,74"/>
+</g>
+</svg>

frontend/src/assets/Logos/istio.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.62745 102.5">
+  <path fill="#516baa" d="m31.05548,54.44523v24.1773c.00065.04512-.03164.084-.07611.09164l-23.27949,3.99047c-.05091.0076-.09834-.02751-.10594-.07841-.00256-.01712-.0003-.03461.00653-.05051L30.87996,30.58635c.02242-.04633.07815-.06572.12449-.04331.0316.01529.05193.04704.05259.08214l-.00156,23.82005Zm3.92367-13.93321v38.21148c.00046.04691.03573.08617.08232.09164l34.87031,3.89415c.0512.00527.09698-.03196.10226-.08316.00167-.01616-.00092-.03247-.00751-.04732L35.15623,4.70041c-.02237-.04636-.07809-.0658-.12444-.04343-.03117.01504-.05144.04612-.05264.08071v35.77433Zm34.68546,45.76213l-38.57341,11.57218c-.02155.00797-.04524.00797-.06679,0l-23.309-11.57217c-.04636-.0203-.06749-.07435-.04719-.12071.01513-.03455.04988-.0563.08757-.05481h61.88241c.0508.00825.08531.05613.07706.10693-.00482.0297-.02369.05525-.05066.06859Z"/>
+</svg>

frontend/src/assets/Logos/railway.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z"/>
+</svg>

frontend/src/assets/Logos/scala.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 270">
+<path d="M30.36,109.14v.48h0A3.73,3.73,0,0,1,30.36,109.14Z" fill="currentColor" fill-rule="evenodd"/>
+<path d="M138.66,28.78C107.2,37.87,57.29,43,30.4,43h0V94.35a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.4a129,129,0,0,0,17.49-5.81c4.18-1.88,6.88-3.86,6.88-5.92V15.91C164.1,20.79,151.39,25.11,138.66,28.78Z" fill="#de3423" fill-rule="evenodd"/>
+<path d="M138.66,95.37c-18.83,5.43-44.24,9.47-67.39,11.83-15.54,1.59-30.06,2.42-40.87,2.42h0v51.31a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.39a130.38,130.38,0,0,0,17.49-5.81c4.18-1.89,6.88-3.86,6.88-5.92V82.5C164.1,87.37,151.39,91.69,138.66,95.37Z" fill="#de3423" fill-rule="evenodd"/>
+<path d="M138.66,162c-18.83,5.43-44.24,9.46-67.39,11.83-15.56,1.59-30.1,2.42-40.91,2.42V228c18.16,0,75.1-5.95,109.37-15.39,12.63-3.48,24.37-7.44,24.37-11.74V149.08C164.1,154,151.39,158.28,138.66,162Z" fill="#de3423" fill-rule="evenodd"/>
+<path d="M30.55,94.83C32.4,97.38,48,102.19,71.27,107.2c23.27,4.46,47.47,22.07,66.29,16.64,12.73-3.68,26.54-36.47,26.54-41.34V82c0-3.4-2.55-6.13-6.88-8.4-17.75-9.07-21.11-12.41-27.69-10.6C95.37,72.43,35.06,67.61,30.55,94.83Z" fill="currentColor" fill-rule="evenodd"/>
+<path d="M30.55,161.41C32.4,164,48,168.77,71.27,173.79c26,4.74,48.61,20.19,67.44,14.75,12.73-3.68,25.39-34.58,25.39-39.46v-.48c0-3.39-2.55-6.13-6.88-8.39-13.54-7.2-31.43-15.13-38-13.32C85,136.3,39.26,138.37,30.55,161.41Z" fill="currentColor" fill-rule="evenodd"/>
+<path d="M200.7,142.39c6,11.79,15.6,17.6,29.05,17.6,14.44,0,19.59-7.64,19.59-15.11,0-5.15-1.83-8.63-6.64-11.79-4.82-3.32-8.3-4.81-16.93-8-10.63-4-16.77-7-23.41-12.29-6.64-5.48-9.79-13-9.79-22.74a28.28,28.28,0,0,1,10.29-22.58c7-5.81,15.44-8.63,25.56-8.63,15.77,0,27.72,6.31,35.69,18.76L249.34,87.78c-4.48-6.81-11.29-10.3-20.59-10.3-9.13,0-15.77,5.15-15.77,12.29,0,4.81,2,7.14,4.82,10,1.82,1.33,6.47,3.32,8.63,4.48l6,2.32,6.8,2.66c11,4.48,18.76,9.3,23.57,14.44s7.31,12.12,7.31,20.75c0,20.42-14.11,34.2-40.51,34.2-21.41,0-37.18-10-44.48-26.4Z" fill="currentColor"/>
+<path d="M354.25,104.71,342,117.49a28.14,28.14,0,0,0-21.24-9.13,25,25,0,0,0-18.43,7.47,27.76,27.76,0,0,0,0,37.52,25,25,0,0,0,18.43,7.47A28.14,28.14,0,0,0,342,151.69l12.29,12.78c-9,9.63-20.09,14.44-33.53,14.44-12.79,0-23.58-4.15-32.37-12.62s-13.12-19.09-13.12-31.7,4.32-23.08,13.12-31.54,19.58-12.78,32.37-12.78C334.16,90.27,345.28,95.08,354.25,104.71Z" fill="currentColor"/>
+<path d="M393.88,125.62C408,124.3,413,122.47,413,116c0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a14.06,14.06,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C357.7,136.41,369.15,127.78,393.88,125.62ZM391.56,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.75,9.75,0,0,1-4.14,2.49c-3.82,1.33-6.31,1.66-14.28,2.49-11.62,1.33-17.43,5-17.43,10.79C377.12,158.33,382.43,162,391.56,162Z" fill="currentColor"/>
+<path d="M444.84,60.88h19.92V149.2c0,8.13,2.66,11.62,10,11.62a21.15,21.15,0,0,0,6-.67v17.76a35.56,35.56,0,0,1-9.47,1c-17.59,0-26.39-9-26.39-27.06Z" fill="currentColor"/>
+<path d="M521.71,125.62c14.11-1.32,19.09-3.15,19.09-9.62,0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a13.94,13.94,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C485.53,136.41,497,127.78,521.71,125.62ZM519.39,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.73,9.73,0,0,1-4.15,2.49c-3.81,1.33-6.3,1.66-14.27,2.49-11.62,1.33-17.43,5-17.43,10.79C505,158.33,510.26,162,519.39,162Z" fill="currentColor"/>
+</svg>

frontend/src/assets/Logos/slog.svg

@@ -0,0 +1,37 @@
+<svg viewBox="0 0 254.5 225" xmlns="http://www.w3.org/2000/svg">
+<g>
+	<g>
+		<g>
+			<g>
+				<path fill="#00ACD7" d="M40.2,101.1c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5l35.7,0c0.4,0,0.5,0.3,0.3,0.6 l-1.7,2.6c-0.2,0.3-0.7,0.6-1,0.6L40.2,101.1z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path fill="#00ACD7" d="M25.1,110.3c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5l45.6,0c0.4,0,0.6,0.3,0.5,0.6 l-0.8,2.4c-0.1,0.4-0.5,0.6-0.9,0.6L25.1,110.3z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path fill="#00ACD7" d="M49.3,119.5c-0.4,0-0.5-0.3-0.3-0.6l1.4-2.5c0.2-0.3,0.6-0.6,1-0.6l20,0c0.4,0,0.6,0.3,0.6,0.7l-0.2,2.4 c0,0.4-0.4,0.7-0.7,0.7L49.3,119.5z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g id="CXHf1q_3_">
+			<g>
+				<g>
+					<path fill="#00ACD7" d="M153.1,99.3c-6.3,1.6-10.6,2.8-16.8,4.4c-1.5,0.4-1.6,0.5-2.9-1c-1.5-1.7-2.6-2.8-4.7-3.8 c-6.3-3.1-12.4-2.2-18.1,1.5c-6.8,4.4-10.3,10.9-10.2,19c0.1,8,5.6,14.6,13.5,15.7c6.8,0.9,12.5-1.5,17-6.6 c0.9-1.1,1.7-2.3,2.7-3.7c-3.6,0-8.1,0-19.3,0c-2.1,0-2.6-1.3-1.9-3c1.3-3.1,3.7-8.3,5.1-10.9c0.3-0.6,1-1.6,2.5-1.6 c5.1,0,23.9,0,36.4,0c-0.2,2.7-0.2,5.4-0.6,8.1c-1.1,7.2-3.8,13.8-8.2,19.6c-7.2,9.5-16.6,15.4-28.5,17 c-9.8,1.3-18.9-0.6-26.9-6.6c-7.4-5.6-11.6-13-12.7-22.2c-1.3-10.9,1.9-20.7,8.5-29.3c7.1-9.3,16.5-15.2,28-17.3 c9.4-1.7,18.4-0.6,26.5,4.9c5.3,3.5,9.1,8.3,11.6,14.1C154.7,98.5,154.3,99,153.1,99.3z"/>
+				</g>
+				<g>
+					<path fill="#00ACD7" d="M186.2,154.6c-9.1-0.2-17.4-2.8-24.4-8.8c-5.9-5.1-9.6-11.6-10.8-19.3c-1.8-11.3,1.3-21.3,8.1-30.2 c7.3-9.6,16.1-14.6,28-16.7c10.2-1.8,19.8-0.8,28.5,5.1c7.9,5.4,12.8,12.7,14.1,22.3c1.7,13.5-2.2,24.5-11.5,33.9 c-6.6,6.7-14.7,10.9-24,12.8C191.5,154.2,188.8,154.3,186.2,154.6z M210,114.2c-0.1-1.3-0.1-2.3-0.3-3.3 c-1.8-9.9-10.9-15.5-20.4-13.3c-9.3,2.1-15.3,8-17.5,17.4c-1.8,7.8,2,15.7,9.2,18.9c5.5,2.4,11,2.1,16.3-0.6 C205.2,129.2,209.5,122.8,210,114.2z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -137,7 +137,6 @@ function CreateServiceAccountModal(): JSX.Element {
 				<AuthZTooltip checks={[SACreatePermission]}>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form="create-sa-form"
 						variant="solid"
 						color="primary"

frontend/src/components/GuardAuthZ/GuardAuthZ.authz.test.tsx

@@ -11,9 +11,6 @@ import { GuardAuthZ } from './GuardAuthZ';
 describe('GuardAuthZ', () => {
 	const TestChild = (): ReactElement => <div>Protected Content</div>;
 	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
-	const ErrorFallback = (error: Error): ReactElement => (
-		<div>Error occurred: {error.message}</div>
-	);
 	const NoPermissionFallback = (_response: {
 		requiredPermissionName: BrandedPermission;
 	}): ReactElement => <div>Access denied</div>;
@@ -90,40 +87,28 @@ describe('GuardAuthZ', () => {
 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
 	});
 
-	it('should render fallbackOnError when API error occurs', async () => {
-		const errorMessage = 'Internal Server Error';
-
+	it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
 			}),
 		);
 
 		render(
-			<GuardAuthZ relation="read" object="role:*" fallbackOnError={ErrorFallback}>
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
 
 		await waitFor(() => {
-			expect(screen.getByText(/Error occurred:/)).toBeInTheDocument();
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
 		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
 	});
 
-	it('should pass error object to fallbackOnError function', async () => {
-		const errorMessage = 'Network request failed';
-		let receivedError: Error | null = null;
-
-		const errorFallbackWithCapture = (error: Error): ReactElement => {
-			receivedError = error;
-			return <div>Captured error: {error.message}</div>;
-		};
-
+	it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: errorMessage }));
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
 			}),
 		);
 
@@ -131,35 +116,14 @@ describe('GuardAuthZ', () => {
 			<GuardAuthZ
 				relation="read"
 				object="role:*"
-				fallbackOnError={errorFallbackWithCapture}
+				fallbackOnError={<div>Custom error fallback</div>}
 			>
 				<TestChild />
 			</GuardAuthZ>,
 		);
 
 		await waitFor(() => {
-			expect(receivedError).not.toBeNull();
-		});
-
-		expect(receivedError).toBeInstanceOf(Error);
-		expect(screen.getByText(/Captured error:/)).toBeInTheDocument();
-	});
-
-	it('should render null when error occurs and no fallbackOnError provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
+			expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
 		});
 
 		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();

frontend/src/components/GuardAuthZ/GuardAuthZ.tsx

@@ -12,7 +12,7 @@ export type GuardAuthZProps<R extends AuthZRelation> = {
 	relation: R;
 	object: AuthZObject<R>;
 	fallbackOnLoading?: JSX.Element;
-	fallbackOnError?: (error: Error) => JSX.Element;
+	fallbackOnError?: JSX.Element;
 	fallbackOnNoPermissions?: (response: {
 		requiredPermissionName: BrandedPermission;
 	}) => JSX.Element;
@@ -35,7 +35,7 @@ export function GuardAuthZ<R extends AuthZRelation>({
 	}
 
 	if (error) {
-		return fallbackOnError?.(error) ?? null;
+		return fallbackOnError ?? children;
 	}
 
 	if (!permissions?.[permission]?.isGranted) {

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch } from 'antd';
+import { Button } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
@@ -125,9 +126,8 @@ function ShareURLModal(): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								checked={enableAbsoluteTime}
+								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
-								size="small"
 								onChange={(): void => {
 									setEnableAbsoluteTime((prev) => !prev);
 								}}

frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss

@@ -0,0 +1,13 @@
+.banner {
+	height: var(--spacing-20);
+
+	a {
+		color: var(--callout-warning-title);
+		text-decoration: underline;
+
+		&:hover {
+			color: var(--callout-warning-title);
+			opacity: 0.8;
+		}
+	}
+}

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -0,0 +1,26 @@
+import { PersistedAnnouncementBanner } from '@signozhq/ui/announcement-banner';
+
+import styles from './NoAuthBanner.module.scss';
+
+export function NoAuthBanner(): JSX.Element {
+	return (
+		<PersistedAnnouncementBanner
+			type="warning"
+			storageKey="no-auth-banner-v1"
+			testId="no-auth-banner"
+			className={styles.banner}
+		>
+			Impersonation mode: authentication is disabled. Anyone with access to this
+			instance has admin privileges.{' '}
+			<a
+				href="https://signoz.io/docs/manage/administrator-guide/configuration/impersonation-mode/"
+				target="_blank"
+				rel="noreferrer"
+			>
+				Learn more
+			</a>
+		</PersistedAnnouncementBanner>
+	);
+}
+
+export default NoAuthBanner;

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

@@ -0,0 +1,24 @@
+import { render, screen } from 'tests/test-utils';
+
+import { NoAuthBanner } from '../NoAuthBanner';
+
+describe('NoAuthBanner', () => {
+	it('renders the no-auth message', () => {
+		render(<NoAuthBanner />);
+		expect(
+			screen.getByText(/Impersonation mode: authentication is disabled/i),
+		).toBeInTheDocument();
+	});
+
+	it('renders with the warning test id', () => {
+		render(<NoAuthBanner />);
+		expect(screen.getByTestId('no-auth-banner')).toBeInTheDocument();
+	});
+
+	it('renders a docs link that opens in a new tab', () => {
+		render(<NoAuthBanner />);
+		const link = screen.getByRole('link', { name: /learn more/i });
+		expect(link).toHaveAttribute('target', '_blank');
+		expect(link).toHaveAttribute('rel', 'noreferrer');
+	});
+});

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -14,7 +14,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
-import { Skeleton, Switch, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -281,9 +282,8 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
-						size="small"
 						style={{ marginLeft: 'auto' }}
-						checked={showIP ?? true}
+						value={showIP ?? true}
 						onChange={(checked): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
 								showIP: checked,

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,7 +4,8 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -60,9 +61,7 @@ function DynamicColumnTable({
 
 	const onToggleHandler =
 		(index: number, column: ColumnGroupType<any> | ColumnType<any>) =>
-		(checked: boolean, event: React.MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-
+		(checked: boolean): void => {
 			if (shouldSendAlertsLogEvent) {
 				logEvent('Alert: Column toggled', {
 					column: column?.title,
@@ -88,10 +87,14 @@ function DynamicColumnTable({
 	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
 			label: (
-				<div className="dynamicColumnsTable-items">
+				<div
+					className="dynamicColumnsTable-items"
+					onClick={(e): void => e.stopPropagation()}
+					role="presentation"
+				>
 					<div>{column.title?.toString()}</div>
 					<Switch
-						checked={columnsData?.findIndex((c) => c.key === column.key) !== -1}
+						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>
 				</div>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -127,7 +127,6 @@ function KeyFormPhase({
 					>
 						<Button
 							type="submit"
-							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -190,7 +190,6 @@ function EditKeyForm({
 					>
 						<Button
 							type="submit"
-							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table } from 'antd';
+import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
@@ -110,28 +110,34 @@ function buildColumns({
 				onClick: (e): void => e.stopPropagation(),
 				style: { cursor: 'default' },
 			}),
-			render: (_, record): JSX.Element => (
-				<AuthZTooltip
-					checks={[
-						buildAPIKeyDeletePermission(record.id),
-						buildSADetachPermission(accountId),
-					]}
-					enabled={!isDisabled && !!accountId}
-				>
-					<Button
-						variant="ghost"
-						size="sm"
-						color="destructive"
-						disabled={isDisabled}
-						onClick={(): void => {
-							onRevokeClick(record.id);
-						}}
-						className="keys-tab__revoke-btn"
+			render: (_, record): JSX.Element => {
+				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
+				return (
+					<AuthZTooltip
+						checks={[
+							buildAPIKeyDeletePermission(record.id),
+							buildSADetachPermission(accountId),
+						]}
+						enabled={!isDisabled && !!accountId}
 					>
-						<X size={12} />
-					</Button>
-				</AuthZTooltip>
-			),
+						<Tooltip title={tooltipTitle}>
+							<Button
+								variant="ghost"
+								size="sm"
+								color="destructive"
+								disabled={isDisabled}
+								onClick={(e): void => {
+									e.stopPropagation();
+									onRevokeClick(record.id);
+								}}
+								className="keys-tab__revoke-btn"
+							>
+								<X size={12} />
+							</Button>
+						</Tooltip>
+					</AuthZTooltip>
+				);
+			},
 		},
 	];
 }

frontend/src/components/createGuardedRoute/createGuardedRoute.authz.test.tsx

@@ -204,7 +204,7 @@ describe('createGuardedRoute', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('should render error fallback when API error occurs', async () => {
+	it('should render the component when API error occurs (fail open)', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
 				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
@@ -230,12 +230,8 @@ describe('createGuardedRoute', () => {
 		render(<GuardedComponent {...props} />);
 
 		await waitFor(() => {
-			expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
 		});
-
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
 	});
 
 	it('should render no permissions fallback when permission is denied', async () => {

frontend/src/components/createGuardedRoute/createGuardedRoute.tsx

@@ -9,14 +9,11 @@ import { parsePermission } from 'hooks/useAuthZ/utils';
 
 import noDataUrl from '@/assets/Icons/no-data.svg';
 
-import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import AppLoading from '../AppLoading/AppLoading';
 import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
 
 import './createGuardedRoute.styles.scss';
 
-const onErrorFallback = (): JSX.Element => <ErrorBoundaryFallback />;
-
 function OnNoPermissionsFallback(response: {
 	requiredPermissionName: BrandedPermission;
 }): ReactElement {
@@ -63,7 +60,6 @@ export function createGuardedRoute<P extends object, R extends AuthZRelation>(
 				relation={relation}
 				object={resolvedObject}
 				fallbackOnLoading={<AppLoading />}
-				fallbackOnError={onErrorFallback}
 				fallbackOnNoPermissions={(response): ReactElement => (
 					<OnNoPermissionsFallback {...response} />
 				)}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
-import { Spin, Switch, Table, Tooltip } from 'antd';
+import { Spin, Table, Tooltip } from 'antd';
 import { Info, Loader } from '@signozhq/icons';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
@@ -170,11 +171,7 @@ function TopErrors({
 					/>
 				</div>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Switch
-						checked={showStatusCodeErrors}
-						onChange={setShowStatusCodeErrors}
-						size="small"
-					/>
+					<Switch value={showStatusCodeErrors} onChange={setShowStatusCodeErrors} />
 					<span style={{ color: 'white', fontSize: '14px' }}>
 						Status Message Exists
 					</span>

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,4 +1,5 @@
-import { Button, Flex, SelectProps, Switch } from 'antd';
+import { Button, Flex, SelectProps } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
@@ -419,8 +420,8 @@ export function RoutingPolicyBanner({
 			</Typography.Text>
 			<div className="routing-policies-info-banner-right">
 				<Switch
-					checked={notificationSettings.routingPolicies}
-					data-testid="routing-policies-switch"
+					value={notificationSettings.routingPolicies}
+					testId="routing-policies-switch"
 					onChange={(value): void => {
 						setNotificationSettings({
 							type: 'SET_ROUTING_POLICIES',

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { Info } from '@signozhq/icons';
 
@@ -49,7 +50,7 @@ function AdvancedOptionItem({
 				>
 					{input}
 				</div>
-				<Switch onChange={handleOnToggle} checked={showInput} />
+				<Switch onChange={handleOnToggle} value={showInput} />
 			</div>
 		</div>
 	);

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,7 +5,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
+import { Button, Collapse, Input, Select, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
@@ -763,7 +764,7 @@ function VariableItem({
 									</Typography>
 								</LabelContainer>
 								<Switch
-									checked={variableMultiSelect}
+									value={variableMultiSelect}
 									onChange={(e): void => {
 										setVariableMultiSelect(e);
 										if (!e) {
@@ -780,7 +781,7 @@ function VariableItem({
 										</Typography>
 									</LabelContainer>
 									<Switch
-										checked={variableShowALLOption}
+										value={variableShowALLOption}
 										onChange={(e): void => setVariableShowALLOption(e)}
 									/>
 								</VariableItemRow>

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -0,0 +1,147 @@
+import { renderHook } from '@testing-library/react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { usePanelContextMenu } from '../usePanelContextMenu';
+
+// The hook composes `useCoordinates` (popover state) and `useGraphContextMenu`
+// (menu items). We mock both so the test focuses on the `enableDrillDown` gate
+// rather than the implementation of the menu wiring itself.
+const onClickMock = jest.fn();
+jest.mock('periscope/components/ContextMenu', () => ({
+	useCoordinates: (): unknown => ({
+		coordinates: null,
+		popoverPosition: null,
+		clickedData: null,
+		onClose: jest.fn(),
+		subMenu: null,
+		onClick: onClickMock,
+		setSubMenu: jest.fn(),
+	}),
+}));
+
+jest.mock('container/QueryTable/Drilldown/useGraphContextMenu', () => ({
+	__esModule: true,
+	default: (): { menuItemsConfig: { header: string; items: string } } => ({
+		menuItemsConfig: { header: 'menu-header', items: 'menu-items' },
+	}),
+}));
+
+jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
+	getUplotClickData: jest.fn(() => ({
+		coord: { x: 1, y: 2 },
+		record: { queryName: 'A', filters: [] },
+		label: 'lbl',
+		seriesColor: '#abc',
+	})),
+}));
+
+jest.mock('container/PanelWrapper/utils', () => ({
+	isApmMetric: jest.fn(() => false),
+	getTimeRangeFromStepInterval: jest.fn(() => ({ start: 0, end: 0 })),
+}));
+
+const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
+const mockQueryResponse = {
+	data: undefined,
+	isLoading: false,
+} as unknown as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown>,
+	Error
+>;
+
+describe('usePanelContextMenu', () => {
+	beforeEach(() => {
+		onClickMock.mockClear();
+	});
+
+	it('returns empty menuItemsConfig when enableDrillDown is false', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: false,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({});
+	});
+
+	it('returns wired menuItemsConfig when enableDrillDown is true', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: true,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({
+			header: 'menu-header',
+			items: 'menu-items',
+		});
+	});
+
+	it('clickHandlerWithContextMenu is a no-op when enableDrillDown is false', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: false,
+			}),
+		);
+
+		result.current.clickHandlerWithContextMenu(
+			100, // xValue
+			200, // yValue
+			0, // mouseX
+			0, // mouseY
+			{ serviceName: 'svc' }, // metric
+			{ queryName: 'A', inFocusOrNot: true }, // queryData
+			10, // absoluteMouseX
+			20, // absoluteMouseY
+			{}, // axesData
+			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' }, // focusedSeries
+		);
+
+		expect(onClickMock).not.toHaveBeenCalled();
+	});
+
+	it('clickHandlerWithContextMenu opens popover when enableDrillDown is true', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: true,
+			}),
+		);
+
+		result.current.clickHandlerWithContextMenu(
+			100,
+			200,
+			0,
+			0,
+			{ serviceName: 'svc' },
+			{ queryName: 'A', inFocusOrNot: true },
+			10,
+			20,
+			{},
+			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' },
+		);
+
+		expect(onClickMock).toHaveBeenCalledTimes(1);
+	});
+
+	it('defaults to disabled when enableDrillDown is not provided', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({});
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -21,11 +21,13 @@ interface UseTimeSeriesContextMenuParams {
 		SuccessResponse<MetricRangePayloadProps, unknown>,
 		Error
 	>;
+	enableDrillDown?: boolean;
 }
 
 export const usePanelContextMenu = ({
 	widget,
 	queryResponse,
+	enableDrillDown = false,
 }: UseTimeSeriesContextMenuParams): {
 	coordinates: { x: number; y: number } | null;
 	popoverPosition: PopoverPosition | null;
@@ -61,6 +63,9 @@ export const usePanelContextMenu = ({
 
 	const clickHandlerWithContextMenu = useCallback(
 		(...args: any[]) => {
+			if (!enableDrillDown) {
+				return;
+			}
 			const [
 				xValue,
 				_yvalue,
@@ -112,14 +117,14 @@ export const usePanelContextMenu = ({
 				});
 			}
 		},
-		[onClick, queryResponse],
+		[enableDrillDown, onClick, queryResponse],
 	);
 
 	return {
 		coordinates,
 		popoverPosition,
 		onClose,
-		menuItemsConfig,
+		menuItemsConfig: enableDrillDown ? menuItemsConfig : {},
 		clickHandlerWithContextMenu,
 	};
 };

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -31,6 +31,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
+		enableDrillDown = false,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -61,6 +62,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
+		enableDrillDown,
 	});
 
 	const config = useMemo(() => {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -31,6 +31,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
+		enableDrillDown = false,
 	} = props;
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
@@ -60,6 +61,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
+		enableDrillDown,
 	});
 
 	const chartData = useMemo(() => {

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select, Switch } from 'antd';
+import { Form, FormInstance, Input, Select } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
@@ -82,8 +83,8 @@ function FormAlertChannels({
 					name="send_resolved"
 				>
 					<Switch
-						defaultChecked={initialValue?.send_resolved}
-						data-testid="field-send-resolved-checkbox"
+						defaultValue={initialValue?.send_resolved}
+						testId="field-send-resolved-checkbox"
 						onChange={(value): void => {
 							setSelectedConfig((state) => ({
 								...state,

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { Plus } from '@signozhq/icons';
-import { Button, Flex, Form, Select, Switch, Tooltip } from 'antd';
+import { Button, Flex, Form, Select, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -198,10 +199,10 @@ function BasicInfo({
 						placement="right"
 					>
 						<Switch
-							checked={shouldBroadCastToAllChannels}
+							value={shouldBroadCastToAllChannels}
 							onChange={handleBroadcastToAllChannels}
 							disabled={noChannels || !!isLoading}
-							data-testid="alert-broadcast-to-all-channels"
+							testId="alert-broadcast-to-all-channels"
 						/>
 					</Tooltip>
 				</FormItemMedium>

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -292,6 +292,8 @@ function FullView({
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
 
+	const showEditBtn = editWidget && dashboardEditView;
+
 	return (
 		<div className="full-view-container">
 			<OverlayScrollbar>
@@ -306,7 +308,7 @@ function FullView({
 												Reset Query
 											</Button>
 										)}
-										{editWidget && (
+										{showEditBtn && (
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}

frontend/src/container/Home/Home.tsx

@@ -18,6 +18,8 @@ import listUserPreferences from 'api/v1/user/preferences/list';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
 import Header from 'components/Header/Header';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import NoAuthBanner from 'components/NoAuthBanner/NoAuthBanner';
+import { getIsNoAuthMode } from 'utils/noAuthMode';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -196,7 +198,7 @@ export default function Home(): JSX.Element {
 	const { mutate: updateUserPreference } = useMutation(updateUserPreferenceAPI, {
 		onSuccess: () => {
 			setUpdatingUserPreferences(false);
-			refetchUserPreferences();
+			void refetchUserPreferences();
 		},
 		onError: () => {
 			setUpdatingUserPreferences(false);
@@ -204,7 +206,7 @@ export default function Home(): JSX.Element {
 	});
 
 	const handleWillDoThisLater = (): void => {
-		logEvent('Welcome Checklist: Will do this later clicked', {});
+		void logEvent('Welcome Checklist: Will do this later clicked', {});
 		setUpdatingUserPreferences(true);
 
 		updateUserPreference({
@@ -271,11 +273,12 @@ export default function Home(): JSX.Element {
 	}, [metricsOnboardingData, handleUpdateChecklistDoneItem]);
 
 	useEffect(() => {
-		logEvent('Homepage: Visited', {});
+		void logEvent('Homepage: Visited', {});
 	}, []);
 
 	return (
 		<div className="home-container">
+			{getIsNoAuthMode() && <NoAuthBanner />}
 			<div className="sticky-header">
 				<Header
 					leftComponent={
@@ -298,9 +301,9 @@ export default function Home(): JSX.Element {
 									autoAdjustOverflow
 									onOpenChange={(visible): void => {
 										if (visible) {
-											logEvent('Welcome Checklist: Expanded', {});
+											void logEvent('Welcome Checklist: Expanded', {});
 										} else {
-											logEvent('Welcome Checklist: Minimized', {});
+											void logEvent('Welcome Checklist: Minimized', {});
 										}
 									}}
 									content={renderWelcomeChecklistModal()}
@@ -353,7 +356,7 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											onClick={(e: React.MouseEvent): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
-												logEvent('Homepage: Ingestion Active Explore clicked', {
+												void logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
 												safeNavigate(ROUTES.LOGS_EXPLORER, {
@@ -362,7 +365,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													logEvent('Homepage: Ingestion Active Explore clicked', {
+													void logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Logs',
 													});
 													history.push(ROUTES.LOGS_EXPLORER);
@@ -396,7 +399,7 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											onClick={(e: React.MouseEvent): void => {
-												logEvent('Homepage: Ingestion Active Explore clicked', {
+												void logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
 												safeNavigate(ROUTES.TRACES_EXPLORER, {
@@ -405,7 +408,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													logEvent('Homepage: Ingestion Active Explore clicked', {
+													void logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Traces',
 													});
 													history.push(ROUTES.TRACES_EXPLORER);
@@ -439,7 +442,7 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											onClick={(e: React.MouseEvent): void => {
-												logEvent('Homepage: Ingestion Active Explore clicked', {
+												void logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
 												safeNavigate(ROUTES.METRICS_EXPLORER, {
@@ -448,7 +451,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													logEvent('Homepage: Ingestion Active Explore clicked', {
+													void logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Metrics',
 													});
 													history.push(ROUTES.METRICS_EXPLORER);
@@ -496,7 +499,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													logEvent('Homepage: Explore clicked', {
+													void logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
 													safeNavigate(ROUTES.LOGS_EXPLORER, {
@@ -513,7 +516,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													logEvent('Homepage: Explore clicked', {
+													void logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
 													safeNavigate(ROUTES.TRACES_EXPLORER, {
@@ -530,7 +533,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													logEvent('Homepage: Explore clicked', {
+													void logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
 													safeNavigate(ROUTES.METRICS_EXPLORER_EXPLORER, {
@@ -569,7 +572,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													logEvent('Homepage: Explore clicked', {
+													void logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
 													safeNavigate(ROUTES.ALL_DASHBOARD, {
@@ -614,7 +617,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													logEvent('Homepage: Explore clicked', {
+													void logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
 													safeNavigate(ROUTES.ALERTS_NEW, {

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -15,13 +15,13 @@ import {
 	Modal,
 	Row,
 	Select,
-	Switch,
 	Table,
 	TablePaginationConfig,
 	TableProps as AntDTableProps,
 	Tag,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import type { CollapseProps } from 'antd/lib';
@@ -1180,8 +1180,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					<div className="limit-enable-disable-toggle">
 																						<Form.Item name="enableDailyLimit">
 																							<Switch
-																								size="small"
-																								checked={activeSignal?.config?.day?.enabled}
+																								value={activeSignal?.config?.day?.enabled}
 																								onChange={(value): void => {
 																									setActiveSignal((prev) =>
 																										prev
@@ -1270,8 +1269,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					<div className="limit-enable-disable-toggle">
 																						<Form.Item name="enableSecondLimit">
 																							<Switch
-																								size="small"
-																								checked={activeSignal?.config?.second?.enabled}
+																								value={activeSignal?.config?.second?.enabled}
 																								onChange={(value): void => {
 																									setActiveSignal((prev) =>
 																										prev

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -21,11 +21,11 @@ import {
 	Modal,
 	Popover,
 	Skeleton,
-	Switch,
 	Table,
 	Tag,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { TableProps } from 'antd/lib';
 import getLocalStorageKey from 'api/browser/localstorage/get';
@@ -965,8 +965,7 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
-									checked
+									value
 									disabled
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
@@ -985,9 +984,8 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
 									disabled
-									checked
+									value
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,
@@ -1005,8 +1003,7 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
-									checked={visibleColumns.updatedAt}
+									value={visibleColumns.updatedAt}
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,
@@ -1024,8 +1021,7 @@ function DashboardsList(): JSX.Element {
 							<div className="connection-line" />
 							<div className="right">
 								<Switch
-									size="small"
-									checked={visibleColumns.updatedBy}
+									value={visibleColumns.updatedBy}
 									onChange={(check): void =>
 										setVisibleColumns((prev) => ({
 											...prev,

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
@@ -228,9 +228,8 @@ function LiveLogsContainer({
 					<div className="live-logs-frequency-chart-view-controller">
 						<Typography>Frequency chart</Typography>
 						<Switch
-							size="small"
-							checked={showLiveLogsFrequencyChart}
-							defaultChecked
+							value={showLiveLogsFrequencyChart}
+							defaultValue
 							onChange={handleToggleFrequencyChart}
 						/>
 					</div>

frontend/src/container/LogDetailedView/JsonView.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
@@ -81,7 +81,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
 				<div className="log-switch">
 					<div className="wrap-word-switch">
 						<Typography.Text>Wrap text</Typography.Text>
-						<Switch checked={isWrapWord} onChange={handleWrapWord} size="small" />
+						<Switch value={isWrapWord} onChange={handleWrapWord} />
 					</div>
 				</div>
 			</div>

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,7 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Collapse, Divider, Input, Switch, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Collapse, Divider, Input, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -136,7 +137,7 @@ function Overview({
 								<div className="log-switch">
 									<div className="wrap-word-switch">
 										<Typography.Text>Wrap text</Typography.Text>
-										<Switch checked={isWrapWord} onChange={handleWrapWord} size="small" />
+										<Switch value={isWrapWord} onChange={handleWrapWord} />
 									</div>
 								</div>
 							</div>

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,4 +1,4 @@
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
@@ -69,9 +69,8 @@ function LogsActionsContainer({
 						<div className="frequency-chart-view-controller">
 							<Typography>Frequency chart</Typography>
 							<Switch
-								size="small"
-								checked={showFrequencyChart}
-								defaultChecked
+								value={showFrequencyChart}
+								defaultValue
 								onChange={handleToggleFrequencyChart}
 							/>
 						</div>

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -21,7 +21,6 @@ const PAGE_SIZE = 20;
 function MembersSettings(): JSX.Element {
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
-
 	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
 	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
 
@@ -146,7 +145,7 @@ function MembersSettings(): JSX.Element {
 				: `Deleted ⎯ ${deletedCount}`;
 
 	const handleInviteComplete = useCallback((): void => {
-		refetchUsers();
+		void refetchUsers();
 	}, [refetchUsers]);
 
 	const handleRowClick = useCallback((member: MemberRow): void => {
@@ -158,7 +157,7 @@ function MembersSettings(): JSX.Element {
 	}, []);
 
 	const handleMemberEditComplete = useCallback((): void => {
-		refetchUsers();
+		void refetchUsers();
 	}, [refetchUsers]);
 
 	return (

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -30,7 +30,12 @@ import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { GraphTitle, MENU_ITEMS, SERVICE_CHART_ID } from '../constant';
+import {
+	GraphTitle,
+	MENU_ITEMS,
+	SERVICE_CHART_ID,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
+} from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import { Button } from './styles';
@@ -206,6 +211,7 @@ function DBCall(): JSX.Element {
 							}}
 							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					</GraphContainer>
 				</Card>
@@ -244,6 +250,7 @@ function DBCall(): JSX.Element {
 							}}
 							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					</GraphContainer>
 				</Card>

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -32,7 +32,12 @@ import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { GraphTitle, legend, MENU_ITEMS } from '../constant';
+import {
+	GraphTitle,
+	legend,
+	MENU_ITEMS,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
+} from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import GraphControlsPanel from './Overview/GraphControlsPanel/GraphControlsPanel';
@@ -279,6 +284,7 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -322,6 +328,7 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -366,6 +373,7 @@ function External(): JSX.Element {
 								}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -409,6 +417,7 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx

@@ -15,6 +15,7 @@ import DisplayThreshold from 'container/GridCardLayout/WidgetHeader/DisplayThres
 import {
 	GraphTitle,
 	SERVICE_CHART_ID,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
 } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { apDexMetricsQueryBuilderQueries } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
@@ -105,6 +106,7 @@ function ApDexMetrics({
 			threshold={threshold}
 			isQueryEnabled={isQueryEnabled}
 			version={ENTITY_VERSION_V4}
+			enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 		/>
 	);
 }

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -8,6 +8,7 @@ import Graph from 'container/GridCardLayout/GridCard';
 import {
 	GraphTitle,
 	SERVICE_CHART_ID,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
 } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { latency } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
@@ -138,6 +139,7 @@ function ServiceOverview({
 							onClickHandler={handleGraphClick('Service')}
 							isQueryEnabled={isQueryEnabled}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					)}
 				</GraphContainer>

frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import Graph from 'container/GridCardLayout/GridCard';
+import { SERVICE_DETAIL_DRILLDOWN_ENABLED } from 'container/MetricsApplication/constant';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -43,6 +44,7 @@ function TopLevelOperation({
 							onDragSelect={onDragSelect}
 							isQueryEnabled={!topLevelOperationsIsLoading}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					)}
 				</GraphContainer>

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -5,11 +5,11 @@ import { useParams } from 'react-router-dom';
 import { Search } from '@signozhq/icons';
 import {
 	InputRef,
-	Switch,
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 	Tooltip,
 } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
@@ -212,11 +212,7 @@ function TopOperationsTable({
 					/>
 				</div>
 				<div className="top-operation__entry-point">
-					<Switch
-						checked={isEntryPoint}
-						onChange={onEntryPointToggle}
-						size="small"
-					/>
+					<Switch value={isEntryPoint} onChange={onEntryPointToggle} />
 					<span className="top-operation__entry-point-label">Entrypoint Spans</span>
 					<TextToolTip
 						text={entryPointSpanInfo.text}

frontend/src/container/MetricsApplication/constant.ts

@@ -25,6 +25,8 @@ export const OPERATION_LEGENDS = ['Operations'];
 
 export const MENU_ITEMS = [MenuItemKeys.View, MenuItemKeys.CreateAlerts];
 
+export const SERVICE_DETAIL_DRILLDOWN_ENABLED = true;
+
 export enum FORMULA {
 	ERROR_PERCENTAGE = 'A*100/B',
 	DATABASE_CALLS_AVG_DURATION = 'A/B',

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Switch, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -358,10 +359,9 @@ function Explorer(): JSX.Element {
 							title={oneChartPerQueryDisabledTooltip}
 						>
 							<Switch
-								checked={showOneChartPerQuery}
+								value={showOneChartPerQuery}
 								onChange={handleToggleShowOneChartPerQuery}
 								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
-								size="small"
 							/>
 						</Tooltip>
 					</div>

frontend/src/container/MetricsExplorer/Inspect/GraphView.tsx

@@ -2,7 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Skeleton, Switch } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import Uplot from 'components/Uplot';
@@ -206,7 +207,7 @@ function GraphView({
 				</Button.Group>
 				<div className="view-toggle-button">
 					<Switch
-						checked={viewType === 'graph'}
+						value={viewType === 'graph'}
 						onChange={(checked): void => {
 							const newViewType = checked ? 'graph' : 'table';
 							setViewType(newViewType);

frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import { Delete } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
@@ -49,10 +49,10 @@ function TimezoneAdaptation(): JSX.Element {
 			<div className="timezone-adaption__header">
 				<h2 className="timezone-adaption__title">Adapt to my timezone</h2>
 				<Switch
-					checked={isAdaptationEnabled}
+					value={isAdaptationEnabled}
 					onChange={handleSwitchChange}
 					style={getSwitchStyles()}
-					data-testid="timezone-adaptation-switch"
+					testId="timezone-adaptation-switch"
 				/>
 			</div>
 

frontend/src/container/MySettings/UserInfo/UserInfo.styles.scss

@@ -127,6 +127,12 @@
 				flex-direction: column;
 				gap: 8px;
 				padding-bottom: 16px;
+
+				.password-error-text {
+					font-size: var(--font-size-xs);
+					color: var(--bg-cherry-400);
+					margin-top: 2px;
+				}
 			}
 
 			.ant-color-picker-trigger {

frontend/src/container/MySettings/UserInfo/index.tsx

@@ -1,25 +1,27 @@
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import {
 	updateMyPassword,
 	useUpdateMyUserV2,
 } from 'api/generated/services/users';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/ui/sonner';
 import { Check, FileTerminal, Mail, User } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { ErrorV2Resp } from 'types/api';
+import { AxiosError } from 'axios';
 
 import '../MySettings.styles.scss';
 import './UserInfo.styles.scss';
 
 function UserInfo(): JSX.Element {
 	const { user, org, updateUser } = useAppContext();
-	const { t } = useTranslation(['routes', 'settings', 'common']);
 
-	const { notifications } = useNotifications();
+	const { showErrorModal } = useErrorModal();
 	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
 
 	const [currentPassword, setCurrentPassword] = useState<string>('');
@@ -47,6 +49,8 @@ function UserInfo(): JSX.Element {
 
 	const hideResetPasswordModal = (): void => {
 		setIsResetPasswordModalOpen(false);
+		setCurrentPassword('');
+		setUpdatePassword('');
 	};
 
 	const onChangePasswordClickHandler = async (): Promise<void> => {
@@ -57,33 +61,35 @@ function UserInfo(): JSX.Element {
 				newPassword: updatePassword,
 				oldPassword: currentPassword,
 			});
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+			toast.success('Password updated successfully');
 			hideResetPasswordModal();
 			setIsLoading(false);
 		} catch (error) {
 			setIsLoading(false);
-			notifications.error({
-				message: (error as APIError).error.error.code,
-				description: (error as APIError).error.error.message,
-			});
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
 		}
 	};
 
+	const passwordsMatch =
+		currentPassword.length > 0 &&
+		updatePassword.length > 0 &&
+		currentPassword === updatePassword;
+
 	const isResetPasswordDisabled =
 		isLoading ||
 		currentPassword.length === 0 ||
 		updatePassword.length === 0 ||
-		currentPassword === updatePassword;
+		passwordsMatch;
 
 	const onSaveHandler = async (): Promise<void> => {
-		logEvent('Account Settings: Name Updated', {
+		void logEvent('Account Settings: Name Updated', {
 			name: changedName,
 		});
-		logEvent(
+		void logEvent(
 			'Account Settings: Name Updated',
 			{
 				name: changedName,
@@ -94,11 +100,7 @@ function UserInfo(): JSX.Element {
 			setIsLoading(true);
 			await updateMyUser({ data: { displayName: changedName } });
 
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+			toast.success('Name updated successfully');
 			updateUser({
 				...user,
 				displayName: changedName,
@@ -106,10 +108,11 @@ function UserInfo(): JSX.Element {
 			setIsLoading(false);
 			hideUpdateNameModal();
 		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
 		}
 		setIsLoading(false);
 	};
@@ -166,7 +169,7 @@ function UserInfo(): JSX.Element {
 						type="primary"
 						icon={<Check size={16} />}
 						onClick={onSaveHandler}
-						disabled={isLoading}
+						loading={isLoading}
 						data-testid="update-name-btn"
 					>
 						Update name
@@ -178,7 +181,11 @@ function UserInfo(): JSX.Element {
 					<Input
 						placeholder="e.g. John Doe"
 						value={changedName}
+						disabled={isLoading}
 						onChange={(e): void => setChangedName(e.target.value)}
+						onPressEnter={(): void => {
+							void onSaveHandler();
+						}}
 					/>
 				</div>
 			</Modal>
@@ -188,6 +195,7 @@ function UserInfo(): JSX.Element {
 				title={<span className="title">Reset password</span>}
 				open={isResetPasswordModalOpen}
 				closable
+				destroyOnClose
 				onCancel={hideResetPasswordModal}
 				footer={[
 					<Button
@@ -197,7 +205,8 @@ function UserInfo(): JSX.Element {
 						}`}
 						icon={<Check size={16} />}
 						onClick={onChangePasswordClickHandler}
-						disabled={isLoading || isResetPasswordDisabled}
+						loading={isLoading}
+						disabled={isResetPasswordDisabled}
 						data-testid="reset-password-btn"
 					>
 						Reset password
@@ -218,6 +227,11 @@ function UserInfo(): JSX.Element {
 							type="password"
 							autoComplete="off"
 							visibilityToggle
+							onPressEnter={(): void => {
+								if (!isResetPasswordDisabled) {
+									void onChangePasswordClickHandler();
+								}
+							}}
 						/>
 					</div>
 
@@ -235,7 +249,18 @@ function UserInfo(): JSX.Element {
 							type="password"
 							autoComplete="off"
 							visibilityToggle={false}
+							status={passwordsMatch ? 'error' : ''}
+							onPressEnter={(): void => {
+								if (!isResetPasswordDisabled) {
+									void onChangePasswordClickHandler();
+								}
+							}}
 						/>
+						{passwordsMatch && (
+							<span className="password-error-text">
+								New password must be different from current password
+							</span>
+						)}
 					</div>
 				</div>
 			</Modal>

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

@@ -8,11 +8,23 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import APIError from 'types/api/error';
+import { toast } from '@signozhq/ui/sonner';
 
 const toggleThemeFunction = jest.fn();
 const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
+const updateMyPasswordFn = jest.fn();
+const showErrorModalFn = jest.fn();
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
 
 jest.mock('react-use', () => ({
 	__esModule: true,
@@ -24,12 +36,21 @@ jest.mock('react-use', () => ({
 
 jest.mock('api/generated/services/users', () => ({
 	...jest.requireActual('api/generated/services/users'),
+	updateMyPassword: (...args: unknown[]): Promise<unknown> =>
+		updateMyPasswordFn(...args),
 	useUpdateMyUserV2: jest.fn(() => ({
 		mutateAsync: (...args: unknown[]): Promise<unknown> => editUserFn(...args),
 		isLoading: false,
 	})),
 }));
 
+jest.mock('providers/ErrorModalProvider', () => ({
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal: showErrorModalFn,
+	})),
+}));
+
 jest.mock('hooks/useDarkMode', () => ({
 	__esModule: true,
 	useIsDarkMode: jest.fn(() => true),
@@ -65,12 +86,12 @@ const NEW_PASSWORD_TEST_ID = 'new-password-textbox';
 const UPDATE_NAME_BUTTON_TEST_ID = 'update-name-btn';
 const RESET_PASSWORD_BUTTON_TEST_ID = 'reset-password-btn';
 const UPDATE_NAME_BUTTON_TEXT = 'Update name';
-const PASSWORD_VALIDATION_MESSAGE_TEST_ID = 'password-validation-message';
 
 describe('MySettings Flows', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		editUserFn.mockResolvedValue({});
+		updateMyPasswordFn.mockResolvedValue({});
 		render(<MySettingsContainer />);
 	});
 
@@ -152,9 +173,7 @@ describe('MySettings Flows', () => {
 			fireEvent.click(modalUpdateNameButton);
 
 			await waitFor(() =>
-				expect(successNotification).toHaveBeenCalledWith({
-					message: 'success',
-				}),
+				expect(toast.success).toHaveBeenCalledWith('Name updated successfully'),
 			);
 		});
 	});
@@ -181,22 +200,131 @@ describe('MySettings Flows', () => {
 			expect(screen.getByTestId(NEW_PASSWORD_TEST_ID)).toBeInTheDocument();
 		});
 
-		it('Should display validation error if password is less than 8 characters', async () => {
+		it('Should show inline error when new password matches current password', async () => {
 			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
 			fireEvent.click(resetPasswordButtons[0]);
 
-			const currentPasswordTextbox = screen.getByTestId(CURRENT_PASSWORD_TEST_ID);
 			act(() => {
-				fireEvent.change(currentPasswordTextbox, { target: { value: '123' } });
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
 			});
 
+			expect(
+				screen.getByText('New password must be different from current password'),
+			).toBeInTheDocument();
+			expect(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID)).toBeDisabled();
+		});
+
+		it('Should hide inline error when passwords are changed to be different', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+			});
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'differentPassword1' },
+				});
+			});
+
+			expect(
+				screen.queryByText('New password must be different from current password'),
+			).not.toBeInTheDocument();
+		});
+
+		it('Should show error modal when password reset API returns an error', async () => {
+			updateMyPasswordFn.mockRejectedValue(
+				new Error('Current password is incorrect'),
+			);
+
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'oldPassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'newPassword1' },
+				});
+			});
+
+			fireEvent.click(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID));
+
 			await waitFor(() => {
-				// Use getByTestId for the validation message (if present in your modal/component)
-				if (screen.queryByTestId(PASSWORD_VALIDATION_MESSAGE_TEST_ID)) {
-					expect(
-						screen.getByTestId(PASSWORD_VALIDATION_MESSAGE_TEST_ID),
-					).toBeInTheDocument();
-				}
+				expect(showErrorModalFn).toHaveBeenCalledWith(expect.any(APIError));
+			});
+		});
+
+		it('Should show success toast and close modal on successful password reset', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'oldPassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'newPassword1' },
+				});
+			});
+
+			fireEvent.click(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID));
+
+			await waitFor(() => {
+				expect(toast.success).toHaveBeenCalledWith('Password updated successfully');
+				expect(
+					screen.queryByTestId(CURRENT_PASSWORD_TEST_ID),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('Should clear password fields when modal is cancelled', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'somePassword' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'otherPassword' },
+				});
+			});
+
+			expect(screen.getByTestId(CURRENT_PASSWORD_TEST_ID)).toHaveValue(
+				'somePassword',
+			);
+
+			// Close the modal
+			const closeButton = document.querySelector(
+				'.reset-password-modal .ant-modal-close',
+			) as HTMLElement;
+			fireEvent.click(closeButton);
+
+			// Reopen the modal
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId(CURRENT_PASSWORD_TEST_ID),
+				).not.toBeInTheDocument();
+			});
+
+			fireEvent.click(screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT)[0]);
+
+			await waitFor(() => {
+				expect(screen.getByTestId(CURRENT_PASSWORD_TEST_ID)).toHaveValue('');
+				expect(screen.getByTestId(NEW_PASSWORD_TEST_ID)).toHaveValue('');
 			});
 		});
 

frontend/src/container/MySettings/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Radio, RadioChangeEvent, Switch, Tag } from 'antd';
+import { Radio, RadioChangeEvent, Tag } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -218,10 +219,10 @@ function MySettings(): JSX.Element {
 						<div className="user-preference-section-content-item-title-action">
 							Keep the primary sidebar always open{' '}
 							<Switch
-								checked={sideNavPinned}
+								value={sideNavPinned}
 								onChange={handleSideNavPinnedChange}
-								loading={isUpdatingUserPreference}
-								data-testid="side-nav-pinned-switch"
+								disabled={isUpdatingUserPreference}
+								testId="side-nav-pinned-switch"
 							/>
 						</div>
 

frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	FillMode,
@@ -73,7 +73,7 @@ export default function ChartAppearanceSection({
 							Display individual data points on the chart
 						</Typography.Text>
 					</div>
-					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
+					<Switch value={showPoints} onChange={setShowPoints} />
 				</section>
 			)}
 			{allowSpanGaps && (

frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Switch } from 'antd';
+import { InputNumber } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
@@ -61,8 +62,7 @@ export default function HistogramBucketsSection({
 						</span>
 					</Typography.Text>
 					<Switch
-						checked={combineHistogram}
-						size="small"
+						value={combineHistogram}
 						onChange={(checked): void => setCombineHistogram(checked)}
 					/>
 				</section>

frontend/src/container/NewWidget/RightContainer/SettingSections/VisualizationSettingsSection/VisualizationSettingsSection.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Select, Switch } from 'antd';
+import { Select } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -104,8 +105,7 @@ export default function VisualizationSettingsSection({
 				<section className="stack-chart control-container">
 					<Typography.Text className="section-heading">Stack series</Typography.Text>
 					<Switch
-						checked={stackedBarChart}
-						size="small"
+						value={stackedBarChart}
 						onChange={(checked): void => setStackedBarChart(checked)}
 					/>
 				</section>
@@ -120,8 +120,7 @@ export default function VisualizationSettingsSection({
 						</Typography.Text>
 					</div>
 					<Switch
-						checked={isFillSpans}
-						size="small"
+						value={isFillSpans}
 						onChange={(checked): void => setIsFillSpans(checked)}
 					/>
 				</section>

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -341,10 +341,10 @@ describe('Stacking bar in new panel', () => {
 		const section = container.querySelector('.stack-chart');
 		expect(section).toBeInTheDocument();
 
-		// Verify switch is present and enabled (ant-switch-checked)
-		const switchBtn = section?.querySelector('.ant-switch');
+		// Verify switch is present and enabled
+		const switchBtn = section?.querySelector('[role="switch"]');
 		expect(switchBtn).toBeInTheDocument();
-		expect(switchBtn).toHaveClass('ant-switch-checked');
+		expect(switchBtn).toHaveAttribute('data-state', 'checked');
 
 		// Check that stack series is present and checked
 		checkStackSeriesState(container, true);

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -209,7 +209,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	useEffect(() => {
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.STARTED}`,
 			{},
 		);
@@ -253,7 +253,7 @@ function OnboardingAddDataSource(): JSX.Element {
 		setSelectedFramework(null);
 		setSelectedEnvironment(null);
 
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_SELECTED}`,
 			{
 				dataSource: dataSource.label,
@@ -276,7 +276,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleSelectFramework = (option: any): void => {
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.FRAMEWORK_SELECTED}`,
 			{
 				dataSource: selectedDataSource?.label,
@@ -309,7 +309,7 @@ function OnboardingAddDataSource(): JSX.Element {
 		selectedEnvironment: any,
 		baseURL?: string,
 	): void => {
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.ENVIRONMENT_SELECTED}`,
 			{
 				dataSource: selectedDataSource?.label,
@@ -351,7 +351,7 @@ function OnboardingAddDataSource(): JSX.Element {
 			groupDataSourcesByTags(filteredDataSources as Entity[]),
 		);
 
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_SEARCHED}`,
 			{
 				searchedDataSource: query,
@@ -485,7 +485,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleShowInviteTeamMembersModal = (): void => {
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_BUTTON_CLICKED}`,
 			{
 				dataSource: selectedDataSource?.label,
@@ -498,7 +498,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleSubmitDataSourceRequest = (): void => {
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_REQUESTED}`,
 			{
 				requestedDataSource: dataSourceRequest,
@@ -513,7 +513,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	};
 
 	const handleRaiseRequest = (): void => {
-		logEvent(
+		void logEvent(
 			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_REQUESTED}`,
 			{
 				requestedDataSource: searchQuery,
@@ -635,7 +635,7 @@ function OnboardingAddDataSource(): JSX.Element {
 								size={14}
 								className="onboarding-header-container-close-icon"
 								onClick={(e): void => {
-									logEvent(
+									void logEvent(
 										`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
 										{
 											currentPage: setupStepItems[currentStep]?.title || '',
@@ -970,7 +970,7 @@ function OnboardingAddDataSource(): JSX.Element {
 													disabled={!selectedDataSource}
 													shape="round"
 													onClick={(e): void => {
-														logEvent(
+														void logEvent(
 															`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
 															{
 																dataSource: selectedDataSource?.label,
@@ -1038,7 +1038,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										type="default"
 										shape="round"
 										onClick={(): void => {
-											logEvent(
+											void logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BACK_BUTTON_CLICKED}`,
 												{
 													dataSource: selectedDataSource?.label,
@@ -1057,7 +1057,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										type="primary"
 										shape="round"
 										onClick={(e): void => {
-											logEvent(
+											void logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
 												{
 													dataSource: selectedDataSource?.label,

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -4,12 +4,15 @@ import amazonMskUrl from '@/assets/Logos/amazon-msk.svg';
 import androidJavaMonitoringUrl from '@/assets/Logos/android-java-monitoring.svg';
 import androidKotlinMonitoringUrl from '@/assets/Logos/android-kotlin-monitoring.svg';
 import anthropicApiMonitoringUrl from '@/assets/Logos/anthropic-api-monitoring.svg';
+import apacheDruidUrl from '@/assets/Logos/apache-druid.svg';
 import apiGatewayUrl from '@/assets/Logos/api-gateway.svg';
 import argocdUrl from '@/assets/Logos/argocd.svg';
+import aspnetUrl from '@/assets/Logos/aspnet.svg';
 import autogenUrl from '@/assets/Logos/autogen.svg';
 import awsAlbUrl from '@/assets/Logos/aws-alb.svg';
 import azureAppServiceUrl from '@/assets/Logos/azure-app-service.svg';
 import azureBlobStorageUrl from '@/assets/Logos/azure-blob-storage.svg';
+import azureCdnFrontdoorUrl from '@/assets/Logos/azure-cdn-frontdoor.svg';
 import azureContainerAppsUrl from '@/assets/Logos/azure-container-apps.svg';
 import azureFunctionsUrl from '@/assets/Logos/azure-functions.svg';
 import azureMysqlUrl from '@/assets/Logos/azure-mysql.svg';
@@ -18,6 +21,7 @@ import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metric
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
+import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
 import clickhouseUrl from '@/assets/Logos/clickhouse.svg';
 import cloudflareUrl from '@/assets/Logos/cloudflare.svg';
@@ -64,6 +68,7 @@ import goUrl from '@/assets/Logos/go.svg';
 import googleAdkUrl from '@/assets/Logos/google-adk.svg';
 import googleGeminiUrl from '@/assets/Logos/google-gemini.svg';
 import grafanaUrl from '@/assets/Logos/grafana.svg';
+import graphqlUrl from '@/assets/Logos/graphql.svg';
 import grokUrl from '@/assets/Logos/grok.svg';
 import groqUrl from '@/assets/Logos/groq.svg';
 import hasuraUrl from '@/assets/Logos/hasura.svg';
@@ -75,6 +80,7 @@ import httpUrl from '@/assets/Logos/http.svg';
 import httpMonitoringUrl from '@/assets/Logos/http-monitoring.svg';
 import huggingfaceUrl from '@/assets/Logos/huggingface.svg';
 import inkeepUrl from '@/assets/Logos/inkeep.svg';
+import istioUrl from '@/assets/Logos/istio.svg';
 import javaUrl from '@/assets/Logos/java.svg';
 import javaOthersUrl from '@/assets/Logos/java-others.svg';
 import javascriptUrl from '@/assets/Logos/javascript.svg';
@@ -121,6 +127,7 @@ import pythonUrl from '@/assets/Logos/python.svg';
 import quarkusUrl from '@/assets/Logos/quarkus.svg';
 import quickstartUrl from '@/assets/Logos/quickstart.svg';
 import qwenUrl from '@/assets/Logos/qwen.svg';
+import railwayUrl from '@/assets/Logos/railway.svg';
 import rdsUrl from '@/assets/Logos/rds.svg';
 import reactjsUrl from '@/assets/Logos/reactjs.svg';
 import redisUrl from '@/assets/Logos/redis.svg';
@@ -128,7 +135,9 @@ import renderUrl from '@/assets/Logos/render.svg';
 import rubyOnRailsUrl from '@/assets/Logos/ruby-on-rails.svg';
 import rustUrl from '@/assets/Logos/rust.svg';
 import s3Url from '@/assets/Logos/s3.svg';
+import scalaUrl from '@/assets/Logos/scala.svg';
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+import slogUrl from '@/assets/Logos/slog.svg';
 import slurmUrl from '@/assets/Logos/slurm.svg';
 import snowflakeUrl from '@/assets/Logos/snowflake.svg';
 import snsUrl from '@/assets/Logos/sns.svg';
@@ -3002,9 +3011,18 @@ const onboardingConfigWithLinks = [
 			'tracing',
 		],
 		question: {
-			desc: 'What telemetry data do you want to visualise ?',
+			desc: 'How would you like to set up Azure Blob Storage monitoring?',
 			type: 'select',
+			helpText:
+				'One Click uses Azure integration for automated setup. Manual setup uses OpenTelemetry for more control.',
 			options: [
+				{
+					key: 'azure-blob-storage-one-click',
+					label: 'One Click Azure',
+					imgUrl: azureBlobStorageUrl,
+					link: '/integrations/azure?service=storageaccountsblob',
+					internalRedirect: true,
+				},
 				{
 					key: 'logging',
 					label: 'Logs',
@@ -3020,6 +3038,32 @@ const onboardingConfigWithLinks = [
 			],
 		},
 	},
+	{
+		dataSource: 'azure-cdn-frontdoor',
+		label: 'Azure CDN / Front Door',
+		imgUrl: azureCdnFrontdoorUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cdn',
+			'azure cdn frontdoor',
+			'azure cdn metrics',
+			'azure cdn monitoring',
+			'azure front door',
+			'azure frontdoor',
+			'cdn',
+			'cdn monitoring',
+			'cdn observability',
+			'content delivery network',
+			'front door',
+			'frontdoor',
+			'one click',
+		],
+		id: 'azure-cdn-frontdoor',
+		link: '/integrations/azure?service=cdnprofile',
+		internalRedirect: true,
+	},
 	{
 		dataSource: 'azure-mysql-flexible-server',
 		label: 'Azure MySQL Flexible Server',
@@ -5614,17 +5658,22 @@ const onboardingConfigWithLinks = [
 		dataSource: 'fly-io',
 		label: 'Fly.io',
 		imgUrl: flyIoUrl,
-		tags: ['infrastructure monitoring', 'metrics'],
+		tags: ['infrastructure monitoring', 'metrics', 'logs'],
 		module: 'metrics',
 		relatedSearchKeywords: [
-			'fly.io',
-			'fly',
-			'metrics',
-			'infrastructure',
 			'cloud',
+			'fly',
+			'fly.io',
+			'fly.io logs',
+			'fly.io metrics',
+			'fly.io monitoring',
+			'fly.io observability',
+			'infrastructure',
+			'logs',
+			'metrics',
 			'monitoring',
 		],
-		link: '/docs/metrics-management/fly-metrics/',
+		link: '/docs/integrations/flyio/',
 	},
 	{
 		dataSource: 'envoy',
@@ -6246,5 +6295,194 @@ const onboardingConfigWithLinks = [
 		id: 'render-metrics',
 		link: '/docs/metrics-management/render-metrics/',
 	},
+	{
+		dataSource: 'cert-manager',
+		label: 'Cert Manager',
+		imgUrl: certManagerUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cert manager',
+			'cert-manager',
+			'certificate',
+			'certificate management',
+			'certificate monitoring',
+			'infrastructure',
+			'kubernetes',
+			'kubernetes certificates',
+			'metrics',
+			'monitoring',
+			'observability',
+			'ssl',
+			'tls',
+		],
+		id: 'cert-manager',
+		link: '/docs/infrastructure-monitoring/cert-manager/',
+	},
+	{
+		dataSource: 'graphql',
+		label: 'GraphQL',
+		imgUrl: graphqlUrl,
+		tags: ['apm/traces'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'api',
+			'graphql',
+			'graphql instrumentation',
+			'graphql monitoring',
+			'graphql observability',
+			'graphql tracing',
+			'javascript',
+			'monitoring',
+			'nodejs',
+			'observability',
+			'opentelemetry graphql',
+			'traces',
+			'tracing',
+		],
+		id: 'graphql',
+		link: '/docs/instrumentation/javascript/opentelemetry-graphql/',
+	},
+	{
+		dataSource: 'railway',
+		label: 'Railway',
+		imgUrl: railwayUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'cloud',
+			'log forwarding',
+			'logging',
+			'logs',
+			'monitoring',
+			'observability',
+			'paas',
+			'railway',
+			'railway logs',
+			'railway monitoring',
+			'railway observability',
+		],
+		id: 'railway',
+		link: '/docs/integrations/outposts/railway/',
+	},
+	{
+		dataSource: 'aspnet-core-metrics',
+		label: 'ASP.NET Core Metrics',
+		imgUrl: aspnetUrl,
+		tags: ['metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'.net metrics',
+			'asp.net',
+			'asp.net core',
+			'asp.net core metrics',
+			'asp.net metrics',
+			'asp.net monitoring',
+			'asp.net observability',
+			'aspnet',
+			'aspnet core',
+			'dotnet metrics',
+			'metrics',
+			'monitoring',
+			'observability',
+			'opentelemetry aspnet',
+		],
+		id: 'aspnet-core-metrics',
+		link:
+			'/docs/metrics-management/send-metrics/applications/opentelemetry-aspnetcore/',
+	},
+	{
+		dataSource: 'istio-metrics',
+		label: 'Istio',
+		imgUrl: istioUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'infrastructure',
+			'istio',
+			'istio metrics',
+			'istio monitoring',
+			'istio observability',
+			'kubernetes',
+			'mesh',
+			'metrics',
+			'monitoring',
+			'observability',
+			'service mesh',
+		],
+		id: 'istio-metrics',
+		link: '/docs/metrics-management/istio-metrics/',
+	},
+	{
+		dataSource: 'slog',
+		label: 'log/slog',
+		imgUrl: slogUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'go',
+			'go logging',
+			'go logs',
+			'golang',
+			'golang logging',
+			'log/slog',
+			'logging',
+			'logs',
+			'monitoring',
+			'observability',
+			'slog',
+			'slog instrumentation',
+			'slog logging',
+			'structured logging',
+		],
+		id: 'slog',
+		link: '/docs/logs-management/send-logs/slog-to-signoz/',
+	},
+	{
+		dataSource: 'scala',
+		label: 'Scala',
+		imgUrl: scalaUrl,
+		tags: ['apm/traces'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'apm',
+			'instrumentation',
+			'jvm',
+			'monitoring',
+			'observability',
+			'opentelemetry scala',
+			'scala',
+			'scala instrumentation',
+			'scala monitoring',
+			'scala observability',
+			'scala tracing',
+			'traces',
+			'tracing',
+		],
+		id: 'scala',
+		link: '/docs/instrumentation/java/opentelemetry-scala/',
+	},
+	{
+		dataSource: 'apache-druid',
+		label: 'Apache Druid',
+		imgUrl: apacheDruidUrl,
+		tags: ['database'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'analytics',
+			'apache druid',
+			'database',
+			'druid',
+			'druid instrumentation',
+			'druid monitoring',
+			'druid observability',
+			'monitoring',
+			'observability',
+			'olap',
+			'opentelemetry druid',
+		],
+		id: 'apache-druid',
+		link: '/docs/integrations/opentelemetry-apache-druid/',
+	},
 ];
 export default onboardingConfigWithLinks;

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/AuthDomain.test.tsx

@@ -58,6 +58,26 @@ describe('AuthDomain', () => {
 			});
 		});
 
+		it('reflects ssoEnabled state from nested config in each row toggle', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockDomainsListResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			// mockDomainsListResponse rows:
+			//   [0] signoz.io   → config.ssoEnabled: true
+			//   [1] example.com → config.ssoEnabled: false
+			//   [2] corp.io     → config.ssoEnabled: true
+			const switches = await screen.findAllByRole('switch');
+			expect(switches).toHaveLength(3);
+			expect(switches[0]).toBeChecked();
+			expect(switches[1]).not.toBeChecked();
+			expect(switches[2]).toBeChecked();
+		});
+
 		it('renders empty state when no domains exist', async () => {
 			server.use(
 				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>

frontend/src/container/OrganizationSettings/AuthDomain/index.tsx

@@ -75,7 +75,7 @@ function AuthDomain(): JSX.Element {
 			{
 				onSuccess: () => {
 					toast.success('Domain deleted successfully');
-					refetchAuthDomainListResponse();
+					void refetchAuthDomainListResponse();
 					hideDeleteModal();
 				},
 				onError: (error) => {
@@ -121,14 +121,14 @@ function AuthDomain(): JSX.Element {
 			},
 			{
 				title: 'Enforce SSO',
-				dataIndex: 'ssoEnabled',
+				dataIndex: ['config', 'ssoEnabled'],
 				key: 'ssoEnabled',
 				width: 80,
 				render: (
 					value: boolean,
 					record: AuthtypesGettableAuthDomainDTO,
 				): JSX.Element => (
-					<SSOEnforcementToggle isDefaultChecked={value} record={record} />
+					<SSOEnforcementToggle isDefaultChecked={!!value} record={record} />
 				),
 			},
 			{

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
-import { Flex, Form, Input, Space, Switch, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Flex, Form, Input, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';
@@ -58,11 +59,7 @@ function JsonFlattening({
 				initialValue={isAdd ? true : selectedProcessorData?.enable_paths}
 			>
 				<Space>
-					<Switch
-						size="small"
-						checked={enablePaths}
-						onChange={handleEnablePathsChange}
-					/>
+					<Switch value={enablePaths} onChange={handleEnablePathsChange} />
 					Enable Paths
 				</Space>
 			</Form.Item>
@@ -79,11 +76,7 @@ function JsonFlattening({
 
 			<Form.Item className="json-flattening-form__item">
 				<Space>
-					<Switch
-						size="small"
-						checked={enableMapping}
-						onChange={handleEnableMappingChange}
-					/>
+					<Switch value={enableMapping} onChange={handleEnableMappingChange} />
 					<Flex gap="8px" align="center">
 						Enable Mapping
 						<Tooltip title="The order of filled keys will determine the priority of keys i.e. earlier keys have higher precedence">

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space, Switch } from 'antd';
+import { Form, Input, Select, Space } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 
@@ -92,8 +93,7 @@ function ProcessorFieldInput({
 					>
 						<Space>
 							<Switch
-								size="small"
-								checked={form.getFieldValue('enable_flattening')}
+								value={form.getFieldValue('enable_flattening')}
 								onChange={(checked: boolean): void => {
 									form.setFieldValue('enable_flattening', checked);
 								}}

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/DragAction.tsx

@@ -1,5 +1,5 @@
 import { GripVertical } from '@signozhq/icons';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
 
 import { holdIconStyle } from '../config';
 import { LastActionColumn } from '../styles';
@@ -7,7 +7,7 @@ import { LastActionColumn } from '../styles';
 function DragAction({ isEnabled, onChange }: DragActionProps): JSX.Element {
 	return (
 		<LastActionColumn>
-			<Switch defaultChecked={isEnabled} onChange={onChange} />
+			<Switch defaultValue={isEnabled} onChange={onChange} />
 			<GripVertical size="lg" style={holdIconStyle} />
 		</LastActionColumn>
 	);

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -191,7 +191,7 @@ describe('PipelinePage container test', () => {
 		await fireEvent.click(expandIcon[0]);
 
 		const switchToggle = document.querySelector(
-			'.ant-table-expanded-row .ant-switch',
+			'.ant-table-expanded-row [role="switch"]',
 		);
 
 		expect(switchToggle).toBeChecked();
@@ -244,7 +244,7 @@ describe('PipelinePage container test', () => {
 		const addNewPipelineBtn = getByText('add_new_pipeline');
 		expect(addNewPipelineBtn).toBeInTheDocument();
 
-		const switchToggle = document.querySelectorAll('.ant-switch');
+		const switchToggle = document.querySelectorAll('[role="switch"]');
 
 		expect(switchToggle[0]).not.toBeChecked();
 		await fireEvent.click(switchToggle[0] as HTMLElement);

frontend/src/container/PipelinePage/tests/__snapshots__/DragAction.test.tsx.snap

@@ -21,26 +21,25 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
 <div
     class="c0"
   >
-    <button
-      aria-checked="true"
-      class="ant-switch css-dev-only-do-not-override-2i2tap ant-switch-checked"
-      role="switch"
-      type="button"
+    <div
+      class="_switch-wrapper_jbsv7_1"
     >
-      <div
-        class="ant-switch-handle"
-      />
-      <span
-        class="ant-switch-inner"
+      <button
+        aria-checked="true"
+        class="_switch_jbsv7_1"
+        data-color="robin"
+        data-state="checked"
+        id=":r0:"
+        role="switch"
+        type="button"
+        value="on"
       >
         <span
-          class="ant-switch-inner-checked"
+          class="_switch__thumb_jbsv7_59"
+          data-state="checked"
         />
-        <span
-          class="ant-switch-inner-unchecked"
-        />
-      </span>
-    </button>
+      </button>
+    </div>
     <svg
       style="font-size: 1rem; cursor: move;"
     />

frontend/src/container/QueryTable/Drilldown/__tests__/drilldownUtils.test.tsx

@@ -169,9 +169,10 @@ describe('drilldownUtils', () => {
 
 			// Verify transformations were applied
 			if (filterExpression) {
-				// Rule 2: operation → name
-				expect(filterExpression).toContain(`name = 'GET'`);
+				// `operation` rewrites to `name` via source-side pass, then `name`
+				// is dropped by the logs target-side pass (logs has no span-name).
 				expect(filterExpression).not.toContain(`operation = 'GET'`);
+				expect(filterExpression).not.toContain(`name = 'GET'`);
 
 				// Rule 3: span.kind → kind
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindServer}'`);
@@ -262,8 +263,9 @@ describe('drilldownUtils', () => {
 			const filterExpression = result?.builder.queryData[0]?.filter?.expression;
 
 			if (filterExpression) {
-				// All transformations should be applied
-				expect(filterExpression).toContain(`name = 'POST'`);
+				// `operation` rewrites to `name` then drops for logs target.
+				expect(filterExpression).not.toContain(`operation = 'POST'`);
+				expect(filterExpression).not.toContain(`name = 'POST'`);
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindClient}'`);
 				expect(filterExpression).toContain(`status_code_string = 'Error'`);
 				expect(filterExpression).toContain(`http.status_code = 500`);
@@ -410,8 +412,9 @@ describe('drilldownUtils', () => {
 			const filterExpression = result?.builder.queryData[0]?.filter?.expression;
 
 			if (filterExpression) {
-				// Transformed attributes
-				expect(filterExpression).toContain(`name = 'GET'`);
+				// `operation` rewrites to `name` then drops for logs target.
+				expect(filterExpression).not.toContain(`operation = 'GET'`);
+				expect(filterExpression).not.toContain(`name = 'GET'`);
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindServer}'`);
 
 				// Preserved non-metric attributes
@@ -499,4 +502,189 @@ describe('drilldownUtils', () => {
 			});
 		});
 	});
+
+	describe('getViewQuery target-aware sanitisation (serviceName / name)', () => {
+		const makeQuery = (
+			expression: string,
+			dataSource: 'traces' | 'logs' | 'metrics' = 'traces',
+		): Query => ({
+			id: 'src-query',
+			queryType: 'builder' as any,
+			builder: {
+				queryData: [
+					{
+						queryName: 'src',
+						dataSource: dataSource as any,
+						aggregations: [{ metricName: 'non_apm_metric' }] as any,
+						groupBy: [],
+						expression: '',
+						disabled: false,
+						functions: [],
+						legend: '',
+						having: [],
+						limit: null,
+						stepInterval: undefined,
+						orderBy: [],
+						filter: { expression },
+					},
+				],
+				queryFormulas: [],
+				queryTraceOperator: [],
+			},
+			promql: [],
+			clickhouse_sql: [],
+		});
+
+		it('rewrites serviceName -> service.name when drilling to logs', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc'`),
+				[],
+				'view_logs',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).not.toContain('serviceName');
+		});
+
+		it('rewrites serviceName -> service.name when drilling to traces', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc'`),
+				[],
+				'view_traces',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).not.toContain('serviceName');
+		});
+
+		it('drops `name` clause when drilling to logs', () => {
+			const result = getViewQuery(
+				makeQuery(`name = 'GET /api'`),
+				[],
+				'view_logs',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).not.toContain(`name = 'GET /api'`);
+		});
+
+		it('keeps `name` clause when drilling to traces', () => {
+			const result = getViewQuery(
+				makeQuery(`name = 'GET /api'`),
+				[],
+				'view_traces',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`name = 'GET /api'`);
+		});
+
+		it('combined: drilling to logs rewrites serviceName and drops name', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc' AND name = 'GET /api'`),
+				[],
+				'view_logs',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).not.toContain('serviceName');
+			expect(expr).not.toContain(`name = 'GET /api'`);
+		});
+
+		it('combined: drilling to traces rewrites serviceName and keeps name', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc' AND name = 'GET /api'`),
+				[],
+				'view_traces',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).toContain(`name = 'GET /api'`);
+			expect(expr).not.toContain('serviceName');
+		});
+
+		it('metric-APM source -> traces target preserves existing operation -> name rewrite', () => {
+			const metricsQuery: Query = {
+				id: 'apm-metrics',
+				queryType: 'builder' as any,
+				builder: {
+					queryData: [
+						{
+							queryName: 'm',
+							dataSource: 'metrics' as any,
+							aggregations: [{ metricName: 'signoz_calls_total' }] as any,
+							groupBy: [],
+							expression: '',
+							disabled: false,
+							functions: [],
+							legend: '',
+							having: [],
+							limit: null,
+							stepInterval: undefined,
+							orderBy: [],
+							filter: { expression: `operation = 'GET'` },
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				promql: [],
+				clickhouse_sql: [],
+			};
+			const result = getViewQuery(metricsQuery, [], 'view_traces', 'm');
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`name = 'GET'`);
+			expect(expr).not.toContain(`operation = 'GET'`);
+		});
+
+		it('metric-APM source -> logs target: operation rewrites to name, then dropped', () => {
+			const metricsQuery: Query = {
+				id: 'apm-metrics',
+				queryType: 'builder' as any,
+				builder: {
+					queryData: [
+						{
+							queryName: 'm',
+							dataSource: 'metrics' as any,
+							aggregations: [{ metricName: 'signoz_calls_total' }] as any,
+							groupBy: [],
+							expression: '',
+							disabled: false,
+							functions: [],
+							legend: '',
+							having: [],
+							limit: null,
+							stepInterval: undefined,
+							orderBy: [],
+							filter: { expression: `operation = 'GET'` },
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				promql: [],
+				clickhouse_sql: [],
+			};
+			const result = getViewQuery(metricsQuery, [], 'view_logs', 'm');
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).not.toContain(`operation = 'GET'`);
+			expect(expr).not.toContain(`name = 'GET'`);
+		});
+
+		it('drilling to metrics does not apply target-side sanitisation', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc' AND name = 'GET /api'`),
+				[],
+				'view_metrics',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain('serviceName');
+			expect(expr).toContain(`name = 'GET /api'`);
+		});
+	});
 });

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -7,8 +7,10 @@ import {
 import ROUTES from 'constants/routes';
 import { isApmMetric } from 'container/PanelWrapper/utils';
 import {
+	applyMappingsToExpression,
+	DRILLDOWN_TO_LOGS_MAPPINGS,
+	DRILLDOWN_TO_TRACES_MAPPINGS,
 	METRIC_TO_LOGS_TRACES_MAPPINGS,
-	replaceKeysAndValuesInExpression,
 } from 'container/QueryTable/Drilldown/metricsCorrelationUtils';
 import cloneDeep from 'lodash-es/cloneDeep';
 import {
@@ -347,27 +349,41 @@ export const getViewQuery = (
 	newQuery.builder.queryData[0].filter = newFilterExpression;
 
 	try {
-		// ===========================================
-		// TEMP LOGIC - TO BE REMOVED LATER
-		// ===========================================
-		// Apply metric-to-logs/traces transformations
+		// Drill-down filter sanitisation. Two stages:
+		//   1. Source-side: rewrite metric-APM-specific keys (operation, span.kind,
+		//      status.code) so they map onto trace/log columns.
+		//   2. Target-side: normalise legacy keys to OTel-canonical (`serviceName`
+		//      -> `service.name`) and drop keys with no equivalent in the target
+		//      datasource (e.g. `name` for logs).
+		let expression = newFilterExpression?.expression || '';
+
 		const specificQuery = getQueryData(query, queryName);
 		const isMetricQuery = specificQuery?.dataSource === 'metrics';
 		const metricName = (specificQuery?.aggregations?.[0] as MetricAggregation)
 			?.metricName;
 
 		if (isMetricQuery && isApmMetric(metricName || '')) {
-			const transformedExpression = replaceKeysAndValuesInExpression(
-				newFilterExpression?.expression || '',
+			expression = applyMappingsToExpression(
+				expression,
 				METRIC_TO_LOGS_TRACES_MAPPINGS,
 			);
-			newQuery.builder.queryData[0].filter = {
-				expression: transformedExpression || '',
-			};
 		}
-		// ===========================================
+
+		if (key === 'view_logs') {
+			expression = applyMappingsToExpression(
+				expression,
+				DRILLDOWN_TO_LOGS_MAPPINGS,
+			);
+		} else if (key === 'view_traces') {
+			expression = applyMappingsToExpression(
+				expression,
+				DRILLDOWN_TO_TRACES_MAPPINGS,
+			);
+		}
+
+		newQuery.builder.queryData[0].filter = { expression };
 	} catch (error) {
-		console.error('Error transforming metrics to logs/traces:', error);
+		console.error('Error sanitising drilldown filter expression:', error);
 	}
 
 	return newQuery;

frontend/src/container/QueryTable/Drilldown/metricsCorrelationUtils.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import {
+	formatValueForExpression,
+	removeKeysFromExpression,
+} from 'components/QueryBuilderV2/utils';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { extractQueryPairs } from 'utils/queryContextUtils';
@@ -8,7 +11,7 @@ import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 
 type KeyValueMapping = {
 	attribute: string;
-	newAttribute: string;
+	newAttribute: string | null;
 	valueMappings: Record<string, string>;
 };
 
@@ -40,8 +43,33 @@ export const METRIC_TO_LOGS_TRACES_MAPPINGS: KeyValueMapping[] = [
 	},
 ];
 
+export const DRILLDOWN_TO_LOGS_MAPPINGS: KeyValueMapping[] = [
+	{
+		attribute: 'serviceName',
+		newAttribute: 'service.name',
+		valueMappings: {},
+	},
+	{
+		attribute: 'name',
+		newAttribute: null,
+		valueMappings: {},
+	},
+];
+
+export const DRILLDOWN_TO_TRACES_MAPPINGS: KeyValueMapping[] = [
+	{
+		attribute: 'serviceName',
+		newAttribute: 'service.name',
+		valueMappings: {},
+	},
+];
+
 // Logic for rewriting key/values in an expression using provided mappings.
-function modifyKeyVal(pair: IQueryPair, mapping: KeyValueMapping): string {
+// Callers must pre-filter mappings to ensure newAttribute is non-null.
+function modifyKeyVal(
+	pair: IQueryPair,
+	mapping: KeyValueMapping & { newAttribute: string },
+): string {
 	const newKey = mapping.newAttribute;
 	const op = pair.operator;
 
@@ -107,8 +135,18 @@ export function replaceKeysAndValuesInExpression(
 		return expression;
 	}
 
-	const attributeToMapping = new Map<string, KeyValueMapping>(
-		mappingList.map((m) => [m.attribute.trim().toLowerCase(), m]),
+	// Only rewrite mappings (newAttribute non-null) are processed here.
+	// Drops are handled separately by applyMappingsToExpression via removeKeysFromExpression.
+	const attributeToMapping = new Map<
+		string,
+		KeyValueMapping & { newAttribute: string }
+	>(
+		mappingList
+			.filter(
+				(m): m is KeyValueMapping & { newAttribute: string } =>
+					m.newAttribute !== null,
+			)
+			.map((m) => [m.attribute.trim().toLowerCase(), m]),
 	);
 
 	const pairs: IQueryPair[] = extractQueryPairs(expression);
@@ -179,3 +217,26 @@ export function replaceKeysAndValuesInExpression(
 
 	return resultParts.join('');
 }
+
+// Apply a list of mappings to a filter expression. Rewrites are applied first
+// (newAttribute is a string), then drops (newAttribute is null) via the
+// ANTLR-parser-based removeKeysFromExpression which handles AND/OR/NOT/paren
+// elision correctly.
+export function applyMappingsToExpression(
+	expression: string,
+	mappings: KeyValueMapping[],
+): string {
+	if (!expression || !mappings || mappings.length === 0) {
+		return expression;
+	}
+
+	const dropKeys = mappings
+		.filter((m) => m.newAttribute === null)
+		.map((m) => m.attribute);
+
+	let result = replaceKeysAndValuesInExpression(expression, mappings);
+	if (dropKeys.length > 0) {
+		result = removeKeysFromExpression(result, dropKeys);
+	}
+	return result;
+}

frontend/src/container/RoutingPolicies/__tests__/testUtils.ts

@@ -101,6 +101,7 @@ export function getAppContextMockState(
 		userPreferences: null,
 		hostsData: null,
 		isLoggedIn: false,
+		isPreflightLoading: false,
 		org: null,
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,

frontend/src/container/SideNav/SideNav.styles.scss

@@ -1120,6 +1120,7 @@
 
 		.user-settings-dropdown-logout-section {
 			color: var(--danger-background);
+			pointer-events: auto;
 		}
 	}
 }

frontend/src/container/SideNav/SideNav.tsx

@@ -408,7 +408,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	);
 
 	const handleReorderShortcutNavItems = (): void => {
-		logEvent('Sidebar V2: Save shortcuts clicked', {
+		void logEvent('Sidebar V2: Save shortcuts clicked', {
 			shortcuts: tempPinnedMenuItems.map((item) => item.key),
 		});
 		setPinnedMenuItems(tempPinnedMenuItems);
@@ -436,7 +436,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
 	const onClickGetStarted = (event: MouseEvent): void => {
-		logEvent('Sidebar: Menu clicked', {
+		void logEvent('Sidebar: Menu clicked', {
 			menuRoute: '/get-started',
 			menuLabel: 'Get Started',
 		});
@@ -651,7 +651,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		} else if (item) {
 			onClickHandler(item?.key as string, event);
 		}
-		logEvent('Sidebar V2: Menu clicked', {
+		void logEvent('Sidebar V2: Menu clicked', {
 			menuRoute: item?.key,
 			menuLabel: item?.label,
 		});
@@ -794,7 +794,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					onTogglePin={
 						allowPin
 							? (item): void => {
-									logEvent(
+									void logEvent(
 										`Sidebar V2: Menu item ${item.isPinned ? 'unpinned' : 'pinned'}`,
 										{
 											menuRoute: item.key,
@@ -841,7 +841,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
 
 		if (item && !('type' in item)) {
-			logEvent('Help Popover: Item clicked', {
+			void logEvent('Help Popover: Item clicked', {
 				menuRoute: item.key,
 				menuLabel: String(item.label),
 			});
@@ -890,7 +890,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			menuLabel = item.label;
 		}
 
-		logEvent('Settings Popover: Item clicked', {
+		void logEvent('Settings Popover: Item clicked', {
 			menuRoute: item?.key,
 			menuLabel,
 		});
@@ -927,7 +927,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				}
 				break;
 			case 'logout':
-				Logout();
+				void Logout();
 				break;
 			default:
 		}
@@ -1081,7 +1081,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 													<div
 														className="nav-section-title-icon reorder"
 														onClick={(): void => {
-															logEvent('Sidebar V2: Manage shortcuts clicked', {});
+															void logEvent('Sidebar V2: Manage shortcuts clicked', {});
 															setIsReorderShortcutNavItemsModalOpen(true);
 														}}
 													>
@@ -1128,7 +1128,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 													return;
 												}
 												const newCollapsedState = !isMoreMenuCollapsed;
-												logEvent('Sidebar V2: More menu clicked', {
+												void logEvent('Sidebar V2: More menu clicked', {
 													action: isMoreMenuCollapsed ? 'expand' : 'collapse',
 												});
 												setIsMoreMenuCollapsed(newCollapsedState);
@@ -1234,14 +1234,14 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				open={isReorderShortcutNavItemsModalOpen}
 				closable
 				onCancel={(): void => {
-					logEvent('Sidebar V2: Manage shortcuts dismissed', {});
+					void logEvent('Sidebar V2: Manage shortcuts dismissed', {});
 					hideReorderShortcutNavItemsModal();
 				}}
 				footer={[
 					<Button
 						key="cancel"
 						onClick={(): void => {
-							logEvent('Sidebar V2: Manage shortcuts dismissed', {});
+							void logEvent('Sidebar V2: Manage shortcuts dismissed', {});
 							hideReorderShortcutNavItemsModal();
 						}}
 						className="periscope-btn cancel-btn secondary-btn"

frontend/src/container/SideNav/menuItems.tsx

@@ -1,3 +1,5 @@
+import { MenuProps } from 'antd';
+import ROUTES from 'constants/routes';
 import {
 	ArrowUpRight,
 	BarChart,
@@ -35,15 +37,13 @@ import {
 	Users,
 	Binoculars,
 } from '@signozhq/icons';
-import { Style } from '@signozhq/design-tokens';
-import { MenuProps } from 'antd';
-import ROUTES from 'constants/routes';
 
 import {
 	SecondaryMenuItemKey,
 	SettingsNavSection,
 	SidebarItem,
 } from './sideNav.types';
+import { Style } from '@signozhq/design-tokens';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,

frontend/src/container/TopNav/DateTimeSelectionV2/__tests__/DateTimeSelectionV2.edge-cases.test.tsx

@@ -0,0 +1,258 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+
+import DateTimeSelection from '../index';
+import {
+	__resetSearchParamsGetter,
+	__setSearchParamsGetterForTest,
+} from '../utils/getUnstableCurrentSearchParams';
+import { queryClient, TestWrapper } from './testUtils';
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('container/NewExplorerCTA', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: ({
+		onSelect,
+	}: {
+		onSelect: (value: string) => void;
+	}): JSX.Element => (
+		<div data-testid="custom-time-picker">
+			<button
+				type="button"
+				data-testid="select-15m"
+				onClick={(): void => onSelect('15m')}
+			>
+				15m
+			</button>
+			<button
+				type="button"
+				data-testid="select-1h"
+				onClick={(): void => onSelect('1h')}
+			>
+				1h
+			</button>
+			<button
+				type="button"
+				data-testid="select-6h"
+				onClick={(): void => onSelect('6h')}
+			>
+				6h
+			</button>
+			<button
+				type="button"
+				data-testid="select-custom"
+				onClick={(): void => onSelect('custom')}
+			>
+				Custom
+			</button>
+		</div>
+	),
+}));
+
+describe('DateTimeSelectionV2 - Edge Cases', () => {
+	let currentSearchParams: URLSearchParams;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		queryClient.clear();
+	});
+
+	afterEach(() => {
+		__resetSearchParamsGetter();
+	});
+
+	describe('Fresh Params at Navigation Time (Core Fix)', () => {
+		it('should read params at navigation time, not render time', async () => {
+			currentSearchParams = new URLSearchParams('relativeTime=30m');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper
+					initialSearchParams="relativeTime=30m"
+					onUrlUpdate={(event): void => {
+						currentSearchParams = event.searchParams;
+					}}
+				>
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			currentSearchParams = new URLSearchParams(
+				'relativeTime=30m&externalParam=addedLater',
+			);
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-1h'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=1h');
+			expect(navigatedUrl).toContain('externalParam=addedLater');
+		});
+
+		it('should preserve multiple externally added params', async () => {
+			currentSearchParams = new URLSearchParams('relativeTime=30m');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			currentSearchParams = new URLSearchParams(
+				'relativeTime=30m&yAxisUnit=bytes&groupBy=host&view=table',
+			);
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-6h'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=6h');
+			expect(navigatedUrl).toContain('yAxisUnit=bytes');
+			expect(navigatedUrl).toContain('groupBy=host');
+			expect(navigatedUrl).toContain('view=table');
+		});
+	});
+
+	describe('Empty and Special Values', () => {
+		it('should handle empty URL params gracefully', async () => {
+			currentSearchParams = new URLSearchParams('');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-15m'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=15m');
+		});
+
+		it('should handle special characters in preserved params', async () => {
+			currentSearchParams = new URLSearchParams(
+				'relativeTime=30m&filter=name%3D%22test%22',
+			);
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m&filter=name%3D%22test%22">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-1h'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=1h');
+			expect(navigatedUrl).toContain('filter=');
+		});
+
+		it('should not navigate when selecting custom (opens picker instead)', async () => {
+			currentSearchParams = new URLSearchParams('relativeTime=30m');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-custom'));
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 100));
+
+			const customNavigationCalls = mockSafeNavigate.mock.calls.filter((call) => {
+				const url = call[0] as string;
+				return url.includes('startTime=') || url.includes('endTime=');
+			});
+
+			expect(customNavigationCalls).toHaveLength(0);
+		});
+	});
+});

frontend/src/container/TopNav/DateTimeSelectionV2/__tests__/DateTimeSelectionV2.modal-mode.test.tsx

@@ -0,0 +1,180 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+
+import DateTimeSelection from '../index';
+import {
+	__resetSearchParamsGetter,
+	__setSearchParamsGetterForTest,
+} from '../utils/getUnstableCurrentSearchParams';
+import { queryClient, TestWrapper } from './testUtils';
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('container/NewExplorerCTA', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+let mockOnCustomDateHandler: ((range: [unknown, unknown]) => void) | null =
+	null;
+let mockOnValidCustomDateChange: ((data: { timeStr: string }) => void) | null =
+	null;
+
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: ({
+		onSelect,
+		onCustomDateHandler,
+		onValidCustomDateChange,
+	}: {
+		onSelect: (value: string) => void;
+		onCustomDateHandler?: (range: [unknown, unknown]) => void;
+		onValidCustomDateChange?: (data: { timeStr: string }) => void;
+	}): JSX.Element => {
+		mockOnCustomDateHandler = onCustomDateHandler || null;
+		mockOnValidCustomDateChange = onValidCustomDateChange || null;
+
+		return (
+			<div data-testid="custom-time-picker">
+				<button
+					type="button"
+					data-testid="select-1h"
+					onClick={(): void => onSelect('1h')}
+				>
+					1h
+				</button>
+			</div>
+		);
+	},
+}));
+
+describe('DateTimeSelectionV2 - Modal Mode', () => {
+	let currentSearchParams: URLSearchParams;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		queryClient.clear();
+		mockOnCustomDateHandler = null;
+		mockOnValidCustomDateChange = null;
+	});
+
+	afterEach(() => {
+		__resetSearchParamsGetter();
+	});
+
+	it('should call onTimeChange instead of navigating for relative time', async () => {
+		currentSearchParams = new URLSearchParams('relativeTime=30m');
+		__setSearchParamsGetterForTest(() => currentSearchParams);
+
+		const mockOnTimeChange = jest.fn();
+
+		render(
+			<TestWrapper initialSearchParams="relativeTime=30m">
+				<DateTimeSelection
+					showAutoRefresh
+					isModalTimeSelection
+					onTimeChange={mockOnTimeChange}
+				/>
+			</TestWrapper>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+		});
+
+		mockSafeNavigate.mockClear();
+
+		act(() => {
+			fireEvent.click(screen.getByTestId('select-1h'));
+		});
+
+		await waitFor(() => {
+			expect(mockOnTimeChange).toHaveBeenCalledWith('1h');
+		});
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should call onTimeChange with custom and timestamps for custom date', async () => {
+		currentSearchParams = new URLSearchParams('relativeTime=30m');
+		__setSearchParamsGetterForTest(() => currentSearchParams);
+
+		const mockOnTimeChange = jest.fn();
+
+		render(
+			<TestWrapper initialSearchParams="relativeTime=30m">
+				<DateTimeSelection
+					showAutoRefresh
+					isModalTimeSelection
+					onTimeChange={mockOnTimeChange}
+				/>
+			</TestWrapper>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+		});
+
+		const startMoment = { toDate: (): Date => new Date(1700000000000) };
+		const endMoment = { toDate: (): Date => new Date(1700003600000) };
+
+		mockSafeNavigate.mockClear();
+
+		act(() => {
+			mockOnCustomDateHandler?.([startMoment, endMoment]);
+		});
+
+		await waitFor(() => {
+			expect(mockOnTimeChange).toHaveBeenCalledWith(
+				'custom',
+				[1700000000000, 1700003600000],
+			);
+		});
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should call onTimeChange for valid custom date string in modal', async () => {
+		currentSearchParams = new URLSearchParams('relativeTime=30m');
+		__setSearchParamsGetterForTest(() => currentSearchParams);
+
+		const mockOnTimeChange = jest.fn();
+
+		render(
+			<TestWrapper initialSearchParams="relativeTime=30m">
+				<DateTimeSelection
+					showAutoRefresh
+					isModalTimeSelection
+					onTimeChange={mockOnTimeChange}
+				/>
+			</TestWrapper>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+		});
+
+		mockSafeNavigate.mockClear();
+
+		act(() => {
+			mockOnValidCustomDateChange?.({ timeStr: '4h' });
+		});
+
+		await waitFor(() => {
+			expect(mockOnTimeChange).toHaveBeenCalledWith('4h');
+		});
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/TopNav/DateTimeSelectionV2/__tests__/DateTimeSelectionV2.regression.test.tsx

@@ -0,0 +1,207 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+import { parseAsString, useQueryState } from 'nuqs';
+import { AppContext } from 'providers/App/App';
+import TimezoneProvider from 'providers/Timezone';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import store from 'store';
+import { getAppContextMock } from 'tests/test-utils';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+
+import DateTimeSelection from '../index';
+import {
+	__resetSearchParamsGetter,
+	__setSearchParamsGetterForTest,
+} from '../utils/getUnstableCurrentSearchParams';
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: { refetchOnWindowFocus: false, retry: false },
+		mutations: { retry: false },
+	},
+});
+
+const mockStore = configureStore([thunk]);
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: ({
+		onSelect,
+	}: {
+		onSelect: (value: string) => void;
+	}): JSX.Element => (
+		<div data-testid="custom-time-picker">
+			<button
+				type="button"
+				data-testid="select-1h"
+				onClick={(): void => onSelect('1h')}
+			>
+				1h
+			</button>
+		</div>
+	),
+}));
+
+jest.mock('container/NewExplorerCTA', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+function NuqsParamSetter({ paramValue }: { paramValue: string }): JSX.Element {
+	const [, setYAxisUnit] = useQueryState(
+		'yAxisUnit',
+		parseAsString.withDefault(''),
+	);
+
+	return (
+		<button
+			type="button"
+			data-testid="set-nuqs-param"
+			onClick={(): void => {
+				setYAxisUnit(paramValue);
+			}}
+		>
+			Set yAxisUnit
+		</button>
+	);
+}
+
+interface WrapperProps {
+	children: React.ReactNode;
+	initialSearchParams?: string;
+	initialPath?: string;
+	onUrlUpdate?: (event: { searchParams: URLSearchParams }) => void;
+}
+
+function TestWrapper({
+	children,
+	initialSearchParams = '',
+	initialPath = '/services',
+	onUrlUpdate,
+}: WrapperProps): JSX.Element {
+	const initialEntry = initialSearchParams
+		? `${initialPath}?${initialSearchParams}`
+		: initialPath;
+
+	const mockedStore = mockStore({
+		...store.getState(),
+		app: {
+			...store.getState().app,
+			role: 'ADMIN',
+			user: {
+				userId: 'test-user-id',
+				email: 'test@signoz.io',
+				name: 'TestUser',
+				profilePictureURL: '',
+				accessJwt: '',
+				refreshJwt: '',
+			},
+			isLoggedIn: true,
+		},
+	});
+
+	return (
+		<MemoryRouter initialEntries={[initialEntry]}>
+			<CompatRouter>
+				<NuqsTestingAdapter
+					searchParams={initialSearchParams}
+					onUrlUpdate={onUrlUpdate}
+				>
+					<QueryClientProvider client={queryClient}>
+						<Provider store={mockedStore}>
+							<AppContext.Provider value={getAppContextMock('ADMIN')}>
+								<TimezoneProvider>
+									<QueryBuilderProvider>
+										<Route path="*">{children}</Route>
+									</QueryBuilderProvider>
+								</TimezoneProvider>
+							</AppContext.Provider>
+						</Provider>
+					</QueryClientProvider>
+				</NuqsTestingAdapter>
+			</CompatRouter>
+		</MemoryRouter>
+	);
+}
+
+describe('REGRESSION: DateTimeSelectionV2 preserves nuqs query params on time change', () => {
+	let currentSearchParams: URLSearchParams;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		queryClient.clear();
+
+		// Initialize with test's initial search params
+		currentSearchParams = new URLSearchParams('relativeTime=30m');
+		__setSearchParamsGetterForTest(() => currentSearchParams);
+	});
+
+	afterEach(() => {
+		__resetSearchParamsGetter();
+	});
+
+	it('should preserve yAxisUnit param set via nuqs when changing time selection', async () => {
+		render(
+			<TestWrapper
+				initialSearchParams="relativeTime=30m"
+				onUrlUpdate={(event): void => {
+					// Sync nuqs URL updates to our mock getter
+					// This simulates how window.location.search would be updated in real browser
+					currentSearchParams = event.searchParams;
+				}}
+			>
+				<NuqsParamSetter paramValue="bytes" />
+				<DateTimeSelection showAutoRefresh />
+			</TestWrapper>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+		});
+
+		act(() => {
+			fireEvent.click(screen.getByTestId('set-nuqs-param'));
+		});
+
+		await waitFor(() => {
+			expect(currentSearchParams.get('yAxisUnit')).toBe('bytes');
+		});
+
+		mockSafeNavigate.mockClear();
+
+		act(() => {
+			fireEvent.click(screen.getByTestId('select-1h'));
+		});
+
+		await waitFor(() => {
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		const navigatedUrl = mockSafeNavigate.mock.calls[
+			mockSafeNavigate.mock.calls.length - 1
+		][0] as string;
+
+		expect(navigatedUrl).toContain('relativeTime=1h');
+		expect(navigatedUrl).toContain('yAxisUnit=bytes');
+	});
+});

frontend/src/container/TopNav/DateTimeSelectionV2/__tests__/DateTimeSelectionV2.routes.test.tsx

@@ -0,0 +1,133 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+
+import DateTimeSelection from '../index';
+import {
+	__resetSearchParamsGetter,
+	__setSearchParamsGetterForTest,
+} from '../utils/getUnstableCurrentSearchParams';
+import { queryClient, TestWrapper } from './testUtils';
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('container/NewExplorerCTA', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="custom-time-picker" />,
+}));
+
+describe('DateTimeSelectionV2 - Route-Specific Behavior', () => {
+	let currentSearchParams: URLSearchParams;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		queryClient.clear();
+	});
+
+	afterEach(() => {
+		__resetSearchParamsGetter();
+	});
+
+	describe('Alert Pages', () => {
+		it('should set default time for alert overview when no time params', async () => {
+			currentSearchParams = new URLSearchParams('otherParam=value');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper
+					initialSearchParams="otherParam=value"
+					initialPath={ROUTES.ALERT_OVERVIEW}
+				>
+					<DateTimeSelection showAutoRefresh defaultRelativeTime="6h" />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[0][0] as string;
+			expect(navigatedUrl).toContain('relativeTime=6h');
+			expect(navigatedUrl).toContain('otherParam=value');
+		});
+
+		it('should set default time for alert history when no time params', async () => {
+			currentSearchParams = new URLSearchParams('filter=active');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper
+					initialSearchParams="filter=active"
+					initialPath={ROUTES.ALERT_HISTORY}
+				>
+					<DateTimeSelection showAutoRefresh defaultRelativeTime="6h" />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[0][0] as string;
+			expect(navigatedUrl).toContain('relativeTime=6h');
+		});
+
+		it('should NOT override existing time params on alert pages', async () => {
+			currentSearchParams = new URLSearchParams('relativeTime=1h&filter=active');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper
+					initialSearchParams="relativeTime=1h&filter=active"
+					initialPath={ROUTES.ALERT_OVERVIEW}
+				>
+					<DateTimeSelection showAutoRefresh defaultRelativeTime="6h" />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			const calls = mockSafeNavigate.mock.calls;
+			if (calls.length > 0) {
+				const lastUrl = calls[calls.length - 1][0] as string;
+				expect(lastUrl).toContain('relativeTime=1h');
+			}
+		});
+	});
+
+	describe('disableUrlSync Behavior', () => {
+		it('should not sync URL on mount when disableUrlSync is true', async () => {
+			currentSearchParams = new URLSearchParams('');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="" initialPath="/services">
+					<DateTimeSelection showAutoRefresh disableUrlSync />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			const syncCalls = mockSafeNavigate.mock.calls.filter((call) => {
+				const url = call[0] as string;
+				return url.includes('relativeTime=') && !url.includes('services?');
+			});
+
+			expect(syncCalls).toHaveLength(0);
+		});
+	});
+});

frontend/src/container/TopNav/DateTimeSelectionV2/__tests__/DateTimeSelectionV2.time-selection.test.tsx

@@ -0,0 +1,353 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+
+import DateTimeSelection from '../index';
+import {
+	__resetSearchParamsGetter,
+	__setSearchParamsGetterForTest,
+} from '../utils/getUnstableCurrentSearchParams';
+import { queryClient, TestWrapper, createMockMoment } from './testUtils';
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('container/NewExplorerCTA', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+let mockOnCustomDateHandler: ((range: [unknown, unknown]) => void) | null =
+	null;
+let mockOnValidCustomDateChange: ((data: { timeStr: string }) => void) | null =
+	null;
+
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: ({
+		onSelect,
+		onCustomDateHandler,
+		onValidCustomDateChange,
+	}: {
+		onSelect: (value: string) => void;
+		onCustomDateHandler?: (range: [unknown, unknown]) => void;
+		onValidCustomDateChange?: (data: { timeStr: string }) => void;
+	}): JSX.Element => {
+		mockOnCustomDateHandler = onCustomDateHandler || null;
+		mockOnValidCustomDateChange = onValidCustomDateChange || null;
+
+		return (
+			<div data-testid="custom-time-picker">
+				<button
+					type="button"
+					data-testid="select-15m"
+					onClick={(): void => onSelect('15m')}
+				>
+					15m
+				</button>
+				<button
+					type="button"
+					data-testid="select-1h"
+					onClick={(): void => onSelect('1h')}
+				>
+					1h
+				</button>
+				<button
+					type="button"
+					data-testid="select-6h"
+					onClick={(): void => onSelect('6h')}
+				>
+					6h
+				</button>
+			</div>
+		);
+	},
+}));
+
+describe('DateTimeSelectionV2 - Time Selection', () => {
+	let currentSearchParams: URLSearchParams;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		queryClient.clear();
+		mockOnCustomDateHandler = null;
+		mockOnValidCustomDateChange = null;
+	});
+
+	afterEach(() => {
+		__resetSearchParamsGetter();
+	});
+
+	describe('Relative Time', () => {
+		it('should update relativeTime and remove startTime/endTime', async () => {
+			currentSearchParams = new URLSearchParams(
+				'startTime=1000&endTime=2000&otherParam=keep',
+			);
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="startTime=1000&endTime=2000&otherParam=keep">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-15m'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=15m');
+			expect(navigatedUrl).not.toContain('startTime=');
+			expect(navigatedUrl).not.toContain('endTime=');
+			expect(navigatedUrl).toContain('otherParam=keep');
+		});
+
+		it('should remove activeLogId param on time change', async () => {
+			currentSearchParams = new URLSearchParams(
+				'relativeTime=30m&activeLogId=log123',
+			);
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m&activeLogId=log123">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-1h'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=1h');
+			expect(navigatedUrl).not.toContain('activeLogId');
+		});
+
+		it('should update compositeQuery with new ID when present', async () => {
+			const compositeQuery = encodeURIComponent(
+				JSON.stringify({ id: 'old-id', builder: { queryData: [] } }),
+			);
+			currentSearchParams = new URLSearchParams(
+				`relativeTime=30m&compositeQuery=${compositeQuery}`,
+			);
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper
+					initialSearchParams={`relativeTime=30m&compositeQuery=${compositeQuery}`}
+				>
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-6h'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('compositeQuery=');
+			expect(navigatedUrl).not.toContain('old-id');
+		});
+
+		it('should preserve all non-time URL params', async () => {
+			currentSearchParams = new URLSearchParams(
+				'relativeTime=30m&param1=a&param2=b&param3=c',
+			);
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m&param1=a&param2=b&param3=c">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				fireEvent.click(screen.getByTestId('select-1h'));
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=1h');
+			expect(navigatedUrl).toContain('param1=a');
+			expect(navigatedUrl).toContain('param2=b');
+			expect(navigatedUrl).toContain('param3=c');
+		});
+	});
+
+	describe('Custom Date Range', () => {
+		it('should set startTime/endTime and remove relativeTime', async () => {
+			currentSearchParams = new URLSearchParams('relativeTime=30m&keepThis=yes');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m&keepThis=yes">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			const startMoment = createMockMoment(1700000000000);
+			const endMoment = createMockMoment(1700003600000);
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				mockOnCustomDateHandler?.([startMoment, endMoment]);
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('startTime=1700000000000');
+			expect(navigatedUrl).toContain('endTime=1700003600000');
+			expect(navigatedUrl).not.toContain('relativeTime=');
+			expect(navigatedUrl).toContain('keepThis=yes');
+		});
+
+		it('should update compositeQuery when present for custom date', async () => {
+			const compositeQuery = encodeURIComponent(
+				JSON.stringify({ id: 'old-id', builder: { queryData: [] } }),
+			);
+			currentSearchParams = new URLSearchParams(
+				`relativeTime=30m&compositeQuery=${compositeQuery}`,
+			);
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper
+					initialSearchParams={`relativeTime=30m&compositeQuery=${compositeQuery}`}
+				>
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			const startMoment = createMockMoment(1700000000000);
+			const endMoment = createMockMoment(1700003600000);
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				mockOnCustomDateHandler?.([startMoment, endMoment]);
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('compositeQuery=');
+			expect(navigatedUrl).not.toContain('old-id');
+		});
+	});
+
+	describe('Valid Custom Date String', () => {
+		it('should handle shorthand date format and preserve params', async () => {
+			currentSearchParams = new URLSearchParams('relativeTime=30m&filter=active');
+			__setSearchParamsGetterForTest(() => currentSearchParams);
+
+			render(
+				<TestWrapper initialSearchParams="relativeTime=30m&filter=active">
+					<DateTimeSelection showAutoRefresh />
+				</TestWrapper>,
+			);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('custom-time-picker')).toBeInTheDocument();
+			});
+
+			mockSafeNavigate.mockClear();
+
+			act(() => {
+				mockOnValidCustomDateChange?.({ timeStr: '2h' });
+			});
+
+			await waitFor(() => {
+				expect(mockSafeNavigate).toHaveBeenCalled();
+			});
+
+			const navigatedUrl = mockSafeNavigate.mock.calls[
+				mockSafeNavigate.mock.calls.length - 1
+			][0] as string;
+
+			expect(navigatedUrl).toContain('relativeTime=2h');
+			expect(navigatedUrl).toContain('filter=active');
+			expect(navigatedUrl).not.toContain('startTime=');
+			expect(navigatedUrl).not.toContain('endTime=');
+		});
+	});
+});

frontend/src/container/TopNav/DateTimeSelectionV2/__tests__/testUtils.tsx

@@ -0,0 +1,95 @@
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { AppContext } from 'providers/App/App';
+import TimezoneProvider from 'providers/Timezone';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import store from 'store';
+import { getAppContextMock } from 'tests/test-utils';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+
+export const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: { refetchOnWindowFocus: false, retry: false },
+		mutations: { retry: false },
+	},
+});
+
+export const mockStore = configureStore([thunk]);
+
+interface WrapperProps {
+	children: React.ReactNode;
+	initialSearchParams?: string;
+	initialPath?: string;
+	onUrlUpdate?: (event: { searchParams: URLSearchParams }) => void;
+}
+
+export function TestWrapper({
+	children,
+	initialSearchParams = '',
+	initialPath = '/services',
+	onUrlUpdate,
+}: WrapperProps): JSX.Element {
+	const initialEntry = initialSearchParams
+		? `${initialPath}?${initialSearchParams}`
+		: initialPath;
+
+	const mockedStore = mockStore({
+		...store.getState(),
+		app: {
+			...store.getState().app,
+			role: 'ADMIN',
+			user: {
+				userId: 'test-user-id',
+				email: 'test@signoz.io',
+				name: 'TestUser',
+				profilePictureURL: '',
+				accessJwt: '',
+				refreshJwt: '',
+			},
+			isLoggedIn: true,
+		},
+	});
+
+	return (
+		<MemoryRouter initialEntries={[initialEntry]}>
+			<CompatRouter>
+				<NuqsTestingAdapter
+					searchParams={initialSearchParams}
+					onUrlUpdate={onUrlUpdate}
+				>
+					<QueryClientProvider client={queryClient}>
+						<Provider store={mockedStore}>
+							<AppContext.Provider value={getAppContextMock('ADMIN')}>
+								<TimezoneProvider>
+									<QueryBuilderProvider>
+										<Route path="*">{children}</Route>
+									</QueryBuilderProvider>
+								</TimezoneProvider>
+							</AppContext.Provider>
+						</Provider>
+					</QueryClientProvider>
+				</NuqsTestingAdapter>
+			</CompatRouter>
+		</MemoryRouter>
+	);
+}
+
+export function createMockMoment(timestamp: number): {
+	toDate: () => Date;
+	toISOString: () => string;
+	format: () => string;
+	toString: () => string;
+} {
+	const date = new Date(timestamp);
+	return {
+		toDate: (): Date => date,
+		toISOString: (): string => date.toISOString(),
+		format: (): string => date.toISOString(),
+		toString: (): string => date.toString(),
+	};
+}

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { useNavigationType, useSearchParams } from 'react-router-dom-v5-compat';
+import { useNavigationType } from 'react-router-dom-v5-compat';
 import { RefreshCw, Undo } from '@signozhq/icons';
 import { Button } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
@@ -20,7 +20,6 @@ import {
 } from 'store/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import { cloneDeep, isObject } from 'lodash-es';
@@ -54,6 +53,7 @@ import {
 	Time,
 	TimeRange,
 } from './types';
+import { getUnstableCurrentSearchParams } from './utils/getUnstableCurrentSearchParams';
 
 import './DateTimeSelectionV2.styles.scss';
 
@@ -90,10 +90,12 @@ function DateTimeSelection({
 	const [hasSelectedTimeError, setHasSelectedTimeError] = useState(false);
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 
-	const urlQuery = useUrlQuery();
-	const searchStartTime = urlQuery.get('startTime');
-	const searchEndTime = urlQuery.get('endTime');
-	const relativeTimeFromUrl = urlQuery.get(QueryParams.relativeTime);
+	const currentSearchParams = getUnstableCurrentSearchParams();
+	const searchStartTime = currentSearchParams.get(QueryParams.startTime);
+	const searchEndTime = currentSearchParams.get(QueryParams.endTime);
+	const relativeTimeFromUrl = currentSearchParams.get(QueryParams.relativeTime);
+	const hasTimeParamsInUrl =
+		(searchStartTime && searchEndTime) || relativeTimeFromUrl;
 
 	// Prioritize props for initial modal time, fallback to URL params
 	let initialModalStartTime = 0;
@@ -115,8 +117,6 @@ function DateTimeSelection({
 	);
 	const [modalEndTime, setModalEndTime] = useState<number>(initialModalEndTime);
 
-	const [searchParams] = useSearchParams();
-
 	// Effect to update modal time state when props change
 	useEffect(() => {
 		if (modalInitialStartTime !== undefined) {
@@ -323,14 +323,15 @@ function DateTimeSelection({
 				return;
 			}
 
-			urlQuery.delete('startTime');
-			urlQuery.delete('endTime');
+			const urlQuery = getUnstableCurrentSearchParams();
+			urlQuery.delete(QueryParams.startTime);
+			urlQuery.delete(QueryParams.endTime);
 
 			urlQuery.set(QueryParams.relativeTime, value);
 			// Remove Hidden Filters from URL query parameters on time change
 			urlQuery.delete(QueryParams.activeLogId);
 
-			if (searchParams.has(QueryParams.compositeQuery)) {
+			if (urlQuery.has(QueryParams.compositeQuery)) {
 				const updatedCompositeQuery = getUpdatedCompositeQuery();
 				urlQuery.set(QueryParams.compositeQuery, updatedCompositeQuery);
 			}
@@ -349,8 +350,6 @@ function DateTimeSelection({
 			getUpdatedCompositeQuery,
 			updateLocalStorageForRoutes,
 			updateTimeInterval,
-			urlQuery,
-			searchParams,
 		],
 	);
 
@@ -414,6 +413,7 @@ function DateTimeSelection({
 
 				updateLocalStorageForRoutes(JSON.stringify({ startTime, endTime }));
 
+				const urlQuery = getUnstableCurrentSearchParams();
 				urlQuery.set(
 					QueryParams.startTime,
 					startTime?.toDate().getTime().toString(),
@@ -421,7 +421,7 @@ function DateTimeSelection({
 				urlQuery.set(QueryParams.endTime, endTime?.toDate().getTime().toString());
 				urlQuery.delete(QueryParams.relativeTime);
 
-				if (searchParams.has(QueryParams.compositeQuery)) {
+				if (urlQuery.has(QueryParams.compositeQuery)) {
 					const updatedCompositeQuery = getUpdatedCompositeQuery();
 					urlQuery.set(QueryParams.compositeQuery, updatedCompositeQuery);
 				}
@@ -441,8 +441,9 @@ function DateTimeSelection({
 		updateTimeInterval(dateTimeStr);
 		updateLocalStorageForRoutes(dateTimeStr);
 
-		urlQuery.delete('startTime');
-		urlQuery.delete('endTime');
+		const urlQuery = getUnstableCurrentSearchParams();
+		urlQuery.delete(QueryParams.startTime);
+		urlQuery.delete(QueryParams.endTime);
 
 		urlQuery.set(QueryParams.relativeTime, dateTimeStr);
 
@@ -595,13 +596,12 @@ function DateTimeSelection({
 
 		// set the default relative time for alert history and overview pages if relative time is not specified
 		if (
-			(!urlQuery.has(QueryParams.startTime) ||
-				!urlQuery.has(QueryParams.endTime)) &&
-			!urlQuery.has(QueryParams.relativeTime) &&
+			!hasTimeParamsInUrl &&
 			(currentRoute === ROUTES.ALERT_OVERVIEW ||
 				currentRoute === ROUTES.ALERT_HISTORY)
 		) {
 			updateTimeInterval(defaultRelativeTime);
+			const urlQuery = getUnstableCurrentSearchParams();
 			urlQuery.set(QueryParams.relativeTime, defaultRelativeTime);
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 			safeNavigate(generatedUrl);
@@ -625,9 +625,10 @@ function DateTimeSelection({
 			updateTimeInterval(updatedTime, [preStartTime, preEndTime]);
 		}
 
+		const urlQuery = getUnstableCurrentSearchParams();
 		if (updatedTime !== 'custom') {
-			urlQuery.delete('startTime');
-			urlQuery.delete('endTime');
+			urlQuery.delete(QueryParams.startTime);
+			urlQuery.delete(QueryParams.endTime);
 			urlQuery.set(QueryParams.relativeTime, updatedTime);
 		} else {
 			const startTime = preStartTime.toString();

frontend/src/container/TopNav/DateTimeSelectionV2/utils/getUnstableCurrentSearchParams.ts

@@ -0,0 +1,34 @@
+/**
+ * This was introduced to fix a sync bug between Nuqs and react-router-dom
+ *
+ * We are using the wrong adapter for nuqs because the correct one only supports v6/v7,
+ * and we are at version v5. This causes the nuqs/react-router-dom to be out of sync.
+ *
+ * We can revert this commit once we migrate react-router-dom to v6, or once we migrate
+ * to DateTimeSelectionV3
+ */
+
+/**
+ * This was created to help testing the regression introduced between nuqs/react-router-dom
+ */
+type SearchParamsGetter = () => URLSearchParams;
+let getter: SearchParamsGetter = (): URLSearchParams =>
+	new URLSearchParams(window.location.search);
+
+/**
+ * This function will return a fresh instance of URLSearchParams every time it's called.
+ *
+ * DO NOT USE IT FOR useEffect/useCallback dependencies, use Nuqs instead.
+ */
+export function getUnstableCurrentSearchParams(): URLSearchParams {
+	return getter();
+}
+
+// Testing helpers
+export function __setSearchParamsGetterForTest(fn: SearchParamsGetter): void {
+	getter = fn;
+}
+
+export function __resetSearchParamsGetter(): void {
+	getter = (): URLSearchParams => new URLSearchParams(window.location.search);
+}