refactor: add disabled prop and handleCancelQuery to shared query components

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/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -15,15 +15,18 @@ import './RunQueryBtn.scss';
 interface RunQueryBtnProps {
 	className?: string;
 	label?: string;
+	disabled?: boolean;
 	isLoadingQueries?: boolean;
 	handleCancelQuery?: () => void;
 	onStageRunQuery?: () => void;
+	/** @deprecated Use handleCancelQuery + isLoadingQueries instead */
 	queryRangeKey?: QueryKey;
 }
 
 function RunQueryBtn({
 	className,
 	label,
+	disabled,
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
@@ -61,7 +64,7 @@ function RunQueryBtn({
 		<Button
 			type="primary"
 			className={cx('run-query-btn periscope-btn primary', className)}
-			disabled={isLoading || !onStageRunQuery}
+			disabled={disabled || !onStageRunQuery}
 			onClick={onStageRunQuery}
 			icon={<Play size={14} />}
 		>

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

@@ -71,6 +71,12 @@ describe('RunQueryBtn', () => {
 		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
 	});
 
+	test('disabled when disabled prop is true', () => {
+		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} disabled />);
+		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
+	});
+
 	test('shows cancel state and calls handleCancelQuery', () => {
 		const onCancel = jest.fn();
 		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);

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

@@ -10,7 +10,10 @@ import './ToolbarActions.styles.scss';
 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
 	isLoadingQueries?: boolean;
+	handleCancelQuery?: () => void;
+	/** @deprecated Use handleCancelQuery instead */
 	listQueryKeyRef?: MutableRefObject<any>;
+	/** @deprecated Use handleCancelQuery instead */
 	chartQueryKeyRef?: MutableRefObject<any>;
 	showLiveLogs?: boolean;
 }
@@ -18,6 +21,7 @@ interface RightToolbarActionsProps {
 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
+	handleCancelQuery: handleCancelQueryProp,
 	listQueryKeyRef,
 	chartQueryKeyRef,
 	showLiveLogs,
@@ -42,12 +46,16 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn />
+				<RunQueryBtn disabled />
 			</div>
 		);
 	}
 
 	const handleCancelQuery = (): void => {
+		if (handleCancelQueryProp) {
+			handleCancelQueryProp();
+			return;
+		}
 		if (listQueryKeyRef?.current) {
 			queryClient.cancelQueries(listQueryKeyRef.current);
 		}
@@ -69,6 +77,7 @@ export default function RightToolbarActions({
 
 RightToolbarActions.defaultProps = {
 	isLoadingQueries: false,
+	handleCancelQuery: undefined,
 	listQueryKeyRef: null,
 	chartQueryKeyRef: null,
 	showLiveLogs: false,

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