Improve resource usage meter states and accessibility

This commit is contained in:
npc0-hue
2026-08-21 16:53:46 +08:00
parent 8aeb488179
commit 2381b69d24
6 changed files with 48 additions and 21 deletions
+4 -3
View File
@@ -145,6 +145,7 @@ export function HomePage({ session, onNavigate, initialState }: HomePageProps) {
}
return { cpu: undefined, memory: undefined, disk: undefined, source: metrics.status === "error" || usage.status === "error" ? "指标不可用" : "等待指标", refreshedAt: undefined };
}, [usage, metrics]);
const resourceMetricsPending = usage.status === "loading" || metrics.status === "loading";
return (
<div className="console-page operations-overview-page">
@@ -209,9 +210,9 @@ export function HomePage({ session, onNavigate, initialState }: HomePageProps) {
) : (
<>
<div className="server-card-meters">
<UsageMeter label="CPU" percent={metricAverages.cpu} />
<UsageMeter label="内存" percent={metricAverages.memory} />
<UsageMeter label="磁盘" percent={metricAverages.disk} />
<UsageMeter label="CPU" percent={metricAverages.cpu} pending={resourceMetricsPending} />
<UsageMeter label="内存" percent={metricAverages.memory} pending={resourceMetricsPending} />
<UsageMeter label="磁盘" percent={metricAverages.disk} pending={resourceMetricsPending} />
</div>
<span className="console-note">{moduleFreshnessLabel(metricAverages.refreshedAt)}</span>
{(usage.status === "error" || metrics.status === "error") && (