286 lines
10 KiB
TypeScript
286 lines
10 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
|
import api from '@/services/api'
|
|
|
|
interface ProviderRow {
|
|
account_id: number
|
|
provider: string
|
|
label: string
|
|
usage_pct: number | null
|
|
status: string
|
|
error?: string | null
|
|
fetched_at?: string | null
|
|
reset_at?: string | null
|
|
window?: string | null
|
|
used?: number | null
|
|
limit?: number | null
|
|
}
|
|
|
|
interface ServerRow {
|
|
server_id: number
|
|
identifier: string
|
|
display_name: string
|
|
online: boolean
|
|
openclaw_version?: string | null
|
|
cpu_pct?: number | null
|
|
mem_pct?: number | null
|
|
disk_pct?: number | null
|
|
swap_pct?: number | null
|
|
agents: Array<{ id?: string; name?: string; status?: string }>
|
|
last_seen_at?: string | null
|
|
}
|
|
|
|
interface OverviewData {
|
|
issues: {
|
|
total_issues: number
|
|
new_issues_24h: number
|
|
processed_issues_24h: number
|
|
computed_at: string
|
|
}
|
|
providers: ProviderRow[]
|
|
servers: ServerRow[]
|
|
generated_at: string
|
|
}
|
|
|
|
interface AdminUser {
|
|
id: number
|
|
is_admin: boolean
|
|
}
|
|
|
|
interface ProviderAccountItem {
|
|
id: number
|
|
provider: string
|
|
label: string
|
|
is_enabled: boolean
|
|
credential_masked: string
|
|
}
|
|
|
|
interface ServerItem {
|
|
server_id: number
|
|
identifier: string
|
|
display_name: string
|
|
online: boolean
|
|
}
|
|
|
|
export default function MonitorPage() {
|
|
const [data, setData] = useState<OverviewData | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [isAdmin, setIsAdmin] = useState(false)
|
|
const [providerAccounts, setProviderAccounts] = useState<ProviderAccountItem[]>([])
|
|
const [servers, setServers] = useState<ServerItem[]>([])
|
|
|
|
const [providerForm, setProviderForm] = useState({ provider: 'openai', label: '', credential: '' })
|
|
const [providerTestMsg, setProviderTestMsg] = useState('')
|
|
const [serverForm, setServerForm] = useState({ identifier: '', display_name: '' })
|
|
|
|
const canAdmin = useMemo(() => !!localStorage.getItem('token') && isAdmin, [isAdmin])
|
|
|
|
const load = async () => {
|
|
try {
|
|
const res = await api.get<OverviewData>('/monitor/public/overview')
|
|
setData(res.data)
|
|
const token = localStorage.getItem('token')
|
|
if (token) {
|
|
try {
|
|
const me = await api.get<AdminUser>('/auth/me')
|
|
setIsAdmin(!!me.data.is_admin)
|
|
} catch {
|
|
setIsAdmin(false)
|
|
}
|
|
} else {
|
|
setIsAdmin(false)
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const loadAdminData = async () => {
|
|
if (!canAdmin) return
|
|
const [p, s] = await Promise.all([
|
|
api.get<ProviderAccountItem[]>('/monitor/admin/providers/accounts'),
|
|
api.get<ServerItem[]>('/monitor/admin/servers'),
|
|
])
|
|
setProviderAccounts(p.data)
|
|
setServers(s.data)
|
|
}
|
|
|
|
useEffect(() => {
|
|
load()
|
|
const t = setInterval(load, 30000)
|
|
return () => clearInterval(t)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
loadAdminData()
|
|
}, [canAdmin])
|
|
|
|
const testProvider = async () => {
|
|
const r = await api.post<{ ok: boolean; message: string }>('/monitor/admin/providers/test', {
|
|
provider: providerForm.provider,
|
|
credential: providerForm.credential,
|
|
})
|
|
setProviderTestMsg((r.data.ok ? '✅ ' : '❌ ') + r.data.message)
|
|
}
|
|
|
|
const addProvider = async () => {
|
|
await api.post('/monitor/admin/providers/accounts', providerForm)
|
|
setProviderForm({ ...providerForm, label: '', credential: '' })
|
|
await loadAdminData()
|
|
}
|
|
|
|
const deleteProvider = async (id: number) => {
|
|
await api.delete('/monitor/admin/providers/accounts/' + id)
|
|
await loadAdminData()
|
|
}
|
|
|
|
const addServer = async () => {
|
|
await api.post('/monitor/admin/servers', serverForm)
|
|
setServerForm({ identifier: '', display_name: '' })
|
|
await loadAdminData()
|
|
}
|
|
|
|
const deleteServer = async (id: number) => {
|
|
await api.delete('/monitor/admin/servers/' + id)
|
|
await loadAdminData()
|
|
}
|
|
|
|
const createChallenge = async (id: number) => {
|
|
const r = await api.post<{ identifier: string; challenge_uuid: string; expires_at: string }>('/monitor/admin/servers/' + id + '/challenge')
|
|
alert('identifier=' + r.data.identifier + ' | challenge_uuid=' + r.data.challenge_uuid + ' | expires_at=' + r.data.expires_at)
|
|
}
|
|
|
|
if (loading) return <div className="loading">Monitor loading...</div>
|
|
if (!data) return <div className="loading">Monitor load failed</div>
|
|
|
|
return (
|
|
<div className="dashboard monitor-page">
|
|
<h2>📡 Monitor</h2>
|
|
|
|
<div className="stats-grid">
|
|
<div className="stat-card total">
|
|
<span className="stat-number">{data.issues.total_issues}</span>
|
|
<span className="stat-label">总 Issues</span>
|
|
</div>
|
|
<div className="stat-card" style={{ borderLeftColor: 'var(--accent)' }}>
|
|
<span className="stat-number">{data.issues.new_issues_24h}</span>
|
|
<span className="stat-label">24小时新增</span>
|
|
</div>
|
|
<div className="stat-card" style={{ borderLeftColor: 'var(--success)' }}>
|
|
<span className="stat-number">{data.issues.processed_issues_24h}</span>
|
|
<span className="stat-label">24小时已处理</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="section">
|
|
<div className="page-header">
|
|
<h3>Provider Usage</h3>
|
|
<span className="text-dim">更新于 {data.generated_at}</span>
|
|
</div>
|
|
{data.providers.length === 0 ? <p className="empty">暂无 provider 账号</p> : (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Provider</th>
|
|
<th>Label</th>
|
|
<th>Usage</th>
|
|
<th>Window</th>
|
|
<th>Reset</th>
|
|
<th>Status</th>
|
|
<th>Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.providers.map((p) => (
|
|
<tr key={p.account_id}>
|
|
<td>{p.provider}</td>
|
|
<td>{p.label}</td>
|
|
<td>{p.usage_pct !== null ? p.usage_pct + '%' : '-'}</td>
|
|
<td>{p.window || '-'}</td>
|
|
<td>{p.reset_at || '-'}</td>
|
|
<td><span className={
|
|
'badge ' + (p.status === 'ok' ? 'status-ok' : p.status === 'error' ? 'status-error' : 'status-pending')
|
|
}>{p.status}</span></td>
|
|
<td>{p.fetched_at || '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
<div className="section">
|
|
<h3>服务器监测</h3>
|
|
{data.servers.length === 0 ? <p className="empty">暂无监测服务器</p> : (
|
|
<div className="monitor-grid">
|
|
{data.servers.map((s) => (
|
|
<div key={s.server_id} className="monitor-card">
|
|
<div className="monitor-card-header">
|
|
<div>
|
|
<strong>{s.display_name}</strong>
|
|
<div className="text-dim">{s.identifier}</div>
|
|
</div>
|
|
<span className={'badge ' + (s.online ? 'status-online' : 'status-offline')}>{s.online ? 'online' : 'offline'}</span>
|
|
</div>
|
|
<div className="monitor-metrics">
|
|
CPU {s.cpu_pct ?? '-'}% · MEM {s.mem_pct ?? '-'}% · DISK {s.disk_pct ?? '-'}% · SWAP {s.swap_pct ?? '-'}%
|
|
</div>
|
|
<div className="text-dim">OpenClaw: {s.openclaw_version || '-'}</div>
|
|
<div className="text-dim">Agents: {s.agents?.length || 0}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{canAdmin && (
|
|
<div className="section">
|
|
<h3>Admin 管理</h3>
|
|
|
|
<div className="monitor-admin">
|
|
<div className="monitor-card">
|
|
<h4>Provider 账号</h4>
|
|
<div className="inline-form">
|
|
<select value={providerForm.provider} onChange={(e) => setProviderForm({ ...providerForm, provider: e.target.value })}>
|
|
<option value='openai'>openai</option>
|
|
<option value='anthropic'>anthropic</option>
|
|
<option value='minimax'>minimax</option>
|
|
<option value='kimi'>kimi</option>
|
|
<option value='qwen'>qwen</option>
|
|
</select>
|
|
<input placeholder='label' value={providerForm.label} onChange={(e) => setProviderForm({ ...providerForm, label: e.target.value })} />
|
|
<input placeholder='credential' value={providerForm.credential} onChange={(e) => setProviderForm({ ...providerForm, credential: e.target.value })} />
|
|
<button className="btn-primary" onClick={testProvider}>测试连接</button>
|
|
<button className="btn-primary" onClick={addProvider}>添加账号</button>
|
|
</div>
|
|
{providerTestMsg && <p className="text-dim">{providerTestMsg}</p>}
|
|
<ul>
|
|
{providerAccounts.map((p) => (
|
|
<li key={p.id}>{p.provider} / {p.label} / {p.credential_masked} <button className="btn-danger" onClick={() => deleteProvider(p.id)}>删除</button></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="monitor-card">
|
|
<h4>服务器</h4>
|
|
<div className="inline-form">
|
|
<input placeholder='identifier' value={serverForm.identifier} onChange={(e) => setServerForm({ ...serverForm, identifier: e.target.value })} />
|
|
<input placeholder='display_name' value={serverForm.display_name} onChange={(e) => setServerForm({ ...serverForm, display_name: e.target.value })} />
|
|
<button className="btn-primary" onClick={addServer}>添加服务器</button>
|
|
</div>
|
|
<ul>
|
|
{servers.map((s) => (
|
|
<li key={s.server_id}>
|
|
{s.display_name} ({s.identifier})
|
|
<button className="btn-secondary" onClick={() => createChallenge(s.server_id)} style={{ marginLeft: 8 }}>生成挑战</button>
|
|
<button className="btn-danger" onClick={() => deleteServer(s.server_id)} style={{ marginLeft: 8 }}>删除</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|