web: group the QUIC and TCP rows of a line card by protocol [CI]

web/display/src/LineStrips.tsx

@@ -100,12 +100,17 @@ export function LineStrips({ lineId, dialer, listener, range, m }: Props) {
       <span className={`line-mini-badge ${levelOf(value)}`} style={{ gridRow }}>{text}</span>
     </div>
   )
-  const direction = (id: string, route: string, title: string, rows: ReturnType<typeof row>[]) => (
+  // 一个协议一组：QUIC 的去程和回程放在一起，TCP 的放在一起；每个方向上面一行写明是谁到谁，组底下一条时间轴
+  const group = (id: string, proto: string, label: (dir: string) => string, entries: { route: string; dir: 'up' | 'down'; value: number | null | undefined; text: string; values: (number | null)[] }[]) => (
     <div className="line-mini-direction" key={id}>
-      <div className="line-mini-route" title={title}>{route}</div>
-      {rows}
+      {entries.flatMap((e, k) => [
+        <div className="line-mini-route" key={`${id}-${e.dir}-route`} style={{ gridRow: k * 2 + 1 }} title={`${e.dir === 'up' ? '去程' : '回程'}：${e.route}`}>
+          {e.route}
+        </div>,
+        row(`${id}-${e.dir}`, k * 2 + 2, proto, label(e.dir === 'up' ? '去程' : '回程'), e.value, e.text, e.values),
+      ])}
       {ticks.length > 0 ? (
-        <div className="line-mini-axis" aria-hidden="true">
+        <div className="line-mini-axis" aria-hidden="true" style={{ gridRow: entries.length * 2 + 1 }}>
           {ticks.map((tick) => (
             <span key={tick.pos} style={{ left: `${tick.pos}%` }}>{tick.label}</span>
           ))}
@@ -113,6 +118,8 @@ export function LineStrips({ lineId, dialer, listener, range, m }: Props) {
       ) : null}
     </div>
   )
+  const up = `${dialer} → ${listener}`
+  const down = `${listener} → ${dialer}`
   return (
     <div className="strips" ref={box} onMouseMove={onMove} onMouseLeave={() => setHover(null)}>
       <div className="line-mini-stack">
@@ -123,13 +130,13 @@ export function LineStrips({ lineId, dialer, listener, range, m }: Props) {
           <small>悬停看 p95 / p99</small>
           {series.error ? <span className="line-mini-badge bad" title={`上一次取数失败：${series.error.message}`}>数据未更新</span> : null}
         </div>
-        {direction('up', `${dialer} → ${listener}`, `去程：${dialer} → ${listener}`, [
-          row('up-quic', 2, 'QUIC', '去程丢包', m['loss.up'], lossText(m['loss.up']), lossUp),
-          row('up-tcp', 3, 'TCP', '去程重传', m['tcp.retrans.up'], retransText(m['tcp.retrans.up']), retransUp),
+        {group('quic', 'QUIC', (d) => `${d}丢包`, [
+          { route: up, dir: 'up', value: m['loss.up'], text: lossText(m['loss.up']), values: lossUp },
+          { route: down, dir: 'down', value: m['loss.down'], text: lossText(m['loss.down']), values: lossDown },
         ])}
-        {direction('down', `${listener} → ${dialer}`, `回程：${listener} → ${dialer}`, [
-          row('down-quic', 2, 'QUIC', '回程丢包', m['loss.down'], lossText(m['loss.down']), lossDown),
-          row('down-tcp', 3, 'TCP', '回程重传', m['tcp.retrans.down'], retransText(m['tcp.retrans.down']), retransDown),
+        {group('tcp', 'TCP', (d) => `${d}重传`, [
+          { route: up, dir: 'up', value: m['tcp.retrans.up'], text: retransText(m['tcp.retrans.up']), values: retransUp },
+          { route: down, dir: 'down', value: m['tcp.retrans.down'], text: retransText(m['tcp.retrans.down']), values: retransDown },
         ])}
       </div>
       <div className={`pop num${hover !== null && at !== null ? ' open' : ''}`} role="tooltip" aria-hidden={hover === null}>