feat(base-path): migrated more cases

* fix: tons of changes

* chore: remove redundent comparison

* ci: tests fixed

* fix: upgraded collector version

* fix: qbtoexpr tests

* fix: go sum

* chore: upgrade collector version v0.144.3-rc.4

* fix: tests

* ci: test fix

* revert: remove db binaries

* test: selectField tests added

* fix: added safeguards in plan generation

* fix: name changed to field_map

* fix: json access plan remval of AvailableTypes

* fix: invalid index usage on terminal condition

* fix: branches should tell missing array types

* fix: comment removed

* fix: issue with FuzzyMatching and API failing

* fix: int64 mapping

* ci: test and lint fix

* fix: test VisitKey

* test: running test for sku

* fix: buildFieldForJSON works

* fix: few minor changes

* fix: refactor tag vs field_key table

* fix: minor changes based on review

* revert: minor variable change

* fix: added more membership testcases

* revert: minor var names reverted

* ci: tests aligned

* fix: indexed expressions

docs/api/openapi.yml

@@ -4360,146 +4360,6 @@ components:
     TimeDuration:
       format: int64
       type: integer
-    TracedetailtypesEvent:
-      properties:
-        attributeMap:
-          additionalProperties: {}
-          type: object
-        isError:
-          type: boolean
-        name:
-          type: string
-        timeUnixNano:
-          minimum: 0
-          type: integer
-      type: object
-    TracedetailtypesWaterfallRequest:
-      properties:
-        limit:
-          minimum: 0
-          type: integer
-        selectedSpanId:
-          type: string
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesWaterfallResponse:
-      properties:
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        hasMore:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-        spans:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
-          nullable: true
-          type: array
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesWaterfallSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind:
-          format: int32
-          type: integer
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        timestamp:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -12712,76 +12572,6 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
-  /api/v3/traces/{traceID}/waterfall:
-    post:
-      deprecated: false
-      description: Returns the waterfall view of spans for a given trace ID with tree
-        structure, metadata, and windowed pagination
-      operationId: GetWaterfall
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TracedetailtypesWaterfallRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TracedetailtypesWaterfallResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get waterfall view for a trace
-      tags:
-      - tracedetail
   /api/v5/query_range:
     post:
       deprecated: false

frontend/.eslintrc.cjs

@@ -66,6 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		// Base-path safety — window.open and origin-concat patterns
+		'rulesdir/no-raw-absolute-path': 'error',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned
@@ -213,6 +215,31 @@ module.exports = {
 				message:
 					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
 			},
+			{
+				selector:
+					"MemberExpression[object.name='window'][property.name='localStorage']",
+				message:
+					'Use getLocalStorageKey/setLocalStorageKey/removeLocalStorageKey from api/browser/localstorage instead.',
+			},
+			{
+				selector:
+					"MemberExpression[object.name='window'][property.name='sessionStorage']",
+				message:
+					'Use getSessionStorageApi/setSessionStorageApi/removeSessionStorageApi from api/browser/sessionstorage instead.',
+			},
+		],
+		'no-restricted-globals': [
+			'error',
+			{
+				name: 'localStorage',
+				message:
+					'Use getLocalStorageKey/setLocalStorageKey/removeLocalStorageKey from api/browser/localstorage instead.',
+			},
+			{
+				name: 'sessionStorage',
+				message:
+					'Use getSessionStorageApi/setSessionStorageApi/removeSessionStorageApi from api/browser/sessionstorage instead.',
+			},
 		],
 	},
 	overrides: [
@@ -246,6 +273,11 @@ module.exports = {
 				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
 				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
 				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
+				// Test assertions intentionally reference window.location.origin for expected-value checks
+				'rulesdir/no-raw-absolute-path': 'off',
+				// Tests may access storage directly for setup/assertion/spy purposes
+				'no-restricted-globals': 'off',
+				'no-restricted-syntax': 'off',
 			},
 		},
 		{

frontend/eslint-rules/no-raw-absolute-path.js

@@ -0,0 +1,153 @@
+'use strict';
+
+/**
+ * ESLint rule: no-raw-absolute-path
+ *
+ * Catches patterns that break at runtime when the app is served from a
+ * sub-path (e.g. /signoz/):
+ *
+ *   1. window.open(path, '_blank')
+ *      → use openInNewTab(path) which calls withBasePath internally
+ *
+ *   2. window.location.origin + path  /  `${window.location.origin}${path}`
+ *      → use getAbsoluteUrl(path)
+ *
+ *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
+ *      → use getBaseUrl() to include the base path
+ *
+ *   4. window.location.href = path
+ *      → use withBasePath(path) or navigate() for internal navigation
+ *
+ * External URLs (first arg starts with "http") are explicitly allowed.
+ */
+
+function isOriginAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'origin' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isHrefAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'href' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isExternalUrl(node) {
+	if (node.type === 'Literal' && typeof node.value === 'string') {
+		return node.value.startsWith('http://') || node.value.startsWith('https://');
+	}
+	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
+		const raw = node.quasis[0].value.raw;
+		return raw.startsWith('http://') || raw.startsWith('https://');
+	}
+	return false;
+}
+
+// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
+function isSafeHelperCall(node) {
+	return (
+		node.type === 'CallExpression' &&
+		node.callee.type === 'Identifier' &&
+		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
+	);
+}
+
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
+			category: 'Base Path Safety',
+		},
+		schema: [],
+		messages: {
+			windowOpen:
+				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
+			originConcat:
+				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
+			originDirect:
+				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
+			hrefAssign:
+				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
+		},
+	},
+
+	create(context) {
+		return {
+			// window.open(path, ...) — allow only external first-arg URLs
+			CallExpression(node) {
+				const { callee, arguments: args } = node;
+				if (
+					callee.type !== 'MemberExpression' ||
+					callee.object.type !== 'Identifier' ||
+					callee.object.name !== 'window' ||
+					callee.property.name !== 'open'
+				)
+					return;
+				if (args.length < 1) return;
+				if (isExternalUrl(args[0])) return;
+				if (isSafeHelperCall(args[0])) return;
+
+				context.report({ node, messageId: 'windowOpen' });
+			},
+
+			// window.location.origin + path
+			BinaryExpression(node) {
+				if (node.operator !== '+') return;
+				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// `${window.location.origin}${path}`
+			TemplateLiteral(node) {
+				if (node.expressions.some(isOriginAccess)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// window.location.origin used directly (not in concatenation)
+			// Catches: frontendBaseUrl: window.location.origin
+			MemberExpression(node) {
+				if (!isOriginAccess(node)) return;
+
+				const parent = node.parent;
+				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') return;
+				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
+				if (parent.type === 'TemplateLiteral') return;
+
+				context.report({ node, messageId: 'originDirect' });
+			},
+
+			// window.location.href = path
+			AssignmentExpression(node) {
+				if (node.operator !== '=') return;
+				if (!isHrefAccess(node.left)) return;
+
+				// Allow external URLs
+				if (isExternalUrl(node.right)) return;
+				// Allow safe helper calls
+				if (isSafeHelperCall(node.right)) return;
+
+				context.report({ node, messageId: 'hrefAssign' });
+			},
+		};
+	},
+};

frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -39,12 +40,12 @@
 		<meta
 			data-react-helmet="true"
 			property="og:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
 			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -136,7 +137,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/package.json

@@ -62,11 +62,10 @@
     "@signozhq/popover": "0.1.2",
     "@signozhq/radio-group": "0.0.4",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.6",
     "@signozhq/tabs": "0.0.11",
     "@signozhq/table": "0.3.8",
     "@signozhq/toggle-group": "0.0.3",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -138,12 +137,10 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
-    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
-    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",

frontend/src/AppRoutes/pageComponents.ts

@@ -65,13 +65,6 @@ export const TraceDetail = Loadable(
 		),
 );
 
-export const TraceDetailV3 = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
-		),
-);
-
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -48,7 +48,6 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
-	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -142,16 +141,9 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
-		component: TraceDetailV3,
-		isPrivate: true,
-		key: 'TRACE_DETAIL',
-	},
-	{
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
 		component: TraceDetail,
 		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
+		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,

frontend/src/ReactI18/index.tsx

@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { getBasePath } from 'utils/basePath';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 
@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

frontend/src/api/browser/localstorage/get.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const get = (key: string): string | null => {
 	try {
-		return localStorage.getItem(key);
+		return localStorage.getItem(getScopedKey(key));
 	} catch (e) {
 		return '';
 	}

frontend/src/api/browser/localstorage/remove.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const remove = (key: string): boolean => {
 	try {
-		window.localStorage.removeItem(key);
+		localStorage.removeItem(getScopedKey(key));
 		return true;
 	} catch (e) {
 		return false;

frontend/src/api/browser/localstorage/set.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const set = (key: string, value: string): boolean => {
 	try {
-		localStorage.setItem(key, value);
+		localStorage.setItem(getScopedKey(key), value);
 		return true;
 	} catch (e) {
 		return false;

frontend/src/api/browser/sessionstorage/get.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const get = (key: string): string | null => {
+	try {
+		return sessionStorage.getItem(getScopedKey(key));
+	} catch (e) {
+		return '';
+	}
+};
+
+export default get;

frontend/src/api/browser/sessionstorage/remove.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const remove = (key: string): boolean => {
+	try {
+		sessionStorage.removeItem(getScopedKey(key));
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+export default remove;

frontend/src/api/browser/sessionstorage/set.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const set = (key: string, value: string): boolean => {
+	try {
+		sessionStorage.setItem(getScopedKey(key), value);
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+export default set;

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

@@ -5332,248 +5332,6 @@ export interface TelemetrytypesTelemetryFieldValuesDTO {
 
 export type TimeDurationDTO = number;
 
-export type TracedetailtypesEventDTOAttributeMap = { [key: string]: unknown };
-
-export interface TracedetailtypesEventDTO {
-	/**
-	 * @type object
-	 */
-	attributeMap?: TracedetailtypesEventDTOAttributeMap;
-	/**
-	 * @type boolean
-	 */
-	isError?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timeUnixNano?: number;
-}
-
-export interface TracedetailtypesWaterfallRequestDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 */
-	selectedSpanId?: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap = {
-	[key: string]: number;
-} | null;
-
-export interface TracedetailtypesWaterfallResponseDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	endTimestampMillis?: number;
-	/**
-	 * @type boolean
-	 */
-	hasMissingSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-	/**
-	 * @type string
-	 */
-	rootServiceEntryPoint?: string;
-	/**
-	 * @type string
-	 */
-	rootServiceName?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	serviceNameToTotalDurationMap?: TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	spans?: TracedetailtypesWaterfallSpanDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	startTimestampMillis?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalErrorSpansCount?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalSpansCount?: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOAttributes = {
-	[key: string]: unknown;
-} | null;
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOResource = {
-	[key: string]: string;
-} | null;
-
-export interface TracedetailtypesWaterfallSpanDTO {
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	attributes?: TracedetailtypesWaterfallSpanDTOAttributes;
-	/**
-	 * @type string
-	 */
-	db_name?: string;
-	/**
-	 * @type string
-	 */
-	db_operation?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	duration_nano?: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	events?: TracedetailtypesEventDTO[] | null;
-	/**
-	 * @type string
-	 */
-	external_http_method?: string;
-	/**
-	 * @type string
-	 */
-	external_http_url?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	flags?: number;
-	/**
-	 * @type boolean
-	 */
-	has_children?: boolean;
-	/**
-	 * @type boolean
-	 */
-	has_error?: boolean;
-	/**
-	 * @type string
-	 */
-	http_host?: string;
-	/**
-	 * @type string
-	 */
-	http_method?: string;
-	/**
-	 * @type string
-	 */
-	http_url?: string;
-	/**
-	 * @type string
-	 */
-	is_remote?: string;
-	/**
-	 * @type integer
-	 * @format int32
-	 */
-	kind?: number;
-	/**
-	 * @type string
-	 */
-	kind_string?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	level?: number;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	parent_span_id?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	resource?: TracedetailtypesWaterfallSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	response_status_code?: string;
-	/**
-	 * @type string
-	 */
-	span_id?: string;
-	/**
-	 * @type integer
-	 */
-	status_code?: number;
-	/**
-	 * @type string
-	 */
-	status_code_string?: string;
-	/**
-	 * @type string
-	 */
-	status_message?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timestamp?: number;
-	/**
-	 * @type string
-	 */
-	trace_id?: string;
-	/**
-	 * @type string
-	 */
-	trace_state?: string;
-}
-
 export interface TypesAlertStatusDTO {
 	/**
 	 * @type array
@@ -7500,17 +7258,6 @@ export type GetHosts200 = {
 	status: string;
 };
 
-export type GetWaterfallPathParameters = {
-	traceID: string;
-};
-export type GetWaterfall200 = {
-	data: TracedetailtypesWaterfallResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type QueryRangeV5200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

frontend/src/api/generated/services/tracedetail/index.ts

@@ -1,121 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-import { useMutation } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	GetWaterfall200,
-	GetWaterfallPathParameters,
-	RenderErrorResponseDTO,
-	TracedetailtypesWaterfallRequestDTO,
-} from '../sigNoz.schemas';
-
-/**
- * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
- * @summary Get waterfall view for a trace
- */
-export const getWaterfall = (
-	{ traceID }: GetWaterfallPathParameters,
-	tracedetailtypesWaterfallRequestDTO: BodyType<TracedetailtypesWaterfallRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetWaterfall200>({
-		url: `/api/v3/traces/${traceID}/waterfall`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: tracedetailtypesWaterfallRequestDTO,
-		signal,
-	});
-};
-
-export const getGetWaterfallMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getWaterfall'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getWaterfall(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetWaterfallMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getWaterfall>>
->;
-export type GetWaterfallMutationBody = BodyType<TracedetailtypesWaterfallRequestDTO>;
-export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get waterfall view for a trace
- */
-export const useGetWaterfall = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getGetWaterfallMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/generatedAPIInstance.ts

@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };
 
+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/index.ts

@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,39 @@ export const interceptorsRequestResponse = (
 	return value;
 };
 
+// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
+// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
+function prependBase(base: string, path: string): string {
+	return path.startsWith(base) ? path : base + path.slice(1);
+}
+
+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
+		value.baseURL = prependBase(basePath, value.baseURL);
+	} else if (value.baseURL?.startsWith('http')) {
+		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
+		const url = new URL(value.baseURL);
+		url.pathname = prependBase(basePath, url.pathname);
+		value.baseURL = url.toString();
+	} else if (!value.baseURL && value.url?.startsWith('/')) {
+		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
+		value.url = prependBase(basePath, value.url);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +167,7 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

frontend/src/api/logs/livetail.ts

@@ -3,13 +3,16 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import { withBasePath } from 'utils/basePath';
 
 // 10 min in ms
 const TIMEOUT_IN_MS = 10 * 60 * 1000;
 
 export const LiveTail = (queryParams: string): EventSourcePolyfill =>
 	new EventSourcePolyfill(
-		`${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`,
+		ENVIRONMENT.baseURL
+			? `${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`
+			: withBasePath(`${apiV1}logs/tail?${queryParams}`),
 		{
 			headers: {
 				Authorization: `Bearer ${getLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN)}`,

frontend/src/api/trace/getTraceV3.tsx

@@ -1,72 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
-	SpanV3,
-} from 'types/api/trace/getTraceV3';
-
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
-	let uncollapsedSpans = [...props.uncollapsedSpans];
-	if (!props.isSelectedSpanIDUnCollapsed) {
-		uncollapsedSpans = uncollapsedSpans.filter(
-			(node) => node !== props.selectedSpanId,
-		);
-	} else if (
-		props.selectedSpanId &&
-		!uncollapsedSpans.includes(props.selectedSpanId)
-	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
-		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
-		uncollapsedSpans.push(props.selectedSpanId);
-	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-		limit: 10000,
-	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
-		`/traces/${props.traceId}/waterfall`,
-		omit(postData, 'traceId'),
-	);
-
-	// V3 API wraps response in { status, data }
-	const rawPayload = (response.data as any).data || response.data;
-
-	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
-		...span,
-		'service.name': span.resource?.['service.name'] || '',
-	}));
-
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
-	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
-	// Convert by using the first span's timestamp as the base if there's a mismatch.
-	let { startTimestampMillis, endTimestampMillis } = rawPayload;
-	if (
-		spans.length > 0 &&
-		spans[0].timestamp > 0 &&
-		startTimestampMillis < spans[0].timestamp / 10
-	) {
-		const durationMillis = endTimestampMillis - startTimestampMillis;
-		startTimestampMillis = spans[0].timestamp;
-		endTimestampMillis = startTimestampMillis + durationMillis;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: {
-			...rawPayload,
-			spans,
-			startTimestampMillis,
-			endTimestampMillis,
-		},
-	};
-};
-
-export default getTraceV3;

frontend/src/auto-import-registry.d.ts

@@ -24,8 +24,7 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
-import '@signozhq/tooltip';
-import '@signozhq/ui';
 import '@signozhq/tabs';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
+import '@signozhq/ui';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -9,6 +9,7 @@ import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
@@ -54,7 +55,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -1,40 +0,0 @@
-.details-header {
-	// ghost + secondary missing hover bg token in @signozhq/button
-	--button-ghost-hover-background: var(--l3-background);
-
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	border-bottom: 1px solid var(--l1-border);
-	height: 36px;
-	background: var(--l2-background);
-
-	&__icon-btn {
-		flex-shrink: 0;
-	}
-
-	&__title {
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--l1-foreground);
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&__actions {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		flex-shrink: 0;
-	}
-
-	&__nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -1,59 +0,0 @@
-import { ReactNode } from 'react';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-
-import './DetailsHeader.styles.scss';
-
-export interface HeaderAction {
-	key: string;
-	component: ReactNode; // check later if we can use direct btn itself or not.
-}
-
-export interface DetailsHeaderProps {
-	title: string;
-	onClose: () => void;
-	actions?: HeaderAction[];
-	closePosition?: 'left' | 'right';
-	className?: string;
-}
-
-function DetailsHeader({
-	title,
-	onClose,
-	actions,
-	closePosition = 'right',
-	className,
-}: DetailsHeaderProps): JSX.Element {
-	const closeButton = (
-		<Button
-			variant="ghost"
-			size="icon"
-			color="secondary"
-			onClick={onClose}
-			aria-label="Close"
-			className="details-header__icon-btn"
-		>
-			<X size={14} />
-		</Button>
-	);
-
-	return (
-		<div className={`details-header ${className || ''}`}>
-			{closePosition === 'left' && closeButton}
-
-			<span className="details-header__title">{title}</span>
-
-			{actions && (
-				<div className="details-header__actions">
-					{actions.map((action) => (
-						<div key={action.key}>{action.component}</div>
-					))}
-				</div>
-			)}
-
-			{closePosition === 'right' && closeButton}
-		</div>
-	);
-}
-
-export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -1,7 +0,0 @@
-.details-panel-drawer {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,36 +0,0 @@
-import { DrawerWrapper } from '@signozhq/drawer';
-
-import './DetailsPanelDrawer.styles.scss';
-
-interface DetailsPanelDrawerProps {
-	isOpen: boolean;
-	onClose: () => void;
-	children: React.ReactNode;
-	className?: string;
-}
-
-function DetailsPanelDrawer({
-	isOpen,
-	onClose,
-	children,
-	className,
-}: DetailsPanelDrawerProps): JSX.Element {
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			direction="right"
-			type="panel"
-			showOverlay={false}
-			allowOutsideClick
-			className={`details-panel-drawer ${className || ''}`}
-			content={<div className="details-panel-drawer__body">{children}</div>}
-		/>
-	);
-}
-
-export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -1,8 +0,0 @@
-export type {
-	DetailsHeaderProps,
-	HeaderAction,
-} from './DetailsHeader/DetailsHeader';
-export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
-export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
-export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
-export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -1,10 +0,0 @@
-export interface DetailsPanelState {
-	isOpen: boolean;
-	open: () => void;
-	close: () => void;
-}
-
-export interface UseDetailsPanelOptions {
-	entityId: string | undefined;
-	onClose?: () => void;
-}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -1,29 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { DetailsPanelState, UseDetailsPanelOptions } from './types';
-
-function useDetailsPanel({
-	entityId,
-	onClose,
-}: UseDetailsPanelOptions): DetailsPanelState {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const prevEntityIdRef = useRef<string>('');
-
-	useEffect(() => {
-		const currentId = entityId || '';
-		if (currentId && currentId !== prevEntityIdRef.current) {
-			setIsOpen(true);
-		}
-		prevEntityIdRef.current = currentId;
-	}, [entityId]);
-
-	const open = useCallback(() => setIsOpen(true), []);
-	const close = useCallback(() => {
-		setIsOpen(false);
-		onClose?.();
-	}, [onClose]);
-
-	return { isOpen, open, close };
-}
-
-export default useDetailsPanel;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -31,6 +31,7 @@ import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 import { toAPIError } from 'utils/errorUtils';
 
 import DeleteMemberDialog from './DeleteMemberDialog';
@@ -387,7 +388,7 @@ function EditMemberDrawer({
 				pathParams: { id: member.id },
 			});
 			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				const link = getAbsoluteUrl(`/password-reset?token=${response.data.token}`);
 				setResetLink(link);
 				setResetLinkExpiresAt(
 					response.data.expiresAt

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -13,6 +13,7 @@ import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 const routesToBeSharedWithTime = [
 	ROUTES.LOGS_EXPLORER,
@@ -80,17 +81,13 @@ function ShareURLModal(): JSX.Element {
 
 				urlQuery.delete(QueryParams.relativeTime);
 
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			} else {
 				urlQuery.delete(QueryParams.startTime);
 				urlQuery.delete(QueryParams.endTime);
 
 				urlQuery.set(QueryParams.relativeTime, selectedTime);
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			}
 		}
 

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -14,6 +14,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
@@ -188,7 +189,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -196,7 +197,7 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -14,6 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -154,7 +155,7 @@ function LaunchChatSupport({
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -14,7 +15,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	};
 	return (

frontend/src/components/LogDetail/index.tsx

@@ -15,6 +15,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
+import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
@@ -44,7 +45,6 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { JsonView } from 'periscope/components/JsonView';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -527,9 +527,7 @@ function LogDetailInner({
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && (
-					<JsonView data={LogJsonData} height="68vh" />
-				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -76,7 +77,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {

frontend/src/components/QueryBuilderV2/QueryV2/previousQuery.utils.ts

@@ -1,10 +1,13 @@
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import removeSessionStorageApi from 'api/browser/sessionstorage/remove';
+import setSessionStorageApi from 'api/browser/sessionstorage/set';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export const PREVIOUS_QUERY_KEY = 'previousQuery';
 
 function getPreviousQueryFromStore(): Record<string, IBuilderQuery> {
 	try {
-		const raw = sessionStorage.getItem(PREVIOUS_QUERY_KEY);
+		const raw = getSessionStorageApi(PREVIOUS_QUERY_KEY);
 		if (!raw) {
 			return {};
 		}
@@ -17,7 +20,7 @@ function getPreviousQueryFromStore(): Record<string, IBuilderQuery> {
 
 function writePreviousQueryToStore(store: Record<string, IBuilderQuery>): void {
 	try {
-		sessionStorage.setItem(PREVIOUS_QUERY_KEY, JSON.stringify(store));
+		setSessionStorageApi(PREVIOUS_QUERY_KEY, JSON.stringify(store));
 	} catch {
 		// ignore quota or serialization errors
 	}
@@ -63,7 +66,7 @@ export const removeKeyFromPreviousQuery = (key: string): void => {
 
 export const clearPreviousQuery = (): void => {
 	try {
-		sessionStorage.removeItem(PREVIOUS_QUERY_KEY);
+		removeSessionStorageApi(PREVIOUS_QUERY_KEY);
 	} catch {
 		// no-op
 	}

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -108,8 +108,7 @@ function DynamicColumnTable({
 		// Update URL with new page number while preserving other params
 		urlQuery.set('page', page.toString());
 
-		const newUrl = `${window.location.pathname}?${urlQuery.toString()}`;
-		safeNavigate(newUrl);
+		safeNavigate({ search: `?${urlQuery.toString()}` });
 
 		// Call original pagination handler if provided
 		if (pagination?.onChange && !!pageSize) {

frontend/src/components/ResizeTable/utils.ts

@@ -1,3 +1,6 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+
 import { DynamicColumnsKey } from './contants';
 import {
 	GetNewColumnDataFunction,
@@ -12,7 +15,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 }) => {
 	let columnVisibilityData: { [key: string]: boolean };
 	try {
-		const storedData = localStorage.getItem(tablesource);
+		const storedData = getLocalStorageKey(tablesource);
 		if (typeof storedData === 'string' && dynamicColumns) {
 			columnVisibilityData = JSON.parse(storedData);
 			return dynamicColumns.filter((column) => {
@@ -28,7 +31,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 			initialColumnVisibility[key] = false;
 		});
 
-		localStorage.setItem(tablesource, JSON.stringify(initialColumnVisibility));
+		setLocalStorageKey(tablesource, JSON.stringify(initialColumnVisibility));
 	} catch (error) {
 		console.error(error);
 	}
@@ -42,14 +45,14 @@ export const setVisibleColumns = ({
 	dynamicColumns,
 }: SetVisibleColumnsProps): void => {
 	try {
-		const storedData = localStorage.getItem(tablesource);
+		const storedData = getLocalStorageKey(tablesource);
 		if (typeof storedData === 'string' && dynamicColumns) {
 			const columnVisibilityData = JSON.parse(storedData);
 			const { key } = dynamicColumns[index];
 			if (key) {
 				columnVisibilityData[key] = checked;
 			}
-			localStorage.setItem(tablesource, JSON.stringify(columnVisibilityData));
+			setLocalStorageKey(tablesource, JSON.stringify(columnVisibilityData));
 		}
 	} catch (error) {
 		console.error(error);

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -1,20 +0,0 @@
-.timeline-v3-container {
-	overflow: visible;
-	position: relative;
-}
-
-.timeline-v3-cursor-badge {
-	position: absolute;
-	top: 0;
-	transform: translateX(-50%);
-	background: var(--l3-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	padding: 2px 8px;
-	font-size: 11px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-	white-space: nowrap;
-	pointer-events: none;
-	z-index: 1;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,119 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { resolveTimeFromInterval } from 'components/TimelineV2/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { toFixed } from 'utils/toFixed';
-
-import {
-	getIntervals,
-	getIntervalUnit,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-	/** Cursor X as a fraction of the timeline width (0–1). null = no cursor. */
-	cursorXPercent?: number | null;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-		cursorXPercent,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	const spread = endTimestamp - startTimestamp;
-
-	useEffect(() => {
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const newIntervals = getIntervals(
-			intervalisedSpread,
-			spread,
-			offsetTimestamp,
-		);
-
-		setIntervals(newIntervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp, spread]);
-
-	// Compute cursor time label using the same unit as timeline ticks
-	const cursorLabel = useMemo(() => {
-		if (cursorXPercent == null || spread <= 0) {
-			return null;
-		}
-
-		const timeAtCursor = offsetTimestamp + cursorXPercent * spread;
-		const unit = getIntervalUnit(spread, offsetTimestamp);
-		const formatted = toFixed(resolveTimeFromInterval(timeAtCursor, unit), 2);
-		return `${formatted}${unit.name}`;
-	}, [cursorXPercent, spread, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <div />;
-	}
-
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
-	const svgHeight = timelineHeight * 2.5;
-	const cursorX = cursorXPercent != null ? cursorXPercent * width : null;
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={svgHeight}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-
-			{/* Cursor time badge — DOM element for easy CSS styling */}
-			{cursorX !== null && cursorLabel && (
-				<div className="timeline-v3-cursor-badge" style={{ left: cursorX }}>
-					{cursorLabel}
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,109 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/**
- * Select the interval unit matching the timeline's logic.
- * Exported so crosshair labels use the same unit as timeline ticks.
- */
-export function getIntervalUnit(
-	spread: number,
-	offsetTimestamp: number,
-): IIntervalUnit {
-	const minIntervals = 6;
-	const intervalSpread = spread / minIntervals;
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let unit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		if (valueForUnitSelection * INTERVAL_UNITS[idx].multiplier >= 1) {
-			unit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-	return unit;
-}
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	// Only show even-interval ticks — skip the trailing partial tick at the edge.
-	// The last even tick sits before the full width, so it doesn't conflict with
-	// span duration labels that may have sub-millisecond precision.
-	let elapsedIntervals = 0;
-
-	while (
-		elapsedIntervals + intervalSpreadNormalized <= baseSpread &&
-		intervals.length < 20
-	) {
-		elapsedIntervals += intervalSpreadNormalized;
-		const labelTime = offsetTimestamp + elapsedIntervals;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (elapsedIntervals / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}

frontend/src/constants/localStorage.ts

@@ -37,6 +37,5 @@ export enum LOCALSTORAGE {
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
-	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -32,7 +32,6 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
-	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/constants/routes.ts

@@ -8,7 +8,6 @@ const ROUTES = {
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
-	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED: '/get-started',

frontend/src/constants/theme.ts

@@ -33,102 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		blue1: '#2F80ED',
-		blue2: '#3366E6',
-		blue3: '#4682B4',
-		blue4: '#1F63E0',
-		blue5: '#3A7AED',
-		blue6: '#5A9DF5',
-		blue7: '#2874A6',
-		blue8: '#2E86C1',
-		blue9: '#3498DB',
-		blue10: '#1E90FF',
-		blue11: '#4169E1',
-
-		// Cyans / Teals
-		cyan1: '#00CEC9',
-		cyan2: '#22A6F2',
-		cyan3: '#00B0AA',
-		cyan4: '#33D6C2',
-		cyan5: '#66E9DA',
-		cyan6: '#48DBFB',
-		cyan7: '#00BFFF',
-		cyan8: '#63B8FF',
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#76D7C4',
-		teal5: '#20B2AA',
-
-		// Greens
-		green1: '#27AE60',
-		green2: '#3CB371',
-		green3: '#1E8449',
-		green4: '#2ECC71',
-		green5: '#58D68D',
-		green6: '#229954',
-		green7: '#52BE80',
-		green8: '#82E0AA',
-		green9: '#73C6B6',
-
-		// Limes
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#84CC16',
-		lime4: '#65A30D',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-		yellow4: '#F4D03F',
-		yellow5: '#D4AC0D',
-
-		// Golds / Ambers
-		gold1: '#F2C94C',
-		gold2: '#FFD93D',
-		gold3: '#FFCA28',
-		gold4: '#B7950B',
-		gold5: '#D4A017',
-
-		// Oranges (non-red)
-		orange1: '#F39C12',
-		orange2: '#E67E22',
-		orange3: '#F5B041',
-		orange4: '#D35400',
-		orange5: '#EB984E',
-		orange6: '#FAD7A0',
-
-		// Purples / Violets
-		purple1: '#BB6BD9',
-		purple2: '#9B51E0',
-		purple3: '#DA77F2',
-		purple4: '#C77DFF',
-		purple5: '#6C5CE7',
-		purple6: '#8E44AD',
-		purple7: '#9B59B6',
-		purple8: '#BB8FCE',
-		purple9: '#7D3C98',
-		purple10: '#A569BD',
-
-		// Lavenders
-		lavender1: '#AF7AC5',
-		lavender2: '#C39BD3',
-		lavender3: '#D2B4DE',
-
-		// Pinks / Magentas
-		pink1: '#E91E8C',
-		pink2: '#FF6FD8',
-		pink3: '#F06292',
-		pink4: '#CE93D8',
-
-		// Salmons / Corals (distinct from error red)
-		salmon1: '#FF8A65',
-		salmon2: '#FFAB91',
-		salmon3: '#E0876A',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -9,6 +9,7 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
+import { openInNewTab } from 'utils/navigation';
 
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 
@@ -94,20 +95,14 @@ function DependentServices({
 					}}
 					onRow={(record): { onClick: () => void; className: string } => ({
 						onClick: (): void => {
-							const url = new URL(
-								`/services/${
-									record.serviceData.serviceName &&
-									record.serviceData.serviceName !== '-'
-										? record.serviceData.serviceName
-										: ''
-								}`,
-								window.location.origin,
-							);
+							const serviceName =
+								record.serviceData.serviceName && record.serviceData.serviceName !== '-'
+									? record.serviceData.serviceName
+									: '';
 							const urlQuery = new URLSearchParams();
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
-							url.search = urlQuery.toString();
-							window.open(url.toString(), '_blank');
+							openInNewTab(`/services/${serviceName}?${urlQuery.toString()}`);
 						},
 						className: 'clickable-row',
 					})}

frontend/src/container/AppLayout/index.tsx

@@ -73,6 +73,7 @@ import {
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
@@ -461,7 +462,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -31,6 +31,7 @@ import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
@@ -324,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			updateCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		} else {
 			logEvent('Billing : Manage Billing', {
@@ -333,7 +334,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			manageCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -7,6 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import { getOptionList } from './config';
 import { AlertTypeCard, SelectTypeContainer } from './styles';
@@ -55,7 +56,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 			page: 'New alert data source selection page',
 		});
 
-		window.open(url, '_blank');
+		openInNewTab(url);
 	}
 	const renderOptions = useMemo(
 		() => (

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

@@ -14,6 +14,7 @@ import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
@@ -387,7 +388,7 @@ export function NotificationChannelsNotFoundContent({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								window.open(ROUTES.CHANNELS_NEW, '_blank');
+								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
 						>
 							here.

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -48,6 +48,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
+						// eslint-disable-next-line rulesdir/no-raw-absolute-path
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -16,6 +16,8 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import './PublicDashboard.styles.scss';
 
@@ -213,7 +215,7 @@ function PublicDashboardSetting(): JSX.Element {
 
 		try {
 			setCopyPublicDashboardURL(
-				`${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+				getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 			);
 			toast.success('Copied Public Dashboard URL successfully');
 		} catch (error) {
@@ -222,7 +224,7 @@ function PublicDashboardSetting(): JSX.Element {
 	};
 
 	const publicDashboardURL = useMemo(
-		() => `${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+		() => getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 		[publicDashboardResponse],
 	);
 
@@ -294,7 +296,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										window.open(publicDashboardURL, '_blank');
+										openInNewTab(publicDashboardURL);
 									}
 								}}
 							/>

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react';
 import { Button } from 'antd';
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
 import ROUTES from 'constants/routes';
 import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -26,7 +27,7 @@ function DashboardBreadcrumbs(): JSX.Element {
 	const { title = '', image = Base64Icons[0] } = selectedData || {};
 
 	const goToListPage = useCallback(() => {
-		const dashboardsListQueryParamsString = sessionStorage.getItem(
+		const dashboardsListQueryParamsString = getSessionStorageApi(
 			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
 		);
 

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,3 +1,6 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import removeLocalStorageKey from 'api/browser/localstorage/remove';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
 
 import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
@@ -12,7 +15,7 @@ export function getStoredSeriesVisibility(
 	widgetId: string,
 ): SeriesVisibilityItem[] | null {
 	try {
-		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+		const storedData = getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
 		if (!storedData) {
 			return null;
@@ -29,7 +32,7 @@ export function getStoredSeriesVisibility(
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it
-			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+			removeLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 		}
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
@@ -42,7 +45,7 @@ export function updateSeriesVisibilityToLocalStorage(
 ): void {
 	let visibilityStates: GraphVisibilityState[] = [];
 	try {
-		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+		const storedData = getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 		visibilityStates = JSON.parse(storedData || '[]');
 	} catch (error) {
 		if (error instanceof SyntaxError) {
@@ -63,7 +66,7 @@ export function updateSeriesVisibilityToLocalStorage(
 		];
 	}
 
-	localStorage.setItem(
+	setLocalStorageKey(
 		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 		JSON.stringify(visibilityStates),
 	);

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -123,7 +123,6 @@
 				&__row {
 					display: flex;
 					flex-direction: row;
-					flex-wrap: wrap;
 					align-items: flex-end;
 					max-width: 825px;
 					gap: 25px;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,6 +22,8 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import axios from 'axios';
@@ -472,7 +474,7 @@ function ExplorerOptions({
 		value: string;
 	}): void => {
 		// Retrieve stored views from local storage
-		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+		const storedViews = getLocalStorageKey(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
 
 		// Initialize or parse the stored views
 		const updatedViews: PreservedViewsInLocalStorage = storedViews
@@ -486,7 +488,7 @@ function ExplorerOptions({
 		};
 
 		// Save the updated views back to local storage
-		localStorage.setItem(
+		setLocalStorageKey(
 			PRESERVED_VIEW_LOCAL_STORAGE_KEY,
 			JSON.stringify(updatedViews),
 		);
@@ -537,7 +539,7 @@ function ExplorerOptions({
 
 	const removeCurrentViewFromLocalStorage = (): void => {
 		// Retrieve stored views from local storage
-		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+		const storedViews = getLocalStorageKey(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
 
 		if (storedViews) {
 			// Parse the stored views
@@ -547,7 +549,7 @@ function ExplorerOptions({
 			delete parsedViews[PRESERVED_VIEW_TYPE];
 
 			// Update local storage with the modified views
-			localStorage.setItem(
+			setLocalStorageKey(
 				PRESERVED_VIEW_LOCAL_STORAGE_KEY,
 				JSON.stringify(parsedViews),
 			);
@@ -672,7 +674,7 @@ function ExplorerOptions({
 		}
 
 		const parsedPreservedView = JSON.parse(
-			localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
+			getLocalStorageKey(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
 		);
 
 		const preservedView = parsedPreservedView[PRESERVED_VIEW_TYPE] || {};

frontend/src/container/ExplorerOptions/utils.ts

@@ -1,4 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { showErrorNotification } from 'components/ExplorerCard/utils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
@@ -71,7 +73,7 @@ export const generateRGBAFromHex = (hex: string, opacity: number): string =>
 
 export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
 	try {
-		const showExplorerToolbar = localStorage.getItem(
+		const showExplorerToolbar = getLocalStorageKey(
 			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 		);
 		if (showExplorerToolbar === null) {
@@ -84,7 +86,7 @@ export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
 				[DataSource.TRACES]: true,
 				[DataSource.LOGS]: true,
 			};
-			localStorage.setItem(
+			setLocalStorageKey(
 				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 				JSON.stringify(parsedShowExplorerToolbar),
 			);
@@ -103,13 +105,13 @@ export const setExplorerToolBarVisibility = (
 	dataSource: string,
 ): void => {
 	try {
-		const showExplorerToolbar = localStorage.getItem(
+		const showExplorerToolbar = getLocalStorageKey(
 			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 		);
 		if (showExplorerToolbar) {
 			const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar);
 			parsedShowExplorerToolbar[dataSource] = value;
-			localStorage.setItem(
+			setLocalStorageKey(
 				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 				JSON.stringify(parsedShowExplorerToolbar),
 			);

frontend/src/container/ForgotPassword/index.tsx

@@ -10,6 +10,7 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+import { getBaseUrl } from 'utils/basePath';
 
 import tvUrl from '@/assets/svgs/tv.svg';
 
@@ -105,7 +106,7 @@ function ForgotPassword({
 			data: {
 				email: values.email,
 				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
+				frontendBaseURL: getBaseUrl(),
 			},
 		});
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -15,6 +15,7 @@ import { AlertDef, Labels } from 'types/api/alerts/def';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
+import { openInNewTab } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import ChannelSelect from './ChannelSelect';
@@ -87,7 +88,7 @@ function BasicInfo({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			ruleId: isNewRule ? 0 : alertDef?.id,
 		});
-		window.open(ROUTES.CHANNELS_NEW, '_blank');
+		openInNewTab(ROUTES.CHANNELS_NEW);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	const hasLoggedEvent = useRef(false);

frontend/src/container/FormAlertRules/index.tsx

@@ -46,6 +46,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+import { openInNewTab } from 'utils/navigation';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -771,7 +772,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	}
 

frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts

@@ -1,3 +1,5 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import getLabelName from 'lib/getLabelName';
 import { QueryData } from 'types/api/widgets/getQuery';
@@ -100,7 +102,7 @@ export const saveLegendEntriesToLocalStorage = ({
 
 	try {
 		existingEntries = JSON.parse(
-			localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) || '[]',
+			getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) || '[]',
 		);
 	} catch (error) {
 		console.error('Error parsing LEGEND_GRAPH from local storage', error);
@@ -115,7 +117,7 @@ export const saveLegendEntriesToLocalStorage = ({
 	}
 
 	try {
-		localStorage.setItem(
+		setLocalStorageKey(
 			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 			JSON.stringify(existingEntries),
 		);

frontend/src/container/GridCardLayout/GridCard/utils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import type { NotificationInstance } from 'antd/es/notification/interface';
+import getLocalStorageKey from 'api/browser/localstorage/get';
 import { NavigateToExplorerProps } from 'components/CeleryTask/useNavigateToExplorer';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -44,8 +45,8 @@ export const getLocalStorageGraphVisibilityState = ({
 		],
 	};
 
-	if (localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
-		const legendGraphFromLocalStore = localStorage.getItem(
+	if (getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
+		const legendGraphFromLocalStore = getLocalStorageKey(
 			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 		);
 		let legendFromLocalStore: {
@@ -94,8 +95,8 @@ export const getGraphVisibilityStateOnDataChange = ({
 		graphVisibilityStates: Array(options.series.length).fill(true),
 		legendEntry: showAllDataSet(options),
 	};
-	if (localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
-		const legendGraphFromLocalStore = localStorage.getItem(
+	if (getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
+		const legendGraphFromLocalStore = getLocalStorageKey(
 			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 		);
 		let legendFromLocalStore: {

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -10,6 +10,7 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import dialsUrl from '@/assets/Icons/dials.svg';
 
@@ -114,7 +115,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							window.open(getLink(), '_blank');
+							openInNewTab(getLink());
 						} else {
 							safeNavigate(getLink());
 						}

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -9,6 +9,7 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { openInNewTab } from 'utils/navigation';
 
 import containerPlusUrl from '@/assets/Icons/container-plus.svg';
 import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
@@ -51,7 +52,7 @@ function DataSourceInfo({
 		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
 			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 		} else {
-			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
+			openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 		}
 	};
 

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -8,6 +8,7 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import './HomeChecklist.styles.scss';
 
@@ -99,11 +100,7 @@ function HomeChecklist({
 														) {
 															history.push(item.toRoute || '');
 														} else {
-															window?.open(
-																item.docsLink || '',
-																'_blank',
-																'noopener noreferrer',
-															);
+															openInNewTab(item.docsLink || '');
 														}
 													}}
 												>
@@ -119,7 +116,7 @@ function HomeChecklist({
 																step: item.id,
 															});
 
-															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
+															openInNewTab(item.docsLink ?? '');
 														}}
 													>
 														<BookOpenText size={16} />

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -31,6 +31,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -79,11 +80,7 @@ const EmptyState = memo(
 								) {
 									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
-									window?.open(
-										DOCS_LINKS.ADD_DATA_SOURCE,
-										'_blank',
-										'noopener noreferrer',
-									);
+									openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 								}
 							}}
 						>

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -17,6 +17,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -133,11 +134,7 @@ export default function ServiceTraces({
 									) {
 										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										window?.open(
-											DOCS_LINKS.ADD_DATA_SOURCE,
-											'_blank',
-											'noopener noreferrer',
-										);
+										openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 									}
 								}}
 							>

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -51,6 +51,7 @@ import {
 	LogsAggregatorOperator,
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import { filterDuplicateFilters } from '../commonUtils';
@@ -569,10 +570,7 @@ function K8sBaseDetails<T>({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -591,10 +589,7 @@ function K8sBaseDetails<T>({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.tsx

@@ -4,6 +4,7 @@ import {
 	CloudintegrationtypesServiceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { withBasePath } from 'utils/basePath';
 
 import './ServiceDashboards.styles.scss';
 
@@ -44,7 +45,11 @@ function ServiceDashboards({
 									return;
 								}
 								if (event.metaKey || event.ctrlKey) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
 									return;
 								}
 								safeNavigate(dashboardUrl);
@@ -54,7 +59,11 @@ function ServiceDashboards({
 									return;
 								}
 								if (event.button === 1) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
 								}
 							}}
 							onKeyDown={(event): void => {

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';
 
 interface AlertInfoCardProps {
 	header: string;
@@ -19,7 +20,7 @@ function AlertInfoCard({
 			className="alert-info-card"
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 		>
 			<div className="alert-card-text">

frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined, PlayCircleFilled } from '@ant-design/icons';
 import { Flex, Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';
 
 interface InfoLinkTextProps {
 	infoText: string;
@@ -20,7 +21,7 @@ function InfoLinkText({
 		<Flex
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 			className="info-link-container"
 		>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -28,6 +28,8 @@ import {
 	Typography,
 } from 'antd';
 import type { TableProps } from 'antd/lib';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import createDashboard from 'api/v1/dashboards/create';
 import { AxiosError } from 'axios';
@@ -83,6 +85,8 @@ import {
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 import dashboardsUrl from '@/assets/Icons/dashboards.svg';
@@ -145,7 +149,7 @@ function DashboardsList(): JSX.Element {
 	);
 
 	const getLocalStorageDynamicColumns = (): DashboardDynamicColumns => {
-		const dashboardDynamicColumnsString = localStorage.getItem('dashboard');
+		const dashboardDynamicColumnsString = getLocalStorageKey('dashboard');
 		let dashboardDynamicColumns: DashboardDynamicColumns = {
 			createdAt: true,
 			createdBy: true,
@@ -159,7 +163,7 @@ function DashboardsList(): JSX.Element {
 				);
 
 				if (isEmpty(tempDashboardDynamicColumns)) {
-					localStorage.setItem('dashboard', JSON.stringify(dashboardDynamicColumns));
+					setLocalStorageKey('dashboard', JSON.stringify(dashboardDynamicColumns));
 				} else {
 					dashboardDynamicColumns = { ...tempDashboardDynamicColumns };
 				}
@@ -167,7 +171,7 @@ function DashboardsList(): JSX.Element {
 				console.error(error);
 			}
 		} else {
-			localStorage.setItem('dashboard', JSON.stringify(dashboardDynamicColumns));
+			setLocalStorageKey('dashboard', JSON.stringify(dashboardDynamicColumns));
 		}
 
 		return dashboardDynamicColumns;
@@ -181,7 +185,7 @@ function DashboardsList(): JSX.Element {
 		visibleColumns: DashboardDynamicColumns,
 	): void {
 		try {
-			localStorage.setItem('dashboard', JSON.stringify(visibleColumns));
+			setLocalStorageKey('dashboard', JSON.stringify(visibleColumns));
 		} catch (error) {
 			console.error(error);
 		}
@@ -457,7 +461,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														window.open(getLink(), '_blank');
+														openInNewTab(getLink());
 													}}
 												>
 													Open in New Tab
@@ -469,7 +473,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														setCopy(`${window.location.origin}${getLink()}`);
+														setCopy(getAbsoluteUrl(getLink()));
 													}}
 												>
 													Copy Link

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,6 +1,7 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
+import { openInNewTab } from 'utils/navigation';
 
 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
@@ -12,7 +13,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 
 	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 		if (event.metaKey || event.ctrlKey) {
-			window.open(getLink(), '_blank');
+			openInNewTab(getLink());
 		} else {
 			history.push(getLink());
 		}

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -17,6 +17,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { withBasePath } from 'utils/basePath';
 
 import { useContextLogData } from './useContextLogData';
 
@@ -116,7 +117,7 @@ function ContextLogRenderer({
 			);
 
 			const link = `${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`;
-			window.open(link, '_blank', 'noopener,noreferrer');
+			window.open(withBasePath(link), '_blank', 'noopener,noreferrer');
 		},
 		[query, urlQuery],
 	);

frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss

@@ -11,12 +11,6 @@
 	}
 }
 
-.infra-metrics-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 24px;
-}
-
 .infra-metrics-card {
 	margin: 1rem 0;
 	height: 300px;

frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -163,16 +163,16 @@ function NodeMetrics({
 		);
 	};
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={widgetInfo[idx].title}>
+				<Col span={12} key={widgetInfo[idx].title}>
 					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }
 

frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -146,16 +146,16 @@ function PodMetrics({
 	};
 
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={podWidgetInfo[idx].title}>
+				<Col span={12} key={podWidgetInfo[idx].title}>
 					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }
 

frontend/src/container/LogDetailedView/TableView.tsx

@@ -34,6 +34,7 @@ import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { openInNewTab } from 'utils/navigation';
 
 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
@@ -191,7 +192,7 @@ function TableView({
 
 			if (event.ctrlKey || event.metaKey) {
 				// open the trace in new tab
-				window.open(route, '_blank');
+				openInNewTab(route);
 			} else {
 				history.push(route);
 			}

frontend/src/container/Login/index.tsx

@@ -213,6 +213,7 @@ function Login(): JSX.Element {
 			if (isCallbackAuthN) {
 				const url = form.getFieldValue('url');
 
+				// eslint-disable-next-line rulesdir/no-raw-absolute-path
 				window.location.href = url;
 			}
 		} catch (error) {

frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx

@@ -34,6 +34,7 @@ import ROUTES from 'constants/routes';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDragColumns from 'hooks/useDragColumns';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 import { infinityDefaultStyles } from '../InfinityTableView/config';
 import { TanStackTableStyled } from '../InfinityTableView/styles';
@@ -239,7 +240,7 @@ const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 				urlQuery.delete(QueryParams.activeLogId);
 				urlQuery.delete(QueryParams.relativeTime);
 				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+				const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);
 
 				setCopy(link);
 				toast.success('Copied to clipboard', { position: 'top-right' });

frontend/src/container/MetricsApplication/utils.ts

@@ -1,5 +1,6 @@
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { withBasePath } from 'utils/basePath';
 
 import { TopOperationList } from './TopOperationsTable';
 import { NavigateToTraceProps } from './types';
@@ -37,7 +38,7 @@ export const navigateToTrace = ({
 	}=${JSONCompositeQuery}`;
 
 	if (openInNewTab) {
-		window.open(newTraceExplorerPath, '_blank');
+		window.open(withBasePath(newTraceExplorerPath), '_blank');
 	} else {
 		safeNavigate(newTraceExplorerPath);
 	}

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -9,6 +9,7 @@ import {
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { Bell, Grid } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
@@ -67,9 +68,8 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={alert.alertId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${alert.alertId}`,
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
@@ -90,11 +90,10 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboardId,
 								}),
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -18,6 +18,7 @@ import {
 import useContextVariables from 'hooks/dashboard/useContextVariables';
 import { Plus, Trash2 } from 'lucide-react';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
+import { getBaseUrl } from 'utils/basePath';
 
 import VariablesDropdown from './VariablesDropdown';
 
@@ -84,7 +85,7 @@ function UpdateContextLinks({
 	);
 
 	// Function to get current domain
-	const getCurrentDomain = (): string => window.location.origin;
+	const getCurrentDomain = (): string => getBaseUrl();
 
 	// Function to handle variable selection from dropdown
 	const handleVariableSelect = (

frontend/src/container/NoLogs/NoLogs.tsx

@@ -6,6 +6,7 @@ import history from 'lib/history';
 import { ArrowUpRight } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 import DOCLINKS from 'utils/docLinks';
+import { openInNewTab } from 'utils/navigation';
 
 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
 
@@ -42,11 +43,11 @@ export default function NoLogs({
 			}
 			history.push(link);
 		} else if (dataSource === 'traces') {
-			window.open(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE, '_blank');
+			openInNewTab(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE);
 		} else if (dataSource === DataSource.METRICS) {
-			window.open(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE, '_blank');
+			openInNewTab(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE);
 		} else {
-			window.open(`${DOCLINKS.USER_GUIDE}${dataSource}/`, '_blank');
+			openInNewTab(`${DOCLINKS.USER_GUIDE}${dataSource}/`);
 		}
 	};
 	return (

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -18,6 +18,7 @@ import {
 	Trash2,
 } from 'lucide-react';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 import { v4 as uuid } from 'uuid';
 
 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
@@ -60,7 +61,7 @@ function InviteTeamMembers({
 		email: '',
 		role: '',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};
 

frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx

@@ -8,6 +8,7 @@ import { DOCS_BASE_URL } from 'constants/app';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowUpRight, Copy, Info, Key, TriangleAlert } from 'lucide-react';
+import { withBasePath } from 'utils/basePath';
 
 import './IngestionDetails.styles.scss';
 
@@ -215,7 +216,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 							</a>
 							. To create a new one,{' '}
 							<a
-								href="/settings/ingestion-settings"
+								href={withBasePath('/settings/ingestion-settings')}
 								target="_blank"
 								className="learn-more"
 								rel="noreferrer"

frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx

@@ -8,6 +8,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import { ArrowRight, CheckCircle, Plus, TriangleAlert, X } from 'lucide-react';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 import { v4 as uuid } from 'uuid';
 
 import './InviteTeamMembers.styles.scss';
@@ -56,7 +57,7 @@ function InviteTeamMembers({
 		email: '',
 		role: 'EDITOR',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};
 

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

@@ -18,6 +18,7 @@ import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 import CreateEdit from './CreateEdit/CreateEdit';
 import SSOEnforcementToggle from './SSOEnforcementToggle';
@@ -145,7 +146,7 @@ function AuthDomain(): JSX.Element {
 						return <span className="auth-domain-list-na">N/A</span>;
 					}
 
-					const href = `${window.location.origin}/${relayPath}`;
+					const href = getAbsoluteUrl(`/${relayPath}`);
 					return <CopyToClipboard textToCopy={href} />;
 				},
 			},

frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx

@@ -4,6 +4,7 @@ import { Button, Form, FormInstance, Modal } from 'antd';
 import sendInvite from 'api/v1/invite/create';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import InviteTeamMembers from '../InviteTeamMembers';
 import { InviteMemberFormValues } from '../utils';
@@ -40,7 +41,7 @@ function InviteUserModal(props: InviteUserModalProps): JSX.Element {
 								email: member.email,
 								name: member?.name,
 								role: member.role,
-								frontendBaseUrl: window.location.origin,
+								frontendBaseUrl: getBaseUrl(),
 							});
 
 							notifications.success({

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

@@ -14,6 +14,7 @@ import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { openInNewTab } from 'utils/navigation';
 
 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
@@ -115,7 +116,7 @@ const useBaseAggregateOptions = ({
 					key={id}
 					icon={<LinkOutlined />}
 					onClick={(): void => {
-						window.open(url, '_blank');
+						openInNewTab(url);
 						onClose?.();
 					}}
 				>

frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx

@@ -14,6 +14,7 @@ import { ModalTitle } from 'container/PipelinePage/PipelineListsView/styles';
 import { Check, Loader, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import { INITIAL_ROUTING_POLICY_DETAILS_FORM_STATE } from './constants';
 import {
@@ -76,7 +77,7 @@ function RoutingPolicyDetails({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								window.open(ROUTES.CHANNELS_NEW, '_blank');
+								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
 						>
 							here.

frontend/src/container/SideNav/SideNav.tsx

@@ -818,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		);
 
 		if (item && !('type' in item) && item.isExternal && item.url) {
-			window.open(item.url, '_blank');
+			openInNewTab(item.url);
 		}
 
 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;

frontend/src/container/SideNav/config.ts

@@ -46,7 +46,6 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.TRACES_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE_DETAIL]: [QueryParams.resourceAttributes],
-	[ROUTES.TRACE_DETAIL_OLD]: [QueryParams.resourceAttributes],
 	[ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes],
 	[ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.VERSION]: [QueryParams.resourceAttributes],

frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx

@@ -28,6 +28,7 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import noDataUrl from '@/assets/Icons/no-data.svg';
@@ -143,7 +144,7 @@ function SpanLogs({
 
 			const url = `${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`;
 
-			window.open(url, '_blank');
+			openInNewTab(url);
 		},
 		[
 			isLogSpanRelated,

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -23,6 +23,7 @@
 
 	&-empty-content {
 		height: 100%;
+		border: 1px solid var(--l1-border);
 		border-top: none;
 		display: flex;
 		flex-direction: column;

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx

@@ -17,6 +17,7 @@ import { BarChart2, Compass, X } from 'lucide-react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Span } from 'types/api/trace/getTraceV2';
 import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 import { RelatedSignalsViews } from '../constants';
 import SpanLogs from '../SpanLogs/SpanLogs';
@@ -158,9 +159,7 @@ function SpanRelatedSignals({
 		searchParams.set(QueryParams.endTime, endTimeMs.toString());
 
 		window.open(
-			`${window.location.origin}${
-				ROUTES.LOGS_EXPLORER
-			}?${searchParams.toString()}`,
+			getAbsoluteUrl(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`),
 			'_blank',
 			'noopener,noreferrer',
 		);

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -143,7 +143,6 @@ export const routesToSkip = [
 	ROUTES.SETTINGS,
 	ROUTES.LIST_ALL_ALERT,
 	ROUTES.TRACE_DETAIL,
-	ROUTES.TRACE_DETAIL_OLD,
 	ROUTES.ALL_CHANNELS,
 	ROUTES.USAGE_EXPLORER,
 	ROUTES.GET_STARTED,

frontend/src/container/Trace/TraceTable/index.tsx

@@ -31,6 +31,7 @@ import {
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 } from 'types/actions/trace';
 import { TraceReducer } from 'types/reducer/trace';
+import { openInNewTab } from 'utils/navigation';
 import { v4 } from 'uuid';
 
 dayjs.extend(duration);
@@ -214,7 +215,7 @@ function TraceTable(): JSX.Element {
 					event.preventDefault();
 					event.stopPropagation();
 					if (event.metaKey || event.ctrlKey) {
-						window.open(getLink(record), '_blank');
+						openInNewTab(getLink(record));
 					} else {
 						history.push(getLink(record));
 					}