fix(web): Tab4 by_anomaly 欄位修正 — 適配真實 API 結構
All checks were successful
CD Pipeline / build-and-deploy (push) Successful in 12m8s

by_anomaly 回傳結構為 {alert_name, anomaly_key, disposition:{total,auto_repair,auto_rate,...}}
修正:
- 排序依 disposition.total(非 count)
- 名稱顯示用 alert_name || anomaly_key
- auto_rate 取自 disposition.auto_rate * 100
- 計數取自 disposition.total

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OG T
2026-04-09 20:57:58 +08:00
parent ab5ba7062c
commit af7b6beba8

View File

@@ -300,23 +300,28 @@ function DispositionTab() {
{/* By Anomaly Top 5 */}
{Array.isArray(data?.by_anomaly) && data.by_anomaly.length > 0 && (() => {
const top5 = [...data.by_anomaly].sort((a: any, b: any) => b.count - a.count).slice(0, 5)
const maxCount = top5[0]?.count || 1
const top5 = [...data.by_anomaly]
.sort((a: any, b: any) => (b.disposition?.total ?? 0) - (a.disposition?.total ?? 0))
.slice(0, 5)
const maxCount = top5[0]?.disposition?.total || 1
return (
<div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 10, padding: '14px 16px', marginBottom: 16 }}>
<div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#87867f', marginBottom: 10 }}>{t('byAnomalyTitle')}</div>
{top5.map((item: any, i: number) => {
const autoRate = item.count > 0 ? Math.round((item.auto_repair ?? 0) / item.count * 100) : 0
const disp = item.disposition ?? {}
const count = disp.total ?? 0
const autoRate = Math.round((disp.auto_rate ?? 0) * 100)
const label = item.alert_name || item.anomaly_key || '--'
return (
<div key={i} style={{ marginBottom: 8 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
<span style={{ color: '#141413', fontWeight: 500, maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.anomaly_type || item.type || '--'}</span>
<span style={{ color: '#141413', fontWeight: 500, maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
<span style={{ color: '#87867f', fontFamily: "'JetBrains Mono', monospace", fontSize: 10 }}>
{item.count} · {t('byAnomalyAutoRate', { pct: autoRate })}
{count} · {t('byAnomalyAutoRate', { pct: autoRate })}
</span>
</div>
<div style={{ height: 6, background: '#f0ede5', borderRadius: 3, overflow: 'hidden' }}>
<div style={{ height: '100%', width: `${(item.count / maxCount) * 100}%`, background: autoRate >= 80 ? '#22C55E' : autoRate >= 50 ? '#F59E0B' : '#cc2200', borderRadius: 3, transition: 'width 0.4s ease' }} />
<div style={{ height: '100%', width: `${(count / maxCount) * 100}%`, background: autoRate >= 80 ? '#22C55E' : autoRate >= 50 ? '#F59E0B' : '#cc2200', borderRadius: 3, transition: 'width 0.4s ease' }} />
</div>
</div>
)