324 lines
13 KiB
TypeScript
324 lines
13 KiB
TypeScript
import { ChevronLeft, FlaskConical, Pencil, Unplug } from 'lucide-react'
|
||
import { useState } from 'react'
|
||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||
import { api } from '@shared/api/client'
|
||
import type { AgentDto, EventDto, Page, ProbeDto } from '@shared/api/types'
|
||
import { fmtAgo, fmtNum, fmtTime } from '@shared/format'
|
||
import { useQuery } from '@shared/hooks'
|
||
import { Chip, Confirm, Dialog, Empty, ErrorNotice, Field, Spinner, useAction } from '@shared/ui'
|
||
import { AgentStatus } from './Agents'
|
||
|
||
function EditDialog({ agent, onClose, onSaved }: { agent: AgentDto; onClose: () => void; onSaved: () => void }) {
|
||
const { busy, run } = useAction()
|
||
const [name, setName] = useState(agent.name)
|
||
const [labels, setLabels] = useState(agent.labels.join(', '))
|
||
const [host, setHost] = useState(agent.public_host)
|
||
const [visible, setVisible] = useState(agent.public_visible)
|
||
return (
|
||
<Dialog
|
||
title="修改 Agent"
|
||
onClose={onClose}
|
||
actions={
|
||
<>
|
||
<button type="button" className="btn text" onClick={onClose}>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn primary"
|
||
disabled={busy}
|
||
onClick={async () => {
|
||
const ok = await run(
|
||
() => api.patch(`/api/admin/agents/${agent.id}`, { name, labels: labels.split(',').map((x) => x.trim()).filter(Boolean), public_host: host, public_visible: visible }),
|
||
'已保存',
|
||
)
|
||
if (ok) {
|
||
onSaved()
|
||
onClose()
|
||
}
|
||
}}
|
||
>
|
||
保存
|
||
</button>
|
||
</>
|
||
}
|
||
>
|
||
<div className="form-grid">
|
||
<div className="wide">
|
||
<Field label="名称" hint="字母、数字、点、下划线和连字符">
|
||
<input className="input" value={name} onChange={(e) => setName(e.target.value)} />
|
||
</Field>
|
||
</div>
|
||
<div className="wide">
|
||
<Field label="公开地址" hint="Probe 用它连接这个 Agent：域名或 IP">
|
||
<input className="input" value={host} onChange={(e) => setHost(e.target.value)} />
|
||
</Field>
|
||
</div>
|
||
<div className="wide">
|
||
<Field label="标签" hint="逗号分隔">
|
||
<input className="input" value={labels} onChange={(e) => setLabels(e.target.value)} />
|
||
</Field>
|
||
</div>
|
||
<div className="wide">
|
||
<label className="switch">
|
||
<input type="checkbox" checked={visible} onChange={(e) => setVisible(e.target.checked)} />
|
||
在展示页对匿名访客可见
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</Dialog>
|
||
)
|
||
}
|
||
|
||
type Action = 'approve' | 'disable' | 'enable' | 'takeover' | 'delete'
|
||
|
||
const ACTIONS: Record<Action, { label: string; text: string; danger?: boolean }> = {
|
||
approve: { label: '审批通过', text: '审批之后，这个 Agent 会被启用并加入所有 Probe 的列表。' },
|
||
enable: { label: '启用', text: '启用之后，这个 Agent 会重新加入 Probe 的列表。' },
|
||
disable: { label: '停用', text: '停用之后，Agent 的连接会被断开，它也会从 Probe 的列表里消失。数据保留。', danger: true },
|
||
takeover: { label: '接管同名节点', text: '用这个待审批的节点替换同名的旧节点，并保留旧节点的历史数据。', danger: true },
|
||
delete: { label: '删除', text: '删除 Agent。已经入库的数据按保留策略自然过期。', danger: true },
|
||
}
|
||
|
||
export function AgentDetail() {
|
||
const { id = '' } = useParams()
|
||
const navigate = useNavigate()
|
||
const agent = useQuery(() => api.get<AgentDto>(`/api/admin/agents/${id}`), [id], 5000)
|
||
const probes = useQuery(() => api.get<Page<ProbeDto>>('/api/admin/probes'), [])
|
||
const events = useQuery(() => api.get<Page<EventDto>>('/api/admin/events', { agent_id: id, limit: 20 }), [id], 15_000)
|
||
const [editing, setEditing] = useState(false)
|
||
const [pending, setPending] = useState<Action>()
|
||
const { run } = useAction()
|
||
|
||
const a = agent.data
|
||
const probeName = (probeId: string) => probes.data?.items.find((p) => p.id === probeId)?.name ?? probeId
|
||
|
||
const act = async (action: Action) => {
|
||
if (action === 'delete') {
|
||
const ok = await run(() => api.del(`/api/admin/agents/${id}`), '已删除')
|
||
if (ok) navigate('/agents')
|
||
} else {
|
||
await run(() => api.post(`/api/admin/agents/${id}/${action}`), '已完成')
|
||
agent.reload()
|
||
}
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Link to="/agents" className="row muted" style={{ marginBottom: 8 }}>
|
||
<ChevronLeft size={16} />
|
||
Agent
|
||
</Link>
|
||
<header>
|
||
<h1>{a?.name ?? id}</h1>
|
||
{a ? <AgentStatus agent={a} /> : null}
|
||
<span className="right row wrap">
|
||
{agent.loading && !a ? <Spinner /> : null}
|
||
{a ? (
|
||
<>
|
||
<button type="button" className="btn" onClick={() => setEditing(true)}>
|
||
<Pencil size={16} />
|
||
修改
|
||
</button>
|
||
{a.status === 'pending' ? (
|
||
<>
|
||
<button type="button" className="btn primary" onClick={() => setPending('approve')}>
|
||
{ACTIONS.approve.label}
|
||
</button>
|
||
<button type="button" className="btn" onClick={() => setPending('takeover')}>
|
||
{ACTIONS.takeover.label}
|
||
</button>
|
||
</>
|
||
) : a.status === 'disabled' ? (
|
||
<button type="button" className="btn" onClick={() => setPending('enable')}>
|
||
{ACTIONS.enable.label}
|
||
</button>
|
||
) : (
|
||
<button type="button" className="btn" onClick={() => setPending('disable')}>
|
||
{ACTIONS.disable.label}
|
||
</button>
|
||
)}
|
||
<button type="button" className="btn danger" onClick={() => setPending('delete')}>
|
||
{ACTIONS.delete.label}
|
||
</button>
|
||
</>
|
||
) : null}
|
||
</span>
|
||
</header>
|
||
|
||
<ErrorNotice error={agent.error} />
|
||
|
||
{a ? (
|
||
<div className="stack">
|
||
<div className="card">
|
||
<div className="card-title">连着的 Probe（{a.probes.length}）</div>
|
||
{a.probes.length === 0 ? (
|
||
<Empty>现在没有 Probe 连着这个 Agent</Empty>
|
||
) : (
|
||
<table className="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Probe</th>
|
||
<th>版本</th>
|
||
<th>来源地址</th>
|
||
<th>连接时间</th>
|
||
<th />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{a.probes.map((p) => (
|
||
<tr key={p.probe_id}>
|
||
<td>
|
||
<div style={{ fontWeight: 600 }}>{probeName(p.probe_id)}</div>
|
||
<div className="mono faint">{p.probe_id}</div>
|
||
</td>
|
||
<td>{p.version ?? '—'}</td>
|
||
<td className="mono">{p.remote ?? '—'}</td>
|
||
<td className="muted">
|
||
{fmtTime(p.connected_since)}（{fmtAgo(p.connected_since)}）
|
||
</td>
|
||
<td className="r">
|
||
<span className="row" style={{ justifyContent: 'flex-end' }}>
|
||
<Link className="btn small" to={`/tests?agent=${a.id}&probe=${p.probe_id}`}>
|
||
<FlaskConical size={14} />
|
||
测试
|
||
</Link>
|
||
<button
|
||
type="button"
|
||
className="btn small danger"
|
||
onClick={async () => {
|
||
await run(() => api.post(`/api/admin/agents/${a.id}/probes/${p.probe_id}/disconnect`), '已断开（Probe 会自动重连，除非已被吊销）')
|
||
agent.reload()
|
||
}}
|
||
>
|
||
<Unplug size={14} />
|
||
断开
|
||
</button>
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid cols-2">
|
||
<div className="card">
|
||
<div className="card-title">基本信息</div>
|
||
<dl className="kv">
|
||
<dt>ID</dt>
|
||
<dd className="mono">{a.id}</dd>
|
||
<dt>公开地址</dt>
|
||
<dd className="mono">{a.public_host || '—'}</dd>
|
||
<dt>控制端口</dt>
|
||
<dd className="mono">{a.probe_tcp_port}/tcp</dd>
|
||
<dt>数据端口</dt>
|
||
<dd className="mono">{a.probe_udp_ports.map((p) => `${p}/udp`).join(', ') || '—'}</dd>
|
||
<dt>版本</dt>
|
||
<dd>{a.agent_version ?? '—'}</dd>
|
||
<dt>展示页可见</dt>
|
||
<dd>{a.public_visible ? '是' : '否'}</dd>
|
||
<dt>注册时间</dt>
|
||
<dd>{fmtTime(a.created_at)}</dd>
|
||
<dt>最后在线</dt>
|
||
<dd>{fmtTime(a.last_seen_at)}</dd>
|
||
<dt>标签</dt>
|
||
<dd>
|
||
<div className="tags">
|
||
{a.labels.length ? a.labels.map((x) => <Chip key={x}>{x}</Chip>) : <span className="faint">—</span>}
|
||
</div>
|
||
</dd>
|
||
<dt>支持的采集</dt>
|
||
<dd>
|
||
<div className="tags">
|
||
{a.kinds.map((x) => (
|
||
<Chip key={x}>{x}</Chip>
|
||
))}
|
||
</div>
|
||
</dd>
|
||
</dl>
|
||
</div>
|
||
<div className="card">
|
||
<div className="card-title">运行状态</div>
|
||
<dl className="kv">
|
||
<dt>任务同步</dt>
|
||
<dd>
|
||
期望版本 {a.task_version}，已应用 {a.applied_task_version}
|
||
{a.task_version !== a.applied_task_version ? <Chip tone="warn">未同步</Chip> : <Chip tone="ok">已同步</Chip>}
|
||
</dd>
|
||
{a.rejected.length ? (
|
||
<>
|
||
<dt>被拒绝的任务</dt>
|
||
<dd>
|
||
{a.rejected.map((r) => (
|
||
<div key={r.id}>
|
||
<span className="mono">{r.id}</span> <Chip tone="bad">{r.reason}</Chip>
|
||
</div>
|
||
))}
|
||
</dd>
|
||
</>
|
||
) : null}
|
||
<dt>NAT 端点变化</dt>
|
||
<dd>{a.endpoint_changes} 次</dd>
|
||
{a.heartbeat ? (
|
||
<>
|
||
<dt>心跳</dt>
|
||
<dd>{fmtAgo(a.heartbeat.at)}</dd>
|
||
<dt>收发包速率</dt>
|
||
<dd className="num">
|
||
入 {fmtNum(a.heartbeat.pps_in)} pps / 出 {fmtNum(a.heartbeat.pps_out)} pps
|
||
</dd>
|
||
<dt>丢弃（无效 / 限速）</dt>
|
||
<dd className="num">
|
||
{fmtNum(a.heartbeat.dropped_invalid)} / {fmtNum(a.heartbeat.dropped_rate_limited)}
|
||
</dd>
|
||
<dt>待上报队列</dt>
|
||
<dd className="num">{fmtNum(a.heartbeat.queue_bytes / 1024)} KiB</dd>
|
||
</>
|
||
) : null}
|
||
{a.local_limits ? (
|
||
<>
|
||
<dt>本地上限</dt>
|
||
<dd className="num">
|
||
{fmtNum(a.local_limits.max_total_mbps)} Mbit/s，{fmtNum(a.local_limits.max_total_pps)} pps，{a.local_limits.max_concurrent_tests} 个并发测试
|
||
</dd>
|
||
</>
|
||
) : null}
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<div className="card-title">最近事件</div>
|
||
{(events.data?.items ?? []).length === 0 ? (
|
||
<Empty>没有事件</Empty>
|
||
) : (
|
||
<table className="table">
|
||
<tbody>
|
||
{events.data?.items.map((e) => (
|
||
<tr key={e.id}>
|
||
<td className="muted num" style={{ width: 160 }}>
|
||
{fmtTime(e.at)}
|
||
</td>
|
||
<td style={{ width: 200 }}>{e.kind}</td>
|
||
<td className="mono muted">{e.detail ?? ''}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{editing && a ? <EditDialog agent={a} onClose={() => setEditing(false)} onSaved={agent.reload} /> : null}
|
||
{pending ? (
|
||
<Confirm title={ACTIONS[pending].label} danger={ACTIONS[pending].danger} confirmText={ACTIONS[pending].label} onClose={() => setPending(undefined)} onConfirm={() => act(pending)}>
|
||
{ACTIONS[pending].text}
|
||
</Confirm>
|
||
) : null}
|
||
</>
|
||
)
|
||
}
|