feat: update events

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -183,27 +183,36 @@ limitations under the License. -->
       return;
     }
     const attachedEvents = props.currentSpan.attachedEvents || [];
-    const events: any[] = attachedEvents.map((d: SpanAttachedEvent, index: number) => {
+    const events: any[] = attachedEvents
+      .map((d: SpanAttachedEvent) => {
         let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0");
         let endTimeNanos = String(d.endTime.nanos).slice(-6).padStart(6, "0");
         endTimeNanos = toString(endTimeNanos);
         startTimeNanos = toString(startTimeNanos);
+        const startTime = d.startTime.seconds * 1000 + d.startTime.nanos / 1000000;
+        const endTime = d.endTime.seconds * 1000 + d.endTime.nanos / 1000000;
         return {
-        id: index + 1,
-        content: d.event,
-        start: new Date(Number(d.startTime.seconds * 1000 + d.startTime.nanos / 1000000)),
-        end: new Date(Number(d.endTime.seconds * 1000 + d.endTime.nanos / 1000000)),
+          label: d.event,
           ...d,
-        startTime: d.startTime.seconds * 1000 + d.startTime.nanos / 1000000,
-        endTime: d.endTime.seconds * 1000 + d.endTime.nanos / 1000000,
-        className: "Normal",
+          startTime,
+          endTime,
           startTimeNanos,
           endTimeNanos,
         };
+      })
+      .sort((a: { startTime: number }, b: { startTime: number }) => {
+        return a.startTime - b.startTime;
       });
 
     tree.value = new ListGraph(eventGraph.value, selectEvent);
-    tree.value.init({ label: "TRACE_ROOT", children: props.currentSpan.segmentId }, events, 0);
+    tree.value.init(
+      {
+        children: events,
+        label: "",
+      },
+      events,
+      0,
+    );
     tree.value.draw();
   }
 
@@ -231,7 +240,8 @@ limitations under the License. -->
   .attach-events {
     width: 100%;
     margin: 0 5px 5px 0;
-    height: 200px;
+    height: 400px;
+    overflow: auto;
   }
 
   .popup-btn {

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -18,6 +18,7 @@
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import type { Trace } from "@/types/trace";
+import dayjs from "dayjs";
 
 export default class ListGraph {
   private barHeight = 48;
@@ -72,9 +73,6 @@ export default class ListGraph {
     L${d.target.y} ${d.target.x - 5}`;
   }
   init(data: any, row: any[], fixSpansSize: number) {
-    console.log(data);
-    console.log(row);
-    console.log(fixSpansSize);
     d3.select(".trace-xaxis").remove();
     this.row = row;
     this.data = data;
@@ -94,7 +92,6 @@ export default class ListGraph {
     this.svg
       .append("g")
       .attr("class", "trace-xaxis")
-
       .attr("transform", `translate(${this.width * 0.618 - 20},${30})`)
       .call(this.xAxis);
     this.sequentialScale = d3
@@ -167,6 +164,7 @@ export default class ListGraph {
       .attr("x", 35)
       .attr("y", -6)
       .attr("fill", "#333")
+      .style("font-size", "12px")
       .html((d: any) => {
         if (d.data.label === "TRACE_ROOT") {
           return "";
@@ -217,7 +215,16 @@ export default class ListGraph {
       .attr("y", 12)
       .attr("fill", "#ccc")
       .style("font-size", "11px")
-      .text((d: any) => `${d.data.layer || ""} ${d.data.component ? "- " + d.data.component : d.data.component || ""}`);
+      .text(
+        (d: any) =>
+          `${d.data.layer || ""} ${
+            d.data.component
+              ? "- " + d.data.component
+              : d.data.event
+              ? this.visDate(d.data.startTime) + ":" + d.data.startTimeNanos
+              : ""
+          }`,
+      );
     nodeEnter
       .append("rect")
       .attr("rx", 2)
@@ -308,6 +315,9 @@ export default class ListGraph {
       callback();
     }
   }
+  visDate(date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") {
+    return dayjs(date).format(pattern);
+  }
   resize() {
     if (!this.el) {
       return;