应用性能监控在可视化方向的精进之路

常敏

腾讯云高级工程师。负责监控和可观测系统的开发。Tvision Tcharts 自研图表项目负责人。在华为、腾讯“全新”设计过多个大型项目的核心架构。技术理念：借鉴，融合，到自主创新。

| 导语可观测领域中，可视化能力在发现问题、分析问题中起着关键性作用。一图胜千言，可视化能让用户非常直观的看到数据的周期、趋势和异常，快速的发现问题。可视化能清晰的展现应用的关系，让用户从全局的视角理解系统的调用关系。腾讯云可观测平台-应用性能观测 (APM) 采用自研的可视化图表库 TVision Tcharts 构建可视化能力。自研图表有着更好的性能，定制化程度高，更好的交互体验等优点。可视化能力在支撑业务的过程中，遇到很多的挑战。本文介绍应对这些挑战做的一些优化，让大家更好地使用 APM 的功能。

应用性能监控在可视化方面的挑战

腾讯云可观测平台的应用性能监控（Application Performance Management ，APM）是一款应用性能管理平台。APM 可以为用户提供分布式应用性能分析和故障自检能力，全方位保障系统的可用性和稳定性。协助用户在复杂的业务系统快速定位性能问题，降低 MTTR（平均故障恢复时间）。实时了解并追踪应用性能情况，提升用户体验。

可观测领域中，可视化能力在发现问题、分析问题中起着关键性作用。一图胜千言，可视化能让用户非常直观的看到数据的周期、趋势和异常，快速的发现问题。可视化能清晰的展现应用的关系，让用户从全局的视角理解系统的调用关系。应用性能观测 (APM) 采用自研的可视化图表库 TVision Tcharts 构建可视化能力。自研图表有着更好的性能，定制化程度高，更好的交互体验等优点。可视化能力在支撑业务的过程中，遇到很多的挑战。本文介绍应对这些挑战做的一些优化，让大家更好地使用 APM 的功能。

来自用户的挑战

随着 APM 用户量的增加和用户接入应用数量急剧增加之后，我们收到很多用户对可视化的意见，反馈最密集的问题主要集中如下五个方面。前四个问题都是与拓扑图相关。

1. 大数据场景拓扑图显示混乱。不可读，不可理解，不可交互。

2. 某直播业务，拓扑图节点和链路超过 1 万+，出现界面布局和渲染慢的问题。

3. 应用拓扑不支持分析能力，希望能“逐层展开”下级节点分析异常具体原因。

4. 拓扑节点呈现的信息量不够，不能直观查看应用类型等。

5. 调用链分析交互不友好。瀑布图调用层次超过 1000，操作出现卡顿。

来自业务的挑战

1. 可视化组件需要具有高性能，可以快速地呈现和流程的交互。

2. 可视化组件满足定制化能力，构建 APM 差异化竞争力。

3. 需要快速实现用户需求，并拥有一致的用户体验。

APM 在可视化方向的精进之路

面对用户的挑战，我们在可视化方面不断精进，追赶标杆，并逐步拥有自己的核心竞争力。优化后的版本逐步受到用户的认可。下面就列举一些主要的优化点，希望能帮助大家更好地使用可视化的能力。

大数据场景和分析能力的优化

1.1、大数据场景，拓扑图支持自动缩放画布。

在缩放画布的情况下，让一屏展示更多节点，并保持节点展示尽量不重叠。

“某直播业务”包括节点和链路 1 万+ 的展示效果。（画布缩放 zoom 自动调整成原来的 0.4 倍，同时画布大小变为 2.5 倍）

1.2、节点自动布局性能优化 (性能提升：25.3 秒优化到 625 毫秒)

Fruchterman 算法和 GPU 加速。

在 Fruchterman Reingold 算法中，在每个迭代，每个节点应用了三种类型的力：排斥力、引力和重力，然后分别更新 x 和 y 坐标。斥力被施加到每一对节点上，以防止它们靠得太近；引力被施加到每一条边上，使得源节点和目的节点相互拉向对方；重力将每一个节点拉向原点，以防止簇之间相互拉得太远。

由于在每次迭代中节点间的计算是独立的，并且大部分内存读取是顺序的，因此该算法是非常适用于运行在 GPU 上的 SPMD 程序。

1.3、 应用拓扑支持分析能力。分析中可以“逐层展开”下级节点，找出问题的具体原因。

拓扑图交互的优化

数据可视化的交互包括：缩放，平移，抽象和具象，过滤，关联等。

2.1、面对大数据场景，拓扑图支持了鸟瞰图能力。

鸟瞰图让用户可以从全局视角看到应用的关系和异常点，然后通过拖拽/或点击的方式切换画布可视区域。

拓扑图的左下角展示鸟瞰图，鸟瞰图可以看到拓扑图的整体布局。拖拽调整视窗，查看更详细的细节。

2.2、拓扑图支持缩放(放大/缩小)

2.3、画布支持“鼠标拖拽”方式调整画布的展示区域

2.4、拓扑图支持“过滤”能力，查找指定节点/链路的状态。

搜索框输入腾讯云可观测平台应用性能监控中创建的应用名称的关键字，搜索后，搜索的节点或链路会高亮展示。

通过图例可以过滤有“异常”，“警示”状态的节点和链路。再次点击该图例项，可以恢复初始状态。

图例过滤，是为了让用户更快发现异常的节点和链路。

2.5、 关联，即支持多图表联动

链路监控中，应用总览和拓扑图之间可以互动。总览中选中应用，拓扑图会高亮展示该应用，以及临近的对象。

单击节点或链路，可以查看被选中应用的详细指标和异常。

拓扑图展示优化的效果

展示效果更加美观，更加聚焦。

3.1、节点展示效果优化

重新设计了节点的图标，更好的区分节点的类型。

有异常或者警告的节点，除展示红色或者橙色外，节点还展示光晕的效果，显示更聚焦。

节点 Label，分两行展示，展示节点名称和节点类型。

3.2、 鼠标 hover 到节点或链路，高亮直接相关的节点，并展示链路蚂蚁线动画。

3.3、节点“双击”下钻，核心节点展示节点动画。

3.4、拓扑 tooltip 优化

节点的 tooltip 中展示图标和状态。链路的 tooltip 支持，支持鼠标悬停的情况下进行“查看调用”。

调用链分析，瀑布图的优化

瀑布图在优化之前使用的是 "Table "与“瀑布图”分别左右布局，再统一组合展现的方式。hover table 的每行就需要对瀑布图进行 hover 操作。这种方案的好处是两个组件都很成熟，开发很方便。

缺点是：

1）当数据超过 1000 条页面很卡顿，性能问题严重；

2）当前两种组件复合对比，操作存在延迟，左右拖拽交互不太好；

3）扩展瀑布图相关的功能困难，例如瀑布图展示展示图表不相关数据。

后面修改为了“分页表格”实现，主要优化：

1）技术上采用分页表的方式，使用虚拟滚动的技术方案。使得在性能上得到极大的提升。之前存在的超过 1000 条数据页面就会卡顿、难操作，现在都不存在了。甚至能支持超过 2 万条数据的瀑布图展示。

2）耗时的可视化放在表格中展示，整体性更好，交互更连贯。

3）扩展信息的展示，可选择 tooltip 或者是 table 的单行向下延展

优化前的效果：

优化后的效果：

总结

虽然 APM 在可视化方面做了很多优化，但依然存在很多不足之处。希望用户在使用中多给我们反馈问题，我们会结合用户的真实场景，及时的响应用户的需求和建议，做进一步的迭代优化。因为相信，所以看见。相信 APM 的可视化能力会不断精进，给用户带来更好的体验。

联系我们

如想咨询 Tvision Tcharts，欢迎扫码进入官方交流群~

欢迎关注腾讯云可观测，了解最新动态

👇点击阅读原文立了解腾讯云可观测平台（TCOP）