refactor: migrate all errors to AUTO_REFRESH_QUERY pattern

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.json
+frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
 ```
 
-## JSON Structure Overview
+## Structure Overview
 
-The configuration file is a JSON array containing data source objects. Each object represents a selectable option in the onboarding flow.
+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.
 
 ## Data Source Object Keys
 
@@ -24,7 +24,7 @@ The configuration file is a JSON array containing data source objects. Each obje
 | `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` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
+| `imgUrl` | `string` | Imported SVG URL **(SVG required)** (e.g., `import ec2Url from '@/assets/Logos/ec2.svg'`, then use `ec2Url`) |
 
 ### Optional Keys
 
@@ -57,36 +57,34 @@ The `module` key determines where users are redirected after completing onboardi
 
 The `question` object enables multi-step selection flows:
 
-```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/"
-        }
-    ]
-  }
-}
+```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/',
+    },
+  ],
+},
 ```
 
 ### Question Keys
@@ -106,152 +104,161 @@ Options can be simple (direct link) or nested (with another question):
 
 ### Simple Option (Direct Link)
 
-```json
+```ts
 {
-  "key": "aws-ec2-logs",
-  "label": "Logs",
-  "imgUrl": "/Logos/ec2.svg",
-  "link": "/docs/userguide/collect_logs_from_file/"
-}
+  key: 'aws-ec2-logs',
+  label: 'Logs',
+  imgUrl: ec2Url,
+  link: '/docs/userguide/collect_logs_from_file/',
+},
 ```
 
 ### Option with Internal Redirect
 
-```json
+```ts
 {
-  "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-one-click',
+  label: 'One Click AWS',
+  imgUrl: ec2Url,
+  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)
 
-```json
+```ts
 {
-  "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": [...]
-  }
-}
+  key: 'aws-ec2-metrics',
+  label: 'Metrics',
+  imgUrl: ec2Url,
+  question: {
+    desc: 'How would you like to set up monitoring?',
+    helpText: 'Choose your setup method.',
+    options: [...],
+  },
+},
 ```
 
 ## Examples
 
 ### Simple Data Source (Direct Link)
 
-```json
+```ts
+import elbUrl from '@/assets/Logos/elb.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "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": "/Logos/elb.svg",
-  "link": "/docs/aws-monitoring/elb/"
-}
+  imgUrl: elbUrl,
+  link: '/docs/aws-monitoring/elb/',
+},
 ```
 
 ### Data Source with Single Question Level
 
-```json
+```ts
+import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "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": [
+  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: [
       {
-        "key": "logging",
-        "label": "Logs",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/logging/"
+        key: 'logging',
+        label: 'Logs',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/logging/',
       },
       {
-        "key": "metrics",
-        "label": "Metrics",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/metrics/"
+        key: 'metrics',
+        label: 'Metrics',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/metrics/',
       },
       {
-        "key": "tracing",
-        "label": "Traces",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/tracing/"
-      }
-    ]
-  }
-}
+        key: 'tracing',
+        label: 'Traces',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/tracing/',
+      },
+    ],
+  },
+},
 ```
 
 ### Data Source with Nested Questions (2-3 Levels)
 
-```json
+```ts
+import ec2Url from '@/assets/Logos/ec2.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "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": [
+  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: [
       {
-        "key": "aws-ec2-logs",
-        "label": "Logs",
-        "imgUrl": "/Logos/ec2.svg",
-        "link": "/docs/userguide/collect_logs_from_file/"
+        key: 'aws-ec2-logs',
+        label: 'Logs',
+        imgUrl: ec2Url,
+        link: '/docs/userguide/collect_logs_from_file/',
       },
       {
-        "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',
+        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-one-click",
-              "label": "One Click AWS",
-              "imgUrl": "/Logos/ec2.svg",
-              "link": "/integrations?integration=aws-integration&service=ec2",
-              "internalRedirect": true
+              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-manual",
-              "label": "Manual Setup",
-              "imgUrl": "/Logos/ec2.svg",
-              "link": "/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/"
-            }
-          ]
-        }
-      }
-    ]
-  }
-}
+              key: 'aws-ec2-metrics-manual',
+              label: 'Manual Setup',
+              imgUrl: ec2Url,
+              link: '/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/',
+            },
+          ],
+        },
+      },
+    ],
+  },
+},
 ```
 
 ## Best Practices
@@ -270,11 +277,16 @@ Options can be simple (direct link) or nested (with another question):
 
 ### 3. Logos
 
-- Place logo files in `public/Logos/`
+- Place logo files in `src/assets/Logos/`
 - Use SVG format
-- Reference as `"/Logos/your-logo.svg"`
+- 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,
+  ```
 - **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 public/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 src/assets/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 
@@ -290,8 +302,8 @@ Options can be simple (direct link) or nested (with another question):
 
 ## Adding a New Data Source
 
-1. Add your data source object to the JSON array
-2. Ensure the logo exists in `public/Logos/`
+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`
 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

frontend/src/constants/reactQueryKeys.ts

@@ -25,7 +25,8 @@ 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_ALLERTS: 'GET_ALL_ALLERTS',
+	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
+	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',

frontend/src/container/AllError/index.tsx

@@ -36,7 +36,10 @@ 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 { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
@@ -70,9 +73,11 @@ type QueryParams = {
 };
 
 function AllErrors(): JSX.Element {
-	const { maxTime, minTime, loading } = useSelector<AppState, GlobalReducer>(
+	const { loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
 	const { pathname } = useLocation();
 	const params = useUrlQuery();
 	const { t } = useTranslation(['common']);
@@ -121,11 +126,22 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();
 
-	const [{ isLoading, data }, errorCountResponse] = useQueries([
+	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
+
+	const [
+		{ isLoading, isFetching: isErrorsFetching, data },
+		errorCountResponse,
+	] = useQueries([
 		{
-			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
-			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
-				getAll({
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
+				'getAllErrors',
+				updatedPath,
+				compositeData,
+			),
+			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+				const { minTime, maxTime } = getMinMaxTime();
+				return getAll({
 					end: maxTime,
 					start: minTime,
 					order: updatedOrder,
@@ -137,20 +153,21 @@ function AllErrors(): JSX.Element {
 					tags: convertCompositeQueryToTraceSelectedTags(
 						compositeData?.builder.queryData?.[0]?.filters?.items || [],
 					),
-				}),
+				});
+			},
 			enabled: !loading,
 		},
 		{
-			queryKey: [
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
 				'getErrorCounts',
-				maxTime,
-				minTime,
 				getUpdatedExceptionType,
 				getUpdatedServiceName,
 				compositeData,
-			],
-			queryFn: (): Promise<ErrorResponse | SuccessResponse<number>> =>
-				getErrorCounts({
+			),
+			queryFn: (): Promise<ErrorResponse | SuccessResponse<number>> => {
+				const { minTime, maxTime } = getMinMaxTime();
+				return getErrorCounts({
 					end: maxTime,
 					start: minTime,
 					exceptionType: getUpdatedExceptionType,
@@ -158,10 +175,17 @@ function AllErrors(): JSX.Element {
 					tags: convertCompositeQueryToTraceSelectedTags(
 						compositeData?.builder.queryData?.[0]?.filters?.items || [],
 					),
-				}),
+				});
+			},
 			enabled: !loading,
 		},
 	]);
+
+	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
+	useEffect(() => {
+		setIsFetching(isFetching);
+	}, [isFetching, setIsFetching]);
+
 	const { notifications } = useNotifications();
 
 	useEffect(() => {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -1,12 +1,15 @@
 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 { 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';
@@ -23,8 +26,6 @@ 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';
@@ -40,6 +41,7 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
+	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -53,6 +55,10 @@ function DomainList(): JSX.Element {
 
 	const compositeData = useGetCompositeQueryParam();
 
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+	}, [queryClient]);
+
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -119,7 +125,13 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+				rightActions={
+					<RightToolbarActions
+						onStageRunQuery={handleRunQuery}
+						isLoadingQueries={isFetching}
+						handleCancelQuery={handleCancelQuery}
+					/>
+				}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch

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

@@ -18,9 +18,16 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
-function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
+function ChartPreview({
+	alertDef,
+	source,
+	isCancelled = false,
+	onFetchingStateChange,
+}: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -88,6 +95,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 
@@ -102,6 +111,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 

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

@@ -1,9 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 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';
@@ -62,7 +64,17 @@ 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) {
@@ -76,6 +88,7 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
+		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -106,7 +119,12 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview alertDef={alertDef} source={source} />
+			<ChartPreview
+				alertDef={alertDef}
+				source={source}
+				isCancelled={isCancelled}
+				onFetchingStateChange={setIsLoadingQueries}
+			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -130,6 +148,8 @@ 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/FormAlertRules/ChartPreview/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 // eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import Spinner from 'components/Spinner';
@@ -10,6 +10,7 @@ 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';
@@ -36,14 +37,14 @@ import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';
 import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
@@ -69,6 +70,8 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -86,6 +89,8 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
+	isCancelled = false,
+	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -117,10 +122,7 @@ function ChartPreview({
 	});
 	const { currentQuery } = useQueryBuilder();
 
-	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const globalSelectedInterval = useGlobalTimeStore((s) => s.selectedTime);
 
 	const { featureFlags } = useAppContext();
 
@@ -184,18 +186,22 @@ function ChartPreview({
 		// alertDef?.version || DEFAULT_ENTITY_VERSION,
 		ENTITY_VERSION_V5,
 		{
-			queryKey: [
-				'chartPreview',
+			queryKey: getAutoRefreshQueryKey(
+				globalSelectedInterval,
+				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
-				minTime,
-				maxTime,
 				alertDef?.ruleType,
-			],
+			),
 			enabled: canQuery,
+			keepPreviousData: true,
 		},
 	);
 
+	useEffect(() => {
+		onFetchingStateChange?.(queryResponse.isFetching);
+	}, [queryResponse.isFetching, onFetchingStateChange]);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	useEffect((): void => {
@@ -205,7 +211,7 @@ function ChartPreview({
 		}
 		setMinTimeScale(startTime);
 		setMaxTimeScale(endTime);
-	}, [maxTime, minTime, globalSelectedInterval, queryResponse, setQueryStatus]);
+	}, [globalSelectedInterval, queryResponse, setQueryStatus]);
 
 	// Initialize graph visibility from localStorage
 	useEffect(() => {
@@ -338,7 +344,9 @@ function ChartPreview({
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
 
 	const chartDataAvailable =
-		chartData && !queryResponse.isError && !queryResponse.isLoading;
+		chartData &&
+		!queryResponse.isLoading &&
+		(!queryResponse.isError || isCancelled);
 
 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -359,7 +367,7 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && (
+					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}
 
@@ -403,6 +411,8 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
+	isCancelled: false,
+	onFetchingStateChange: undefined,
 };
 
 export default ChartPreview;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -29,6 +29,8 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
+	isLoadingQueries,
+	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -176,6 +178,8 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -195,7 +199,11 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn onStageRunQuery={runQuery} />
+									<RunQueryBtn
+										onStageRunQuery={runQuery}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
+									/>
 								</span>
 							}
 							items={items}
@@ -237,6 +245,8 @@ 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

@@ -127,6 +127,13 @@ 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.AUTO_REFRESH_QUERY]);
+		setIsChartQueryCancelled(true);
+	}, [ruleCache]);
 
 	const isNewRule = !ruleId || isEmpty(ruleId);
 
@@ -713,6 +720,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -731,6 +740,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -913,7 +924,13 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery()}
+							runQuery={(): void => {
+								setIsChartQueryCancelled(false);
+								ruleCache.invalidateQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+								handleRunQuery();
+							}}
+							isLoadingQueries={isLoadingAlertQuery}
+							handleCancelQuery={handleCancelAlertQuery}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}

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

@@ -6,6 +6,7 @@ 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 {
@@ -24,6 +25,7 @@ import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import useDrilldown from 'container/GridCardLayout/GridCard/FullView/useDrilldown';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
@@ -49,6 +51,8 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -86,6 +90,8 @@ function FullView({
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+	const selectedTimeFromStore = useGlobalTimeStore((s) => s.selectedTime);
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -203,19 +209,34 @@ function FullView({
 		});
 	}, [selectedPanelType]);
 
-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: [
+	const queryRangeKey = useMemo(
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTimeFromStore,
+				widget?.query,
+				selectedPanelType,
+				requestData,
+				version,
+			),
+		[
+			selectedTimeFromStore,
 			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([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
+
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -354,6 +375,8 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
+									isLoadingQueries={response.isFetching}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}

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

@@ -1,4 +1,5 @@
 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';
@@ -7,6 +8,7 @@ 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';
@@ -37,6 +39,12 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
 
 	const [showQuickFilters, setShowQuickFilters] = useState(true);
 
@@ -155,7 +163,11 @@ function Explorer(): JSX.Element {
 
 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+								<RightToolbarActions
+									onStageRunQuery={(): void => handleRunQuery()}
+									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
+								/>
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -171,7 +183,7 @@ function Explorer(): JSX.Element {
 						/>
 
 						<div className="explore-content">
-							<TimeSeries />
+							<TimeSeries onFetchingStateChange={setIsLoadingQueries} />
 						</div>
 					</div>
 					<ExplorerOptionWrapper

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

@@ -1,43 +0,0 @@
-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,7 +1,5 @@
-import { useMemo } from 'react';
+import { useEffect, 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 { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -10,25 +8,27 @@ import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsS
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { AppState } from 'store/reducers';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { SuccessResponse } from 'types/api';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
 
-function TimeSeries(): JSX.Element {
+interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
+}
+
+function TimeSeries({ onFetchingStateChange }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
-	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -58,30 +58,38 @@ function TimeSeries(): JSX.Element {
 
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
-			queryKey: [
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
 				REACT_QUERY_KEY.GET_QUERY_RANGE,
 				payload,
 				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
 				index,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			),
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
 						graphType: PANEL_TYPES.BAR,
 						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
+						globalSelectedInterval: selectedTime as Time,
 						params: {
 							dataSource: DataSource.METRICS,
 						},
 					},
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -102,6 +110,11 @@ function TimeSeries(): JSX.Element {
 		})),
 	);
 
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(

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

@@ -1,4 +1,5 @@
 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';
@@ -6,6 +7,7 @@ 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';
@@ -54,6 +56,12 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
 
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
+
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -307,7 +315,11 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -319,6 +331,7 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
+						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}

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

@@ -1,7 +1,10 @@
-import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useIsFetching, useQueryClient } from 'react-query';
 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';
@@ -11,9 +14,16 @@ 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
@@ -22,17 +32,16 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
+						<RunQueryBtn
+							onStageRunQuery={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</ButtonWrapper>
 				}
 			/>

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

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
 import { toast } from '@signozhq/sonner';
 import { Button, Tooltip, Typography } from 'antd';
@@ -18,15 +16,16 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
+import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { AlertTriangle } from 'lucide-react';
-import { AppState } from 'store/reducers';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 import { SuccessResponse } from 'types/api';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
 
 import EmptyMetricsSearch from './EmptyMetricsSearch';
 import { TimeSeriesProps } from './types';
@@ -36,6 +35,7 @@ import {
 } from './utils';
 
 function TimeSeries({
+	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -49,10 +49,7 @@ function TimeSeries({
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
-	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
@@ -89,31 +86,38 @@ function TimeSeries({
 
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
-			queryKey: [
+			queryKey: getAutoRefreshQueryKey(
+				selectedTime,
 				REACT_QUERY_KEY.GET_QUERY_RANGE,
 				payload,
 				ENTITY_VERSION_V5,
-				globalSelectedTime,
-				maxTime,
-				minTime,
 				index,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			),
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
 						graphType: PANEL_TYPES.TIME_SERIES,
 						selectedTime: 'GLOBAL_TIME',
-						globalSelectedInterval: globalSelectedTime,
+						globalSelectedInterval: selectedTime as Time,
 						params: {
 							dataSource: DataSource.METRICS,
 						},
 					},
-					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -131,6 +135,11 @@ 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(

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -3,6 +3,7 @@ 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;

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

@@ -1,9 +1,11 @@
 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';
@@ -109,6 +111,21 @@ 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);
@@ -179,7 +196,7 @@ function Inspect({
 			);
 		}
 
-		if (isInspectMetricsError) {
+		if (isInspectMetricsError && !isCancelled) {
 			const errorMessage = 'Error loading inspect metrics.';
 
 			return (
@@ -198,7 +215,13 @@ function Inspect({
 					data-testid="inspect-metrics-empty"
 					className="inspect-metrics-fallback"
 				>
-					<Empty description="No time series found for this metric to inspect." />
+					<Empty
+						description={
+							isCancelled
+								? 'Query was cancelled. Run the query to see results.'
+								: 'No time series found for this metric to inspect.'
+						}
+					/>
 				</div>
 			);
 		}
@@ -234,6 +257,14 @@ 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">
@@ -257,6 +288,7 @@ function Inspect({
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
+		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,

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

@@ -20,13 +20,22 @@ 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]);
+	}, [
+		currentMetricName,
+		setAppliedMetricName,
+		dispatchMetricInspectionOptions,
+		onRunQuery,
+	]);
 
 	return (
 		<div className="inspect-metrics-query-builder">
@@ -39,7 +48,11 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
+				<RunQueryBtn
+					onStageRunQuery={applyInspectionOptions}
+					handleCancelQuery={handleCancelQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -103,6 +103,8 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
+		isLoadingQueries: false,
+		handleCancelQuery: jest.fn(),
 	};
 
 	beforeEach(() => {

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

@@ -65,6 +65,9 @@ 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,6 +1,8 @@
 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';
@@ -107,7 +109,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			'inspectMetrics',
+			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
 			metricName,
 			start,
 			end,
@@ -127,6 +129,12 @@ 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/Summary/MetricsSearch.tsx

@@ -12,6 +12,8 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
+	handleCancelQuery,
+	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -22,7 +24,8 @@ function MetricsSearch({
 
 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-	}, [currentQueryFilterExpression, onChange]);
+		onRunQuery?.();
+	}, [currentQueryFilterExpression, onChange, onRunQuery]);
 
 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -53,6 +56,7 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
+				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -4,6 +4,7 @@ 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 {
@@ -17,6 +18,7 @@ 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';
@@ -104,6 +106,8 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);
 
+	const [isCancelled, setIsCancelled] = useState<boolean>(false);
+
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -164,6 +168,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
+		reset: resetMetricsStats,
 	} = useGetMetricsStats();
 
 	const {
@@ -172,6 +177,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
+		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();
 
 	const metricsStatsApiError = useMemo(
@@ -196,6 +202,40 @@ 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 = {
@@ -330,11 +370,19 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;
 
+	const isLoadingQueries =
+		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
+
 	const showFullScreenLoading =
-		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
+		isLoadingQueries &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;
 
+	const showNoMetrics =
+		isMetricsListDataEmpty &&
+		isMetricsTreeMapDataEmpty &&
+		!appliedFilterExpression;
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -343,13 +391,26 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
+					isLoading={isLoadingQueries}
+					handleCancelQuery={handleCancelQuery}
+					onRunQuery={handleRunQuery}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isMetricsListDataEmpty &&
-				  isMetricsTreeMapDataEmpty &&
-				  !appliedFilterExpression ? (
+				) : 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 ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -33,6 +33,8 @@ 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,5 +1,4 @@
 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';
@@ -19,14 +18,14 @@ import { Atom, Terminal } from 'lucide-react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { EQueryType } from 'types/common/dashboard';
 
-import ClickHouseQueryContainer from './QueryBuilder/ClickHouse';
+import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
 import PromQLQueryContainer from './QueryBuilder/promQL';
 
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
-	queryRangeKey,
 	isLoadingQueries,
+	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -179,7 +178,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							queryRangeKey={queryRangeKey}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</span>
 				}
@@ -191,8 +190,8 @@ function QuerySection({
 
 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	queryRangeKey?: QueryKey;
-	isLoadingQueries?: boolean;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;

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

@@ -1,14 +1,12 @@
-import { memo, useEffect } from 'react';
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { useQueryClient } from 'react-query';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { getAutoRefreshQueryKey } from 'store/globalTime/utils';
 
 import { WidgetGraphProps } from '../types';
 import ExplorerColumnsRenderer from './ExplorerColumnsRenderer';
@@ -34,21 +32,22 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
 
-	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
 	const queryRangeKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_QUERY_RANGE,
-			globalSelectedInterval,
-			requestData,
-			minTime,
-			maxTime,
-		],
-		[globalSelectedInterval, requestData, minTime, maxTime],
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTime,
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				requestData,
+			),
+		[selectedTime, requestData],
 	);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
+
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
@@ -75,8 +74,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/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import cx from 'classnames';
 import {
@@ -12,14 +10,23 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
 import './RunQueryBtn.scss';
-interface RunQueryBtnProps {
+
+type RunQueryBtnProps = {
 	className?: string;
 	label?: string;
-	isLoadingQueries?: boolean;
-	handleCancelQuery?: () => void;
-	onStageRunQuery?: () => void;
-	queryRangeKey?: QueryKey;
-}
+	disabled?: boolean;
+} & (
+	| {
+			onStageRunQuery: () => void;
+			handleCancelQuery: () => void;
+			isLoadingQueries: boolean;
+	  }
+	| {
+			onStageRunQuery?: never;
+			handleCancelQuery?: never;
+			isLoadingQueries?: never;
+	  }
+);
 
 function RunQueryBtn({
 	className,
@@ -27,33 +34,17 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	queryRangeKey,
+	disabled,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	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]);
+	const isLoading = isLoadingQueries ?? false;
 
 	return isLoading ? (
 		<Button
 			type="default"
 			icon={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn periscope-btn danger', className)}
-			onClick={onCancel}
+			onClick={handleCancelQuery}
 		>
 			Cancel
 		</Button>
@@ -61,7 +52,7 @@ function RunQueryBtn({
 		<Button
 			type="primary"
 			className={cx('run-query-btn periscope-btn primary', className)}
-			disabled={isLoading || !onStageRunQuery}
+			disabled={disabled}
 			onClick={onStageRunQuery}
 			icon={<Play size={14} />}
 		>

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

@@ -1,18 +1,8 @@
-// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 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(),
@@ -26,79 +16,60 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		(useQueryClient as jest.Mock).mockReturnValue({
-			cancelQueries: jest.fn(),
-		});
 	});
 
-	test('uses isLoadingQueries prop over useIsFetching', () => {
-		// Simulate fetching but prop forces not loading
-		(useIsFetching as jest.Mock).mockReturnValue(1);
+	test('renders run state and triggers on click', async () => {
+		const user = userEvent.setup();
 		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 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} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries={false}
+			/>,
+		);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		fireEvent.click(btn);
+		await user.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});
 
-	test('disabled when onStageRunQuery is undefined', () => {
-		render(<RunQueryBtn />);
-		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
-	});
-
-	test('shows cancel state and calls handleCancelQuery', () => {
+	test('shows cancel state and calls handleCancelQuery', async () => {
+		const user = userEvent.setup();
+		const onRun = jest.fn();
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries
+			/>,
+		);
 		const cancel = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancel);
+		await user.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 });
+	test('disabled when disabled prop is true', () => {
+		render(<RunQueryBtn disabled />);
+		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
+	});
 
-		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('disabled when no props provided', () => {
+		render(<RunQueryBtn />);
+		expect(
+			screen.getByRole('button', { name: /run query/i }),
+		).toBeInTheDocument();
 	});
 
 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -111,7 +82,11 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -121,8 +96,14 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('renders custom label when provided', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+				label="Stage & Run Query"
+			/>,
+		);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();

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

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

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -132,6 +132,10 @@ 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/pages/AlertDetails/hooks.tsx

@@ -431,7 +431,7 @@ export const useAlertRuleDuplicate = ({
 
 	const params = useUrlQuery();
 
-	const { refetch } = useQuery(REACT_QUERY_KEY.GET_ALL_ALLERTS, {
+	const { refetch } = useQuery(REACT_QUERY_KEY.GET_ALL_ALERTS, {
 		queryFn: getAll,
 		cacheTime: 0,
 	});

frontend/src/pages/AllErrors/QueryStateContext.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface AllErrorsQueryState {
+	isFetching: boolean;
+	setIsFetching: (isFetching: boolean) => void;
+}
+
+export const useAllErrorsQueryState = create<AllErrorsQueryState>((set) => ({
+	isFetching: false,
+	setIsFetching: (isFetching): void => {
+		set({ isFetching });
+	},
+}));

frontend/src/pages/AllErrors/index.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { FilterOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -11,6 +12,7 @@ import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
 import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
 import Toolbar from 'container/Toolbar/Toolbar';
@@ -19,12 +21,19 @@ import history from 'lib/history';
 import { isNull } from 'lodash-es';
 
 import { routes } from './config';
+import { useAllErrorsQueryState } from './QueryStateContext';
 
 import './AllErrors.styles.scss';
 
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+
+	const isLoadingQueries = useAllErrorsQueryState((s) => s.isFetching);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.AUTO_REFRESH_QUERY]);
+	}, [queryClient]);
 
 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -77,7 +86,11 @@ function AllErrors(): JSX.Element {
 							}
 							rightActions={
 								<div className="right-toolbar-actions-container">
-									<RightToolbarActions onStageRunQuery={handleRunQuery} />
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
 									<HeaderRightSection
 										enableAnnouncements={false}
 										enableShare

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -75,6 +76,16 @@ function LogsExplorer(): JSX.Element {
 
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 
+	const queryClient = useQueryClient();
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		if (chartQueryKeyRef.current) {
+			queryClient.cancelQueries(chartQueryKeyRef.current);
+		}
+	}, [queryClient]);
+
 	const [warning, setWarning] = useState<Warning | undefined>(undefined);
 
 	const handleChangeSelectedView = useCallback(
@@ -297,9 +308,8 @@ function LogsExplorer(): JSX.Element {
 							rightActions={
 								<RightToolbarActions
 									onStageRunQuery={(): void => handleRunQuery()}
-									listQueryKeyRef={listQueryKeyRef}
-									chartQueryKeyRef={chartQueryKeyRef}
 									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
 									showLiveLogs={showLiveLogs}
 								/>
 							}

frontend/src/pages/TracesExplorer/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Card } from 'antd';
@@ -71,12 +72,19 @@ function TracesExplorer(): JSX.Element {
 	});
 
 	const [searchParams] = useSearchParams();
+	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();
 
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+	}, [queryClient]);
+
 	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
 		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
 	);
@@ -212,7 +220,7 @@ function TracesExplorer(): JSX.Element {
 								<RightToolbarActions
 									onStageRunQuery={(): void => handleRunQuery()}
 									isLoadingQueries={isLoadingQueries}
-									listQueryKeyRef={listQueryKeyRef}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							}
 						/>