feat(observability): Phase2.3 媒体/LLM 可观测面板(后端归因聚合+前端页) 并修复 token_usage_logs trace_id 写入(chat_service/im_llm) [v2026.07.19.5]
CI / gate (push) Has been cancelled
CI / gate (push) Has been cancelled
This commit is contained in:
QihuAI Design committed
1 parent
491f31cead
commit
2969544d54
9 files changed
+3357
-3079
No files matched your search
@@ -0,0 +1,165 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { adminAPI } from '@/api';
|
||||
|
||||
interface Summary {
|
||||
totals: { calls: number; tokens: number; cost: number; users: number };
|
||||
by_model: { model_name: string; calls: number; tokens: number; cost: number }[];
|
||||
by_user: { user_id: string; username: string; calls: number; tokens: number; cost: number }[];
|
||||
daily: { date: string; tokens: number; cost: number; calls: number }[];
|
||||
recent: { trace_id: string | null; model_name: string; tokens: number; cost: number; created_at: string | null }[];
|
||||
}
|
||||
|
||||
const ACCENT = '#5B5FED';
|
||||
const ACCENT_HOVER = '#4A4ECC';
|
||||
|
||||
export default function Observability() {
|
||||
const [days, setDays] = useState(30);
|
||||
const [data, setData] = useState<Summary | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [err, setErr] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
setLoading(true);
|
||||
setErr('');
|
||||
adminAPI.getObservabilitySummary(days)
|
||||
.then((d: Summary) => { if (alive) setData(d); })
|
||||
.catch((e: any) => { if (alive) setErr(e?.message || '加载失败'); })
|
||||
.finally(() => { if (alive) setLoading(false); });
|
||||
return () => { alive = false; };
|
||||
}, [days]);
|
||||
|
||||
const maxTokens = data ? Math.max(1, ...data.daily.map(d => d.tokens)) : 1;
|
||||
const maxModel = data ? Math.max(1, ...data.by_model.map(m => m.tokens)) : 1;
|
||||
const fmt = (n: number) => n.toLocaleString('zh-CN');
|
||||
const fmtCost = (n: number) => `¥${n.toFixed(4)}`;
|
||||
|
||||
const card: React.CSSProperties = {
|
||||
background: '#fff', border: '1px solid #eceef5', borderRadius: 16,
|
||||
padding: 20, boxShadow: '0 1px 3px rgba(20,30,60,0.04)', marginBottom: 18,
|
||||
};
|
||||
const stat: React.CSSProperties = {
|
||||
flex: 1, minWidth: 150, background: '#fff', border: '1px solid #eceef5',
|
||||
borderRadius: 16, padding: 18, boxShadow: '0 1px 3px rgba(20,30,60,0.04)',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24, maxWidth: 1160, margin: '0 auto', color: '#1f2330' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
|
||||
<div>
|
||||
<h2 style={{ margin: 0, fontSize: 22, fontWeight: 700 }}>调用可观测</h2>
|
||||
<div style={{ color: '#8a90a2', fontSize: 13, marginTop: 4 }}>
|
||||
媒体 / LLM 调用归因 · 基于 trace_id 关联请求链路（Phase 2.2）
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
{[7, 30, 90].map(d => (
|
||||
<button key={d} onClick={() => setDays(d)}
|
||||
style={{
|
||||
padding: '7px 14px', borderRadius: 10, cursor: 'pointer', fontSize: 13,
|
||||
border: `1px solid ${days === d ? ACCENT : '#e2e5ee'}`,
|
||||
background: days === d ? ACCENT : '#fff',
|
||||
color: days === d ? '#fff' : '#5b6172', fontWeight: 600,
|
||||
transition: 'all .15s',
|
||||
}}>
|
||||
{d} 天
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{err && <div style={{ ...card, borderColor: '#f3c2c2', color: '#c0392b' }}>{err}</div>}
|
||||
{loading && !data && <div style={{ color: '#8a90a2' }}>加载中…</div>}
|
||||
|
||||
{data && (
|
||||
<>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 18 }}>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>调用次数</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.calls)}</div></div>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>Token 消耗</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.tokens)}</div></div>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>成本</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6, color: ACCENT }}>{fmtCost(data.totals.cost)}</div></div>
|
||||
<div style={stat}><div style={{ color: '#8a90a2', fontSize: 12 }}>活跃用户</div><div style={{ fontSize: 24, fontWeight: 700, marginTop: 6 }}>{fmt(data.totals.users)}</div></div>
|
||||
</div>
|
||||
|
||||
<div style={card}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>按模型</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{data.by_model.length === 0 && <div style={{ color: '#8a90a2', fontSize: 13 }}>暂无数据</div>}
|
||||
{data.by_model.map(m => (
|
||||
<div key={m.model_name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 150, fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.model_name}</div>
|
||||
<div style={{ flex: 1, height: 10, background: '#f1f3f9', borderRadius: 6, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${(m.tokens / maxModel) * 100}%`, height: '100%', background: ACCENT, borderRadius: 6 }} />
|
||||
</div>
|
||||
<div style={{ width: 90, textAlign: 'right', fontSize: 13, color: '#5b6172' }}>{fmt(m.tokens)}</div>
|
||||
<div style={{ width: 90, textAlign: 'right', fontSize: 13, color: ACCENT }}>{fmtCost(m.cost)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={card}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>每日趋势（Token）</h3>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 140, overflowX: 'auto', paddingBottom: 4 }}>
|
||||
{data.daily.length === 0 && <div style={{ color: '#8a90a2', fontSize: 13 }}>暂无数据</div>}
|
||||
{data.daily.map(d => (
|
||||
<div key={d.date} title={`${d.date} · ${fmt(d.tokens)} tokens · ${fmtCost(d.cost)}`}
|
||||
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 22 }}>
|
||||
<div style={{ width: 16, height: `${(d.tokens / maxTokens) * 110}px`, background: ACCENT, borderRadius: '4px 4px 0 0', opacity: 0.85 }} />
|
||||
<div style={{ fontSize: 9, color: '#aab', transform: 'rotate(-45deg)', whiteSpace: 'nowrap' }}>{d.date.slice(5)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
|
||||
<div style={{ ...card, flex: 1, minWidth: 320 }}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>按用户（Top 20）</h3>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead><tr style={{ color: '#8a90a2', textAlign: 'left' }}>
|
||||
<th style={th}>用户</th><th style={thR}>调用</th><th style={thR}>Token</th><th style={thR}>成本</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{data.by_user.map(u => (
|
||||
<tr key={u.user_id} style={{ borderTop: '1px solid #f1f3f9' }}>
|
||||
<td style={td}>{u.username}</td>
|
||||
<td style={tdR}>{fmt(u.calls)}</td>
|
||||
<td style={tdR}>{fmt(u.tokens)}</td>
|
||||
<td style={{ ...tdR, color: ACCENT }}>{fmtCost(u.cost)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{data.by_user.length === 0 && <tr><td colSpan={4} style={{ ...td, color: '#8a90a2' }}>暂无数据</td></tr>}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={card}>
|
||||
<h3 style={{ margin: '0 0 14px', fontSize: 16 }}>最近调用（trace_id 可下钻）</h3>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead><tr style={{ color: '#8a90a2', textAlign: 'left' }}>
|
||||
<th style={th}>Trace ID</th><th style={th}>模型</th><th style={thR}>Token</th><th style={thR}>成本</th><th style={thR}>时间</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{data.recent.map((r, i) => (
|
||||
<tr key={(r.trace_id || '') + i} style={{ borderTop: '1px solid #f1f3f9' }}>
|
||||
<td style={{ ...td, fontFamily: 'monospace', fontSize: 12, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.trace_id || '—'}</td>
|
||||
<td style={td}>{r.model_name}</td>
|
||||
<td style={tdR}>{fmt(r.tokens)}</td>
|
||||
<td style={{ ...tdR, color: ACCENT }}>{fmtCost(r.cost)}</td>
|
||||
<td style={tdR}>{r.created_at || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
{data.recent.length === 0 && <tr><td colSpan={5} style={{ ...td, color: '#8a90a2' }}>暂无数据</td></tr>}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const th: React.CSSProperties = { padding: '8px 6px', fontWeight: 600, fontSize: 12 };
|
||||
const thR: React.CSSProperties = { ...th, textAlign: 'right' };
|
||||
const td: React.CSSProperties = { padding: '8px 6px' };
|
||||
const tdR: React.CSSProperties = { ...td, textAlign: 'right', color: '#5b6172' };
|
||||
Reference in new issue
Block a user