Dilettante258
EN ZH
← 返回组件集

Span 时间线表格

基于 details/summary 的可折叠调用链时间线

Span 时间线 Demo

组件标签
已查找Span: 0/0
Span
02.83s
服务名
主机
起始时间
/resource_aa request
2.65s
server_a
10.88.127.255
sleep
1.56s
server_a
10.88.127.255
http_call
527.42ms
server_a
10.88.127.255
/resource_cc1 request
526.99ms
server_c
10.88.127.255
sleep
520.29ms
server_c
10.88.127.255
redis.command
0.18ms
server_c
10.88.127.255
redis.command
0.09ms
server_c
10.88.127.255
http_call
1.00s
server_a
10.88.127.255
/resource_bb request
1.19s
server_b
10.88.127.255
http_call
967.57ms
server_b
10.88.127.255
/resource_cc request
967.16ms
server_c
10.88.127.255
sleep
958.26ms
server_c
10.88.127.255
mysql.query
0.87ms
server_c
10.88.127.255
mysql.query
1.62ms
server_c
10.88.127.255
sleep
100.42ms
server_b
10.88.127.255
http_call
0.02ms
server_b
10.88.127.255
http_call
0.02ms
server_b
10.88.127.255

链路树表格 Demo

链路
Span数/请求倍数?
请求数/请求比例?
错误请求数/错误请求比例?
耗时?
最大子树节点数?
平均网络调用耗时?
平均本地净耗时?
标记
操作
server_b::/resource_bb
243 / 129.26%
188 / 100.00%
0 / 0.00%
1.32s
20
0us
39.42ms
server_c::http_call
1 / 100.00%
1 / 0.53%
0 / 0.00%
970.49ms
0
0us
0us
server_c::/resource_cc
242 / 128.72%
188 / 100.00%
0 / 0.00%
845.15ms
2
651.62us
65.99us
server_c::/resource_cc
242 / 128.72%
188 / 100.00%
0 / 0.00%
833.56ms
0
0us
833.56ms
mysql:localhost/byteapm::mysql.query
484 / 257.45%
188 / 100.00%
0 / 0.00%
2.67ms
0
0us
0us
server_d::/resource_dd
81 / 117.39%
69 / 36.70%
0 / 0.00%
713.73ms
5
637.59us
73.01us
server_d::/resource_dd
81 / 117.39%
69 / 36.70%
0 / 0.00%
693.55ms
0
0us
693.55ms
mysql:127.0.0.1/byteapm::mysql.query
161 / 233.33%
69 / 36.70%
0 / 0.00%
457.01us
0
0us
0us
redis:localhost::redis.command
162 / 234.78%
69 / 36.70%
0 / 0.00%
317.83us
0
0us
0us
kafka:127.0.0.1 topic:test_topic::kafka.produce
81 / 117.39%
69 / 36.70%
0 / 0.00%
137.15us
0
0us
0us
server_d::unknown
67 / 136.73%
49 / 26.06%
0 / 0.00%
876.59us
0
854.96us
21.63us
java_server_a::/java_service_a/http
78 / 130.00%
60 / 31.91%
0 / 0.00%
206.50ms
7
573.35us
622.15us
java_server_a::/java_service_a/http
78 / 130.00%
60 / 31.91%
0 / 0.00%
205.34ms
6
0us
69.22ms
java_server_a::/java_service_a/http
78 / 130.00%
60 / 31.91%
0 / 0.00%
136.12ms
6
0us
57.63us
java_server_b::/java_service_b/http
78 / 130.00%
60 / 31.91%
0 / 0.00%
136.29ms
5
632.92us
438.00us
java_server_b::/java_service_b/http
78 / 130.00%
60 / 31.91%
0 / 0.00%
134.99ms
4
0us
927.85us
java_server_b::/java_service_b/http
156 / 260.00%
60 / 31.91%
0 / 0.00%
63.98ms
2
0us
0us

实现亮点

查看实现复盘文章 这篇博客详细记录了数据建模、TreeGridBase 抽象、高亮导航与样式协议等实现取舍。

查看线上产品说明文档 该能力在实际线上产品中也有对应说明，可用于对照业务场景理解组件设计。

树结构渲染

采用原生 DOM 元素 details + summary 渲染可展开/折叠树结构。

避免手写复杂折叠状态管理，结构语义和交互行为更自然。

层级连线系统

竖线通过背景 linear-gradient 绘制，再配合白色背景遮挡做层级裁切。

横向虚线通过伪元素 + repeating-linear-gradient 实现。

耗时条与布局

耗时条使用 CSS 变量计算 left(right)-margin，再填充背景色和文字。在左边距大于 80% 的情况下，更换文字书写方向，避免文字重合。

范型复用与类型推导

利用范型约束与高阶组件，复用组件样式和渲染逻辑。

通过类型推导统一列定义和节点数据约束，减少重复与类型分叉。

列锁定（Sticky Col）

列模型通过 sticky 字段声明左右锁定，运行时计算每个锁定列的累计偏移。

单元格使用 position: sticky + left/right 偏移变量，实现横向滚动时的列固定。

高亮与导航

命中状态通过 data-* 写回 DOM，再用属性选择器控制样式优先级。

支持组件标签/关键词/异常并集高亮，并在可见命中范围内上下跳转定位。

点击交互采用组件根节点事件委托，基于 dataset 解析目标行，减少监听器与闭包数量。

样式优先级管理

使用 CSS 自带特性管理样式，相比手写 style 或手动控制 className 更清晰。

样式继承与优先级关系更直观，高亮、异常与当前定位态更容易协同。

动画与复用

为 ::details-content 添加折叠动画，并用 interpolate-size: allow-keywords 做高度过渡。

以 TreeGridBase<T> 作为基座，Span 时间线与链路树表格复用同一套渲染框架。

同页双 Demo 验证

该页提供了 2 个 Demo，用于对照验证同一套组件基座能力。

在生产中一共有 5 个地方用到了该组件，涉及 3 个基础页面。