web: one line per node pair and RTT/loss on the link board

A pair of nodes now has a single line, dialed by the non-listening side or by the smaller id when both listen, so RTT is measured once. The board draws it undirected and colours it by RTT and loss; a manual setting applies to the pair.
2026-10-21 16:20:38 +08:00
1 parent e0f6667cd7
commit 48ffa56285
@@ -375,15 +375,30 @@
 }

 .link-board-edge.connected,
-.link-board-legend .connected {
+.link-board-edge.good,
+.link-board-legend .good {
  color: var(--app-ok);
 }

+.link-board-edge.fair,
+.link-board-legend .fair {
+  color: var(--app-warn);
+}
+
+.link-board-edge.poor,
+.link-board-legend .poor {
+  color: var(--app-bad);
+}
+
 .link-board-edge.pending,
 .link-board-legend .pending {
  color: var(--app-warn);
 }

+.link-board-edge.dim {
+  opacity: 0.2;
+}
+
 .link-board-edge.selected,
 .link-board-edge:focus-visible {
  color: var(--app-accent);
@@ -400,6 +415,11 @@
  stroke-dasharray: 6 6;
 }

+.link-board-edge.pending .link-board-edge-line {
+  stroke-dasharray: 2 6;
+  stroke-linecap: round;
+}
+
 .link-board-edge.selected .link-board-edge-line,
 .link-board-edge:hover .link-board-edge-line,
 .link-board-edge:focus-visible .link-board-edge-line {
@@ -413,22 +433,6 @@
  pointer-events: stroke;
 }

-.link-board-arrow.connected {
-  fill: var(--app-ok);
-}
-
-.link-board-arrow.pending {
-  fill: var(--app-warn);
-}
-
-.link-board-arrow.disabled {
-  fill: var(--app-ink-faint);
-}
-
-.link-board-arrow.selected {
-  fill: var(--app-accent);
-}
-
 .link-board-edge-label rect {
  fill: var(--app-card);
  stroke: var(--app-outline-soft);
@@ -563,6 +567,10 @@
  border-top-style: dashed;
 }

+.link-board-legend .pending::before {
+  border-top-style: dotted;
+}
+
 .link-board-empty {
  position: absolute;
  inset: 0;
@@ -1,5 +1,5 @@
 import { Maximize, Minus, Plus, RotateCcw, Server } from 'lucide-react'
-import { useEffect, useId, useRef, useState, type PointerEvent } from 'react'
+import { useEffect, useRef, useState, type PointerEvent } from 'react'
 import { Link } from 'react-router-dom'
 import type { LinkDto, LinkMatrixDto } from '@shared/api/types'
 import { getBase } from '@shared/api/source'
@@ -13,6 +13,10 @@ type Drag = { pointer: number; origin: Point; start: Point; node?: string }
 const WIDTH = 216
 const HEIGHT = 108
 const keyOf = (link: LinkDto) => `${link.dialer_id}/${link.listener_id}`
+/** 线路质量：摘要里的 RTT 中位数（毫秒）和总丢包率（0–1）；线路 id 是 <监听方>~<拨号方>。 */
+export type LineQuality = { rtt: number | null; loss: number | null }
+export const lineIdOf = (link: LinkDto) => `${link.listener_id}~${link.dialer_id}`
+type Tone = 'good' | 'fair' | 'poor' | 'connected' | 'pending' | 'disabled'
 const clampScale = (scale: number) => Math.max(0.25, Math.min(2, scale))

 function labelOf(link: LinkDto) {
@@ -26,6 +30,24 @@ function labelOf(link: LinkDto) {
  return states[link.connection_state] ?? '连接中'
 }

+function toneOf(link: LinkDto, quality?: LineQuality): Tone {
+  if (!link.linked) return 'disabled'
+  if (!link.connected) return 'pending'
+  const rtt = quality?.rtt
+  if (rtt == null) return 'connected'
+  const loss = quality?.loss ?? 0
+  if (rtt >= 250 || loss >= 0.05) return 'poor'
+  if (rtt >= 100 || loss >= 0.01) return 'fair'
+  return 'good'
+}
+
+function edgeText(link: LinkDto, quality?: LineQuality) {
+  if (!link.linked || !link.connected) return labelOf(link)
+  if (quality?.rtt == null) return '测量中'
+  const loss = quality.loss ?? 0
+  return `${Math.round(quality.rtt)} ms${loss >= 0.005 ? ` · ${(loss * 100).toFixed(1)}%` : ''}`
+}
+
 function readPositions(key: string): Positions {
  try {
    const saved: unknown = JSON.parse(localStorage.getItem(key) ?? '{}')
@@ -36,8 +58,9 @@ function readPositions(key: string): Positions {
  }
 }

-export function LinkBoard({ data, busy, onSet, onRetry }: {
+export function LinkBoard({ data, quality, busy, onSet, onRetry }: {
  data: LinkMatrixDto
+  quality: Record<string, LineQuality>
  busy: boolean
  onSet: (link: LinkDto, enabled: boolean | null) => Promise<void>
  onRetry: (link: LinkDto) => Promise<void>
@@ -47,13 +70,14 @@ export function LinkBoard({ data, busy, onSet, onRetry }: {
  const [view, setView] = useState<View>({ x: 0, y: 0, scale: 1 })
  const [size, setSize] = useState({ width: 0, height: 0 })
  const [selected, setSelected] = useState<string | null>(null)
+  const [focusNode, setFocusNode] = useState<string | null>(null)
  const [dragging, setDragging] = useState(false)
  const viewport = useRef<HTMLDivElement>(null)
  const drag = useRef<Drag | null>(null)
  const initialized = useRef(false)
-  const marker = useId().replaceAll(':', '')
  const nodes = data.nodes
  const focused = data.items.find((link) => keyOf(link) === selected)
+  const focusedQuality = focused ? quality[lineIdOf(focused)] : undefined
  const nodeIds = nodes.map((node) => node.id).join(',')

  function pointOf(id: string, layout = positions): Point {
@@ -120,6 +144,7 @@ export function LinkBoard({ data, busy, onSet, onRetry }: {
    if (event.button !== 0 || drag.current || (event.target as Element).closest('a, button, [data-edge]')) return
    event.stopPropagation()
    event.preventDefault()
+    setFocusNode(node ?? null)
    viewport.current?.setPointerCapture(event.pointerId)
    drag.current = { pointer: event.pointerId, origin: { x: event.clientX, y: event.clientY }, start: node ? pointOf(node) : view, node }
    setDragging(true)
@@ -156,7 +181,7 @@ export function LinkBoard({ data, busy, onSet, onRetry }: {
    <div className="link-board-layout">
      <section className="link-board" aria-label="Agent 节点画板">
        <div className="link-board-tools">
-          <span className="muted">拖动节点排布 · 拖动空白平移 · 滚轮缩放</span>
+          <span className="muted">一对节点一条线，线上是近 3 小时 RTT 中位数 · 点节点只看它的线路 · 拖动排布 · 滚轮缩放</span>
          <div className="row">
            <button type="button" className="btn small" aria-label="缩小画板" onClick={() => zoom(1 / 1.2)}><Minus size={16} /></button>
            <span className="link-board-scale">{Math.round(view.scale * 100)}%</span>
@@ -168,8 +193,7 @@ export function LinkBoard({ data, busy, onSet, onRetry }: {
        <div ref={viewport} className={`link-board-viewport${dragging ? ' dragging' : ''}`} onPointerDown={(event) => start(event)} onPointerMove={move} onPointerUp={end} onPointerCancel={end} onLostPointerCapture={end}>
          {!nodes.length ? <div className="link-board-empty"><Empty>还没有已启用的 Agent，请先添加并启用节点。</Empty></div> : null}
          <div className="link-board-world" style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}>
-            <svg className="link-board-edges" width="1" height="1" aria-label="有向线路">
-              <defs>{['connected', 'pending', 'disabled', 'selected'].map((tone) => <marker key={tone} id={`${marker}-${tone}`} markerWidth="8" markerHeight="8" refX="9" refY="5" viewBox="0 0 10 10" orient="auto"><path d="M 0 0 L 10 5 L 0 10 Z" className={`link-board-arrow ${tone}`} /></marker>)}</defs>
+            <svg className="link-board-edges" width="1" height="1" aria-label="节点之间的线路">
              {data.items.map((link) => {
                const source = pointOf(link.dialer_id)
                const target = pointOf(link.listener_id)
@@ -179,25 +203,26 @@ export function LinkBoard({ data, busy, onSet, onRetry }: {
                const ux = dx / length
                const uy = dy / length
                const margin = Math.min((WIDTH / 2 + 12) / Math.max(Math.abs(ux), 0.001), (HEIGHT / 2 + 12) / Math.max(Math.abs(uy), 0.001))
-                const bend = 76
                const startX = source.x + WIDTH / 2 + ux * margin
                const startY = source.y + HEIGHT / 2 + uy * margin
                const endX = target.x + WIDTH / 2 - ux * margin
                const endY = target.y + HEIGHT / 2 - uy * margin
-                const controlX = (startX + endX) / 2 - uy * bend
-                const controlY = (startY + endY) / 2 + ux * bend
-                const path = `M ${startX} ${startY} Q ${controlX} ${controlY} ${endX} ${endY}`
-                const labelX = (startX + 2 * controlX + endX) / 4
-                const labelY = (startY + 2 * controlY + endY) / 4
+                const path = `M ${startX} ${startY} L ${endX} ${endY}`
+                const labelX = (startX + endX) / 2
+                const labelY = (startY + endY) / 2
                const active = selected === keyOf(link)
+                const q = quality[lineIdOf(link)]
+                const tone = toneOf(link, q)
+                const text = edgeText(link, q)
+                const dim = focusNode !== null && link.dialer_id !== focusNode && link.listener_id !== focusNode && !active
                return (
-                  <g key={keyOf(link)} data-edge className={`link-board-edge ${link.connected ? 'connected' : link.linked ? 'pending' : 'disabled'}${active ? ' selected' : ''}`} role="button" tabIndex={0} aria-label={`${link.dialer_name} → ${link.listener_name}：${labelOf(link)}`} aria-pressed={active} onClick={() => setSelected(keyOf(link))} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setSelected(keyOf(link)) } }}>
-                    <title>{link.dialer_name} → {link.listener_name}：{labelOf(link)}</title>
+                  <g key={keyOf(link)} data-edge className={`link-board-edge ${tone}${active ? ' selected' : ''}${dim ? ' dim' : ''}`} role="button" tabIndex={0} aria-label={`${link.dialer_name} 与 ${link.listener_name}：${text}`} aria-pressed={active} onClick={() => setSelected(keyOf(link))} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setSelected(keyOf(link)) } }}>
+                    <title>{link.dialer_name} 拨 {link.listener_name}：{labelOf(link)}{q?.rtt != null ? `，RTT ${Math.round(q.rtt)} ms` : ''}</title>
                    <path className="link-board-edge-hit" d={path} />
-                    <path className="link-board-edge-line" d={path} markerEnd={`url(#${marker}-${active ? 'selected' : link.connected ? 'connected' : link.linked ? 'pending' : 'disabled'})`} />
+                    <path className="link-board-edge-line" d={path} />
                    <g className="link-board-edge-label" transform={`translate(${labelX}, ${labelY})`}>
-                      <rect x="-52" y="-13" width="104" height="26" rx="13" />
-                      <text textAnchor="middle" dominantBaseline="central">{labelOf(link)}</text>
+                      <rect x="-40" y="-12" width="80" height="24" rx="12" />
+                      <text textAnchor="middle" dominantBaseline="central">{text}</text>
                    </g>
                  </g>
                )
@@ -220,29 +245,29 @@ export function LinkBoard({ data, busy, onSet, onRetry }: {
              )
            })}
          </div>
-          <div className="link-board-legend"><span className="connected">已连接</span><span className="pending">连接中</span><span className="disabled">已关闭</span></div>
+          <div className="link-board-legend"><span className="good">RTT &lt; 100 ms</span><span className="fair">100–250 ms 或丢包 ≥ 1%</span><span className="poor">&gt; 250 ms 或丢包 ≥ 5%</span><span className="pending">连接中</span><span className="disabled">已关闭</span></div>
        </div>
      </section>
      <aside className="link-board-inspector" aria-label="线路操作">
        <div className="card-title">线路详情</div>
        <select className="input" aria-label="选择线路" value={selected ?? ''} onChange={(event) => setSelected(event.target.value || null)}>
-          <option value="">选择来源 → 目标</option>
-          {data.items.map((link) => <option key={keyOf(link)} value={keyOf(link)}>{link.dialer_name} → {link.listener_name}</option>)}
+          <option value="">选择一条线路</option>
+          {data.items.map((link) => <option key={keyOf(link)} value={keyOf(link)}>{link.dialer_name} — {link.listener_name}</option>)}
        </select>
        {focused ? (
          <div className="stack">
-            <div className="link-board-route"><Link to={`/agents/${focused.dialer_id}`}>{focused.dialer_name}</Link><span>→</span><Link to={`/agents/${focused.listener_id}`}>{focused.listener_name}</Link></div>
+            <div className="link-board-route"><Link to={`/agents/${focused.dialer_id}`}>{focused.dialer_name}</Link><span>—</span><Link to={`/agents/${focused.listener_id}`}>{focused.listener_name}</Link></div>
            <div className="row wrap"><Chip tone={focused.connected ? 'ok' : focused.linked ? 'warn' : ''}>{labelOf(focused)}</Chip><span className="muted">{focused.override == null ? '跟随自动' : '手动设置'}</span></div>
-            <dl className="kv"><dt>来源节点</dt><dd>{runtimeStatusLabel(focused.dialer_runtime_status)}</dd><dt>目标节点</dt><dd>{runtimeStatusLabel(focused.listener_runtime_status)}</dd><dt>重试次数</dt><dd>{focused.retry_attempt}</dd></dl>
+            <dl className="kv">{focusedQuality?.rtt != null ? <><dt>RTT 中位数</dt><dd>{Math.round(focusedQuality.rtt)} ms</dd></> : null}{focusedQuality?.loss != null ? <><dt>丢包率</dt><dd>{(focusedQuality.loss * 100).toFixed(2)}%</dd></> : null}<dt>拨号方</dt><dd>{focused.dialer_name}（{runtimeStatusLabel(focused.dialer_runtime_status)}）</dd><dt>监听方</dt><dd>{focused.listener_name}（{runtimeStatusLabel(focused.listener_runtime_status)}）</dd><dt>重试次数</dt><dd>{focused.retry_attempt}</dd></dl>
            {focused.connection_reason ? <p className="muted">{focused.connection_reason}</p> : null}
            {focused.last_error ? <p className="notice warn">{focused.last_error}</p> : null}
            {focused.retry_in_ms ? <p className="muted">约 {Math.ceil(focused.retry_in_ms / 1000)} 秒后重试</p> : null}
-            <button type="button" className={`btn${focused.linked ? '' : ' primary'}`} disabled={busy} onClick={() => onSet(focused, !focused.linked)}>{focused.linked ? '关闭此方向' : '开启此方向'}</button>
+            <button type="button" className={`btn${focused.linked ? '' : ' primary'}`} disabled={busy} onClick={() => onSet(focused, !focused.linked)}>{focused.linked ? '关闭这条线路' : '开启这条线路'}</button>
            <button type="button" className="btn" disabled={busy || focused.override == null} onClick={() => onSet(focused, null)}>恢复自动</button>
            <button type="button" className="btn" disabled={busy} onClick={() => onRetry(focused)}>立即重试</button>
-            <span className="faint">操作只影响当前方向。</span>
+            <span className="faint">一对节点只有一条线路，上下行都在这条连接上测，RTT 只测一次。</span>
          </div>
-        ) : <Empty>点击画板中的连线，查看状态或调整测量方向。</Empty>}
+        ) : <Empty>点击画板中的连线，查看线路质量或开关这条线路。</Empty>}
        <p className="link-board-storage faint">节点位置仅保存在当前浏览器。</p>
      </aside>
    </div>
@@ -1,13 +1,13 @@
-import { LinkBoard } from './LinkBoard'
+import { LinkBoard, type LineQuality } from './LinkBoard'
 import { api } from '@shared/api/client'
-import type { LinkDto, LinkMatrixDto } from '@shared/api/types'
+import type { LinkDto, LinkMatrixDto, OverviewDto } from '@shared/api/types'
 import { useQuery } from '@shared/hooks'
 import { runtimeStatusLabel } from '@shared/nodes'
 import { Chip, Empty, ErrorNotice, Spinner, useAction } from '@shared/ui'

 /**
- * 线路：Agent 之间的有向线路。自动连接开着时所有可达 Agent 相互连接，关着时只连手动选中的；
- * 每一对都可以手动强制开或关（点一下切换，「↺」回到自动）。来源 Agent 始终是主动拨出的一方。
+ * 线路：Agent 之间的线路，一对 Agent 一条。自动连接开着时所有可达的 Agent 两两相连，关着时只连手动选中的；
+ * 每一对都可以手动强制开或关（点一下切换，「↺」回到自动）。拨号的一方由面板决定（不监听的拨监听的；都监听时 id 较小的拨）。
 */
 /** 线路连接状态：control_* 是与 Agent 的控制连接（断开即失联），task_* 是测量用的 QUIC 数据通道。 */
 const CONNECTION_LABELS: Record<string, string> = {
@@ -20,6 +20,9 @@ const CONNECTION_LABELS: Record<string, string> = {

 export function Links({ dialerId }: { dialerId?: string }) {
  const matrix = useQuery(() => api.get<LinkMatrixDto>('/api/admin/links'), [], 8000)
+  // 线路质量：画板上每条线写近 3 小时的 RTT 中位数和丢包，没有数据就只显示连接状态
+  const overview = useQuery(() => (dialerId ? Promise.resolve(null) : api.get<OverviewDto>('/api/public/overview', { range: '3h', metrics: 'rtt.p50,loss.total', ip_version: 'ipv4' })), [dialerId], 30_000)
+  const quality: Record<string, LineQuality> = Object.fromEntries((overview.data?.lines ?? []).map((line) => [line.id, { rtt: line.summary.metrics['rtt.p50'] ?? null, loss: line.summary.metrics['loss.total'] ?? null }]))
  const { busy, run } = useAction()
  const items = matrix.data?.items ?? []
  const dialers = (matrix.data?.nodes ?? []).filter((n) => !dialerId || n.id === dialerId).map((n) => [n.id, n.name] as const)
@@ -43,14 +46,14 @@ export function Links({ dialerId }: { dialerId?: string }) {
      <div className={`row${dialerId ? '' : ' link-board-header'}`} style={{ marginBottom: 12 }}>
        <b>{dialerId ? '拨出连接' : 'Agent 节点画板'}</b>
        {matrix.loading && !matrix.data ? <Spinner /> : null}
-        <span className="muted">{dialerId ? '点格子调整单方向的连接策略。' : 'Agent 默认相互探测，点击连线管理方向。'}</span>
+        <span className="muted">{dialerId ? '点格子调整单方向的连接策略。' : '每对 Agent 一条线路，只测一次 RTT；点击连线查看质量或开关。'}</span>
        {!dialerId ? <label className="switch right">
          <input type="checkbox" checked={matrix.data?.auto_link ?? true} disabled={busy} onChange={(e) => setAuto(e.target.checked)} />
          自动连接 {matrix.data?.auto_link === false ? '关' : '开'}
        </label> : null}
      </div>
      <ErrorNotice error={matrix.error} />
-      {!dialerId && matrix.data ? <LinkBoard data={matrix.data} busy={busy} onSet={set} onRetry={retry} /> : null}
+      {!dialerId && matrix.data ? <LinkBoard data={matrix.data} quality={quality} busy={busy} onSet={set} onRetry={retry} /> : null}
      {dialerId && matrix.data && items.length === 0 ? <Empty>尚无可连接的线路，请添加并启用其他 Agent。</Empty> : null}
      {dialerId ? <table className="table">
        <thead>