1. 概述

本文主要分享运维界面的第三部分，链路追踪视角。
SkyWalking WEBUI ：https://github.com/apache/incubator-skywalking-ui

在我们打开 SkyWalking WEBUI 的 Trace Stack ( trace/trace.html ) 页时，如下图：

以链路追踪为维度进行展示。
红色部分，应用筛选器，调用「2. ApplicationsGetHandler」接口，获得应用列表。
紫色部分，TraceSegment 分页列表，调用「3. SegmentTopGetHandler」接口，获得数据。
蓝色部分，【点击单条 TraceSegment】，一次完整的分布式链路追踪记录详情，调用「5. TraceStackGetHandler」接口，获得数据。
黄色部分，【点击单个 Span】，单条 Span 记录详情，调用「5. SpanGetHandler」接口，获得数据。
基情提示：运维界面相关 HTTP 接口，逻辑简单易懂，笔者写的会比较简略一些。

2. ApplicationsGetHandler

org.skywalking.apm.collector.ui.jetty.handler.SegmentTopGetHandler ，实现 JettyHandler 接口，获得 TraceSegment 分页列表的逻辑处理器。

#doGet() 方法，代码如下：
第 62 至 73 行：解析 startTime 和 endTime 参数。
第 75 至 87 行：解析 from 和 limit 分页参数。
第 90 至 97 行：解析 minCost 和 maxCost 参数。
第 100 至 103 行：解析 globalTraceId 参数。
第 106 至 109 行：解析 operationName 参数。
第 112 至 117 行：解析 applicationId 参数。
第 120 至 132 行：解析 error 参数。
第 135 至 141 行：解析 sort 排序键参数，倒序。
第 73 行：调用 SegmentTopService#load(...) 方法，，获得 TraceSegment 分页列表。代码如下：
第 59 至 62 行：若存在 globalTraceId 参数，调用 GlobalTraceEsUIDAO#getSegmentIds(globalTraceId) 方法，查询对应的 TraceSegment 编号数组。为什么需要这么查询呢？在下面，我们会看到，实际查询的是 SegmentCost 表，该表不存在 global_trace_id ，所以需要查询到 segment_id 数组，作为查询条件。
第 65 行：调用 SegmentCostEsUIDAO#loadTop(...) 方法，查询 SegmentCost 数组。
第 68 至 77 行：循环 SegmentCost 数组，调用 GlobalTraceEsUIDAO#getGlobalTraceId(segmentId) 方法，获得每个 SegmentCost 对应的 global_trace_id 属性，并设置返回。

org.skywalking.apm.collector.ui.jetty.handler.TraceStackGetHandler ，实现 JettyHandler 接口，获取一次分布式链路追踪记录详情的逻辑处理器。

#doGet() 方法，代码如下：
第 73 行：调用 TraceStackService#load(globalTraceId) 方法，基 GlobalTrace 和 Segment 表，获取一次分布式链路追踪记录详情的逻辑处理器。逻辑较为繁琐，笔者已经添加注释，胖友调试一下，很容易明白滴。

org.skywalking.apm.collector.ui.jetty.handler.SpanGetHandler ，实现 JettyHandler 接口，获得 TraceSegment 单个 Span 详细的逻辑处理器。

#doGet() 方法，代码如下：
第 52 行：解析 segmentId 参数。
第 55 至 62 行：解析 spanId 参数。
第 73 行：调用 SpanService#load(segmentId, spanId) 方法，获得 TraceSegment 单个 Span 详细。代码如下：
第 44 行：调用 SegmentEsUIDAO#load(segmentId) 方法，获得 TraceSegment 。
第 58 至 139 行：循环获得的 TraceSegment 的 Span 数组，找到对应的 Span 记录，设置后返回。