vis timeline

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

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <h5 class="mb-15">{{ t("tags") }}.</h5>
     <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("service") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.serviceCode }}</span>
@@ -43,6 +42,7 @@ limitations under the License. -->
       <span class="g-sm-4 grey">{{ t("isError") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
     </div>
+    <h5 class="mb-10">{{ t("tags") }}.</h5>
     <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
       <span class="g-sm-4 grey">{{ i.key }}:</span>
       <span class="g-sm-8 wba">
@@ -61,8 +61,8 @@ limitations under the License. -->
     </h5>
     <div v-for="(i, index) in currentSpan.logs" :key="index">
       <div class="mb-10 sm">
-        <span class="mr-10">{{ t("time") }}:</span
-        ><span class="grey">{{ dateFormat(i.time) }}</span>
+        <span class="mr-10">{{ t("time") }}:</span>
+        <span class="grey">{{ dateFormat(i.time) }}</span>
       </div>
       <div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
         <div class="mb-10">
@@ -77,6 +77,8 @@ limitations under the License. -->
         <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
       </div>
     </div>
+    <h5 class="mb-10">{{ t("events") }}.</h5>
+    <div class="attach-events"></div>
     <el-button class="popup-btn" type="primary" @click="getTaceLogs">
       {{ t("relatedTraceLogs") }}
     </el-button>
@@ -111,18 +113,22 @@ limitations under the License. -->
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
+import dayjs from "dayjs";
+import { DataSet, Timeline } from "vis-timeline/standalone";
 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";
 
-/*global defineProps */
+/*global defineProps, Nullable */
 const props = defineProps({
   currentSpan: { type: Object as PropType<any>, default: () => ({}) },
 });
 const { t } = useI18n();
 const traceStore = useTraceStore();
+const timeline = ref<Nullable<HTMLDivElement>>(null);
+const visGraph = ref<Nullable<any>>(null);
 const pageNum = ref<number>(1);
 const showRelatedLogs = ref<boolean>(false);
 const pageSize = 10;
@@ -131,6 +137,10 @@ const total = computed(() =>
     ? pageSize * pageNum.value + 1
     : pageSize * pageNum.value
 );
+const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+
+visTimeline();
 async function getTaceLogs() {
   showRelatedLogs.value = true;
   const res = await traceStore.getSpanLogs({
@@ -147,6 +157,56 @@ async function getTaceLogs() {
     ElMessage.error(res.errors);
   }
 }
+function visTimeline() {
+  if (!timeline.value) {
+    return;
+  }
+  if (visGraph.value) {
+    visGraph.value.destroy();
+  }
+  const h = timeline.value.getBoundingClientRect().height;
+  const events = props.currentSpan.attachedEvents.map(
+    (d: any, index: number) => {
+      return {
+        id: index + 1,
+        content: d.name,
+        start: new Date(Number(d.startTime)),
+        end: new Date(Number(d.endTime)),
+        data: d,
+        className: d.type,
+      };
+    }
+  );
+  const items: any = new DataSet(events);
+  const options: any = {
+    height: h,
+    width: "100%",
+    locale: "en",
+    groupHeightMode: "fitItems",
+    autoResize: false,
+    tooltip: {
+      overflowMethod: "cap",
+      template(item: Event | any) {
+        const data = item.data || {};
+        let tmp = `<div>ID: ${data.uuid || ""}</div>
+        <div>Name: ${data.name || ""}</div>
+        <div>Event Type: ${data.type || ""}</div>
+        <div>Start Time: ${data.startTime ? visDate(data.startTime) : ""}</div>
+        <div>End Time: ${data.endTime ? visDate(data.endTime) : ""}</div>
+        <div>Message: ${data.message || ""}</div>
+        <div>Service: ${data.source.service || ""}</div>`;
+        if (data.source.endpoint) {
+          tmp += `<div>Endpoint: ${data.source.endpoint}</div>`;
+        }
+        if (data.source.instance) {
+          tmp += `<div>Service Instance: ${data.source.instance}</div>`;
+        }
+        return tmp;
+      },
+    },
+  };
+  visGraph.value = new Timeline(timeline.value, items, options);
+}
 function turnPage(p: number) {
   pageNum.value = p;
   getTaceLogs();

src/views/dashboard/related/trace/components/List.vue

@@ -107,4 +107,8 @@ function downloadTrace() {
 .list {
   height: calc(100% - 150px);
 }
+
+.event-tag {
+  color: red;
+}
 </style>

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

@@ -175,13 +175,46 @@ export default class ListGraph {
       .attr("x", 35)
       .attr("y", -6)
       .attr("fill", "#333")
-      .text((d: any) => {
+      .html((d: any) => {
         if (d.data.label === "TRACE_ROOT") {
           return "";
         }
-        return d.data.label.length > 40
-          ? `${d.data.label.slice(0, 40)}...`
+        const label =
+          d.data.label.length > 35
+            ? `${d.data.label.slice(0, 35)}...`
             : `${d.data.label}`;
+        return label;
+      });
+    nodeEnter
+      .append("rect")
+      .attr("rx", 2)
+      .attr("ry", 2)
+      .attr("height", 15)
+      .attr("width", 40)
+      .attr("fill", "#e66")
+      .attr("x", 270)
+      .attr("y", -15);
+    nodeEnter
+      .append("text")
+      .attr("x", 272)
+      .attr("y", -4)
+      .attr("fill", "#fff")
+      .text((d: any) => {
+        // const events = d.data.attachedEvents;
+        const events = [
+          {
+            startTime: "",
+            event: "event",
+            endTime: "",
+            tags: [],
+            summary: [],
+          },
+        ];
+        if (events && events.length) {
+          return `events`;
+        } else {
+          return "";
+        }
       });
     nodeEnter
       .append("text")
@@ -196,18 +229,6 @@ export default class ListGraph {
             d.data.component ? "- " + d.data.component : d.data.component || ""
           }`
       );
-    nodeEnter
-      .append("text")
-      .attr("class", "node-text")
-      .attr("x", 50)
-      .attr("y", 0)
-      .attr("fill", "#333")
-      .text((d: any) => {
-        if (d.data.attachedEvents && d.data.attachedEvents.length) {
-          return `Events - ${d.data.attachedEvents.length}`;
-        }
-        return "";
-      });
     nodeEnter
       .append("rect")
       .attr("rx", 2)