chore: base path setup and routing and navigation migrations

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.119.0
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.119.0
+    image: signoz/signoz:v0.118.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.119.0}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.119.0}
+    image: signoz/signoz:${VERSION:-v0.118.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/contributing/onboarding.md

@@ -7,12 +7,12 @@ This guide explains how to add new data sources to the SigNoz onboarding flow. T
 The configuration is located at:
 
 ```
-frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
+frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json
 ```
 
-## Structure Overview
+## JSON Structure Overview
 
-The configuration file exports a TypeScript array (`onboardingConfigWithLinks`) containing data source objects. Each object represents a selectable option in the onboarding flow. SVG logos are imported as ES modules at the top of the file.
+The configuration file is a JSON array containing data source objects. Each object represents a selectable option in the onboarding flow.
 
 ## Data Source Object Keys
 
@@ -24,7 +24,7 @@ The configuration file exports a TypeScript array (`onboardingConfigWithLinks`)
 | `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
 | `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
 | `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Imported SVG URL **(SVG required)** (e.g., `import ec2Url from '@/assets/Logos/ec2.svg'`, then use `ec2Url`) |
+| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
 
 ### Optional Keys
 
@@ -57,34 +57,36 @@ The `module` key determines where users are redirected after completing onboardi
 
 The `question` object enables multi-step selection flows:
 
-```ts
-question: {
-  desc: 'What would you like to monitor?',
-  type: 'select',
-  helpText: 'Choose the telemetry type you want to collect.',
-  helpLink: '/docs/azure-monitoring/overview/',
-  helpLinkText: 'Read the guide →',
-  options: [
-    {
-      key: 'logging',
-      label: 'Logs',
-      imgUrl: azureVmUrl,
-      link: '/docs/azure-monitoring/app-service/logging/',
-    },
-    {
-      key: 'metrics',
-      label: 'Metrics',
-      imgUrl: azureVmUrl,
-      link: '/docs/azure-monitoring/app-service/metrics/',
-    },
-    {
-      key: 'tracing',
-      label: 'Traces',
-      imgUrl: azureVmUrl,
-      link: '/docs/azure-monitoring/app-service/tracing/',
-    },
-  ],
-},
+```json
+{
+  "question": {
+    "desc": "What would you like to monitor?",
+    "type": "select",
+    "helpText": "Choose the telemetry type you want to collect.",
+    "helpLink": "/docs/azure-monitoring/overview/",
+    "helpLinkText": "Read the guide →",
+    "options": [
+        {
+            "key": "logging",
+            "label": "Logs",
+            "imgUrl": "/Logos/azure-vm.svg",
+            "link": "/docs/azure-monitoring/app-service/logging/"
+        },
+        {
+            "key": "metrics",
+            "label": "Metrics",
+            "imgUrl": "/Logos/azure-vm.svg",
+            "link": "/docs/azure-monitoring/app-service/metrics/"
+        },
+        {
+            "key": "tracing",
+            "label": "Traces",
+            "imgUrl": "/Logos/azure-vm.svg",
+            "link": "/docs/azure-monitoring/app-service/tracing/"
+        }
+    ]
+  }
+}
 ```
 
 ### Question Keys
@@ -104,161 +106,152 @@ Options can be simple (direct link) or nested (with another question):
 
 ### Simple Option (Direct Link)
 
-```ts
+```json
 {
-  key: 'aws-ec2-logs',
-  label: 'Logs',
-  imgUrl: ec2Url,
-  link: '/docs/userguide/collect_logs_from_file/',
-},
+  "key": "aws-ec2-logs",
+  "label": "Logs",
+  "imgUrl": "/Logos/ec2.svg",
+  "link": "/docs/userguide/collect_logs_from_file/"
+}
 ```
 
 ### Option with Internal Redirect
 
-```ts
+```json
 {
-  key: 'aws-ec2-metrics-one-click',
-  label: 'One Click AWS',
-  imgUrl: ec2Url,
-  link: '/integrations?integration=aws-integration&service=ec2',
-  internalRedirect: true,
-},
+  "key": "aws-ec2-metrics-one-click",
+  "label": "One Click AWS",
+  "imgUrl": "/Logos/ec2.svg",
+  "link": "/integrations?integration=aws-integration&service=ec2",
+  "internalRedirect": true
+}
 ```
 
 > **Important**: Set `internalRedirect: true` only for internal app routes (like `/integrations?...`). Docs links should NOT have this flag.
 
 ### Nested Option (Multi-step Flow)
 
-```ts
+```json
 {
-  key: 'aws-ec2-metrics',
-  label: 'Metrics',
-  imgUrl: ec2Url,
-  question: {
-    desc: 'How would you like to set up monitoring?',
-    helpText: 'Choose your setup method.',
-    options: [...],
-  },
-},
+  "key": "aws-ec2-metrics",
+  "label": "Metrics",
+  "imgUrl": "/Logos/ec2.svg",
+  "question": {
+    "desc": "How would you like to set up monitoring?",
+    "helpText": "Choose your setup method.",
+    "options": [...]
+  }
+}
 ```
 
 ## Examples
 
 ### Simple Data Source (Direct Link)
 
-```ts
-import elbUrl from '@/assets/Logos/elb.svg';
-
-// inside the onboardingConfigWithLinks array:
+```json
 {
-  dataSource: 'aws-elb',
-  label: 'AWS ELB',
-  tags: ['AWS'],
-  module: 'logs',
-  relatedSearchKeywords: [
-    'aws',
-    'aws elb',
-    'elb logs',
-    'elastic load balancer',
+  "dataSource": "aws-elb",
+  "label": "AWS ELB",
+  "tags": ["AWS"],
+  "module": "logs",
+  "relatedSearchKeywords": [
+    "aws",
+    "aws elb",
+    "elb logs",
+    "elastic load balancer"
   ],
-  imgUrl: elbUrl,
-  link: '/docs/aws-monitoring/elb/',
-},
+  "imgUrl": "/Logos/elb.svg",
+  "link": "/docs/aws-monitoring/elb/"
+}
 ```
 
 ### Data Source with Single Question Level
 
-```ts
-import azureVmUrl from '@/assets/Logos/azure-vm.svg';
-
-// inside the onboardingConfigWithLinks array:
+```json
 {
-  dataSource: 'app-service',
-  label: 'App Service',
-  imgUrl: azureVmUrl,
-  tags: ['Azure'],
-  module: 'apm',
-  relatedSearchKeywords: ['azure', 'app service'],
-  question: {
-    desc: 'What telemetry data do you want to visualise?',
-    type: 'select',
-    options: [
+  "dataSource": "app-service",
+  "label": "App Service",
+  "imgUrl": "/Logos/azure-vm.svg",
+  "tags": ["Azure"],
+  "module": "apm",
+  "relatedSearchKeywords": ["azure", "app service"],
+  "question": {
+    "desc": "What telemetry data do you want to visualise?",
+    "type": "select",
+    "options": [
       {
-        key: 'logging',
-        label: 'Logs',
-        imgUrl: azureVmUrl,
-        link: '/docs/azure-monitoring/app-service/logging/',
+        "key": "logging",
+        "label": "Logs",
+        "imgUrl": "/Logos/azure-vm.svg",
+        "link": "/docs/azure-monitoring/app-service/logging/"
       },
       {
-        key: 'metrics',
-        label: 'Metrics',
-        imgUrl: azureVmUrl,
-        link: '/docs/azure-monitoring/app-service/metrics/',
+        "key": "metrics",
+        "label": "Metrics",
+        "imgUrl": "/Logos/azure-vm.svg",
+        "link": "/docs/azure-monitoring/app-service/metrics/"
       },
       {
-        key: 'tracing',
-        label: 'Traces',
-        imgUrl: azureVmUrl,
-        link: '/docs/azure-monitoring/app-service/tracing/',
-      },
-    ],
-  },
-},
+        "key": "tracing",
+        "label": "Traces",
+        "imgUrl": "/Logos/azure-vm.svg",
+        "link": "/docs/azure-monitoring/app-service/tracing/"
+      }
+    ]
+  }
+}
 ```
 
 ### Data Source with Nested Questions (2-3 Levels)
 
-```ts
-import ec2Url from '@/assets/Logos/ec2.svg';
-
-// inside the onboardingConfigWithLinks array:
+```json
 {
-  dataSource: 'aws-ec2',
-  label: 'AWS EC2',
-  tags: ['AWS'],
-  module: 'logs',
-  relatedSearchKeywords: ['aws', 'aws ec2', 'ec2 logs', 'ec2 metrics'],
-  imgUrl: ec2Url,
-  question: {
-    desc: 'What would you like to monitor for AWS EC2?',
-    type: 'select',
-    helpText: 'Choose the type of telemetry data you want to collect.',
-    options: [
+  "dataSource": "aws-ec2",
+  "label": "AWS EC2",
+  "tags": ["AWS"],
+  "module": "logs",
+  "relatedSearchKeywords": ["aws", "aws ec2", "ec2 logs", "ec2 metrics"],
+  "imgUrl": "/Logos/ec2.svg",
+  "question": {
+    "desc": "What would you like to monitor for AWS EC2?",
+    "type": "select",
+    "helpText": "Choose the type of telemetry data you want to collect.",
+    "options": [
       {
-        key: 'aws-ec2-logs',
-        label: 'Logs',
-        imgUrl: ec2Url,
-        link: '/docs/userguide/collect_logs_from_file/',
+        "key": "aws-ec2-logs",
+        "label": "Logs",
+        "imgUrl": "/Logos/ec2.svg",
+        "link": "/docs/userguide/collect_logs_from_file/"
       },
       {
-        key: 'aws-ec2-metrics',
-        label: 'Metrics',
-        imgUrl: ec2Url,
-        question: {
-          desc: 'How would you like to set up EC2 Metrics monitoring?',
-          helpText: 'One Click uses AWS CloudWatch integration. Manual setup uses OpenTelemetry.',
-          helpLink: '/docs/aws-monitoring/one-click-vs-manual/',
-          helpLinkText: 'Read the comparison guide →',
-          options: [
+        "key": "aws-ec2-metrics",
+        "label": "Metrics",
+        "imgUrl": "/Logos/ec2.svg",
+        "question": {
+          "desc": "How would you like to set up EC2 Metrics monitoring?",
+          "helpText": "One Click uses AWS CloudWatch integration. Manual setup uses OpenTelemetry.",
+          "helpLink": "/docs/aws-monitoring/one-click-vs-manual/",
+          "helpLinkText": "Read the comparison guide →",
+          "options": [
             {
-              key: 'aws-ec2-metrics-one-click',
-              label: 'One Click AWS',
-              imgUrl: ec2Url,
-              link: '/integrations?integration=aws-integration&service=ec2',
-              internalRedirect: true,
+              "key": "aws-ec2-metrics-one-click",
+              "label": "One Click AWS",
+              "imgUrl": "/Logos/ec2.svg",
+              "link": "/integrations?integration=aws-integration&service=ec2",
+              "internalRedirect": true
             },
             {
-              key: 'aws-ec2-metrics-manual',
-              label: 'Manual Setup',
-              imgUrl: ec2Url,
-              link: '/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/',
-            },
-          ],
-        },
-      },
-    ],
-  },
-},
+              "key": "aws-ec2-metrics-manual",
+              "label": "Manual Setup",
+              "imgUrl": "/Logos/ec2.svg",
+              "link": "/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/"
+            }
+          ]
+        }
+      }
+    ]
+  }
+}
 ```
 
 ## Best Practices
@@ -277,16 +270,11 @@ import ec2Url from '@/assets/Logos/ec2.svg';
 
 ### 3. Logos
 
-- Place logo files in `src/assets/Logos/`
+- Place logo files in `public/Logos/`
 - Use SVG format
-- Import the SVG at the top of the file and reference the imported variable:
-  ```ts
-  import myServiceUrl from '@/assets/Logos/my-service.svg';
-  // then in the config object:
-  imgUrl: myServiceUrl,
-  ```
+- Reference as `"/Logos/your-logo.svg"`
 - **Fetching Icons**: New icons can be easily fetched from [OpenBrand](https://openbrand.sh/). Use the pattern `https://openbrand.sh/?url=<TARGET_URL>`, where `<TARGET_URL>` is the URL-encoded link to the service's website. For example, to get Render's logo, use [https://openbrand.sh/?url=https%3A%2F%2Frender.com](https://openbrand.sh/?url=https%3A%2F%2Frender.com).
-- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo src/assets/Logos/your-logo.svg` to minimise their size before committing.
+- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 
@@ -302,8 +290,8 @@ import ec2Url from '@/assets/Logos/ec2.svg';
 
 ## Adding a New Data Source
 
-1. Add the logo SVG to `src/assets/Logos/` and add a top-level import in the config file (e.g., `import myServiceUrl from '@/assets/Logos/my-service.svg'`)
-2. Add your data source object to the `onboardingConfigWithLinks` array, referencing the imported variable for `imgUrl`
+1. Add your data source object to the JSON array
+2. Ensure the logo exists in `public/Logos/`
 3. Test the flow locally with `yarn dev`
 4. Validation:
    - Navigate to the [onboarding page](http://localhost:3301/get-started-with-signoz-cloud) on your local machine

ee/query-service/app/api/api.go

@@ -6,6 +6,7 @@ import (
 
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
+	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -48,6 +49,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
+		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),

frontend/.eslintrc.cjs

@@ -213,6 +213,23 @@ module.exports = {
 				message:
 					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
 			},
+			{
+				selector:
+					"CallExpression[callee.object.name='window'][callee.property.name='open']",
+				message:
+					'Do not call window.open() directly. ' +
+					"Use openInNewTab() from 'utils/navigation' for internal SigNoz paths. " +
+					"For intentional external URLs, use openExternalLink() from 'utils/navigation'. " +
+					'For unavoidable direct calls, add // eslint-disable-next-line with a reason.',
+			},
+			{
+				selector:
+					"AssignmentExpression[left.object.name='window'][left.property.name='href']",
+				message:
+					'Do not assign window.location.href for internal navigation. ' +
+					"Use history.push() or history.replace() from 'lib/history'. " +
+					'For external redirects (SSO, logout URLs), add // eslint-disable-next-line with a reason.',
+			},
 		],
 	},
 	overrides: [
@@ -265,5 +282,14 @@ module.exports = {
 				'no-restricted-syntax': 'off',
 			},
 		},
+		{
+			// navigation.ts and useSafeNavigate.ts are the canonical implementations that call
+			// window.open after computing a base-path-aware href. They are the only places
+			// allowed to call window.open directly.
+			files: ['src/utils/navigation.ts', 'src/hooks/useSafeNavigate.ts'],
+			rules: {
+				'no-restricted-syntax': 'off',
+			},
+		},
 	],
 };

frontend/example.env

@@ -6,3 +6,6 @@ VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
 
 CI="1"
+
+# Uncomment to test sub-path deployment locally (e.g. app served at /signoz/).
+# VITE_BASE_PATH="/signoz/"

frontend/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<base href="<%- BASE_PATH %>" />
 		<meta charset="utf-8" />
 		<meta
 			http-equiv="Cache-Control"
@@ -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">
 		<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -113,7 +114,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="./css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/jest.config.ts

@@ -20,6 +20,7 @@ const config: Config.InitialOptions = {
 		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^hooks/useSafeNavigate\\.impl$': '<rootDir>/src/hooks/useSafeNavigate.ts',
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',

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

@@ -1,97 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useQuery } from 'react-query';
-
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { GetAlerts200, RenderErrorResponseDTO } from '../sigNoz.schemas';
-
-/**
- * This endpoint returns alerts for the organization
- * @summary Get alerts
- */
-export const getAlerts = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetAlerts200>({
-		url: `/api/v1/alerts`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAlertsQueryKey = () => {
-	return [`/api/v1/alerts`] as const;
-};
-
-export const getGetAlertsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetAlertsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAlerts>>> = ({
-		signal,
-	}) => getAlerts(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getAlerts>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAlertsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAlerts>>
->;
-export type GetAlertsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get alerts
- */
-
-export function useGetAlerts<
-	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAlertsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get alerts
- */
-export const invalidateGetAlerts = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAlertsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -1,646 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	ConfigReceiverDTO,
-	CreateChannel201,
-	DeleteChannelByIDPathParameters,
-	GetChannelByID200,
-	GetChannelByIDPathParameters,
-	ListChannels200,
-	RenderErrorResponseDTO,
-	UpdateChannelByIDPathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * This endpoint lists all notification channels for the organization
- * @summary List notification channels
- */
-export const listChannels = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListChannels200>({
-		url: `/api/v1/channels`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListChannelsQueryKey = () => {
-	return [`/api/v1/channels`] as const;
-};
-
-export const getListChannelsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listChannels>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListChannelsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listChannels>>> = ({
-		signal,
-	}) => listChannels(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listChannels>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListChannelsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listChannels>>
->;
-export type ListChannelsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List notification channels
- */
-
-export function useListChannels<
-	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listChannels>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListChannelsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List notification channels
- */
-export const invalidateListChannels = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListChannelsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a notification channel
- * @summary Create notification channel
- */
-export const createChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateChannel201>({
-		url: `/api/v1/channels`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-		signal,
-	});
-};
-
-export const getCreateChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationKey = ['createChannel'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createChannel>>
->;
-export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
-export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create notification channel
- */
-export const useCreateChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateChannelMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes a notification channel by ID
- * @summary Delete notification channel
- */
-export const deleteChannelByID = ({ id }: DeleteChannelByIDPathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/channels/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteChannelByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteChannelByID>>,
-		TError,
-		{ pathParams: DeleteChannelByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteChannelByID>>,
-	TError,
-	{ pathParams: DeleteChannelByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteChannelByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteChannelByID>>,
-		{ pathParams: DeleteChannelByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteChannelByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteChannelByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteChannelByID>>
->;
-
-export type DeleteChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete notification channel
- */
-export const useDeleteChannelByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteChannelByID>>,
-		TError,
-		{ pathParams: DeleteChannelByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteChannelByID>>,
-	TError,
-	{ pathParams: DeleteChannelByIDPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteChannelByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint returns a notification channel by ID
- * @summary Get notification channel by ID
- */
-export const getChannelByID = (
-	{ id }: GetChannelByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetChannelByID200>({
-		url: `/api/v1/channels/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetChannelByIDQueryKey = ({
-	id,
-}: GetChannelByIDPathParameters) => {
-	return [`/api/v1/channels/${id}`] as const;
-};
-
-export const getGetChannelByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetChannelByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getChannelByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetChannelByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getChannelByID>>> = ({
-		signal,
-	}) => getChannelByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getChannelByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetChannelByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getChannelByID>>
->;
-export type GetChannelByIDQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get notification channel by ID
- */
-
-export function useGetChannelByID<
-	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetChannelByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getChannelByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetChannelByIDQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get notification channel by ID
- */
-export const invalidateGetChannelByID = async (
-	queryClient: QueryClient,
-	{ id }: GetChannelByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetChannelByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint updates a notification channel by ID
- * @summary Update notification channel
- */
-export const updateChannelByID = (
-	{ id }: UpdateChannelByIDPathParameters,
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/channels/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-	});
-};
-
-export const getUpdateChannelByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateChannelByID>>,
-		TError,
-		{
-			pathParams: UpdateChannelByIDPathParameters;
-			data: BodyType<ConfigReceiverDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateChannelByID>>,
-	TError,
-	{
-		pathParams: UpdateChannelByIDPathParameters;
-		data: BodyType<ConfigReceiverDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateChannelByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateChannelByID>>,
-		{
-			pathParams: UpdateChannelByIDPathParameters;
-			data: BodyType<ConfigReceiverDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateChannelByID(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateChannelByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateChannelByID>>
->;
-export type UpdateChannelByIDMutationBody = BodyType<ConfigReceiverDTO>;
-export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update notification channel
- */
-export const useUpdateChannelByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateChannelByID>>,
-		TError,
-		{
-			pathParams: UpdateChannelByIDPathParameters;
-			data: BodyType<ConfigReceiverDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateChannelByID>>,
-	TError,
-	{
-		pathParams: UpdateChannelByIDPathParameters;
-		data: BodyType<ConfigReceiverDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateChannelByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint tests a notification channel by sending a test notification
- * @summary Test notification channel
- */
-export const testChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/channels/test`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-		signal,
-	});
-};
-
-export const getTestChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof testChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationKey = ['testChannel'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof testChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return testChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type TestChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof testChannel>>
->;
-export type TestChannelMutationBody = BodyType<ConfigReceiverDTO>;
-export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Test notification channel
- */
-export const useTestChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannel>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof testChannel>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationOptions = getTestChannelMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Deprecated: use /api/v1/channels/test instead
- * @deprecated
- * @summary Test notification channel (deprecated)
- */
-export const testChannelDeprecated = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/testChannel`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
-		signal,
-	});
-};
-
-export const getTestChannelDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof testChannelDeprecated>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationKey = ['testChannelDeprecated'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		{ data: BodyType<ConfigReceiverDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return testChannelDeprecated(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type TestChannelDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof testChannelDeprecated>>
->;
-export type TestChannelDeprecatedMutationBody = BodyType<ConfigReceiverDTO>;
-export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Test notification channel (deprecated)
- */
-export const useTestChannelDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof testChannelDeprecated>>,
-		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof testChannelDeprecated>>,
-	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
-	TContext
-> => {
-	const mutationOptions = getTestChannelDeprecatedMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -1,482 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	AlertmanagertypesPostableRoutePolicyDTO,
-	CreateRoutePolicy201,
-	DeleteRoutePolicyByIDPathParameters,
-	GetAllRoutePolicies200,
-	GetRoutePolicyByID200,
-	GetRoutePolicyByIDPathParameters,
-	RenderErrorResponseDTO,
-	UpdateRoutePolicy200,
-	UpdateRoutePolicyPathParameters,
-} from '../sigNoz.schemas';
-
-/**
- * This endpoint lists all route policies for the organization
- * @summary List route policies
- */
-export const getAllRoutePolicies = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetAllRoutePolicies200>({
-		url: `/api/v1/route_policies`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAllRoutePoliciesQueryKey = () => {
-	return [`/api/v1/route_policies`] as const;
-};
-
-export const getGetAllRoutePoliciesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetAllRoutePoliciesQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>
-	> = ({ signal }) => getAllRoutePolicies(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAllRoutePoliciesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAllRoutePolicies>>
->;
-export type GetAllRoutePoliciesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List route policies
- */
-
-export function useGetAllRoutePolicies<
-	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getAllRoutePolicies>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAllRoutePoliciesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List route policies
- */
-export const invalidateGetAllRoutePolicies = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAllRoutePoliciesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a route policy
- * @summary Create route policy
- */
-export const createRoutePolicy = (
-	alertmanagertypesPostableRoutePolicyDTO: BodyType<AlertmanagertypesPostableRoutePolicyDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateRoutePolicy201>({
-		url: `/api/v1/route_policies`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableRoutePolicyDTO,
-		signal,
-	});
-};
-
-export const getCreateRoutePolicyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRoutePolicy>>,
-		TError,
-		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createRoutePolicy>>,
-	TError,
-	{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-	TContext
-> => {
-	const mutationKey = ['createRoutePolicy'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createRoutePolicy>>,
-		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createRoutePolicy(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateRoutePolicyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createRoutePolicy>>
->;
-export type CreateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create route policy
- */
-export const useCreateRoutePolicy = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRoutePolicy>>,
-		TError,
-		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createRoutePolicy>>,
-	TError,
-	{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
-	TContext
-> => {
-	const mutationOptions = getCreateRoutePolicyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint deletes a route policy by ID
- * @summary Delete route policy
- */
-export const deleteRoutePolicyByID = ({
-	id,
-}: DeleteRoutePolicyByIDPathParameters) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/route_policies/${id}`,
-		method: 'DELETE',
-	});
-};
-
-export const getDeleteRoutePolicyByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-		TError,
-		{ pathParams: DeleteRoutePolicyByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-	TError,
-	{ pathParams: DeleteRoutePolicyByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteRoutePolicyByID'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-		{ pathParams: DeleteRoutePolicyByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteRoutePolicyByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteRoutePolicyByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteRoutePolicyByID>>
->;
-
-export type DeleteRoutePolicyByIDMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete route policy
- */
-export const useDeleteRoutePolicyByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-		TError,
-		{ pathParams: DeleteRoutePolicyByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
-	TError,
-	{ pathParams: DeleteRoutePolicyByIDPathParameters },
-	TContext
-> => {
-	const mutationOptions = getDeleteRoutePolicyByIDMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint returns a route policy by ID
- * @summary Get route policy by ID
- */
-export const getRoutePolicyByID = (
-	{ id }: GetRoutePolicyByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetRoutePolicyByID200>({
-		url: `/api/v1/route_policies/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetRoutePolicyByIDQueryKey = ({
-	id,
-}: GetRoutePolicyByIDPathParameters) => {
-	return [`/api/v1/route_policies/${id}`] as const;
-};
-
-export const getGetRoutePolicyByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetRoutePolicyByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getRoutePolicyByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetRoutePolicyByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getRoutePolicyByID>>
-	> = ({ signal }) => getRoutePolicyByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getRoutePolicyByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetRoutePolicyByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getRoutePolicyByID>>
->;
-export type GetRoutePolicyByIDQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get route policy by ID
- */
-
-export function useGetRoutePolicyByID<
-	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetRoutePolicyByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getRoutePolicyByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetRoutePolicyByIDQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get route policy by ID
- */
-export const invalidateGetRoutePolicyByID = async (
-	queryClient: QueryClient,
-	{ id }: GetRoutePolicyByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetRoutePolicyByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint updates a route policy by ID
- * @summary Update route policy
- */
-export const updateRoutePolicy = (
-	{ id }: UpdateRoutePolicyPathParameters,
-	alertmanagertypesPostableRoutePolicyDTO: BodyType<AlertmanagertypesPostableRoutePolicyDTO>,
-) => {
-	return GeneratedAPIInstance<UpdateRoutePolicy200>({
-		url: `/api/v1/route_policies/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableRoutePolicyDTO,
-	});
-};
-
-export const getUpdateRoutePolicyMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRoutePolicy>>,
-		TError,
-		{
-			pathParams: UpdateRoutePolicyPathParameters;
-			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateRoutePolicy>>,
-	TError,
-	{
-		pathParams: UpdateRoutePolicyPathParameters;
-		data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateRoutePolicy'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateRoutePolicy>>,
-		{
-			pathParams: UpdateRoutePolicyPathParameters;
-			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateRoutePolicy(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateRoutePolicyMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateRoutePolicy>>
->;
-export type UpdateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update route policy
- */
-export const useUpdateRoutePolicy = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRoutePolicy>>,
-		TError,
-		{
-			pathParams: UpdateRoutePolicyPathParameters;
-			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateRoutePolicy>>,
-	TError,
-	{
-		pathParams: UpdateRoutePolicyPathParameters;
-		data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateRoutePolicyMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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,

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
+import { openExternalLink } from 'utils/navigation';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
@@ -8,7 +9,7 @@ import './AuthHeader.styles.scss';
 
 function AuthHeader(): JSX.Element {
 	const handleGetHelp = useCallback((): void => {
-		window.open('https://signoz.io/support/', '_blank');
+		openExternalLink('https://signoz.io/support/');
 	}, []);
 
 	return (

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -7,11 +7,13 @@ import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 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 { openInNewTab } from 'utils/navigation';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +135,11 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			if (sameTab) {
+				history.push(newExplorerPath);
+			} else {
+				openInNewTab(newExplorerPath);
+			}
 		},
 		[
 			prepareQuery,

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -11,6 +11,7 @@ import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
+import { openExternalLink } from 'utils/navigation';
 
 import ChangelogRenderer from './components/ChangelogRenderer';
 
@@ -86,11 +87,7 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 	}, [checkScroll]);
 
 	const onClickUpdateWorkspace = (): void => {
-		window.open(
-			'https://signoz.io/upgrade-path',
-			'_blank',
-			'noopener,noreferrer',
-		);
+		openExternalLink('https://signoz.io/upgrade-path');
 	};
 
 	const onClickScrollForMore = (): void => {

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import { VIEW_TYPES, VIEWS } from './constants';
@@ -330,10 +331,7 @@ function HostMetricsDetails({
 
 			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,
@@ -352,10 +350,7 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openExternalLink } 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');
+			openExternalLink(url);
 		}
 	};
 	return (

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openExternalLink } 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');
+			openExternalLink(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.styles.scss

@@ -1,26 +0,0 @@
-.query-cancelled-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(--bg-vanilla-400);
-	}
-
-	&__sub-text {
-		color: var(--bg-vanilla-300);
-	}
-}

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,35 +0,0 @@
-import { Typography } from 'antd';
-import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
-
-import './QueryCancelledPlaceholder.styles.scss';
-
-interface QueryCancelledPlaceholderProps {
-	subText?: string;
-}
-
-function QueryCancelledPlaceholder({
-	subText,
-}: QueryCancelledPlaceholderProps): JSX.Element {
-	return (
-		<div className="query-cancelled-placeholder">
-			<img
-				className="query-cancelled-placeholder__emoji"
-				src={eyesEmojiUrl}
-				alt="eyes emoji"
-			/>
-			<Typography className="query-cancelled-placeholder__text">
-				Query cancelled.
-				<span className="query-cancelled-placeholder__sub-text">
-					{' '}
-					{subText || 'Click "Run Query" to load data.'}
-				</span>
-			</Typography>
-		</div>
-	);
-}
-
-QueryCancelledPlaceholder.defaultProps = {
-	subText: undefined,
-};
-
-export default QueryCancelledPlaceholder;

frontend/src/components/QueryCancelledPlaceholder/index.ts

@@ -1 +0,0 @@
-export { default } from './QueryCancelledPlaceholder';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/LogsQuickFilterEmptyState.tsx

@@ -2,6 +2,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import EmptyQuickFilterIcon from 'assets/CustomIcons/EmptyQuickFilterIcon';
 import { ArrowUpRight } from 'lucide-react';
+import { openExternalLink } from 'utils/navigation';
 
 const QUICK_FILTER_DOC_PATHS: Record<string, string> = {
 	severity_text: 'severity-text',
@@ -22,9 +23,8 @@ function LogsQuickFilterEmptyState({
 	const handleLearnMoreClick = (): void => {
 		const section = QUICK_FILTER_DOC_PATHS[attributeKey];
 
-		window.open(
+		openExternalLink(
 			`https://signoz.io/docs/logs-management/features/logs-quick-filters#${section}`,
-			'_blank',
 		);
 	};
 	return (

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',

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}

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';
 
@@ -107,7 +108,7 @@ function DependentServices({
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
 							url.search = urlQuery.toString();
-							window.open(url.toString(), '_blank');
+							openInNewTab(`${url.pathname}${url.search}`);
 						},
 						className: 'clickable-row',
 					})}

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"

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 { openExternalLink } 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');
+		openExternalLink(url);
 	}
 	const renderOptions = useMemo(
 		() => (

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

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

frontend/src/container/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}
 		/>
 	);
 

frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx

@@ -1,11 +1,9 @@
-import { useCallback, 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,17 +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);
-	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) {
@@ -88,7 +76,6 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
-		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -119,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) => (
@@ -148,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}

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -21,6 +21,7 @@ import { useGetHosts, usePutHost } from 'api/generated/services/zeus';
 import { AxiosError } from 'axios';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
+import { openExternalLink } from 'utils/navigation';
 
 import CustomDomainEditModal from './CustomDomainEditModal';
 
@@ -48,7 +49,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
-						window.open(url, '_blank', 'noopener,noreferrer');
+						openExternalLink(url);
 					}}
 				>
 					Visit new URL

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

@@ -16,6 +16,7 @@ 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 { openInNewTab } from 'utils/navigation';
 
 import './PublicDashboard.styles.scss';
 
@@ -294,7 +295,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										window.open(publicDashboardURL, '_blank');
+										openInNewTab(publicDashboardURL);
 									}
 								}}
 							/>

frontend/src/container/FormAlertRules/BasicInfo.tsx

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

frontend/src/container/FormAlertRules/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 => {
@@ -349,9 +338,7 @@ function ChartPreview({
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
 
 	const chartDataAvailable =
-		chartData &&
-		!queryResponse.isLoading &&
-		(!queryResponse.isError || isCancelled);
+		chartData && !queryResponse.isError && !queryResponse.isLoading;
 
 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -372,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 && !chartData && !queryResponse.isLoading && (
-						<QueryCancelledPlaceholder subText='Click "Run Query" to load the chart preview.' />
-					)}
-
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
 						<GridPanelSwitch
 							options={options}
@@ -420,8 +403,6 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
-	isCancelled: false,
-	onFetchingStateChange: undefined,
 };
 
 export default ChartPreview;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -29,8 +29,6 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
-	isLoadingQueries,
-	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -178,8 +176,6 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
-										handleCancelQuery={handleCancelQuery}
-										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -199,11 +195,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}
@@ -245,8 +237,6 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;

frontend/src/container/FormAlertRules/index.tsx

@@ -46,6 +46,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+import { openExternalLink } from 'utils/navigation';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -127,13 +128,6 @@ function FormAlertRules({
 
 	// use query client
 	const ruleCache = useQueryClient();
-	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
-	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
-
-	const handleCancelAlertQuery = useCallback(() => {
-		ruleCache.cancelQueries(REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW);
-		setIsChartQueryCancelled(true);
-	}, [ruleCache]);
 
 	const isNewRule = !ruleId || isEmpty(ruleId);
 
@@ -720,8 +714,6 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			isCancelled={isChartQueryCancelled}
-			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -740,8 +732,6 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
-			isCancelled={isChartQueryCancelled}
-			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -782,7 +772,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openExternalLink(url);
 		}
 	}
 
@@ -924,15 +914,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}

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 {
@@ -87,7 +86,6 @@ function FullView({
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
-	const queryClient = useQueryClient();
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -205,8 +203,8 @@ function FullView({
 		});
 	}, [selectedPanelType]);
 
-	const queryRangeKey = useMemo(
-		() => [
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: [
 			widget?.query,
 			selectedPanelType,
 			requestData,
@@ -214,19 +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 handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(queryRangeKey);
-	}, [queryClient, queryRangeKey]);
-
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -365,8 +354,6 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
-									isLoadingQueries={response.isFetching}
-									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -13,6 +13,7 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { GettableAlert } from 'types/api/alerts/get';
 import { USER_ROLES } from 'types/roles';
+import { openExternalLink } from 'utils/navigation';
 
 import beaconUrl from '@/assets/Icons/beacon.svg';
 
@@ -103,11 +104,7 @@ export default function AlertRules({
 									source: 'Alert Rules',
 								});
 
-								window.open(
-									'https://signoz.io/docs/alerts/',
-									'_blank',
-									'noreferrer noopener',
-								);
+								openExternalLink('https://signoz.io/docs/alerts/');
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />

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 { openExternalLink, openInNewTab } from 'utils/navigation';
 
 import dialsUrl from '@/assets/Icons/dials.svg';
 
@@ -87,10 +88,7 @@ export default function Dashboards({
 								logEvent('Homepage: Learn more clicked', {
 									source: 'Dashboards',
 								});
-								window.open(
-									'https://signoz.io/docs/userguide/manage-dashboards/',
-									'_blank',
-								);
+								openExternalLink('https://signoz.io/docs/userguide/manage-dashboards/');
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />
@@ -114,7 +112,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							window.open(getLink(), '_blank');
+							openInNewTab(getLink());
 						} else {
 							safeNavigate(getLink());
 						}

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

@@ -9,6 +9,7 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { openExternalLink } 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');
+			openExternalLink(DOCS_LINKS.ADD_DATA_SOURCE);
 		}
 	};
 

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

@@ -8,6 +8,7 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
+import { openExternalLink } 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',
-															);
+															openExternalLink(item.docsLink || '');
 														}
 													}}
 												>
@@ -119,7 +116,7 @@ function HomeChecklist({
 																step: item.id,
 															});
 
-															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
+															openExternalLink(item.docsLink || '');
 														}}
 													>
 														<BookOpenText size={16} />

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -19,12 +19,13 @@ import { useAppContext } from 'providers/App/App';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
+import { openExternalLink } from 'utils/navigation';
 
+import circusTentUrl from '@/assets/Icons/circus-tent.svg';
+import eightBallUrl from '@/assets/Icons/eight-ball.svg';
 import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
 import logsUrl from '@/assets/Icons/logs.svg';
 
-import { getItemIcon } from '../constants';
-
 export default function SavedViews({
 	onUpdateChecklistDoneItem,
 	loadingUserPreferences,
@@ -196,11 +197,7 @@ export default function SavedViews({
 									entity: selectedEntity,
 								});
 
-								window.open(
-									'https://signoz.io/docs/product-features/saved-view/',
-									'_blank',
-									'noopener noreferrer',
-								);
+								openExternalLink('https://signoz.io/docs/product-features/saved-view/');
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />
@@ -229,7 +226,7 @@ export default function SavedViews({
 					>
 						<div className="saved-view-item-name-container home-data-item-name-container">
 							<img
-								src={getItemIcon(String(view.id))}
+								src={view.id % 2 === 0 ? eightBallUrl : circusTentUrl}
 								alt="alert-rules"
 								className="alert-rules-img"
 							/>

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 { openExternalLink } 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',
-									);
+									openExternalLink(DOCS_LINKS.ADD_DATA_SOURCE);
 								}
 							}}
 						>
@@ -97,10 +94,7 @@ const EmptyState = memo(
 								logEvent('Homepage: Learn more clicked', {
 									source: 'Service Metrics',
 								});
-								window.open(
-									'https://signoz.io/docs/instrumentation/overview/',
-									'_blank',
-								);
+								openExternalLink('https://signoz.io/docs/instrumentation/overview/');
 							}}
 						>
 							Learn more <ArrowUpRight size={12} />

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 { openExternalLink } 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',
-										);
+										openExternalLink(DOCS_LINKS.ADD_DATA_SOURCE);
 									}
 								}}
 							>
@@ -151,10 +148,7 @@ export default function ServiceTraces({
 									logEvent('Homepage: Learn more clicked', {
 										source: 'Service Traces',
 									});
-									window.open(
-										'https://signoz.io/docs/instrumentation/overview/',
-										'_blank',
-									);
+									openExternalLink('https://signoz.io/docs/instrumentation/overview/');
 								}}
 							>
 								Learn more <ArrowUpRight size={12} />

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -49,6 +49,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import ClusterEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -414,10 +415,7 @@ function ClusterDetails({
 
 			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,
@@ -436,10 +434,7 @@ function ClusterDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -48,6 +48,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import DaemonSetEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -429,10 +430,7 @@ function DaemonSetDetails({
 
 			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,
@@ -451,10 +449,7 @@ function DaemonSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import DeploymentEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -433,10 +434,7 @@ function DeploymentDetails({
 
 			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,
@@ -455,10 +453,7 @@ function DeploymentDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -48,6 +48,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import JobEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -427,10 +428,7 @@ function JobDetails({
 
 			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,
@@ -449,10 +447,7 @@ function JobDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import NamespaceEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -419,10 +420,7 @@ function NamespaceDetails({
 
 			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,
@@ -441,10 +439,7 @@ function NamespaceDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import NodeLogs from '../../EntityDetailsUtils/EntityLogs';
@@ -416,10 +417,7 @@ function NodeDetails({
 
 			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,
@@ -438,10 +436,7 @@ function NodeDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx

@@ -50,6 +50,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import PodEvents from '../../EntityDetailsUtils/EntityEvents';
@@ -435,10 +436,7 @@ function PodDetails({
 
 			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,
@@ -457,10 +455,7 @@ function PodDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx

@@ -53,6 +53,7 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -431,10 +432,7 @@ function StatefulSetDetails({
 
 			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,
@@ -453,10 +451,7 @@ function StatefulSetDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

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

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

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

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

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -83,6 +83,7 @@ import {
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
+import { openExternalLink, openInNewTab } from 'utils/navigation';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 import dashboardsUrl from '@/assets/Icons/dashboards.svg';
@@ -457,7 +458,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														window.open(getLink(), '_blank');
+														openInNewTab(getLink());
 													}}
 												>
 													Open in New Tab
@@ -739,9 +740,8 @@ function DashboardsList(): JSX.Element {
 									className="learn-more"
 									data-testid="learn-more"
 									onClick={(): void => {
-										window.open(
+										openExternalLink(
 											'https://signoz.io/docs/userguide/manage-dashboards?utm_source=product&utm_medium=dashboard-list-empty-state',
-											'_blank',
 										);
 									}}
 								>

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

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

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

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

frontend/src/container/LogDetailedView/TableView.tsx

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

frontend/src/container/LogsError/LogsError.tsx

@@ -2,6 +2,7 @@ import { Typography } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
+import { openExternalLink } from 'utils/navigation';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 
@@ -14,7 +15,7 @@ export default function LogsError(): JSX.Element {
 		if (isCloudUserVal) {
 			history.push('/support');
 		} else {
-			window.open('https://signoz.io/slack', '_blank');
+			openExternalLink('https://signoz.io/slack');
 		}
 	};
 

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

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;

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,9 +1,8 @@
-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 { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -22,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('');
 
@@ -76,11 +67,7 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -92,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) {
@@ -121,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(
@@ -146,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"

frontend/src/container/MetricsApplication/utils.ts

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

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>

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>
 				}
 			/>

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,7 +11,6 @@ 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';
@@ -37,7 +36,6 @@ import {
 } from './utils';
 
 function TimeSeries({
-	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -48,7 +46,6 @@ function TimeSeries({
 	setYAxisUnit,
 	showYAxisUnitSelector,
 	metrics,
-	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -101,11 +98,7 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: ({
-				signal,
-			}: {
-				signal?: AbortSignal;
-			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -118,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) {
@@ -144,11 +131,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(
@@ -249,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;

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;
 }

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

@@ -1,11 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
 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 { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -111,21 +109,6 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);
 
-	const [isCancelled, setIsCancelled] = useState(false);
-
-	// Auto-reset isCancelled when a new query starts fetching
-	useEffect(() => {
-		if (isInspectMetricsRefetching) {
-			setIsCancelled(false);
-		}
-	}, [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);
@@ -196,7 +179,7 @@ function Inspect({
 			);
 		}
 
-		if (isInspectMetricsError && !isCancelled) {
+		if (isInspectMetricsError) {
 			const errorMessage = 'Error loading inspect metrics.';
 
 			return (
@@ -215,13 +198,7 @@ function Inspect({
 					data-testid="inspect-metrics-empty"
 					className="inspect-metrics-fallback"
 				>
-					<Empty
-						description={
-							isCancelled
-								? 'Query was cancelled. Run the query to see results.'
-								: 'No time series found for this metric to inspect.'
-						}
-					/>
+					<Empty description="No time series found for this metric to inspect." />
 				</div>
 			);
 		}
@@ -257,14 +234,6 @@ function Inspect({
 						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">
@@ -288,7 +257,6 @@ function Inspect({
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
-		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,

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

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(() => {

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 {

frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts

@@ -1,8 +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 { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -109,7 +107,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+			'inspectMetrics',
 			metricName,
 			start,
 			end,
@@ -129,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 < 3;
-		},
 	});
 
 	const inspectMetricsData = useMemo(

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,8 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							window.open(
-								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboardId,
-								}),
-								'_blank',
+							openInNewTab(
+								generatePath(ROUTES.DASHBOARD, { dashboardId: dashboard.dashboardId }),
 							);
 						}}
 						className="dashboards-popover-content-item"

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

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

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 {

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;

frontend/src/container/NewWidget/LeftContainer/index.tsx

@@ -1,5 +1,5 @@
-import { memo, useCallback, useEffect, useMemo } 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,10 +49,6 @@ function LeftContainer({
 		],
 		[globalSelectedInterval, requestData, minTime, maxTime],
 	);
-	const handleCancelQuery = useCallback(() => {
-		queryClient.cancelQueries(queryRangeKey);
-	}, [queryClient, queryRangeKey]);
-
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
@@ -80,8 +75,8 @@ function LeftContainer({
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
+					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
-					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={selectedDashboard?.id}

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 { openExternalLink } 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');
+			openExternalLink(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE);
 		} else if (dataSource === DataSource.METRICS) {
-			window.open(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE, '_blank');
+			openExternalLink(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE);
 		} else {
-			window.open(`${DOCLINKS.USER_GUIDE}${dataSource}/`, '_blank');
+			openExternalLink(`${DOCLINKS.USER_GUIDE}${dataSource}/`);
 		}
 	};
 	return (

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx

@@ -1,3 +1,4 @@
+// hippa.svg and soc2.svg do not exist in src/assets — suppressed until assets are added
 import { Dot } from 'lucide-react';
 
 import './OnboardingFooter.styles.scss';
@@ -12,7 +13,6 @@ export function OnboardingFooter(): JSX.Element {
 					className="footer-content"
 					rel="noreferrer"
 				>
-					{/* hippa.svg does not exist in src/assets — suppressed until asset is added */}
 					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
 					<img src="/logos/hippa.svg" alt="HIPPA" className="footer-logo" />
 					<span className="footer-text">HIPPA</span>
@@ -24,7 +24,6 @@ export function OnboardingFooter(): JSX.Element {
 					className="footer-content"
 					rel="noreferrer"
 				>
-					{/* soc2.svg does not exist in src/assets — suppressed until asset is added */}
 					{/* eslint-disable-next-line rulesdir/no-unsupported-asset-pattern */}
 					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
 					<span className="footer-text">SOC2</span>

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 'antd';
 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,17 +27,33 @@ 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
 			type="default"
 			icon={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn periscope-btn danger', className)}
-			onClick={handleCancelQuery}
+			onClick={onCancel}
 		>
 			Cancel
 		</Button>
@@ -52,7 +61,7 @@ function RunQueryBtn({
 		<Button
 			type="primary"
 			className={cx('run-query-btn periscope-btn primary', className)}
-			disabled={disabled}
+			disabled={isLoading || !onStageRunQuery}
 			onClick={onStageRunQuery}
 			icon={<Play size={14} />}
 		>

frontend/src/container/QueryBuilder/components/RunQueryBtn/__test__/RunQueryBtn.test.tsx

@@ -1,8 +1,18 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import RunQueryBtn from '../RunQueryBtn';
 
+jest.mock('react-query', () => {
+	const actual = jest.requireActual('react-query');
+	return {
+		...actual,
+		useIsFetching: jest.fn(),
+		useQueryClient: jest.fn(),
+	};
+});
+import { useIsFetching, useQueryClient } from 'react-query';
+
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -16,60 +26,79 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
+		(useIsFetching as jest.Mock).mockReturnValue(0);
+		(useQueryClient as jest.Mock).mockReturnValue({
+			cancelQueries: jest.fn(),
+		});
 	});
 
-	test('renders run state and triggers on click', async () => {
-		const user = userEvent.setup();
+	test('uses isLoadingQueries prop over useIsFetching', () => {
+		// Simulate fetching but prop forces not loading
+		(useIsFetching as jest.Mock).mockReturnValue(1);
 		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
+		// Should show "Run Query" (not cancel)
+		const runBtn = screen.getByRole('button', { name: /run query/i });
+		expect(runBtn).toBeInTheDocument();
+		expect(runBtn).toBeEnabled();
+	});
+
+	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
+		(useIsFetching as jest.Mock).mockReturnValue(0);
+		const cancelQueries = jest.fn();
+		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+
 		const onCancel = jest.fn();
-		render(
-			<RunQueryBtn
-				onStageRunQuery={onRun}
-				handleCancelQuery={onCancel}
-				isLoadingQueries={false}
-			/>,
-		);
+		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+
+		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+		fireEvent.click(cancelBtn);
+		expect(onCancel).toHaveBeenCalledTimes(1);
+		expect(cancelQueries).not.toHaveBeenCalled();
+	});
+
+	test('renders run state and triggers on click', () => {
+		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} />);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		await user.click(btn);
+		fireEvent.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});
 
-	test('shows cancel state and calls handleCancelQuery', async () => {
-		const user = userEvent.setup();
-		const onRun = jest.fn();
-		const onCancel = jest.fn();
-		render(
-			<RunQueryBtn
-				onStageRunQuery={onRun}
-				handleCancelQuery={onCancel}
-				isLoadingQueries
-			/>,
-		);
-		const cancel = screen.getByRole('button', { name: /cancel/i });
-		await user.click(cancel);
-		expect(onCancel).toHaveBeenCalledTimes(1);
-	});
-
-	test('disabled when disabled prop is true', () => {
-		render(<RunQueryBtn disabled />);
+	test('disabled when onStageRunQuery is undefined', () => {
+		render(<RunQueryBtn />);
 		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
 	});
 
-	test('disabled when no props provided', () => {
-		render(<RunQueryBtn />);
-		expect(
-			screen.getByRole('button', { name: /run query/i }),
-		).toBeInTheDocument();
+	test('shows cancel state and calls handleCancelQuery', () => {
+		const onCancel = jest.fn();
+		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		const cancel = screen.getByRole('button', { name: /cancel/i });
+		fireEvent.click(cancel);
+		expect(onCancel).toHaveBeenCalledTimes(1);
+	});
+
+	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
+		(useIsFetching as jest.Mock).mockReturnValue(1);
+		const cancelQueries = jest.fn();
+		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+
+		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
+		render(<RunQueryBtn queryRangeKey={queryKey} />);
+
+		// Button switches to cancel state
+		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+		expect(cancelBtn).toBeInTheDocument();
+
+		// Clicking cancel calls cancelQueries with the key
+		fireEvent.click(cancelBtn);
+		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
 	});
 
 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn
-				onStageRunQuery={jest.fn()}
-				handleCancelQuery={jest.fn()}
-				isLoadingQueries={false}
-			/>,
+			<RunQueryBtn onStageRunQuery={(): void => {}} />,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -82,11 +111,7 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn
-				onStageRunQuery={jest.fn()}
-				handleCancelQuery={jest.fn()}
-				isLoadingQueries={false}
-			/>,
+			<RunQueryBtn onStageRunQuery={(): void => {}} />,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -96,14 +121,8 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('renders custom label when provided', () => {
-		render(
-			<RunQueryBtn
-				onStageRunQuery={jest.fn()}
-				handleCancelQuery={jest.fn()}
-				isLoadingQueries={false}
-				label="Stage & Run Query"
-			/>,
-		);
+		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();

frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import { MutableRefObject, useEffect } from 'react';
+import { useQueryClient } from 'react-query';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 
@@ -8,19 +9,23 @@ import './ToolbarActions.styles.scss';
 
 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
-	isLoadingQueries: boolean;
-	handleCancelQuery: () => void;
+	isLoadingQueries?: boolean;
+	listQueryKeyRef?: MutableRefObject<any>;
+	chartQueryKeyRef?: MutableRefObject<any>;
 	showLiveLogs?: boolean;
 }
 
 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
-	handleCancelQuery,
+	listQueryKeyRef,
+	chartQueryKeyRef,
 	showLiveLogs,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
+	const queryClient = useQueryClient();
+
 	useEffect(() => {
 		if (showLiveLogs) {
 			return;
@@ -37,11 +42,20 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn disabled />
+				<RunQueryBtn />
 			</div>
 		);
 	}
 
+	const handleCancelQuery = (): void => {
+		if (listQueryKeyRef?.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		if (chartQueryKeyRef?.current) {
+			queryClient.cancelQueries(chartQueryKeyRef.current);
+		}
+	};
+
 	return (
 		<div className="right-toolbar-actions-container">
 			<RunQueryBtn
@@ -54,5 +68,8 @@ export default function RightToolbarActions({
 }
 
 RightToolbarActions.defaultProps = {
+	isLoadingQueries: false,
+	listQueryKeyRef: null,
+	chartQueryKeyRef: null,
 	showLiveLogs: false,
 };

frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx

@@ -92,12 +92,7 @@ describe('ToolbarActions', () => {
 		const onStageRunQuery = jest.fn();
 		const { queryByText } = render(
 			<MockQueryClientProvider>
-				<RightToolbarActions
-					onStageRunQuery={onStageRunQuery}
-					isLoadingQueries={false}
-					handleCancelQuery={jest.fn()}
-				/>
-				,
+				<RightToolbarActions onStageRunQuery={onStageRunQuery} />,
 			</MockQueryClientProvider>,
 		);
 

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

@@ -115,6 +115,7 @@ const useBaseAggregateOptions = ({
 					key={id}
 					icon={<LinkOutlined />}
 					onClick={(): void => {
+						// eslint-disable-next-line no-restricted-syntax -- context links can be internal or external URLs provided by users
 						window.open(url, '_blank');
 						onClose?.();
 					}}

frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx

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

frontend/src/container/SideNav/SideNav.tsx

@@ -64,7 +64,7 @@ import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { isModifierKeyPressed } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
-import { openInNewTab } from 'utils/navigation';
+import { openExternalLink, openInNewTab } from 'utils/navigation';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
@@ -818,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		);
 
 		if (item && !('type' in item) && item.isExternal && item.url) {
-			window.open(item.url, '_blank');
+			openExternalLink(item.url);
 		}
 
 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;

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

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

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

@@ -17,6 +17,7 @@ import { BarChart2, Compass, X } from 'lucide-react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Span } from 'types/api/trace/getTraceV2';
 import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 
 import { RelatedSignalsViews } from '../constants';
 import SpanLogs from '../SpanLogs/SpanLogs';
@@ -157,13 +158,7 @@ function SpanRelatedSignals({
 		searchParams.set(QueryParams.startTime, startTimeMs.toString());
 		searchParams.set(QueryParams.endTime, endTimeMs.toString());
 
-		window.open(
-			`${window.location.origin}${
-				ROUTES.LOGS_EXPLORER
-			}?${searchParams.toString()}`,
-			'_blank',
-			'noopener,noreferrer',
-		);
+		openInNewTab(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`);
 	}, [selectedSpan.traceId, traceStartTime, traceEndTime]);
 
 	const emptyStateConfig = useMemo(

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

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

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -31,6 +31,7 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Span } from 'types/api/trace/getTraceV2';
+import { openExternalLink } from 'utils/navigation';
 import { toFixed } from 'utils/toFixed';
 
 import funnelAddUrl from '@/assets/Icons/funnel-add.svg';
@@ -547,12 +548,11 @@ function Success(props: ISuccessProps): JSX.Element {
 						icon={<ArrowUpRight size={14} />}
 						className="right-info"
 						type="text"
-						onClick={(): WindowProxy | null =>
-							window.open(
+						onClick={(): void => {
+							openExternalLink(
 								'https://signoz.io/docs/userguide/traces/#missing-spans',
-								'_blank',
-							)
-						}
+							);
+						}}
 					>
 						Learn More
 					</Button>

frontend/src/container/TracesTableComponent/TracesTableComponent.tsx

@@ -28,6 +28,7 @@ import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { openInNewTab } from 'utils/navigation';
 
 import './TracesTableComponent.styles.scss';
 
@@ -86,7 +87,7 @@ function TracesTableComponent({
 				event.preventDefault();
 				event.stopPropagation();
 				if (event.metaKey || event.ctrlKey) {
-					window.open(getTraceLink(record), '_blank');
+					openInNewTab(getTraceLink(record));
 				} else {
 					history.push(getTraceLink(record));
 				}

frontend/src/hooks/integration/aws/useIntegrationModal.ts

@@ -17,6 +17,7 @@ import {
 	ConnectionUrlResponse,
 	GenerateConnectionUrlPayload,
 } from 'types/api/integrations/aws';
+import { openExternalLink } from 'utils/navigation';
 import { regions } from 'utils/regions';
 
 import logEvent from '../../../api/common/logEvent';
@@ -120,7 +121,7 @@ export function useIntegrationModal({
 					logEvent('AWS Integration: Account connection attempt redirected to AWS', {
 						id: data.account_id,
 					});
-					window.open(data.connection_url, '_blank');
+					openExternalLink(data.connection_url);
 					setModalState(ModalStateEnum.WAITING);
 					setAccountId(data.account_id);
 				},

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -22,6 +22,7 @@ import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType } from 'utils/getGraphType';
+import { openInNewTab } from 'utils/navigation';
 
 const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 	const queryRangeMutation = useMutation(getSubstituteVars);
@@ -92,7 +93,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 
 				const url = `${ROUTES.ALERTS_NEW}?${params.toString()}`;
 
-				window.open(url, '_blank', 'noreferrer');
+				openInNewTab(url);
 			},
 			onError: () => {
 				notifications.error({

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -132,10 +132,6 @@ export const useGetQueryRange: UseGetQueryRange = (
 			return options.retry;
 		}
 		return (failureCount: number, error: Error): boolean => {
-			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-				return false;
-			}
-
 			let status: number | undefined;
 
 			if (error instanceof APIError) {

frontend/src/hooks/thirdPartyApis/useListOverview.ts

@@ -1,6 +1,5 @@
 import { useQuery, UseQueryResult } from 'react-query';
 import listOverview from 'api/thirdPartyApis/listOverview';
-import { isAxiosError } from 'axios';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
@@ -21,21 +20,12 @@ export const useListOverview = (
 			showIp,
 			filter.expression,
 		],
-		queryFn: ({ signal }) =>
-			listOverview(
-				{
-					start,
-					end,
-					show_ip: showIp,
-					filter,
-				},
-				signal,
-			),
-		retry: (failureCount, error): boolean => {
-			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
-				return false;
-			}
-			return failureCount < 3;
-		},
+		queryFn: () =>
+			listOverview({
+				start,
+				end,
+				show_ip: showIp,
+				filter,
+			}),
 	});
 };