From c23e24293b974ccbffed2e5805a5eb74edab2ed0 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 24 Feb 2022 13:27:15 +0800
Subject: [PATCH] fix: update trace detail

---
 src/store/modules/trace.ts                    |  1 +
 src/views/dashboard/related/trace/Filter.vue  |  6 ++--
 .../dashboard/related/trace/TraceList.vue     |  2 +-
 .../related/trace/components/Detail.vue       | 29 ++++++++++++-------
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 73342588..6e18179f 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -103,6 +103,7 @@ export const traceStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
+      this.getTraceSpans({ traceId: res.data.data.data.traces[0].traceIds[0] });
       this.traceList = res.data.data.data.traces.map((d: Trace) => {
         d.traceIds = d.traceIds.map((id: string) => {
           return { value: id, label: id };
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index d2f10ba9..85af2cb3 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("instance") }}:</span>
       <Selector
         size="small"
-        v-model="state.instance"
+        :value="state.instance"
         :options="traceStore.instances"
         placeholder="Select a instance"
         @change="changeField('instance', $event)"
@@ -28,7 +28,7 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
-        v-model="state.endpoint"
+        :value="state.endpoint"
         :options="traceStore.endpoints"
         placeholder="Select a endpoint"
         @change="changeField('endpoint', $event)"
@@ -38,7 +38,7 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("status") }}:</span>
       <Selector
         size="small"
-        v-model="state.status"
+        :value="state.status"
         :options="Status"
         placeholder="Select a status"
         @change="changeField('status', $event)"
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index ba229a26..1e66dc0a 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -25,7 +25,7 @@ limitations under the License. -->
       <div class="selectors">
         <Selector
           size="small"
-          v-model="traceStore.conditions.queryOrder"
+          :value="traceStore.conditions.queryOrder"
           :options="QueryOrders"
           placeholder="Select a option"
           @change="changeSort"
diff --git a/src/views/dashboard/related/trace/components/Detail.vue b/src/views/dashboard/related/trace/components/Detail.vue
index 7352746e..e87edb9a 100644
--- a/src/views/dashboard/related/trace/components/Detail.vue
+++ b/src/views/dashboard/related/trace/components/Detail.vue
@@ -29,7 +29,11 @@ limitations under the License. -->
     <div class="mb-5 blue sm">
       <Selector
         size="small"
-        v-model="traceId"
+        :value="
+          traceStore.currentTrace.traceIds &&
+          traceStore.currentTrace.traceIds[0] &&
+          traceStore.currentTrace.traceIds[0].value
+        "
         :options="traceStore.currentTrace.traceIds"
         @change="changeTraceId"
         class="trace-detail-ids"
@@ -44,9 +48,9 @@ limitations under the License. -->
     <div class="flex-h item">
       <div>
         <div class="tag mr-5">{{ t("start") }}</div>
-        <span class="mr-15 sm">{{
-          dateFormat(parseInt(traceStore.currentTrace.start))
-        }}</span>
+        <span class="mr-15 sm">
+          {{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
+        </span>
         <div class="tag mr-5">{{ t("duration") }}</div>
         <span class="mr-15 sm">{{ traceStore.currentTrace.duration }} ms</span>
         <div class="tag mr-5">{{ t("spans") }}</div>
@@ -91,9 +95,10 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
+import { Option } from "@/types/app";
 import copy from "@/utils/copy";
 
 const { t } = useI18n();
@@ -102,7 +107,11 @@ const traceId = ref<string>("");
 const displayMode = ref<string>("list");
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
-
+onMounted(() => {
+  if (traceStore.currentTrace.traceIds && traceStore.currentTrace.traceIds[0]) {
+    traceId.value = traceStore.currentTrace.traceIds[0].value;
+  }
+});
 function handleClick(ids: string[]) {
   let copyValue = null;
   if (ids.length === 1) {
@@ -113,9 +122,9 @@ function handleClick(ids: string[]) {
   copy(copyValue);
 }
 
-function changeTraceId(i: string) {
-  traceId.value = i;
-  traceStore.getTraceSpans({ traceId: i });
+function changeTraceId(opt: Option[]) {
+  traceId.value = opt[0].value;
+  traceStore.getTraceSpans({ traceId: opt[0].value });
 }
 
 // function searchTraceLogs() {
@@ -160,7 +169,7 @@ function changeTraceId(i: string) {
   color: inherit;
   border: 1px solid;
   border-radius: 4px;
-  margin: 0 10px;
+  width: 300px;
 }
 
 .trace-log-btn {