基于zipkin实现web UI
在此前的博客《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,所以没有对日志数据进行完善的合法性校验,有问题欢迎随时留言。
如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~
