qihuaiflow/frontend/src/pages/admin/Observability.tsx

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' };