diff --git a/apps/client/src/pages/admin/SystemStatusPage.tsx b/apps/client/src/pages/admin/SystemStatusPage.tsx index 219e6d8..c6d4e85 100644 --- a/apps/client/src/pages/admin/SystemStatusPage.tsx +++ b/apps/client/src/pages/admin/SystemStatusPage.tsx @@ -215,26 +215,44 @@ const SlotsCard = ({ slots }: { slots: Array> }) => { ); }; +// Admin observability page; 15s stale is fine and we don't want a +// window-focus event to fire 5 simultaneous requests on top of the next +// poll. CVG-120. +const POLL_INTERVAL = 15_000; +const QUERY_OPTS = { + refetchInterval: POLL_INTERVAL, + refetchOnWindowFocus: false, +} as const; + +const ErrorCard = ({ title, error }: { title: string; error: unknown }) => ( + +

{title}

+ +
+); + const SystemStatusPage = () => { - const POLL_INTERVAL = 5_000; - - const { data, isLoading, error } = useSystemStatusQuery(undefined, { - refetchInterval: POLL_INTERVAL, - }); - const { data: callLogData } = useAiCallLogQuery(undefined, { - refetchInterval: POLL_INTERVAL, - }); - const { data: queueStatsData } = useQueueStatsQuery(undefined, { - refetchInterval: POLL_INTERVAL, - }); - const { data: queueMessagesData } = useQueueMessagesQuery(undefined, { - refetchInterval: POLL_INTERVAL, - }); - const { data: workerHealthData } = useWorkerHealthQuery(undefined, { - refetchInterval: POLL_INTERVAL, - }); - - if (isLoading) { + const systemStatus = useSystemStatusQuery(undefined, QUERY_OPTS); + const callLog = useAiCallLogQuery(undefined, QUERY_OPTS); + const queueStats = useQueueStatsQuery(undefined, QUERY_OPTS); + const queueMessages = useQueueMessagesQuery(undefined, QUERY_OPTS); + const workerHealth = useWorkerHealthQuery(undefined, QUERY_OPTS); + + // Gate the spinner on every query so the page doesn't flash partial + // cards as each lands over 200-2000ms. + const anyLoading = + systemStatus.isLoading || + callLog.isLoading || + queueStats.isLoading || + queueMessages.isLoading || + workerHealth.isLoading; + + if (anyLoading) { return ( @@ -242,7 +260,7 @@ const SystemStatusPage = () => { ); } - if (error) { + if (systemStatus.error) { return ( @@ -250,7 +268,7 @@ const SystemStatusPage = () => { ); } - const status = data?.systemStatus; + const status = systemStatus.data?.systemStatus; if (!status) { return ( @@ -297,20 +315,36 @@ const SystemStatusPage = () => { details.slots && Array.isArray(details.slots) && } - {queueStatsData?.queueStats && ( - + {queueStats.error ? ( + + ) : ( + queueStats.data?.queueStats && ( + + ) )} - {workerHealthData && ( - + {workerHealth.error ? ( + + ) : ( + workerHealth.data && ( + + ) )} - {queueMessagesData && ( - + {queueMessages.error ? ( + + ) : ( + queueMessages.data && ( + + ) )} - + {callLog.error ? ( + + ) : ( + + )} ); };