From 611731d6d0b316d151f869f5ed429c18cdb05d6b Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Wed, 30 Nov 2022 16:48:49 +0800
Subject: [PATCH] fix: update attached event details (#197)

---
 src/store/modules/network-profiling.ts        |  4 ++++
 .../network-profiling/components/Tasks.vue    |  1 +
 .../trace/components/D3Graph/SpanDetail.vue   | 21 +++++++++++++++----
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/network-profiling.ts b/src/store/modules/network-profiling.ts
index f6c4bc25..1e31feca 100644
--- a/src/store/modules/network-profiling.ts
+++ b/src/store/modules/network-profiling.ts
@@ -152,6 +152,10 @@ export const networkProfilingStore = defineStore({
       this.networkTasks = res.data.data.queryEBPFTasks || [];
       this.selectedNetworkTask = this.networkTasks[0] || {};
       this.setSelectedNetworkTask(this.selectedNetworkTask);
+      if (!this.networkTasks.length) {
+        this.nodes = [];
+        this.calls = [];
+      }
       return res.data;
     },
     async keepNetworkProfiling(taskId: string) {
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index 72e0ec95..8d0f4322 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -246,6 +246,7 @@ async function fetchTasks() {
 watch(
   () => selectorStore.currentPod,
   () => {
+    inProcess.value = false;
     fetchTasks();
   }
 );
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index a816ca78..3746b3d2 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -108,12 +108,22 @@ limitations under the License. -->
       <div class="mb-10">
         <span class="grey">Start Time:</span>
         {{
-          currentEvent.startTime ? visDate(Number(currentEvent.startTime)) : ""
+          currentEvent.startTime
+            ? `${visDate(
+                Number(currentEvent.startTime)
+              )}:${currentEvent.startTimeNanos.toLocaleString("en-US")}`
+            : ""
         }}
       </div>
       <div class="mb-10">
         <span class="grey">End Time:</span>
-        {{ currentEvent.endTime ? visDate(Number(currentEvent.endTime)) : "" }}
+        {{
+          currentEvent.endTime
+            ? `${visDate(
+                Number(currentEvent.endTime)
+              )}:${currentEvent.endTimeNanos.toLocaleString("en-US")}`
+            : ""
+        }}
       </div>
       <div class="mb-10">
         <span class="grey">Summary:</span>
@@ -190,14 +200,14 @@ const visGraph = ref<Nullable<any>>(null);
 const pageNum = ref<number>(1);
 const showRelatedLogs = ref<boolean>(false);
 const showEventDetail = ref<boolean>(false);
-const currentEvent = ref<SpanAttachedEvent | Record<string, never>>({});
+const currentEvent = ref<any>({});
 const pageSize = 10;
 const total = computed(() =>
   traceStore.traceList.length === pageSize
     ? pageSize * pageNum.value + 1
     : pageSize * pageNum.value
 );
-const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") =>
   dayjs(date).format(pattern);
 
 onMounted(() => {
@@ -245,6 +255,8 @@ function visTimeline() {
         startTime: d.startTime.seconds * 1000 + d.startTime.nanos / 1000,
         endTime: d.endTime.seconds * 1000 + d.endTime.nanos / 1000,
         className: "Normal",
+        startTimeNanos: d.startTime.nanos,
+        endTimeNanos: d.endTime.nanos,
       };
     }
   );
@@ -261,6 +273,7 @@ function visTimeline() {
   visGraph.value.on("select", (data: { items: number[] }) => {
     const index = data.items[0];
     currentEvent.value = events[index - 1 || 0] || {};
+    console.log(currentEvent.value);
     if (data.items.length) {
       showEventDetail.value = true;
       return;