update timeline

src/styles/reset.scss

@@ -179,7 +179,7 @@ div.vis-tooltip {
 
 .vis-item {
   cursor: pointer;
-  height: 17px;
+  height: 20px;
 }
 
 .vis-item.Error {
@@ -196,7 +196,7 @@ div.vis-tooltip {
 }
 
 .vis-item .vis-item-content {
-  padding: 0 5px !important;
+  padding: 0 3px !important;
 }
 
 .vis-item.vis-selected.Error,

src/types/trace.d.ts

@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 export interface Trace {
   duration: number;
   isError: boolean;
@@ -85,3 +84,19 @@ export class TraceTreeRef {
   segmentMap: Map<string, Span>;
   segmentIdGroup: string[];
 }
+
+type Instant = {
+  seconds: number;
+  nanos: number;
+};
+type KeyValue = {
+  key: string;
+  value: string | number;
+};
+export interface SpanAttachedEvent {
+  startTime: Instant;
+  endTime: Instant;
+  event: string;
+  tags: KeyValue[];
+  summary: KeyValue[];
+}

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

@@ -78,7 +78,7 @@ limitations under the License. -->
       </div>
     </div>
     <h5 class="mb-10">{{ t("events") }}.</h5>
-    <div class="attach-events"></div>
+    <div class="attach-events" ref="timeline"></div>
     <el-button class="popup-btn" type="primary" @click="getTaceLogs">
       {{ t("relatedTraceLogs") }}
     </el-button>
@@ -110,16 +110,18 @@ limitations under the License. -->
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import dayjs from "dayjs";
 import { DataSet, Timeline } from "vis-timeline/standalone";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
 import copy from "@/utils/copy";
 import { ElMessage } from "element-plus";
 import { dateFormat } from "@/utils/dateFormat";
 import { useTraceStore } from "@/store/modules/trace";
 import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue";
+import { SpanAttachedEvent } from "@/types/trace";
 
 /*global defineProps, Nullable */
 const props = defineProps({
@@ -140,7 +142,11 @@ const total = computed(() =>
 const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
-visTimeline();
+onMounted(() => {
+  setTimeout(() => {
+    visTimeline();
+  }, 500);
+});
 async function getTaceLogs() {
   showRelatedLogs.value = true;
   const res = await traceStore.getSpanLogs({
@@ -165,18 +171,32 @@ function visTimeline() {
     visGraph.value.destroy();
   }
   const h = timeline.value.getBoundingClientRect().height;
-  const events = props.currentSpan.attachedEvents.map(
+  // const attachedEvents = props.currentSpan.attachedEvents || [];
-    (d: any, index: number) => {
+  const attachedEvents: SpanAttachedEvent[] = [
-      return {
+    {
-        id: index + 1,
+      startTime: {
-        content: d.name,
+        seconds: 1669102205296,
-        start: new Date(Number(d.startTime)),
+        nanos: 1669102205296,
-        end: new Date(Number(d.endTime)),
+      },
-        data: d,
+      event: "event",
-        className: d.type,
+      endTime: {
-      };
+        seconds: 1669102212791,
-    }
+        nanos: 1669102212791,
-  );
+      },
+      tags: [{ key: "test", value: "test" }],
+      summary: [{ key: "test", value: 123 }],
+    },
+  ];
+  const events = attachedEvents.map((d: SpanAttachedEvent, index: number) => {
+    return {
+      id: index + 1,
+      content: d.event,
+      start: new Date(Number(d.startTime.seconds)),
+      end: new Date(Number(d.endTime.seconds)),
+      data: d,
+      className: "Normal",
+    };
+  });
   const items: any = new DataSet(events);
   const options: any = {
     height: h,
@@ -186,21 +206,21 @@ function visTimeline() {
     autoResize: false,
     tooltip: {
       overflowMethod: "cap",
-      template(item: Event | any) {
+      template(item: SpanAttachedEvent | any) {
         const data = item.data || {};
-        let tmp = `<div>ID: ${data.uuid || ""}</div>
+        let tmp = `<div>Name: ${data.event || ""}</div>
-        <div>Name: ${data.name || ""}</div>
+        <div>Start Time: ${
-        <div>Event Type: ${data.type || ""}</div>
+          data.startTime.seconds ? visDate(data.startTime.seconds) : ""
-        <div>Start Time: ${data.startTime ? visDate(data.startTime) : ""}</div>
+        }</div>
-        <div>End Time: ${data.endTime ? visDate(data.endTime) : ""}</div>
+        <div>End Time: ${
-        <div>Message: ${data.message || ""}</div>
+          data.endTime.seconds ? visDate(data.endTime.seconds) : ""
-        <div>Service: ${data.source.service || ""}</div>`;
+        }</div>
-        if (data.source.endpoint) {
+        <div>Summary: ${data.summary
-          tmp += `<div>Endpoint: ${data.source.endpoint}</div>`;
+          .map((d: any) => d.key + "=" + d.value)
-        }
+          .join("; ")}</div>
-        if (data.source.instance) {
+        <div>Tags: ${data.tags
-          tmp += `<div>Service Instance: ${data.source.instance}</div>`;
+          .map((d: any) => d.key + "=" + d.value)
-        }
+          .join("; ")}</div>`;
         return tmp;
       },
     },
@@ -216,6 +236,12 @@ function showCurrentSpanDetail(text: string) {
 }
 </script>
 <style lang="scss" scoped>
+.attach-events {
+  width: 100%;
+  margin: 0 5px 5px 0;
+  height: 200px;
+}
+
 .popup-btn {
   color: #fff;
   margin-top: 40px;

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

@@ -199,7 +199,7 @@ export default class ListGraph {
       .attr("x", 272)
       .attr("y", -4)
       .attr("fill", "#fff")
-      .text((d: any) => {
+      .text(() => {
         // const events = d.data.attachedEvents;
         const events = [
           {