diff --git a/ui/src/api/queries/executions.ts b/ui/src/api/queries/executions.ts index c008193a..90a2e44b 100644 --- a/ui/src/api/queries/executions.ts +++ b/ui/src/api/queries/executions.ts @@ -1,7 +1,7 @@ import { useQuery } from '@tanstack/react-query'; import { api } from '../client'; import type { SearchRequest } from '../types'; -import { useRefreshInterval } from './use-refresh-interval'; +import { useLiveQuery } from './use-refresh-interval'; export function useExecutionStats( timeFrom: string | undefined, @@ -9,7 +9,7 @@ export function useExecutionStats( routeId?: string, application?: string, ) { - const refetchInterval = useRefreshInterval(10_000); + const live = useLiveQuery(10_000); return useQuery({ queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, application], queryFn: async () => { @@ -26,14 +26,14 @@ export function useExecutionStats( if (error) throw new Error('Failed to load stats'); return data!; }, - enabled: !!timeFrom, + enabled: !!timeFrom && live.enabled, placeholderData: (prev) => prev, - refetchInterval, + refetchInterval: live.refetchInterval, }); } export function useSearchExecutions(filters: SearchRequest, live = false) { - const refetchInterval = useRefreshInterval(5_000); + const liveQuery = useLiveQuery(5_000); return useQuery({ queryKey: ['executions', 'search', filters], queryFn: async () => { @@ -44,7 +44,8 @@ export function useSearchExecutions(filters: SearchRequest, live = false) { return data!; }, placeholderData: (prev) => prev, - refetchInterval: live ? refetchInterval : false, + enabled: live ? liveQuery.enabled : true, + refetchInterval: live ? liveQuery.refetchInterval : false, }); } @@ -54,7 +55,7 @@ export function useStatsTimeseries( routeId?: string, application?: string, ) { - const refetchInterval = useRefreshInterval(30_000); + const live = useLiveQuery(30_000); return useQuery({ queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, application], queryFn: async () => { @@ -72,9 +73,9 @@ export function useStatsTimeseries( if (error) throw new Error('Failed to load timeseries'); return data!; }, - enabled: !!timeFrom, + enabled: !!timeFrom && live.enabled, placeholderData: (prev) => prev, - refetchInterval, + refetchInterval: live.refetchInterval, }); } diff --git a/ui/src/api/queries/use-refresh-interval.ts b/ui/src/api/queries/use-refresh-interval.ts index d3a9c6d3..b2d76760 100644 --- a/ui/src/api/queries/use-refresh-interval.ts +++ b/ui/src/api/queries/use-refresh-interval.ts @@ -8,3 +8,16 @@ export function useRefreshInterval(intervalMs: number): number | false { const { autoRefresh } = useGlobalFilters(); return autoRefresh ? intervalMs : false; } + +/** + * Returns `enabled` and `refetchInterval` tied to the LIVE/PAUSED toggle. + * - LIVE: enabled=true, refetchInterval=intervalMs (fetch + poll) + * - PAUSED: enabled=false, refetchInterval=false (no fetch at all) + */ +export function useLiveQuery(intervalMs: number) { + const { autoRefresh } = useGlobalFilters(); + return { + enabled: autoRefresh, + refetchInterval: autoRefresh ? intervalMs : false as number | false, + }; +}