feat(base-path): fix lint issues

feat(base-path): migrated more cases
fix(base-path): rename loadModule to loadStorageModule to avoid TS global scope collision
2026-04-23 12:20:31 +01:00 · 2026-04-23 12:35:15 +05:30 · 2026-04-23 12:27:18 +05:30 · 2026-04-23 12:27:18 +05:30 · 2026-04-23 12:27:18 +05:30 · 2026-04-23 12:27:14 +05:30
150 changed files with 1344 additions and 1637 deletions
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -286,6 +286,8 @@
    // Prevents useStore.getState() - export standalone actions instead
    "signoz/no-navigator-clipboard": "error",
    // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
+    "signoz/no-raw-absolute-path": "error",
+    // Prevents window.open(path), window.location.origin + path, window.location.href = path
    "no-restricted-imports": [
      "error",
      {
@@ -597,8 +599,9 @@
      "rules": {
        "import/first": "off",
        // Should ignore due to mocks
-        "signoz/no-navigator-clipboard": "off"
-        // Tests can use navigator.clipboard directly
+        "signoz/no-navigator-clipboard": "off",
+        // Tests can use navigator.clipboard directly,
+        "signoz/no-raw-absolute-path":"off"
      }
    },
    {
--- a/frontend/.stylelintrc.cjs
+++ b/frontend/.stylelintrc.cjs
@@ -1,3 +1,4 @@
+// oxlint-disable-next-line typescript/no-require-imports
 const path = require('path');

 module.exports = {
--- a/frontend/index.html
+++ b/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>
--- a/frontend/plugins/rules/no-raw-absolute-path.mjs
+++ b/frontend/plugins/rules/no-raw-absolute-path.mjs
@@ -0,0 +1,152 @@
+/**
+ * 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')
+	);
+}
+
+export default {
+	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 === 0) {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' });
+			},
+		};
+	},
+};
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -8,6 +8,7 @@
 import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
+import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';

 export default {
 	meta: {
@@ -17,5 +18,6 @@ export default {
 		'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
+		'no-raw-absolute-path': noRawAbsolutePath,
 	},
 };
--- a/frontend/src/ReactI18/index.tsx
+++ b/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: {
--- a/frontend/src/api/browser/localstorage/get.ts
+++ b/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 '';
 	}
--- a/frontend/src/api/browser/localstorage/remove.ts
+++ b/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;
--- a/frontend/src/api/browser/localstorage/set.ts
+++ b/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;
--- a/frontend/src/api/browser/sessionstorage/get.ts
+++ b/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;
--- a/frontend/src/api/browser/sessionstorage/remove.ts
+++ b/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;
--- a/frontend/src/api/browser/sessionstorage/set.ts
+++ b/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;
--- a/frontend/src/api/generatedAPIInstance.ts
+++ b/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,
--- a/frontend/src/api/index.ts
+++ b/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;
--- a/frontend/src/api/logs/livetail.ts
+++ b/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)}`,
--- a/frontend/src/api/thirdPartyApis/listOverview.ts
+++ b/frontend/src/api/thirdPartyApis/listOverview.ts
@@ -6,20 +6,15 @@ import { PayloadProps, Props } from 'types/api/thirdPartyApis/listOverview';

 const listOverview = async (
 	props: Props,
-	signal?: AbortSignal,
 ): Promise<SuccessResponseV2<PayloadProps>> => {
 	const { start, end, show_ip: showIp, filter } = props;
 	try {
-		const response = await axios.post(
-			`/third-party-apis/overview/list`,
-			{
-				start,
-				end,
-				show_ip: showIp,
-				filter,
-			},
-			{ signal },
-		);
+		const response = await axios.post(`/third-party-apis/overview/list`, {
+			start,
+			end,
+			show_ip: showIp,
+			filter,
+		});

 		return {
 			httpStatusCode: response.status,
--- a/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
+++ b/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,
--- a/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx
+++ b/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(),
 		});
 	};

--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -28,6 +28,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';
@@ -381,7 +382,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
--- a/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
+++ b/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()}`);
 			}
 		}

--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
@@ -17,6 +17,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';

@@ -191,7 +192,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -199,7 +200,7 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}
--- a/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx
+++ b/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(),
 		});
 	};

--- a/frontend/src/components/LearnMore/LearnMore.tsx
+++ b/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 (
--- a/frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx
+++ b/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 {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/previousQuery.utils.ts
+++ b/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
 	}
--- a/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss
+++ b/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss
@@ -1,26 +0,0 @@
-.placeholder {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	min-height: 240px;
-	width: 100%;
-	padding: 24px;
-	gap: 12px;
-}
-
-.emoji {
-	width: 48px;
-	height: 48px;
-}
-
-.text {
-	text-align: center;
-	font-size: 14px;
-	color: var(--muted-foreground);
-}
-
-.subText {
-	color: var(--foreground);
-}
--- a/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx
+++ b/frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx
@@ -1,31 +0,0 @@
-import { Typography } from 'antd';
-import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
-
-import styles from './QueryCancelledPlaceholder.module.scss';
-
-interface QueryCancelledPlaceholderProps {
-	subText?: string;
-}
-
-function QueryCancelledPlaceholder({
-	subText,
-}: QueryCancelledPlaceholderProps): JSX.Element {
-	return (
-		<div className={styles.placeholder}>
-			<img className={styles.emoji} src={eyesEmojiUrl} alt="eyes emoji" />
-			<Typography className={styles.text}>
-				Query cancelled.
-				<span className={styles.subText}>
-					{' '}
-					{subText || 'Click "Run Query" to load data.'}
-				</span>
-			</Typography>
-		</div>
-	);
-}
-
-QueryCancelledPlaceholder.defaultProps = {
-	subText: undefined,
-};
-
-export default QueryCancelledPlaceholder;
--- a/frontend/src/components/QueryCancelledPlaceholder/index.ts
+++ b/frontend/src/components/QueryCancelledPlaceholder/index.ts
@@ -1 +0,0 @@
-export { default } from './QueryCancelledPlaceholder';
--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/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) {
--- a/frontend/src/components/ResizeTable/utils.ts
+++ b/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);
--- a/frontend/src/constants/reactQuery.ts
+++ b/frontend/src/constants/reactQuery.ts
@@ -1,8 +0,0 @@
-/**
- * Maximum number of retries for a failed react-query request before giving up.
- * Used as the upper bound in the default `retry` predicate:
- *   `return failureCount < MAX_QUERY_RETRIES;`
- *
- * This retries up to 3 times (4 attempts total including the initial request).
- */
-export const MAX_QUERY_RETRIES = 3;
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -25,8 +25,7 @@ export const REACT_QUERY_KEY = {
 	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
-	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
-	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
+	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -21,7 +21,6 @@ import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
@@ -37,7 +36,6 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
-import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -123,13 +121,7 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();

-	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
-	const isCancelled = useAllErrorsQueryState((s) => s.isCancelled);
-
-	const [
-		{ isLoading, isFetching: isErrorsFetching, data },
-		errorCountResponse,
-	] = useQueries([
+	const [{ isLoading, data }, errorCountResponse] = useQueries([
 		{
 			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
 			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
@@ -170,12 +162,6 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
-
-	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
-	useEffect(() => {
-		setIsFetching(isFetching);
-	}, [isFetching, setIsFetching]);
-
 	const { notifications } = useNotifications();

 	useEffect(() => {
@@ -487,12 +473,6 @@ function AllErrors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [errorCountResponse.data?.payload]);

-	if (isCancelled && !data?.payload?.length) {
-		return (
-			<QueryCancelledPlaceholder subText='Click "Run Query" to load exceptions.' />
-		);
-	}
-
 	return (
 		<ResizeTable
 			columns={columns}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
+++ b/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',
 					})}
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
@@ -1,16 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
-import emptyStateUrl from 'assets/Icons/emptyState.svg';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -27,6 +23,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';

+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -42,7 +40,6 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);

-	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -56,19 +53,6 @@ function DomainList(): JSX.Element {

 	const compositeData = useGetCompositeQueryParam();

-	const [isCancelled, setIsCancelled] = useState(false);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
-		setIsCancelled(true);
-	}, [queryClient]);
-
-	const handleStageAndRunQuery = useCallback(() => {
-		setIsCancelled(false);
-		queryClient.invalidateQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
-		handleRunQuery();
-	}, [queryClient, handleRunQuery]);
-
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -121,13 +105,6 @@ function DomainList(): JSX.Element {
 		[data],
 	);

-	// Auto-reset cancelled state when a new fetch starts
-	useEffect(() => {
-		if (isFetching) {
-			setIsCancelled(false);
-		}
-	}, [isFetching]);
-
 	// Open drawer if selectedDomain is set in URL
 	useEffect(() => {
 		if (selectedDomain && formattedDataForTable?.length > 0) {
@@ -142,13 +119,7 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={
-					<RightToolbarActions
-						onStageRunQuery={handleStageAndRunQuery}
-						isLoadingQueries={isFetching}
-						handleCancelQuery={handleCancelQuery}
-					/>
-				}
+				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch
@@ -159,44 +130,38 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			{isCancelled && formattedDataForTable.length === 0 && (
-				<QueryCancelledPlaceholder subText='Click "Run Query" to load API monitoring data.' />
-			)}
-			{!isCancelled &&
-				!isFetching &&
-				!isLoading &&
-				formattedDataForTable.length === 0 && (
-					<div className="no-filtered-domains-message-container">
-						<div className="no-filtered-domains-message-content">
-							<img
-								src={emptyStateUrl}
-								alt="thinking-emoji"
-								className="empty-state-svg"
-							/>
+			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
+				<div className="no-filtered-domains-message-container">
+					<div className="no-filtered-domains-message-content">
+						<img
+							src={emptyStateUrl}
+							alt="thinking-emoji"
+							className="empty-state-svg"
+						/>

-							<div className="no-filtered-domains-message">
-								<div className="no-domain-title">
-									No External API calls detected with applied filters.
-								</div>
-								<div className="no-domain-subtitle">
-									Ensure all HTTP client spans are being sent with kind as{' '}
-									<span className="attribute">Client</span> and url set in{' '}
-									<span className="attribute">url.full</span> or{' '}
-									<span className="attribute">http.url</span> attribute.
-								</div>
-								<a
-									href={DOCLINKS.EXTERNAL_API_MONITORING}
-									target="_blank"
-									rel="noreferrer"
-									className="external-api-doc-link"
-								>
-									Learn how External API monitoring works in SigNoz{' '}
-									<MoveUpRight size={14} />
-								</a>
+						<div className="no-filtered-domains-message">
+							<div className="no-domain-title">
+								No External API calls detected with applied filters.
 							</div>
+							<div className="no-domain-subtitle">
+								Ensure all HTTP client spans are being sent with kind as{' '}
+								<span className="attribute">Client</span> and url set in{' '}
+								<span className="attribute">url.full</span> or{' '}
+								<span className="attribute">http.url</span> attribute.
+							</div>
+							<a
+								href={DOCLINKS.EXTERNAL_API_MONITORING}
+								target="_blank"
+								rel="noreferrer"
+								className="external-api-doc-link"
+							>
+								Learn how External API monitoring works in SigNoz{' '}
+								<MoveUpRight size={14} />
+							</a>
 						</div>
 					</div>
-				)}
+				</div>
+			)}
 			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
 				<Table
 					className="api-monitoring-domain-list-table"
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/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]);

--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/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
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/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(
 		() => (
--- a/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
+++ b/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.
--- a/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx
@@ -18,16 +18,9 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
-	isCancelled?: boolean;
-	onFetchingStateChange?: (isFetching: boolean) => void;
 }

-function ChartPreview({
-	alertDef,
-	source,
-	isCancelled = false,
-	onFetchingStateChange,
-}: ChartPreviewProps): JSX.Element {
+function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -95,8 +88,6 @@ function ChartPreview({
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
-			isCancelled={isCancelled}
-			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);

@@ -111,8 +102,6 @@ function ChartPreview({
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
-			isCancelled={isCancelled}
-			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);

--- a/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
+++ b/frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx
@@ -1,11 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { useCallback, useMemo } from 'react';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricNameFromQueryData } from 'hooks/useGetYAxisUnit';
@@ -64,24 +62,7 @@ function QuerySection(): JSX.Element {
 		return currentQueryKey !== stagedQueryKey;
 	}, [currentQuery, alertType, thresholdState, stagedQuery]);

-	const queryClient = useQueryClient();
-	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
-		setIsCancelled(true);
-	}, [queryClient]);
-
 	const runQueryHandler = useCallback(() => {
-		setIsCancelled(false);
-		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -95,7 +76,6 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
-		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -126,12 +106,7 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview
-				alertDef={alertDef}
-				source={source}
-				isCancelled={isCancelled}
-				onFetchingStateChange={setIsLoadingQueries}
-			/>
+			<ChartPreview alertDef={alertDef} source={source} />
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -155,8 +130,6 @@ function QuerySection(): JSX.Element {
 				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={runQueryHandler}
-				isLoadingQueries={isLoadingQueries}
-				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				key={currentQuery.queryType}
--- a/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
@@ -46,6 +46,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffix={<ExternalLink size={12} />}
 					onClick={(): void => {
+						// oxlint-disable-next-line signoz/no-raw-absolute-path
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>
@@ -74,10 +75,8 @@ export default function CustomDomainSettings(): JSX.Element {
 	const [isPollingEnabled, setIsPollingEnabled] = useState(false);
 	const [hosts, setHosts] = useState<ZeustypesHostDTO[] | null>(null);

-	const [
-		updateDomainError,
-		setUpdateDomainError,
-	] = useState<AxiosError<RenderErrorResponseDTO> | null>(null);
+	const [updateDomainError, setUpdateDomainError] =
+		useState<AxiosError<RenderErrorResponseDTO> | null>(null);

 	const [customDomainSubdomain, setCustomDomainSubdomain] = useState<
 		string | undefined
@@ -90,10 +89,8 @@ export default function CustomDomainSettings(): JSX.Element {
 		refetch: refetchHosts,
 	} = useGetHosts();

-	const {
-		mutate: updateSubDomain,
-		isLoading: isLoadingUpdateCustomDomain,
-	} = usePutHost<AxiosError<RenderErrorResponseDTO>>();
+	const { mutate: updateSubDomain, isLoading: isLoadingUpdateCustomDomain } =
+		usePutHost<AxiosError<RenderErrorResponseDTO>>();

 	const stripProtocol = (url: string): string => url?.split('://')[1] ?? url;

@@ -137,7 +134,7 @@ export default function CustomDomainSettings(): JSX.Element {
 			{
 				onSuccess: () => {
 					setIsPollingEnabled(true);
-					refetchHosts();
+					void refetchHosts();
 					setIsEditModalOpen(false);
 					setCustomDomainSubdomain(subdomain);
 					const newUrl = `https://${subdomain}.${dnsSuffix}`;
--- a/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx
@@ -15,6 +15,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';

@@ -212,7 +214,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) {
@@ -221,7 +223,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);
 									}
 								}}
 							/>
--- a/frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx
+++ b/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,
 		);

--- a/frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts
+++ b/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),
 	);
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/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] || {};
--- a/frontend/src/container/ExplorerOptions/utils.ts
+++ b/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),
 			);
--- a/frontend/src/container/ForgotPassword/index.tsx
+++ b/frontend/src/container/ForgotPassword/index.tsx
@@ -9,6 +9,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';

@@ -104,7 +105,7 @@ function ForgotPassword({
 			data: {
 				email: values.email,
 				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
+				frontendBaseURL: getBaseUrl(),
 			},
 		});
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);
--- a/frontend/src/container/FormAlertRules/BasicInfo.tsx
+++ b/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);
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -4,14 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
@@ -71,8 +69,6 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
-	isCancelled?: boolean;
-	onFetchingStateChange?: (isFetching: boolean) => void;
 }

 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -90,8 +86,6 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
-	isCancelled = false,
-	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -191,7 +185,7 @@ function ChartPreview({
 		ENTITY_VERSION_V5,
 		{
 			queryKey: [
-				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
+				'chartPreview',
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
 				minTime,
@@ -199,14 +193,9 @@ function ChartPreview({
 				alertDef?.ruleType,
 			],
 			enabled: canQuery,
-			keepPreviousData: true,
 		},
 	);

-	useEffect(() => {
-		onFetchingStateChange?.(queryResponse.isFetching);
-	}, [queryResponse.isFetching, onFetchingStateChange]);
-
 	const graphRef = useRef<HTMLDivElement>(null);

 	useEffect((): void => {
@@ -345,16 +334,11 @@ function ChartPreview({

 	const chartData = getUPlotChartData(queryResponse?.data?.payload);

-	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
-
 	const isAnomalyDetectionAlert =
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;

 	const chartDataAvailable =
-		chartData &&
-		hasResultData &&
-		!queryResponse.isLoading &&
-		(!queryResponse.isError || isCancelled);
+		chartData && !queryResponse.isError && !queryResponse.isLoading;

 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -375,14 +359,10 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
+					{(queryResponse?.isError || queryResponse?.error) && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}

-					{isCancelled && !queryResponse.isLoading && !hasResultData && (
-						<QueryCancelledPlaceholder subText='Click "Run Query" to load the chart preview.' />
-					)}
-
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
 						<GridPanelSwitch
 							options={options}
@@ -423,8 +403,6 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
-	isCancelled: false,
-	onFetchingStateChange: undefined,
 };

 export default ChartPreview;
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -35,8 +35,6 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
-	isLoadingQueries,
-	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -228,8 +226,6 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
-										handleCancelQuery={handleCancelQuery}
-										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -249,11 +245,7 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn
-										onStageRunQuery={runQuery}
-										handleCancelQuery={handleCancelQuery}
-										isLoadingQueries={isLoadingQueries}
-									/>
+									<RunQueryBtn onStageRunQuery={runQuery} />
 								</span>
 							}
 							items={items}
@@ -295,8 +287,6 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -55,6 +55,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';
@@ -136,19 +137,6 @@ function FormAlertRules({

 	// use query client
 	const ruleCache = useQueryClient();
-	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
-	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingAlertQuery) {
-			setIsChartQueryCancelled(false);
-		}
-	}, [isLoadingAlertQuery]);
-
-	const handleCancelAlertQuery = useCallback(() => {
-		ruleCache.cancelQueries(REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW);
-		setIsChartQueryCancelled(true);
-	}, [ruleCache]);

 	const isNewRule = !ruleId || isEmpty(ruleId);

@@ -715,8 +703,6 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			isCancelled={isChartQueryCancelled}
-			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);

@@ -735,8 +721,6 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			isCancelled={isChartQueryCancelled}
-			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);

@@ -777,7 +761,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	}

@@ -919,15 +903,7 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => {
-								setIsChartQueryCancelled(false);
-								ruleCache.invalidateQueries([
-									REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
-								]);
-								handleRunQuery();
-							}}
-							isLoadingQueries={isLoadingAlertQuery}
-							handleCancelQuery={handleCancelAlertQuery}
+							runQuery={(): void => handleRunQuery()}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -6,7 +6,6 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import {
@@ -19,7 +18,6 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -88,7 +86,6 @@ function FullView({

 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();

 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -206,8 +203,8 @@ function FullView({
 		});
 	}, [selectedPanelType]);

-	const queryRangeKey = useMemo(
-		() => [
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: [
 			widget?.query,
 			selectedPanelType,
 			requestData,
@@ -215,28 +212,10 @@ function FullView({
 			minTime,
 			maxTime,
 		],
-		[widget?.query, selectedPanelType, requestData, version, minTime, maxTime],
-	);
-
-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: queryRangeKey,
 		enabled: !isDependedDataLoaded,
 		keepPreviousData: true,
 	});

-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (response.isFetching) {
-			setIsCancelled(false);
-		}
-	}, [response.isFetching]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(queryRangeKey);
-		setIsCancelled(true);
-	}, [queryClient, queryRangeKey]);
-
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -375,8 +354,6 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
-									isLoadingQueries={response.isFetching}
-									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}
@@ -409,27 +386,23 @@ function FullView({
 									}}
 								/>
 							)}
-							{isCancelled ? (
-								<QueryCancelledPlaceholder subText='Click "Run Query" to reload the widget.' />
-							) : (
-								<PanelWrapper
-									panelMode={PanelMode.STANDALONE_VIEW}
-									queryResponse={response}
-									widget={widget}
-									setRequestData={setRequestData}
-									isFullViewMode
-									onToggleModelHandler={onToggleModelHandler}
-									setGraphVisibility={setGraphsVisibilityStates}
-									graphVisibility={graphsVisibilityStates}
-									onDragSelect={customOnDragSelect ?? onDragSelect}
-									tableProcessedDataRef={tableProcessedDataRef}
-									searchTerm={searchTerm}
-									onClickHandler={onClickHandler}
-									enableDrillDown={enableDrillDown}
-									selectedGraph={selectedPanelType}
-									onColumnWidthsChange={onColumnWidthsChange}
-								/>
-							)}
+							<PanelWrapper
+								panelMode={PanelMode.STANDALONE_VIEW}
+								queryResponse={response}
+								widget={widget}
+								setRequestData={setRequestData}
+								isFullViewMode
+								onToggleModelHandler={onToggleModelHandler}
+								setGraphVisibility={setGraphsVisibilityStates}
+								graphVisibility={graphsVisibilityStates}
+								onDragSelect={customOnDragSelect ?? onDragSelect}
+								tableProcessedDataRef={tableProcessedDataRef}
+								searchTerm={searchTerm}
+								onClickHandler={onClickHandler}
+								enableDrillDown={enableDrillDown}
+								selectedGraph={selectedPanelType}
+								onColumnWidthsChange={onColumnWidthsChange}
+							/>
 						</GraphContainer>
 					</div>
 				</>
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts
+++ b/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),
 		);
--- a/frontend/src/container/GridCardLayout/GridCard/utils.ts
+++ b/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: {
--- a/frontend/src/container/Home/Dashboards/Dashboards.tsx
+++ b/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());
 						}
--- a/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
+++ b/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);
 		}
 	};

--- a/frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx
+++ b/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} />
--- a/frontend/src/container/Home/Services/ServiceMetrics.tsx
+++ b/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);
 								}
 							}}
 						>
--- a/frontend/src/container/Home/Services/ServiceTraces.tsx
+++ b/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);
 									}
 								}}
 							>
--- a/frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx
+++ b/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()}`);
 		}
 	};

--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.tsx
+++ b/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 => {
--- a/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx
+++ b/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">
--- a/frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx
+++ b/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"
 		>
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/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
--- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
+++ b/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());
 		}
--- a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
+++ b/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],
 	);
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/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);
 			}
--- a/frontend/src/container/Login/index.tsx
+++ b/frontend/src/container/Login/index.tsx
@@ -60,10 +60,8 @@ function Login(): JSX.Element {
 	const [sessionsContext, setSessionsContext] = useState<SessionsContext>();
 	const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 	const [sessionsOrgId, setSessionsOrgId] = useState<string>('');
-	const [
-		sessionsContextLoading,
-		setIsLoadingSessionsContext,
-	] = useState<boolean>(false);
+	const [sessionsContextLoading, setIsLoadingSessionsContext] =
+		useState<boolean>(false);
 	const [form] = Form.useForm<FormValues>();
 	const [errorMessage, setErrorMessage] = useState<APIError>();

@@ -213,6 +211,7 @@ function Login(): JSX.Element {
 			if (isCallbackAuthN) {
 				const url = form.getFieldValue('url');

+				// oxlint-disable-next-line signoz/no-raw-absolute-path
 				window.location.href = url;
 			}
 		} catch (error) {
@@ -328,7 +327,6 @@ function Login(): JSX.Element {
 								data-testid="email"
 								required
 								placeholder="e.g. john@signoz.io"
-								autoFocus
 								disabled={versionLoading}
 								className="login-form-input"
 								onPressEnter={onNextHandler}
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
+++ b/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' });
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -8,7 +7,6 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -39,20 +37,6 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
-	const queryClient = useQueryClient();
-	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
-		setIsCancelled(true);
-	}, [queryClient]);

 	const [showQuickFilters, setShowQuickFilters] = useState(true);

@@ -171,11 +155,7 @@ function Explorer(): JSX.Element {

 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions
-									onStageRunQuery={(): void => handleRunQuery()}
-									isLoadingQueries={isLoadingQueries}
-									handleCancelQuery={handleCancelQuery}
-								/>
+								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -191,10 +171,7 @@ function Explorer(): JSX.Element {
 						/>

 						<div className="explore-content">
-							<TimeSeries
-								onFetchingStateChange={setIsLoadingQueries}
-								isCancelled={isCancelled}
-							/>
+							<TimeSeries />
 						</div>
 					</div>
 					<ExplorerOptionWrapper
--- a/frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx
@@ -0,0 +1,43 @@
+import { Button } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilder } from 'container/QueryBuilder';
+import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { MeterExplorerEventKeys, MeterExplorerEvents } from '../events';
+
+function QuerySection(): JSX.Element {
+	const { handleRunQuery } = useQueryBuilder();
+
+	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
+
+	return (
+		<div className="query-section">
+			<QueryBuilder
+				panelType={panelTypes}
+				config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
+				version="v4"
+				actions={
+					<ButtonWrapper>
+						<Button
+							onClick={(): void => {
+								handleRunQuery();
+								logEvent(MeterExplorerEvents.QueryBuilderQueryChanged, {
+									[MeterExplorerEventKeys.Tab]: 'explorer',
+								});
+							}}
+							type="primary"
+						>
+							Run Query
+						</Button>
+					</ButtonWrapper>
+				}
+			/>
+		</div>
+	);
+}
+
+export default QuerySection;
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
@@ -1,12 +1,10 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { isAxiosError } from 'axios';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
@@ -23,15 +21,7 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

-interface TimeSeriesProps {
-	onFetchingStateChange?: (isFetching: boolean) => void;
-	isCancelled?: boolean;
-}
-
-function TimeSeries({
-	onFetchingStateChange,
-	isCancelled = false,
-}: TimeSeriesProps): JSX.Element {
+function TimeSeries(): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');

@@ -77,11 +67,7 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -93,15 +79,9 @@ function TimeSeries({
 						},
 					},
 					ENTITY_VERSION_V5,
-					undefined,
-					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
+			retry: (failureCount: number, error: Error): boolean => {
 				let status: number | undefined;

 				if (error instanceof APIError) {
@@ -114,7 +94,7 @@ function TimeSeries({
 					return false;
 				}

-				return failureCount < MAX_QUERY_RETRIES;
+				return failureCount < 3;
 			},
 			onError: (error: APIError): void => {
 				showErrorModal(error);
@@ -122,11 +102,6 @@ function TimeSeries({
 		})),
 	);

-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);

 	const responseData = useMemo(
@@ -147,11 +122,7 @@ function TimeSeries({
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
-				{isCancelled && hasMetricSelected && (
-					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
-				)}
-				{!isCancelled &&
-					hasMetricSelected &&
+				{hasMetricSelected &&
 					responseData.map((datapoint, index) => (
 						<div
 							className="time-series-view-panel"
--- a/frontend/src/container/MetricsApplication/utils.ts
+++ b/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);
 	}
--- a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Switch, Tooltip } from 'antd';
@@ -7,7 +6,6 @@ import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -56,21 +54,6 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);

-	const queryClient = useQueryClient();
-	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	useEffect(() => {
-		if (isLoadingQueries) {
-			setIsCancelled(false);
-		}
-	}, [isLoadingQueries]);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
-		setIsCancelled(true);
-	}, [queryClient]);
-
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -324,11 +307,7 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions
-							onStageRunQuery={(): void => handleRunQuery()}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
-						/>
+						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -340,7 +319,6 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
-						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}
@@ -353,7 +331,6 @@ function Explorer(): JSX.Element {
 						yAxisUnit={yAxisUnit}
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
-						isCancelled={isCancelled}
 					/>
 				</div>
 			</div>
--- a/frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx
@@ -1,10 +1,7 @@
-import { useCallback } from 'react';
-import { useIsFetching, useQueryClient } from 'react-query';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { QueryBuilder } from 'container/QueryBuilder';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -14,16 +11,9 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';

 function QuerySection(): JSX.Element {
 	const { handleRunQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();

 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);

-	const isLoadingQueries = useIsFetching([REACT_QUERY_KEY.GET_QUERY_RANGE]) > 0;
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
-	}, [queryClient]);
-
 	return (
 		<div className="query-section">
 			<QueryBuilder
@@ -32,16 +22,17 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<RunQueryBtn
-							onStageRunQuery={(): void => {
+						<Button
+							onClick={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
-						/>
+							type="primary"
+						>
+							Run Query
+						</Button>
 					</ButtonWrapper>
 				}
 			/>
--- a/frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,12 +11,10 @@ import {
 } from 'api/generated/services/metrics';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
@@ -38,7 +36,6 @@ import {
 } from './utils';

 function TimeSeries({
-	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -49,7 +46,6 @@ function TimeSeries({
 	setYAxisUnit,
 	showYAxisUnitSelector,
 	metrics,
-	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();

@@ -102,11 +98,7 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -119,15 +111,9 @@ function TimeSeries({
 					},
 					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
-					undefined,
-					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: unknown): boolean => {
-				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-					return false;
-				}
-
+			retry: (failureCount: number, error: Error): boolean => {
 				let status: number | undefined;

 				if (error instanceof APIError) {
@@ -140,16 +126,11 @@ function TimeSeries({
 					return false;
 				}

-				return failureCount < MAX_QUERY_RETRIES;
+				return failureCount < 3;
 			},
 		})),
 	);

-	const isFetching = queries.some((q) => q.isFetching);
-	useEffect(() => {
-		onFetchingStateChange?.(isFetching);
-	}, [isFetching, onFetchingStateChange]);
-
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);

 	const responseData = useMemo(
@@ -250,11 +231,7 @@ function TimeSeries({
 				})}
 			>
 				{metricNames.length === 0 && <EmptyMetricsSearch />}
-				{isCancelled && metricNames.length > 0 && (
-					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
-				)}
-				{!isCancelled &&
-					metricNames.length > 0 &&
+				{metricNames.length > 0 &&
 					responseData.map((datapoint, index) => {
 						const isQueryDataItem = index < metricNames.length;
 						const metricName = isQueryDataItem ? metricNames[index] : undefined;
--- a/frontend/src/container/MetricsExplorer/Explorer/types.ts
+++ b/frontend/src/container/MetricsExplorer/Explorer/types.ts
@@ -3,7 +3,6 @@ import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/si
 import { Warning } from 'types/api';

 export interface TimeSeriesProps {
-	onFetchingStateChange?: (isFetching: boolean) => void;
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	areAllMetricUnitsSame: boolean;
@@ -16,5 +15,4 @@ export interface TimeSeriesProps {
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
-	isCancelled?: boolean;
 }
--- a/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
@@ -4,25 +4,9 @@

 	.inspect-metrics-fallback {
 		display: flex;
-		flex-direction: column;
-		gap: 32px;
+		align-items: center;
+		justify-content: center;
 		height: 100%;
-
-		.inspect-metrics-fallback-header-placeholder {
-			// Reserve the same vertical space the GraphView header occupies
-			// (antd middle button height) so swapping chart ↔ fallback causes
-			// no layout shift.
-			height: 32px;
-			flex-shrink: 0;
-		}
-
-		.inspect-metrics-fallback-body {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			min-height: 520px;
-		}
 	}

 	.inspect-metrics-title {
--- a/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
@@ -1,12 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Drawer, Empty, Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -112,28 +109,6 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);

-	const [isCancelled, setIsCancelled] = useState(false);
-
-	// Auto-reset isCancelled only on the rising edge of a new fetch
-	// (transition from not-loading → loading). Watching `isLoading` directly
-	// races with the cancel flow — when the user cancels mid-fetch, loading
-	// is still true in the render right after setIsCancelled(true), which
-	// would immediately reset it.
-	const wasLoadingRef = useRef(false);
-	useEffect(() => {
-		const nowLoading = isInspectMetricsLoading || isInspectMetricsRefetching;
-		if (!wasLoadingRef.current && nowLoading) {
-			setIsCancelled(false);
-		}
-		wasLoadingRef.current = nowLoading;
-	}, [isInspectMetricsLoading, isInspectMetricsRefetching]);
-
-	const queryClient = useQueryClient();
-	const handleCancelInspectQuery = useCallback(() => {
-		queryClient.cancelQueries(REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS);
-		setIsCancelled(true);
-	}, [queryClient]);
-
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
@@ -192,66 +167,96 @@ function Inspect({
 		setExpandedViewOptions(null);
 	}, [inspectionStep]);

-	const chartArea = useMemo(() => {
-		const renderFallback = (testId: string, body: JSX.Element): JSX.Element => (
-			<div data-testid={testId} className="inspect-metrics-fallback">
-				<div className="inspect-metrics-fallback-header-placeholder" />
-				<div className="inspect-metrics-fallback-body">{body}</div>
-			</div>
-		);
-
-		// Cancelled state takes precedence over any react-query state — ensures
-		// the placeholder shows immediately on cancel, regardless of whether
-		// isLoading/isRefetching has settled yet.
-		if (isCancelled) {
-			return renderFallback(
-				'inspect-metrics-cancelled',
-				<QueryCancelledPlaceholder subText='Click "Run Query" to see inspect results.' />,
+	const content = useMemo(() => {
+		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
+			return (
+				<div
+					data-testid="inspect-metrics-loading"
+					className="inspect-metrics-fallback"
+				>
+					<Skeleton active />
+				</div>
 			);
 		}

-		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
-			return renderFallback('inspect-metrics-loading', <Skeleton active />);
-		}
-
 		if (isInspectMetricsError) {
-			return renderFallback(
-				'inspect-metrics-error',
-				<Empty description="Error loading inspect metrics." />,
+			const errorMessage = 'Error loading inspect metrics.';
+
+			return (
+				<div
+					data-testid="inspect-metrics-error"
+					className="inspect-metrics-fallback"
+				>
+					<Empty description={errorMessage} />
+				</div>
 			);
 		}

 		if (!inspectMetricsTimeSeries.length) {
-			return renderFallback(
-				'inspect-metrics-empty',
-				<Empty description="No time series found for this metric to inspect." />,
+			return (
+				<div
+					data-testid="inspect-metrics-empty"
+					className="inspect-metrics-fallback"
+				>
+					<Empty description="No time series found for this metric to inspect." />
+				</div>
 			);
 		}

 		return (
-			<GraphView
-				inspectMetricsTimeSeries={aggregatedTimeSeries}
-				formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
-				resetInspection={resetInspection}
-				metricName={appliedMetricName}
-				metricUnit={selectedMetricUnit}
-				metricType={selectedMetricType}
-				spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-				inspectionStep={inspectionStep}
-				setPopoverOptions={setPopoverOptions}
-				setShowExpandedView={setShowExpandedView}
-				showExpandedView={showExpandedView}
-				setExpandedViewOptions={setExpandedViewOptions}
-				popoverOptions={popoverOptions}
-				metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-				isInspectMetricsRefetching={isInspectMetricsRefetching}
-			/>
+			<div className="inspect-metrics-content">
+				<div className="inspect-metrics-content-first-col">
+					<GraphView
+						inspectMetricsTimeSeries={aggregatedTimeSeries}
+						formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
+						resetInspection={resetInspection}
+						metricName={appliedMetricName}
+						metricUnit={selectedMetricUnit}
+						metricType={selectedMetricType}
+						spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+						inspectionStep={inspectionStep}
+						setPopoverOptions={setPopoverOptions}
+						setShowExpandedView={setShowExpandedView}
+						showExpandedView={showExpandedView}
+						setExpandedViewOptions={setExpandedViewOptions}
+						popoverOptions={popoverOptions}
+						metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+						isInspectMetricsRefetching={isInspectMetricsRefetching}
+					/>
+					<QueryBuilder
+						currentMetricName={currentMetricName}
+						setCurrentMetricName={setCurrentMetricName}
+						setAppliedMetricName={setAppliedMetricName}
+						spaceAggregationLabels={spaceAggregationLabels}
+						currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
+						dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
+						inspectionStep={inspectionStep}
+						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
+						currentQuery={currentQueryData}
+						setCurrentQuery={setCurrentQueryData}
+					/>
+				</div>
+				<div className="inspect-metrics-content-second-col">
+					<Stepper
+						inspectionStep={inspectionStep}
+						resetInspection={resetInspection}
+					/>
+					{showExpandedView && (
+						<ExpandedView
+							options={expandedViewOptions}
+							spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+							step={inspectionStep}
+							metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+							timeAggregatedSeriesMap={timeAggregatedSeriesMap}
+						/>
+					)}
+				</div>
+			</div>
 		);
 	}, [
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
-		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,
@@ -307,46 +312,7 @@ function Inspect({
 				className="inspect-metrics-modal"
 				destroyOnClose
 			>
-				<div className="inspect-metrics-content">
-					<div className="inspect-metrics-content-first-col">
-						{chartArea}
-						<QueryBuilder
-							currentMetricName={currentMetricName}
-							setCurrentMetricName={setCurrentMetricName}
-							setAppliedMetricName={setAppliedMetricName}
-							spaceAggregationLabels={spaceAggregationLabels}
-							currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
-							dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
-							inspectionStep={inspectionStep}
-							inspectMetricsTimeSeries={inspectMetricsTimeSeries}
-							currentQuery={currentQueryData}
-							setCurrentQuery={setCurrentQueryData}
-							isLoadingQueries={isInspectMetricsLoading || isInspectMetricsRefetching}
-							handleCancelQuery={handleCancelInspectQuery}
-							onRunQuery={(): void => {
-								setIsCancelled(false);
-								queryClient.invalidateQueries([
-									REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
-								]);
-							}}
-						/>
-					</div>
-					<div className="inspect-metrics-content-second-col">
-						<Stepper
-							inspectionStep={inspectionStep}
-							resetInspection={resetInspection}
-						/>
-						{showExpandedView && (
-							<ExpandedView
-								options={expandedViewOptions}
-								spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-								step={inspectionStep}
-								metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-								timeAggregatedSeriesMap={timeAggregatedSeriesMap}
-							/>
-						)}
-					</div>
-				</div>
+				{content}
 			</Drawer>
 		</Sentry.ErrorBoundary>
 	);
--- a/frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx
@@ -20,22 +20,13 @@ function QueryBuilder({
 	inspectMetricsTimeSeries,
 	currentQuery,
 	setCurrentQuery,
-	isLoadingQueries,
-	handleCancelQuery,
-	onRunQuery,
 }: QueryBuilderProps): JSX.Element {
 	const applyInspectionOptions = useCallback(() => {
-		onRunQuery?.();
 		setAppliedMetricName(currentMetricName ?? '');
 		dispatchMetricInspectionOptions({
 			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
 		});
-	}, [
-		currentMetricName,
-		setAppliedMetricName,
-		dispatchMetricInspectionOptions,
-		onRunQuery,
-	]);
+	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);

 	return (
 		<div className="inspect-metrics-query-builder">
@@ -48,11 +39,7 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn
-					onStageRunQuery={applyInspectionOptions}
-					handleCancelQuery={handleCancelQuery}
-					isLoadingQueries={isLoadingQueries}
-				/>
+				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch
--- a/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
@@ -103,8 +103,6 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
-		isLoadingQueries: false,
-		handleCancelQuery: jest.fn(),
 	};

 	beforeEach(() => {
--- a/frontend/src/container/MetricsExplorer/Inspect/types.ts
+++ b/frontend/src/container/MetricsExplorer/Inspect/types.ts
@@ -65,9 +65,6 @@ export interface QueryBuilderProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	currentQuery: IBuilderQuery;
 	setCurrentQuery: (query: IBuilderQuery) => void;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
-	onRunQuery?: () => void;
 }

 export interface MetricNameSearchProps {
--- a/frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts
+++ b/frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts
@@ -1,9 +1,6 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useQuery } from 'react-query';
 import { inspectMetrics } from 'api/generated/services/metrics';
-import { isAxiosError } from 'axios';
-import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -110,7 +107,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+			'inspectMetrics',
 			metricName,
 			start,
 			end,
@@ -130,12 +127,6 @@ export function useInspectMetrics(
 			),
 		enabled: !!metricName,
 		keepPreviousData: true,
-		retry: (failureCount: number, error: Error): boolean => {
-			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-				return false;
-			}
-			return failureCount < MAX_QUERY_RETRIES;
-		},
 	});

 	const inspectMetricsData = useMemo(
--- a/frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx
+++ b/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"
--- a/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
@@ -12,8 +12,6 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
-	handleCancelQuery,
-	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -24,8 +22,7 @@ function MetricsSearch({

 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-		onRunQuery?.();
-	}, [currentQueryFilterExpression, onChange, onRunQuery]);
+	}, [currentQueryFilterExpression, onChange]);

 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -56,7 +53,6 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
-				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -18,7 +17,6 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
@@ -106,8 +104,6 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);

-	const [isCancelled, setIsCancelled] = useState<boolean>(false);
-
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -168,7 +164,6 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
-		reset: resetMetricsStats,
 	} = useGetMetricsStats();

 	const {
@@ -177,7 +172,6 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
-		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();

 	const metricsStatsApiError = useMemo(
@@ -202,40 +196,6 @@ function Summary(): JSX.Element {
 		});
 	}, [metricsTreemapQuery, getMetricsTreemap]);

-	const handleCancelQuery = useCallback(() => {
-		resetMetricsStats();
-		resetMetricsTreemap();
-		setCurrentQueryFilterExpression(appliedFilterExpression);
-		setIsCancelled(true);
-	}, [
-		resetMetricsStats,
-		resetMetricsTreemap,
-		setCurrentQueryFilterExpression,
-		appliedFilterExpression,
-	]);
-
-	const handleRunQuery = useCallback(() => {
-		setIsCancelled(false);
-		getMetricsStats({
-			data: {
-				...metricsListQuery,
-				filter: { expression: currentQueryFilterExpression },
-			},
-		});
-		getMetricsTreemap({
-			data: {
-				...metricsTreemapQuery,
-				filter: { expression: currentQueryFilterExpression },
-			},
-		});
-	}, [
-		getMetricsStats,
-		getMetricsTreemap,
-		metricsListQuery,
-		metricsTreemapQuery,
-		currentQueryFilterExpression,
-	]);
-
 	const handleFilterChange = useCallback(
 		(expression: string) => {
 			const newFilters: TagFilter = {
@@ -370,19 +330,11 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;

-	const isLoadingQueries =
-		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
-
 	const showFullScreenLoading =
-		isLoadingQueries &&
+		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;

-	const showNoMetrics =
-		isMetricsListDataEmpty &&
-		isMetricsTreeMapDataEmpty &&
-		!appliedFilterExpression;
-
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -391,26 +343,13 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isLoadingQueries}
-					handleCancelQuery={handleCancelQuery}
-					onRunQuery={handleRunQuery}
+					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isCancelled ? (
-					<div className="no-logs-container">
-						<div className="no-logs-container-content">
-							<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
-							<Typography className="no-logs-text">
-								Query cancelled.
-								<span className="sub-text">
-									{' '}
-									Click &quot;Run Query&quot; to load metrics.
-								</span>
-							</Typography>
-						</div>
-					</div>
-				) : showNoMetrics ? (
+				) : isMetricsListDataEmpty &&
+				  isMetricsTreeMapDataEmpty &&
+				  !appliedFilterExpression ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>
--- a/frontend/src/container/MetricsExplorer/Summary/types.ts
+++ b/frontend/src/container/MetricsExplorer/Summary/types.ts
@@ -33,8 +33,6 @@ export interface MetricsSearchProps {
 	currentQueryFilterExpression: string;
 	setCurrentQueryFilterExpression: (expression: string) => void;
 	isLoading: boolean;
-	handleCancelQuery: () => void;
-	onRunQuery: () => void;
 }

 export interface MetricsTreemapProps {
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -24,8 +25,8 @@ import PromQLQueryContainer from './QueryBuilder/promQL';
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
+	queryRangeKey,
 	isLoadingQueries,
-	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -178,7 +179,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+							queryRangeKey={queryRangeKey}
 						/>
 					</span>
 				}
@@ -190,8 +191,8 @@ function QuerySection({

 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
+	queryRangeKey?: QueryKey;
+	isLoadingQueries?: boolean;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { Card } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -23,7 +22,6 @@ function WidgetGraph({
 	selectedWidget,
 	isLoadingPanelData,
 	enableDrillDown = false,
-	isCancelled = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();

@@ -48,24 +46,20 @@ function WidgetGraph({
 				</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
-			{!isCancelled && queryResponse.error && (
+			{queryResponse.error && (
 				<AlertIconContainer color="red" title={queryResponse.error.message}>
 					<InfoCircleOutlined />
 				</AlertIconContainer>
 			)}

-			{isCancelled ? (
-				<QueryCancelledPlaceholder subText='Click "Run Query" to reload the chart.' />
-			) : (
-				<WidgetGraphComponent
-					isLoadingPanelData={isLoadingPanelData}
-					selectedGraph={selectedGraph}
-					queryResponse={queryResponse}
-					setRequestData={setRequestData}
-					selectedWidget={selectedWidget}
-					enableDrillDown={enableDrillDown}
-				/>
-			)}
+			<WidgetGraphComponent
+				isLoadingPanelData={isLoadingPanelData}
+				selectedGraph={selectedGraph}
+				queryResponse={queryResponse}
+				setRequestData={setRequestData}
+				selectedWidget={selectedWidget}
+				enableDrillDown={enableDrillDown}
+			/>
 		</Container>
 	);
 }
--- a/frontend/src/container/NewWidget/LeftContainer/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@@ -1,5 +1,5 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
+import { memo, useEffect } from 'react';
+import { useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -34,7 +34,6 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();

 	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
 		AppState,
@@ -50,25 +49,12 @@ function LeftContainer({
 		],
 		[globalSelectedInterval, requestData, minTime, maxTime],
 	);
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(queryRangeKey);
-		setIsCancelled(true);
-	}, [queryClient, queryRangeKey]);
-
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
 		keepPreviousData: true,
 	});

-	useEffect(() => {
-		if (queryResponse.isFetching) {
-			setIsCancelled(false);
-		}
-	}, [queryResponse.isFetching]);
-
 	// Update parent component with query response for legend colors
 	useEffect(() => {
 		if (setQueryResponse) {
@@ -85,13 +71,12 @@ function LeftContainer({
 				selectedWidget={selectedWidget}
 				isLoadingPanelData={isLoadingPanelData}
 				enableDrillDown={enableDrillDown}
-				isCancelled={isCancelled}
 			/>
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
+					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
-					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={dashboardData?.id}
--- a/frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx
+++ b/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 = (
--- a/frontend/src/container/NewWidget/types.ts
+++ b/frontend/src/container/NewWidget/types.ts
@@ -50,5 +50,4 @@ export type WidgetGraphContainerProps = {
 	selectedWidget: Widgets;
 	isLoadingPanelData: boolean;
 	enableDrillDown?: boolean;
-	isCancelled?: boolean;
 };
--- a/frontend/src/container/NoLogs/NoLogs.tsx
+++ b/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 (
--- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
@@ -16,6 +16,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';
@@ -58,7 +59,7 @@ function InviteTeamMembers({
 		email: '',
 		role: '',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};

--- a/frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx
+++ b/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"
--- a/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/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: '',
 	};

--- a/frontend/src/container/OrganizationSettings/AuthDomain/index.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/index.tsx
@@ -17,6 +17,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';
@@ -144,7 +145,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} />;
 				},
 			},
--- a/frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx
+++ b/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({
--- a/frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx
+++ b/frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from '@signozhq/ui';
 import cx from 'classnames';
 import {
@@ -10,23 +12,14 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';

 import './RunQueryBtn.scss';
-
-type RunQueryBtnProps = {
+interface RunQueryBtnProps {
 	className?: string;
 	label?: string;
-	disabled?: boolean;
-} & (
-	| {
-			onStageRunQuery: () => void;
-			handleCancelQuery: () => void;
-			isLoadingQueries: boolean;
-	  }
-	| {
-			onStageRunQuery?: never;
-			handleCancelQuery?: never;
-			isLoadingQueries?: never;
-	  }
-);
+	isLoadingQueries?: boolean;
+	handleCancelQuery?: () => void;
+	onStageRunQuery?: () => void;
+	queryRangeKey?: QueryKey;
+}

 function RunQueryBtn({
 	className,
@@ -34,10 +27,26 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	disabled,
+	queryRangeKey,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	const isLoading = isLoadingQueries ?? false;
+	const queryClient = useQueryClient();
+	const isKeyFetchingCount = useIsFetching(
+		queryRangeKey as QueryKey | undefined,
+	);
+	const isLoading =
+		typeof isLoadingQueries === 'boolean'
+			? isLoadingQueries
+			: isKeyFetchingCount > 0;
+
+	const onCancel = useCallback(() => {
+		if (handleCancelQuery) {
+			return handleCancelQuery();
+		}
+		if (queryRangeKey) {
+			queryClient.cancelQueries(queryRangeKey);
+		}
+	}, [handleCancelQuery, queryClient, queryRangeKey]);

 	return isLoading ? (
 		<Button
@@ -45,7 +54,7 @@ function RunQueryBtn({
 			type="button"
 			prefix={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn', className)}
-			onClick={handleCancelQuery}
+			onClick={onCancel}
 		>
 			Cancel
 		</Button>
@@ -54,7 +63,7 @@ function RunQueryBtn({
 			color="primary"
 			type="button"
 			className={cx('run-query-btn', className)}
-			disabled={disabled}
+			disabled={isLoading || !onStageRunQuery}
 			onClick={onStageRunQuery}
 			prefix={<Play size={14} />}
 		>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
SagarRajput-7	63c0dbac7e	feat(base-path): fix lint issues	2026-04-23 12:35:15 +05:30
SagarRajput-7	1b7e738d57	feat(base-path): migrated more cases	2026-04-23 12:27:18 +05:30
SagarRajput-7	3d6455ce95	fix(base-path): rename loadModule to loadStorageModule to avoid TS global scope collision	2026-04-23 12:27:18 +05:30
SagarRajput-7	997cc41e39	fix(base-path): prepend withBasePath to livetail SSE URL in dev mode	2026-04-23 12:27:18 +05:30
SagarRajput-7	a8c5f717bc	feat(base-path): eslint rule, ban direct localStorage/sessionStorage access	2026-04-23 12:27:14 +05:30
SagarRajput-7	341af58b73	feat(base-path): route direct sessionStorage calls through scoped wrappers	2026-04-23 12:27:02 +05:30
SagarRajput-7	fbff021bcd	feat(base-path): route direct localStorage calls through scoped wrappers	2026-04-23 12:27:02 +05:30
SagarRajput-7	36cd03caad	feat(base-path): sessionStorage wrappers + scope useLocalStorage via wrappers	2026-04-23 12:27:02 +05:30
SagarRajput-7	d227e4f1b7	feat(base-path): scope localStorage wrapper keys via getScopedKey	2026-04-23 12:27:02 +05:30
SagarRajput-7	acd31837cd	feat(base-path): getScopedKey - scope storage keys to base path	2026-04-23 12:27:02 +05:30
SagarRajput-7	9127268e99	feat(base-path): updated lint error comment to oxlint	2026-04-23 12:25:38 +05:30
SagarRajput-7	2c01589298	feat(base-path): migrated the new files added after rebase with main	2026-04-23 12:22:36 +05:30
SagarRajput-7	0f842b8500	feat(base-path): migrate backend bound urls and eslint upgrade to error	2026-04-23 12:22:33 +05:30
SagarRajput-7	4a42093a65	feat(base-path): migrate remaining pattern for window.location.origin + path	2026-04-23 12:20:02 +05:30
SagarRajput-7	c2c2f5b458	feat(base-path): replace window.open with openInNewTab for internal paths	2026-04-23 12:20:02 +05:30
SagarRajput-7	6227d5a700	feat(base-path): fix lint issues	2026-04-23 11:50:29 +05:30
SagarRajput-7	9189072d49	feat(base-path): mirgate rule to oxlint	2026-04-23 11:32:24 +05:30
SagarRajput-7	cb3df7ffbb	feat: code refactor around feedbacks	2026-04-23 11:16:01 +05:30
SagarRajput-7	970b2e8c14	feat: applied suggested patch changes	2026-04-23 11:16:01 +05:30
SagarRajput-7	3237be65fc	feat: code refactor around feedbacks	2026-04-23 11:15:58 +05:30
SagarRajput-7	b703035ff5	feat: updated base path utils and fixed navigation and translations	2026-04-23 11:15:09 +05:30
SagarRajput-7	35591dc28f	feat: updated the html template	2026-04-23 11:10:09 +05:30
SagarRajput-7	743612306f	feat: removed plugin and serving the index.html only as the template	2026-04-23 11:10:09 +05:30
SagarRajput-7	e6aab70222	feat: refactor the interceptor and added gotmpl into gitignore	2026-04-23 11:10:09 +05:30
SagarRajput-7	8b89a682d6	feat: changed output path to dir level	2026-04-23 11:10:08 +05:30
SagarRajput-7	aaaea95a6b	feat: base path config setup and plugin for gotmpl generation at build time	2026-04-23 11:10:08 +05:30
				`@@ -1 +0,0 @@`
				`export { default } from './QueryCancelledPlaceholder';`