refine Semi UI operations health

This commit is contained in:
lingniu
2026-07-18 13:38:25 +08:00
parent 3b06dd86a8
commit 10a072280b
3 changed files with 84 additions and 3 deletions

View File

@@ -197,10 +197,10 @@ test('reconciles service identities with bound and identity-required vehicles',
expect(liveOptions.refetchIntervalInBackground).toBe(false);
expect(liveOptions.refetchOnWindowFocus).toBe(true);
}
expect(screen.getByText('服务身份 / 在线')).toBeInTheDocument();
expect(screen.getByText('车辆总数 / 在线')).toBeInTheDocument();
expect(screen.getByText('已绑定 1024 · 待绑定 11')).toBeInTheDocument();
expect(screen.getByRole('heading', { name: '运行概览', level: 5 })).toBeInTheDocument();
expect(screen.getByText('服务身份 / 在线').closest('.v2-ops-metric')).toBeInTheDocument();
expect(screen.getByText('车辆总数 / 在线').closest('.v2-ops-metric')).toBeInTheDocument();
expect(screen.getByRole('list', { name: '运行健康指标' })).toHaveClass('v2-ops-metric-rail');
expect(screen.getByText('全部正常')).toBeInTheDocument();
expect(screen.getByText('运行时安全').closest('.semi-card')).toHaveClass('v2-ops-runtime');

View File

@@ -409,10 +409,10 @@ export default function OperationsPage() {
/>
<section className="v2-ops-metric-rail" role="list" aria-label="运行健康指标">
<OpsMetric label="整体状态" value={!data ? '读取中' : healthIssueCount > 0 ? '需要处理' : '运行正常'} detail={!data ? '等待服务端健康证据' : healthIssueCount > 0 ? `${healthIssueCount} 项证据需要关注` : '链路与写入探针均正常'} tone={!data ? 'neutral' : healthIssueCount > 0 ? 'warning' : 'success'} />
<OpsMetric label="车辆总数 / 在线" value={sources ? `${sources.totalVehicles} / ${sources.onlineVehicles}` : '—'} detail={sources ? `已绑定 ${sources.boundVehicles} · 待绑定 ${sources.identityRequiredVehicles}` : '档案与快照并集'} />
<OpsMetric label="活跃连接" value={data?.activeConnections?.toLocaleString('zh-CN') ?? '—'} detail="网关实时连接" />
<OpsMetric label="Kafka Lag" value={data?.kafkaLag?.toLocaleString('zh-CN') ?? '—'} detail={data?.kafkaLag === 0 ? '消费积压已回零' : data ? '存在待消费消息' : '等待消费证据'} tone={data?.kafkaLag === 0 ? 'success' : data ? 'warning' : 'neutral'} />
<OpsMetric label="Redis 在线 Key" value={data?.redisOnlineKeys?.toLocaleString('zh-CN') ?? '—'} detail="在线状态快照" />
<OpsMetric label="服务身份 / 在线" value={sources ? `${sources.totalVehicles} / ${sources.onlineVehicles}` : '—'} detail={sources ? `已绑定 ${sources.boundVehicles} · 待绑定 ${sources.identityRequiredVehicles}` : '档案与快照并集'} />
</section>
</Card>
<div className="v2-ops-grid"><Card className="v2-ops-panel v2-ops-links" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="数据链路" description="按链路查看当前状态与服务端诊断证据" meta={<HealthTag status={!data ? 'unknown' : linkIssueCount > 0 ? 'warning' : 'ok'}>{!data ? '读取中' : linkIssueCount > 0 ? `${linkIssueCount} 条异常` : '链路正常'}</HealthTag>} /><div className="v2-ops-link-list" role="list">{sortedLinks.length ? sortedLinks.map((item) => <article className={`v2-ops-link-card is-${item.status}`} key={item.name} role="listitem"><span className="v2-ops-link-status"><i /><strong>{item.name}</strong></span><p>{item.detail || '无补充信息'}</p><HealthTag status={item.status} /></article>) : <Empty className="v2-ops-link-empty" title={data ? '暂无链路探针' : '正在读取链路状态'} description={data ? '当前响应没有可展示的数据链路证据。' : '全局健康数据返回后将在这里更新。'} />}</div></Card>

View File

@@ -11645,6 +11645,87 @@
min-height: 260px;
}
.v2-ops-workspace.is-health .v2-ops-metric-rail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
scroll-snap-type: none;
}
.v2-ops-workspace.is-health .v2-ops-metric {
min-width: 0;
min-height: 78px;
flex: none;
border-top: 1px solid #e7edf4;
border-left: 0;
padding: 11px 12px 10px;
scroll-snap-align: none;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child {
min-width: 0;
min-height: 88px;
grid-column: 1 / -1;
border-top: 0;
padding-inline: 13px;
}
.v2-ops-workspace.is-health .v2-ops-metric:nth-child(even) {
border-right: 1px solid #e7edf4;
}
.v2-ops-workspace.is-health .v2-ops-metric strong {
margin: 6px 0 5px;
font-size: 19px;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child strong {
font-size: 22px;
}
.v2-ops-workspace.is-health .v2-ops-metric::after {
right: 12px;
left: 12px;
}
.v2-ops-links .v2-ops-link-card {
min-height: 58px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 3px 10px;
padding: 8px 12px;
}
.v2-ops-links .v2-ops-link-card > .v2-ops-link-status {
min-width: 0;
grid-column: 1;
grid-row: 1;
}
.v2-ops-links .v2-ops-link-card > .v2-ops-link-status strong {
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-ops-links .v2-ops-link-card > p {
min-width: 0;
grid-column: 1;
grid-row: 2;
margin: 0 0 0 16px;
overflow: hidden;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-ops-links .v2-ops-link-card > .v2-ops-health-tag {
align-self: center;
grid-column: 2;
grid-row: 1 / 3;
}
.v2-source-filter-panel .v2-source-search {
align-items: stretch;
}