chore: initial project import
This commit is contained in:
justme committed
commit
26620707a0
347 files changed
+56172
No files matched your search
@@ -0,0 +1,245 @@
|
||||
import { Download, KeyRound, Pencil, Plus, ShieldOff, Trash2 } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { api } from '@shared/api/client'
|
||||
import type { Page, ProbeDto, ProbeIdentityDto } from '@shared/api/types'
|
||||
import { fmtAgo, fmtTime } from '@shared/format'
|
||||
import { useQuery } from '@shared/hooks'
|
||||
import { Chip, Confirm, CopyButton, Dialog, downloadText, Empty, ErrorNotice, Field, Spinner, useAction } from '@shared/ui'
|
||||
|
||||
/** probe.json 只在创建和轮换密钥时返回一次：这里让管理员马上下载或复制。 */
|
||||
function IdentityDialog({ identity, title, onClose }: { identity: ProbeIdentityDto; title: string; onClose: () => void }) {
|
||||
const json = JSON.stringify(identity, null, 2)
|
||||
return (
|
||||
<Dialog
|
||||
title={title}
|
||||
onClose={onClose}
|
||||
actions={
|
||||
<button type="button" className="btn primary" onClick={onClose}>
|
||||
我已保存
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="stack">
|
||||
<div className="notice warn">私钥只显示这一次，关闭之后无法再找回。请现在保存 probe.json。</div>
|
||||
<div className="row wrap">
|
||||
<button type="button" className="btn primary" onClick={() => downloadText('probe.json', json)}>
|
||||
<Download size={16} />
|
||||
下载 probe.json
|
||||
</button>
|
||||
<CopyButton text={json} label="复制内容" />
|
||||
</div>
|
||||
<Field label="在家宽机器上" hint="保存为 /etc/monitor/probe.json，然后启动 Probe；它会根据 bootstrap 列表连接 Agent，之后的 Agent 列表由面板同步。">
|
||||
<pre className="code">{`monitor-probe --config /etc/monitor/probe.json`}</pre>
|
||||
</Field>
|
||||
<details>
|
||||
<summary className="muted" style={{ cursor: 'pointer' }}>
|
||||
查看内容
|
||||
</summary>
|
||||
<pre className="code" style={{ marginTop: 8 }}>
|
||||
{json}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function NameDialog({ title, initial, onClose, onSubmit }: { title: string; initial: string; onClose: () => void; onSubmit: (name: string) => Promise<boolean> }) {
|
||||
const [name, setName] = useState(initial)
|
||||
const [busy, setBusy] = useState(false)
|
||||
return (
|
||||
<Dialog
|
||||
title={title}
|
||||
onClose={onClose}
|
||||
actions={
|
||||
<>
|
||||
<button type="button" className="btn text" onClick={onClose}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn primary"
|
||||
disabled={busy || !name.trim()}
|
||||
onClick={async () => {
|
||||
setBusy(true)
|
||||
const ok = await onSubmit(name.trim())
|
||||
setBusy(false)
|
||||
if (ok) onClose()
|
||||
}}
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Field label="名称" hint="字母、数字、点、下划线和连字符，例如 home 或 office">
|
||||
<input className="input" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
|
||||
</Field>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
type Pending = { kind: 'rotate' | 'revoke' | 'delete'; probe: ProbeDto }
|
||||
|
||||
export function Probes() {
|
||||
const probes = useQuery(() => api.get<Page<ProbeDto>>('/api/admin/probes'), [], 8000)
|
||||
const { run } = useAction()
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [renaming, setRenaming] = useState<ProbeDto>()
|
||||
const [pending, setPending] = useState<Pending>()
|
||||
const [identity, setIdentity] = useState<{ title: string; value: ProbeIdentityDto }>()
|
||||
|
||||
const list = probes.data?.items ?? []
|
||||
|
||||
const confirmText = {
|
||||
rotate: { title: '轮换密钥', danger: true, text: '旧密钥立即失效，所有 Agent 会断开这个 Probe 的会话。你需要把新的 probe.json 放到这台 Probe 上并重启它。' },
|
||||
revoke: { title: '吊销 Probe', danger: true, text: '所有 Agent 会立刻断开并拒绝这个 Probe。记录和历史数据保留，但它不能再连接，也不能恢复。' },
|
||||
delete: { title: '删除 Probe', danger: true, text: '删除这个 Probe 和它的线路。已经入库的数据按保留策略自然过期。' },
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<h1>Probe</h1>
|
||||
<span className="right row">
|
||||
{probes.loading && !probes.data ? <Spinner /> : null}
|
||||
<button type="button" className="btn primary" onClick={() => setCreating(true)}>
|
||||
<Plus size={18} />
|
||||
创建 Probe
|
||||
</button>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<ErrorNotice error={probes.error} />
|
||||
|
||||
<div className="stack">
|
||||
{probes.data && list.length === 0 ? (
|
||||
<div className="card">
|
||||
<Empty>还没有 Probe。点击右上角「创建 Probe」，由后端生成身份，再把 probe.json 放到家宽机器上。</Empty>
|
||||
</div>
|
||||
) : null}
|
||||
{list.map((p) => (
|
||||
<div key={p.id} className="card">
|
||||
<div className="row wrap">
|
||||
<span style={{ fontSize: 18, fontWeight: 700 }}>{p.name}</span>
|
||||
{p.revoked ? <Chip tone="bad">已吊销</Chip> : <Chip tone={p.connections.length > 0 ? 'ok' : ''}>{p.connections.length > 0 ? `连着 ${p.connections.length} 个 Agent` : '没有连接'}</Chip>}
|
||||
<span className="mono faint">{p.id}</span>
|
||||
<span className="right row wrap">
|
||||
<button type="button" className="btn small" onClick={() => setRenaming(p)}>
|
||||
<Pencil size={14} />
|
||||
改名
|
||||
</button>
|
||||
{!p.revoked ? (
|
||||
<>
|
||||
<button type="button" className="btn small" onClick={() => setPending({ kind: 'rotate', probe: p })}>
|
||||
<KeyRound size={14} />
|
||||
轮换密钥
|
||||
</button>
|
||||
<button type="button" className="btn small danger" onClick={() => setPending({ kind: 'revoke', probe: p })}>
|
||||
<ShieldOff size={14} />
|
||||
吊销
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
<button type="button" className="btn small danger" onClick={() => setPending({ kind: 'delete', probe: p })}>
|
||||
<Trash2 size={14} />
|
||||
删除
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<p className="faint" style={{ marginTop: 4 }}>
|
||||
创建于 {fmtTime(p.created_at)}
|
||||
{p.revoked_at ? `，吊销于 ${fmtTime(p.revoked_at)}` : ''}
|
||||
</p>
|
||||
{p.connections.length > 0 ? (
|
||||
<table className="table" style={{ marginTop: 8 }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Agent</th>
|
||||
<th>版本</th>
|
||||
<th>来源地址</th>
|
||||
<th>连接时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{p.connections.map((c) => (
|
||||
<tr key={c.agent_id}>
|
||||
<td>
|
||||
<Link to={`/agents/${c.agent_id}`} style={{ fontWeight: 600 }}>
|
||||
{c.agent_name}
|
||||
</Link>
|
||||
</td>
|
||||
<td>{c.version ?? '—'}</td>
|
||||
<td className="mono">{c.remote ?? '—'}</td>
|
||||
<td className="muted">
|
||||
{fmtTime(c.connected_since)}（{fmtAgo(c.connected_since)}）
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{creating ? (
|
||||
<NameDialog
|
||||
title="创建 Probe"
|
||||
initial=""
|
||||
onClose={() => setCreating(false)}
|
||||
onSubmit={async (name) => {
|
||||
let created: ProbeIdentityDto | undefined
|
||||
const ok = await run(async () => {
|
||||
created = await api.post<ProbeIdentityDto>('/api/admin/probes', { name })
|
||||
})
|
||||
if (ok && created) {
|
||||
setIdentity({ title: `Probe ${name} 已创建`, value: created })
|
||||
probes.reload()
|
||||
}
|
||||
return ok
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{renaming ? (
|
||||
<NameDialog
|
||||
title="修改名称"
|
||||
initial={renaming.name}
|
||||
onClose={() => setRenaming(undefined)}
|
||||
onSubmit={async (name) => {
|
||||
const ok = await run(() => api.patch(`/api/admin/probes/${renaming.id}`, { name }), '已保存')
|
||||
probes.reload()
|
||||
return ok
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{pending ? (
|
||||
<Confirm
|
||||
title={confirmText[pending.kind].title}
|
||||
danger={confirmText[pending.kind].danger}
|
||||
confirmText={confirmText[pending.kind].title}
|
||||
onClose={() => setPending(undefined)}
|
||||
onConfirm={async () => {
|
||||
const { kind, probe } = pending
|
||||
if (kind === 'rotate') {
|
||||
let rotated: ProbeIdentityDto | undefined
|
||||
const ok = await run(async () => {
|
||||
rotated = await api.post<ProbeIdentityDto>(`/api/admin/probes/${probe.id}/rotate`)
|
||||
})
|
||||
if (ok && rotated) setIdentity({ title: `${probe.name} 的新密钥`, value: rotated })
|
||||
} else if (kind === 'revoke') {
|
||||
await run(() => api.post(`/api/admin/probes/${probe.id}/revoke`), '已吊销')
|
||||
} else {
|
||||
await run(() => api.del(`/api/admin/probes/${probe.id}`), '已删除')
|
||||
}
|
||||
probes.reload()
|
||||
}}
|
||||
>
|
||||
{confirmText[pending.kind].text}
|
||||
</Confirm>
|
||||
) : null}
|
||||
{identity ? <IdentityDialog title={identity.title} identity={identity.value} onClose={() => setIdentity(undefined)} /> : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user