基于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个步骤:

  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,所以没有对日志数据进行完善的合法性校验,有问题欢迎随时留言。

发表评论

电子邮件地址不会被公开。