1. 概述

本文主要分享运维界面的第一部分，应用视角。
SkyWalking WEBUI ：https://github.com/apache/incubator-skywalking-ui

在我们打开 SkyWalking WEBUI 的首页时，如下图：

• 以应用为维度进行展示。
• 紫色部分，时间进度条，调用 「2. AllInstanceLastTimeGetHandler」 接口，获得应用实例最后心跳时间。大多情况下，我们进入该界面，看的是从最后心跳时间开始的应用调用情况。
• 红色部分，应用调用拓扑图，初始化以 [ 实例最后心跳时间前一小时 , 实例最后心跳时间 ] 调用 「3. TraceDagGetHandler」 接口，获得数据，而后每 2 秒刷新一次，30 次刷新后，即过了 1 分钟后，数据范围向前走一分钟，为 [ 实例最后心跳时间前一小时 + 一分钟 , 实例最后心跳时间 + 一分钟 ]。
• 通过进度条的【播放/暂停按钮】可以切换到暂停模式，切换时间范围，查看时间范围为一小时内的应用调用拓扑图。注意，一定要切换到【暂时模式】才可调整时间范围，在【播放模式】下，每次自动请求都会重设时间范围。
  基情提示：运维界面相关 HTTP 接口，逻辑简单易懂，笔者写的会比较简略一些。

2. AllInstanceLastTimeGetHandler

org.skywalking.apm.collector.ui.jetty.handler.time.AllInstanceLastTimeGetHandler ，实现 JettyHandler 接口，获得应用实例最后心跳时间处理器。代码如下：

• #pathSpec() ，路径定义，"/time/allInstance" 。
• 响应示例：

• #doGet() 方法，代码如下：

• 第 55 至 59 行：调用 TimeSynchronousService#allInstanceLastTime() 方法，获得应用实例最后心跳时间。

• InstanceEsUIDAO#lastHeartBeatTime()

• 第 61 至 65 行：减 5 秒，因为应用心跳是最频繁的，防止其他信息还没上传。

• 第 68 至 69 行：返回数据。

3. TraceDagGetHandler

org.skywalking.apm.collector.ui.jetty.handler.TraceDagGetHandler ，实现 JettyHandler 接口，获得应用拓扑图数据逻辑处理器。

• #pathSpec() ，路径定义，"traceDag" 。
• 响应示例：

• #doGet() 方法，代码如下：

• 第 73 行：调用 TraceDagService#load(startTime, endTime) 方法，获得应用拓扑图数据。代码如下：

• 第 53 行：调用 NodeComponentEsUIDAO#load(startTime, endTime) 方法，获得 NodeComponent JSON 数组。

• 第 56 行：调用 NodeMappingEsUIDAO#load(startTime, endTime) 方法，获得 NodeMapping JSON 数组。

• 第 59 行：调用 NodeReferenceEsUIDAO#load(startTime, endTime) 方法，获得 NodeReference JSON 数组。

• 第 62 行：调用 TraceDagDataBuilder#build(nodeCompArray, nodesMappingArray, resSumArray) 方法，使用获得的 NodeComponent 、NodeMapping 、NodeReference 数据，构建应用拓扑图。逻辑较为繁琐，笔者已经添加注释，胖友调试一下，很容易明白滴。