基于zipkin实现web UI

On By yuer

在此前的博客《zipkin原理与对接PHP》中，我描述了zipkin的数据模型和调用链原理。

今天闲来无事，用一个很精简的demo实现了一套web UI，主要是演示如何实现数据的可视化。

访问地址：https://owenliang.github.io/zipkin-ui-demo/

项目地址：https://github.com/owenliang/zipkin-ui-demo

数据源来自于Zipkin在Elasticsearch存储的数据，我用JS前端解析数据，构成一个完成的调用链tree结构，并转化成可视化的HTML结构。

整个流程经历了6个步骤：

  1. 按span id聚合CLIENT和SERVER日志
  2. 整合每个span的CLIENT/SERVER日志
  3. 找出root span，即整个调用链的根部RPC
  4. 将所有span按parent Id索引起来
  5. 从root span开始，广度优先，建立调用链tree
  6. 深度优先遍历调用树tree，输出HTML结构

因为是Demo，所以没有对日志数据进行完善的合法性校验，有问题欢迎随时留言。

如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~