fix: 修复 Admin 后台多个 bug
- api.ts: 修复 URL 拼接 bug(缺少 API_BASE) 和 204 判断逻辑 - dal.ts: 修复 fetchDashboard 类型错乱,修正 API 端点 - types.ts: 对齐后端 Pydantic 模型 - 所有页面: Badge variant→status, CardHeader children→action - 移除不存在的后端端点调用
This commit is contained in:
shangfangjian
@@ -1,248 +1,45 @@
|
||||
/**
|
||||
* Admin 后台 - 监控面板
|
||||
*
|
||||
* 功能:
|
||||
* - 系统健康检查
|
||||
* - 采集错误日志
|
||||
* - 死信队列监控
|
||||
* - 实时状态刷新
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { fetchErrorLogs } from '../dal'
|
||||
import type { ErrorLog } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, DataTable, EmptyState } from '../components'
|
||||
import { SectionHeader } from '../components'
|
||||
|
||||
interface HealthCheck {
|
||||
name: string
|
||||
status: 'pass' | 'fail' | 'warn'
|
||||
detail?: string
|
||||
}
|
||||
|
||||
interface HealthInfo {
|
||||
status: 'ok' | 'degraded' | 'error'
|
||||
version?: string
|
||||
uptime?: string
|
||||
checks: HealthCheck[]
|
||||
}
|
||||
import { useEffect, useState } from 'react'
|
||||
import { fetchHealth } from '../dal'
|
||||
|
||||
export default function MonitoringPage() {
|
||||
const [logs, setLogs] = useState<ErrorLog[]>([])
|
||||
const [health, setHealth] = useState<HealthInfo | null>(null)
|
||||
const [health, setHealth] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [autoRefresh, setAutoRefresh] = useState(true)
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
try {
|
||||
const [logData, healthRes] = await Promise.all([
|
||||
fetchErrorLogs(100),
|
||||
fetch('/health').then(r => r.json()) as Promise<HealthInfo>,
|
||||
])
|
||||
setLogs(logData)
|
||||
setHealth(healthRes)
|
||||
} catch {
|
||||
// 静默处理,保持上次数据
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
if (!autoRefresh) return
|
||||
const timer = setInterval(loadData, 10_000)
|
||||
return () => clearInterval(timer)
|
||||
}, [loadData, autoRefresh])
|
||||
fetchHealth().then(setHealth).finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="监控面板"
|
||||
description="系统健康状态、错误日志和死信队列监控"
|
||||
/>
|
||||
|
||||
{/* ── 系统健康 ── */}
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader title="服务状态" />
|
||||
<CardBody>
|
||||
{health ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-block h-3 w-3 rounded-full ${
|
||||
health.status === 'ok'
|
||||
? 'bg-emerald-500'
|
||||
: health.status === 'degraded'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-200">
|
||||
{health.status === 'ok'
|
||||
? '运行正常'
|
||||
: health.status === 'degraded'
|
||||
? '部分降级'
|
||||
: '异常'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1 text-xs text-gray-500">
|
||||
<div>版本: {health.version ?? '—'}</div>
|
||||
<div>运行时间: {health.uptime ?? '—'}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<EmptyState text="加载中..." />
|
||||
) : (
|
||||
<EmptyState text="无法获取健康状态" />
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 健康检查项 */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader title="健康检查项" />
|
||||
<CardBody>
|
||||
{health && health.checks && health.checks.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{health.checks.map((check: HealthCheck) => (
|
||||
<div
|
||||
key={check.name}
|
||||
className="flex items-center justify-between rounded-md border border-gray-800 px-3 py-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${
|
||||
check.status === 'pass'
|
||||
? 'bg-emerald-500'
|
||||
: check.status === 'warn'
|
||||
? 'bg-yellow-500'
|
||||
: 'bg-red-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-300">{check.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{check.detail && (
|
||||
<span className="text-xs text-gray-500">{check.detail}</span>
|
||||
)}
|
||||
<Badge status={check.status === 'pass' ? 'success' : check.status === 'warn' ? 'warning' : 'error'}>
|
||||
{check.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState text="暂无检查项数据" />
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white">系统监控</h2>
|
||||
<p className="mt-1 text-sm text-gray-400">查看服务健康状态</p>
|
||||
</div>
|
||||
|
||||
{/* ── 错误日志 ── */}
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="错误日志"
|
||||
action={
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-1.5 text-xs text-gray-500">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRefresh}
|
||||
onChange={e => setAutoRefresh(e.target.checked)}
|
||||
className="accent-blue-500"
|
||||
/>
|
||||
自动刷新
|
||||
</label>
|
||||
<button
|
||||
onClick={loadData}
|
||||
className="rounded border border-gray-700 px-2 py-0.5 text-xs text-gray-400 hover:border-gray-600"
|
||||
>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<CardBody className="p-0">
|
||||
<DataTable
|
||||
columns={[
|
||||
{
|
||||
key: 'timestamp',
|
||||
label: '时间',
|
||||
width: '180px',
|
||||
render: (row: ErrorLog) => (
|
||||
<span className="font-mono text-xs">
|
||||
{new Date(row.timestamp).toLocaleString('zh-CN')}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'level',
|
||||
label: '级别',
|
||||
width: '80px',
|
||||
render: (row: ErrorLog) => <Badge status={row.level}>{row.level}</Badge>,
|
||||
},
|
||||
{ key: 'source', label: '来源', width: '120px' },
|
||||
{ key: 'message', label: '消息' },
|
||||
]}
|
||||
data={logs}
|
||||
rowKey={(row: ErrorLog) => row.id}
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* ── 死信队列 ── */}
|
||||
<Card>
|
||||
<CardHeader title="死信队列" />
|
||||
<CardBody>
|
||||
<DeadLetterQueue />
|
||||
</CardBody>
|
||||
</Card>
|
||||
{loading ? (
|
||||
<p className="text-gray-400">加载中...</p>
|
||||
) : health ? (
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<div className="rounded border border-gray-700 bg-gray-800 p-4">
|
||||
<div className="text-sm text-gray-400">状态</div>
|
||||
<div className="mt-1 text-xl font-bold text-green-400">✅ {health.status}</div>
|
||||
</div>
|
||||
<div className="rounded border border-gray-700 bg-gray-800 p-4">
|
||||
<div className="text-sm text-gray-400">服务</div>
|
||||
<div className="mt-1 text-xl font-bold text-white">{health.service || 'profeto'}</div>
|
||||
</div>
|
||||
<div className="rounded border border-gray-700 bg-gray-800 p-4">
|
||||
<div className="text-sm text-gray-400">数据库</div>
|
||||
<div className="mt-1 text-xl font-bold text-blue-400">11 张表</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400">无法连接到后端</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DeadLetterQueue() {
|
||||
// 死信队列数据 - 实际应从后端获取
|
||||
interface DLQItem {
|
||||
id: string
|
||||
source: string
|
||||
error: string
|
||||
payload: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const [items] = useState<DLQItem[]>([])
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl text-gray-700" aria-hidden="true">
|
||||
✓
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-500">死信队列为空</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<DataTable
|
||||
columns={[
|
||||
{ key: 'source', label: '来源', width: '120px' },
|
||||
{ key: 'error', label: '错误' },
|
||||
{
|
||||
key: 'created_at',
|
||||
label: '时间',
|
||||
width: '180px',
|
||||
render: (row: DLQItem) => new Date(row.created_at).toLocaleString('zh-CN'),
|
||||
},
|
||||
]}
|
||||
data={items}
|
||||
rowKey={(row: DLQItem) => row.id}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user