admin343/browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve resource usage meter states and accessibility

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
platform_web/pages/HomePage.tsx
+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") && (
platform_web/pages/ServerDetailPage.tsx
+4 -3
View File
@@ -119,6 +119,7 @@ export function ServerDetailPage(props: PageComponentProps) {
const detailFreshness = instance.status === "ready" ? runtimeObservationFreshness(instance.data, runEndpoint) : "unverified";
const detailStateText = instance.status === "ready" && detailFreshness === "fresh" ? stateLabel(instance.data.state) : instance.status === "ready" ? `最后观测：${stateLabel(instance.data.state)}（Run 未验证）` : "未验证";
const detailSections = useMemo(() => serverDetailSectionEntries(readyPlugin), [readyPlugin]);
const metricsWaiting = metrics?.source === "run-metrics-pending";
useEffect(() => {
if (!params.routeKey || !readyPlugin?.pages.some((page) => page.key === params.routeKey)) return;
@@ -249,9 +250,9 @@ export function ServerDetailPage(props: PageComponentProps) {
<HeaderStat label="指标" value={metricFreshnessLabel(metrics)} />
</div>
<div className="server-detail-meter-strip">
<UsageMeter label="CPU" percent={metrics?.cpuPercent} />
<UsageMeter label="内存" percent={metrics?.memoryPercent} />
<UsageMeter label="磁盘" percent={metrics?.diskPercent} />
<UsageMeter label="CPU" percent={metrics?.cpuPercent} pending={metricsWaiting} />
<UsageMeter label="内存" percent={metrics?.memoryPercent} pending={metricsWaiting} />
<UsageMeter label="磁盘" percent={metrics?.diskPercent} pending={metricsWaiting} />
</div>
</header>
platform_web/pages/ServersPage.tsx
+3 -3
View File
@@ -828,9 +828,9 @@ function ServerCard({ card, metricsPending, metricsUnavailable, canManage, delet
</span>
</div>
<div className="server-card-meters">
<UsageMeter label="CPU" percent={metrics?.cpuPercent} />
<UsageMeter label="内存" percent={metrics?.memoryPercent} />
<UsageMeter label="磁盘" percent={metrics?.diskPercent} />
<UsageMeter label="CPU" percent={metrics?.cpuPercent} pending={metricsPending || metricsWaiting} />
<UsageMeter label="内存" percent={metrics?.memoryPercent} pending={metricsPending || metricsWaiting} />
<UsageMeter label="磁盘" percent={metrics?.diskPercent} pending={metricsPending || metricsWaiting} />
</div>
{metricsUnavailable && <span className="server-card-warning"><AlertTriangle size={13} />指标不可用</span>}
{!metricsUnavailable && metricsWaiting && <span className="server-card-warning"><AlertTriangle size={13} />等待指标上报</span>}