feat(web): show UDP and TCP strips on overview cards
Add 3/6/12 hour ranges with status strips, latency sparklines and a side popover for the hovered interval.
This commit is contained in:
justme committed
1 parent
a9538eae4a
commit
a70b89b95c
3 files changed
+510
-33
No files matched your search
@@ -0,0 +1,187 @@
|
||||
import { useMemo, useRef, useState, type MouseEvent } from 'react'
|
||||
import { api } from '@shared/api/client'
|
||||
import type { SeriesDto } from '@shared/api/types'
|
||||
import { fmtMs, fmtPct } from '@shared/format'
|
||||
import { useQuery } from '@shared/hooks'
|
||||
|
||||
/** 总览卡片可以看的时长，以及每一格的长度（格数约 36～48，太多就挤了）。 */
|
||||
export const OVERVIEW_RANGES = [
|
||||
{ value: '3h', label: '3 小时', hours: 3, step: '5m', stepMin: 5 },
|
||||
{ value: '6h', label: '6 小时', hours: 6, step: '10m', stepMin: 10 },
|
||||
{ value: '12h', label: '12 小时', hours: 12, step: '15m', stepMin: 15 },
|
||||
] as const
|
||||
|
||||
export type OverviewRange = (typeof OVERVIEW_RANGES)[number]['value']
|
||||
|
||||
type Level = 'ok' | 'warn' | 'bad' | 'none'
|
||||
|
||||
const levelOf = (loss: number | null | undefined): Level => (loss === null || loss === undefined ? 'none' : loss <= 0.5 ? 'ok' : loss < 3 ? 'warn' : 'bad')
|
||||
|
||||
const clock = (ms: number) => new Date(ms).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })
|
||||
|
||||
interface StripProps {
|
||||
/** 左上：什么延迟（UDP 延迟 p50）。 */
|
||||
rttLabel: string
|
||||
rtt: number | null | undefined
|
||||
/** 右上：丢包还是重传。 */
|
||||
badLabel: string
|
||||
bad: number | null | undefined
|
||||
badHint?: string
|
||||
/** 每 5 分钟一格：这一格的丢包（重传）率、延迟。 */
|
||||
t: number[]
|
||||
badSeries: (number | null)[]
|
||||
rttSeries: (number | null)[]
|
||||
ready: boolean
|
||||
loading: boolean
|
||||
/** 提示里这一格的「丢包」叫什么。 */
|
||||
tipBad: string
|
||||
/** 没有数据时占位的格数，和每格长度的说明（「每 5 分钟」）。 */
|
||||
cells: number
|
||||
stepText: string
|
||||
hoursText: string
|
||||
/** 悬停的那一格（UDP 和 TCP 共用）；`null` = 没有。 */
|
||||
hover: number | null
|
||||
onHover: (i: number | null) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 一排小格（每 5 分钟一格，按这 5 分钟的丢包率着色：绿 / 黄 / 红 / 灰 = 没有数据）
|
||||
* 加一条延迟的小走势（只标纵轴最大值），尽量轻。
|
||||
*/
|
||||
function Strip({ rttLabel, rtt, badLabel, bad, badHint, t, badSeries, rttSeries, ready, loading, cells, stepText, hoursText, hover, onHover }: StripProps) {
|
||||
const count = ready ? badSeries.length : 0
|
||||
const onSparkMove = (e: MouseEvent<HTMLDivElement>) => {
|
||||
if (count < 2) return
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
onHover(Math.min(count - 1, Math.max(0, Math.round(((e.clientX - rect.left) / rect.width) * (count - 1)))))
|
||||
}
|
||||
// 纵轴贴着数据走：从最小值到最大值（上下各留一点），而不是从 0 开始——延迟本来就在一个窄范围里波动，从 0 画会成一条平线
|
||||
const spark = useMemo(() => {
|
||||
const points = rttSeries.map((v, i) => ({ v, i })).filter((p): p is { v: number; i: number } => p.v !== null && p.v !== undefined)
|
||||
if (points.length < 2) return null
|
||||
const lo = Math.min(...points.map((p) => p.v))
|
||||
const hi = Math.max(...points.map((p) => p.v))
|
||||
const mean = points.reduce((sum, p) => sum + p.v, 0) / points.length
|
||||
const pad = Math.max((hi - lo) * 0.15, mean * 0.03, 1)
|
||||
const top = hi + pad
|
||||
const bottom = Math.max(0, lo - pad)
|
||||
const n = rttSeries.length - 1
|
||||
const W = 300
|
||||
const H = 30
|
||||
const x = (i: number) => (i / n) * W
|
||||
const y = (v: number) => H - ((v - bottom) / (top - bottom)) * H
|
||||
const line = points.map((p, k) => `${k === 0 ? 'M' : 'L'}${x(p.i).toFixed(1)},${y(p.v).toFixed(1)}`).join(' ')
|
||||
const area = `${line} L${x(points[points.length - 1].i).toFixed(1)},${H} L${x(points[0].i).toFixed(1)},${H} Z`
|
||||
const fmt = (v: number) => (v >= 100 ? String(Math.round(v)) : v.toFixed(1))
|
||||
const dots = rttSeries.map((v) => (v === null || v === undefined ? null : y(v) / H))
|
||||
return { line, area, hi: fmt(hi), lo: fmt(lo), W, H, dots }
|
||||
}, [rttSeries])
|
||||
|
||||
return (
|
||||
<div className="udp-strip">
|
||||
<div className="udp-head">
|
||||
<span className="udp-title">
|
||||
{rttLabel} <b className="num">{fmtMs(rtt)}</b>
|
||||
</span>
|
||||
<span className="udp-title" title={badHint}>
|
||||
{badLabel} <b className={`udp-rate num ${levelOf(bad)}`}>{fmtPct(bad)}</b>
|
||||
</span>
|
||||
</div>
|
||||
<div className="bars" role="img" aria-label={`近 ${hoursText}每 ${stepText}的${badLabel}情况`}>
|
||||
{(ready ? badSeries : Array.from({ length: cells }, () => null)).map((v, i) => (
|
||||
<span key={t[i] ?? i} className={`bar ${ready ? levelOf(v) : 'none'}${hover === i ? ' on' : ''}`} onMouseEnter={() => ready && onHover(i)} />
|
||||
))}
|
||||
</div>
|
||||
<div className="spark" onMouseMove={onSparkMove}>
|
||||
{spark ? (
|
||||
<>
|
||||
<svg viewBox={`0 0 ${spark.W} ${spark.H}`} preserveAspectRatio="none" aria-hidden="true">
|
||||
<path className="area" d={spark.area} />
|
||||
<path className="line" d={spark.line} vectorEffect="non-scaling-stroke" />
|
||||
</svg>
|
||||
{hover !== null && spark.dots[hover] !== null && spark.dots[hover] !== undefined ? (
|
||||
<>
|
||||
<i className="guide" style={{ left: `${(hover / (count - 1)) * 100}%` }} />
|
||||
<i className="dot" style={{ left: `${(hover / (count - 1)) * 100}%`, top: `${(spark.dots[hover] as number) * 100}%` }} />
|
||||
</>
|
||||
) : null}
|
||||
<span className="ymax num">{spark.hi}</span>
|
||||
<span className="ymin num">{spark.lo}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="faint empty">{loading ? '加载中…' : '没有数据'}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface Props {
|
||||
lineId: string
|
||||
range: OverviewRange
|
||||
/** 近 3 小时的汇总（左上、右上的数字）。 */
|
||||
m: Record<string, number | null | undefined>
|
||||
}
|
||||
|
||||
/** 一条线路近一段时间的 UDP 和 TCP：各是一排小格加一条延迟走势，共用一次请求。 */
|
||||
export function LineStrips({ lineId, range, m }: Props) {
|
||||
const info = OVERVIEW_RANGES.find((r) => r.value === range) ?? OVERVIEW_RANGES[0]
|
||||
const series = useQuery(
|
||||
() => api.get<SeriesDto>(`/api/public/lines/${encodeURIComponent(lineId)}/series`, { range: info.value, anchor: 'latest', step: info.step, preset: 'udp,tcp', metrics: 'loss.total,rtt.p50,tcp.retrans,tcp.rtt.p50' }),
|
||||
[lineId, info.value],
|
||||
30_000,
|
||||
)
|
||||
const s = series.data
|
||||
const t = s?.t ?? []
|
||||
const col = (key: string): (number | null)[] => s?.values[key] ?? []
|
||||
// 悬停的那一格：UDP 和 TCP 的时间轴一样，所以同一格同时高亮；提示弹在卡片右侧，一次展示这段时间的 UDP 和 TCP
|
||||
const [hover, setHover] = useState<number | null>(null)
|
||||
const last = useRef<number | null>(null) // 提示收回去的动画期间，内容还要留着
|
||||
if (hover !== null) last.current = hover
|
||||
const shown = hover ?? last.current
|
||||
const common = { t, ready: Boolean(s), loading: series.loading, cells: Math.round((info.hours * 60) / info.stepMin), stepText: `${info.stepMin} 分钟`, hoursText: `${info.hours} 小时`, hover, onHover: setHover }
|
||||
const at = shown !== null && t[shown] !== undefined ? shown : null
|
||||
return (
|
||||
<div className="strips" onMouseLeave={() => setHover(null)}>
|
||||
<Strip
|
||||
{...common}
|
||||
rttLabel="UDP 延迟 p50"
|
||||
rtt={m['rtt.p50']}
|
||||
badLabel="丢包"
|
||||
bad={m['loss.total']}
|
||||
badHint={`上行丢包 ${fmtPct(m['loss.up'])} 下行丢包 ${fmtPct(m['loss.down'])}`}
|
||||
badSeries={col('loss.total')}
|
||||
rttSeries={col('rtt.p50')}
|
||||
tipBad="丢包"
|
||||
/>
|
||||
<Strip {...common} rttLabel="TCP RTT p50" rtt={m['tcp.rtt.p50']} badLabel="重传" bad={m['tcp.retrans']} badSeries={col('tcp.retrans')} rttSeries={col('tcp.rtt.p50')} tipBad="重传" />
|
||||
<div className={`pop num${hover !== null && at !== null ? ' open' : ''}`} role="tooltip" aria-hidden={hover === null}>
|
||||
{at !== null ? (
|
||||
<>
|
||||
<b className="pop-time">
|
||||
{clock(t[at])}–{clock(t[at] + info.stepMin * 60_000)}
|
||||
</b>
|
||||
<div className="pop-group">
|
||||
<span className="pop-name">UDP</span>
|
||||
<span>
|
||||
丢包 <em className={levelOf(col('loss.total')[at])}>{fmtPct(col('loss.total')[at])}</em>
|
||||
</span>
|
||||
<span>
|
||||
延迟 p50 <em>{fmtMs(col('rtt.p50')[at])}</em>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pop-group">
|
||||
<span className="pop-name">TCP</span>
|
||||
<span>
|
||||
重传 <em className={levelOf(col('tcp.retrans')[at])}>{fmtPct(col('tcp.retrans')[at])}</em>
|
||||
</span>
|
||||
<span>
|
||||
RTT p50 <em>{fmtMs(col('tcp.rtt.p50')[at])}</em>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user