From a0d9734f91078f990305853bc4548b9bd4d7e310 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 23 Nov 2022 16:36:58 +0800
Subject: [PATCH] update

---
 src/store/modules/trace.ts                    | 18 ++++++++-
 .../trace/components/D3Graph/SpanDetail.vue   | 39 +++++++++----------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index e9654e83..4d698ed6 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -175,7 +175,23 @@ export const traceStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.setTraceSpans(res.data.data.trace.spans || []);
+      const data = res.data.data.trace.spans;
+      data[4].attachedEvents = [
+        {
+          startTime: {
+            seconds: 1669102205296,
+            nanos: 1669102205296,
+          },
+          event: "event",
+          endTime: {
+            seconds: 1669102212791,
+            nanos: 1669102212791,
+          },
+          tags: [{ key: "test", value: "test" }],
+          summary: [{ key: "test", value: 123 }],
+        },
+      ];
+      this.setTraceSpans(data || []);
       return res.data;
     },
     async getSpanLogs(params: any) {
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index e8a33f17..dcac04de 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -42,7 +42,9 @@ 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>
+    <h5 class="mb-10" v-if="currentSpan.tags && currentSpan.tags.length">
+      {{ 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">
@@ -77,8 +79,17 @@ 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" ref="timeline"></div>
+    <h5
+      class="mb-10"
+      v-if="currentSpan.attachedEvent && currentSpan.attachedEvent.length"
+    >
+      {{ t("events") }}.
+    </h5>
+    <div
+      class="attach-events"
+      ref="timeline"
+      v-if="currentSpan.attachedEvent && currentSpan.attachedEvent.length"
+    ></div>
     <el-button class="popup-btn" type="primary" @click="getTaceLogs">
       {{ t("relatedTraceLogs") }}
     </el-button>
@@ -211,22 +222,7 @@ function visTimeline() {
     visGraph.value.destroy();
   }
   const h = timeline.value.getBoundingClientRect().height;
-  // const attachedEvents = props.currentSpan.attachedEvents || [];
-  const attachedEvents: SpanAttachedEvent[] = [
-    {
-      startTime: {
-        seconds: 1669102205296,
-        nanos: 1669102205296,
-      },
-      event: "event",
-      endTime: {
-        seconds: 1669102212791,
-        nanos: 1669102212791,
-      },
-      tags: [{ key: "test", value: "test" }],
-      summary: [{ key: "test", value: 123 }],
-    },
-  ];
+  const attachedEvents = props.currentSpan.attachedEvents || [];
   const events: any[] = attachedEvents.map(
     (d: SpanAttachedEvent, index: number) => {
       return {
@@ -240,11 +236,12 @@ function visTimeline() {
     }
   );
   const items = new DataSet(events);
-  const options = {
+  const options: any = {
     height: h,
     width: "100%",
     locale: "en",
-    autoResize: true,
+    groupHeightMode: "fitItems",
+    autoResize: false,
   };
   visGraph.value = new Timeline(timeline.value, items, options);
   visGraph.value.on("select", (data: { items: number[] }) => {