在此前的博客《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个步骤：
- 按span id聚合CLIENT和SERVER日志
- 整合每个span的CLIENT/SERVER日志
- 找出root span，即整个调用链的根部RPC
- 将所有span按parent Id索引起来
- 从root span开始，广度优先，建立调用链tree
- 深度优先遍历调用树tree，输出HTML结构
因为是Demo，所以没有对日志数据进行完善的合法性校验，有问题欢迎随时留言。
如果文章帮助您解决了工作难题，您可以帮我点击屏幕上的任意广告，或者赞助少量费用来支持我的持续创作，谢谢~
