fix(web): refresh system status card when clicking Refresh Data button

Pass a refreshKey prop through OverviewCards to SystemStatusCard that
increments on each Refresh Data click, triggering a re-fetch of Plugin
and Box runtime status alongside the monitoring data refresh.
This commit is contained in:
Junyan Qin
2026-04-19 14:30:01 +08:00
committed by WangCham
parent 2dfd9d5dce
commit e0510bca6b
2 changed files with 14 additions and 4 deletions

View File

@@ -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}
/>
))}
<SystemStatusCard />
<SystemStatusCard refreshKey={refreshKey} />
</div>
{/* Traffic Chart */}

View File

@@ -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<ApiRespPluginSystemStatus | null>(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