diff --git a/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx b/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx index a116cc5e..f37d1523 100644 --- a/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx +++ b/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx @@ -15,6 +15,7 @@ interface OverviewCardsProps { messages?: MonitoringMessage[]; llmCalls?: LLMCall[]; loading?: boolean; + refreshKey?: number; } export default function OverviewCards({ @@ -22,6 +23,7 @@ export default function OverviewCards({ messages = [], llmCalls = [], loading, + refreshKey, }: OverviewCardsProps) { const { t } = useTranslation(); @@ -94,7 +96,7 @@ export default function OverviewCards({ loading={loading} /> ))} - + {/* Traffic Chart */} diff --git a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx index c5e58f3a..ed8c3a58 100644 --- a/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx +++ b/web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx @@ -30,7 +30,13 @@ function StatusDot({ ok }: { ok: boolean | null }) { ); } -export default function SystemStatusCard() { +interface SystemStatusCardProps { + refreshKey?: number; +} + +export default function SystemStatusCard({ + refreshKey, +}: SystemStatusCardProps) { const { t } = useTranslation(); const [pluginStatus, setPluginStatus] = useState(null); @@ -52,10 +58,12 @@ export default function SystemStatusCard() { }, []); useEffect(() => { - fetchStatus(true); + // refreshKey changes when the user clicks "Refresh Data" + fetchStatus(refreshKey === undefined); const interval = setInterval(() => fetchStatus(false), 30_000); return () => clearInterval(interval); - }, [fetchStatus]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [fetchStatus, refreshKey]); const pluginOk = pluginStatus ? pluginStatus.is_enable && pluginStatus.is_connected