Jaeger 类似 Opentelemetry 跟踪跨度的 UI

Question

我有来自后端的 json 数据，如下所示：

Field Name              Type
traceSpanData           Array
    name                String
    context             Object
        traceId         String
        spanId          String
    parentId            String
    startTime           String
    endTime             String
    attributes          Object
        http.route      String

有了这些数据，我需要制作如下图所示的跟踪跨度图。

我该怎么做？ 我正在使用vue 3，composition api（脚本设置），我尝试用chartjs制作甘特图，但我无法自定义y轴标签，（在图中，y轴上的标签呈树状结构） 知道我该怎么做才能制作如图所示的图表吗？

Answer 1

不确定您的意图是制作独立的 UI 还是只是可视化数据，但对于后者，您可以将数据形状转换为 OpenTelemetry JSON 格式并将其上传到 Jaeger UI（最新版本中支持）。