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