From 591484b11c407fb2a71f22196eec529a417f62b1 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Mon, 4 Dec 2023 16:45:07 +0800
Subject: [PATCH] fix: Trace associates with Log widget (#351)

* fix: view logs on trace widget

* fix: service
---
 src/views/dashboard/controls/Trace.vue       | 12 ++++++++----
 src/views/dashboard/related/log/Header.vue   |  9 ++++++++-
 src/views/dashboard/related/trace/Detail.vue |  8 +++++++-
 src/views/dashboard/related/trace/Filter.vue |  6 +++++-
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 0c1b0682..d717b496 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -25,16 +25,16 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Filter :needQuery="needQuery" :data="data" />
+      <Filter :needQuery="needQuery" :data="data" @get="getService" />
     </div>
     <div class="trace flex-h">
       <TraceList />
-      <TraceDetail />
+      <TraceDetail :serviceId="serviceId" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { provide } from "vue";
+  import { provide, ref } from "vue";
   import type { PropType } from "vue";
   import Filter from "../related/trace/Filter.vue";
   import TraceList from "../related/trace/TraceList.vue";
@@ -42,7 +42,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
 
-  /*global defineProps */
+  /* global defineProps */
   const props = defineProps({
     data: {
       type: Object as PropType<any>,
@@ -52,11 +52,15 @@ limitations under the License. -->
     needQuery: { type: Boolean, default: true },
   });
   provide("options", props.data);
+  const serviceId = ref<string>("");
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   function removeWidget() {
     dashboardStore.removeControls(props.data);
   }
+  function getService(id: string) {
+    serviceId.value = id;
+  }
 </script>
 <style lang="scss" scoped>
   .trace-wrapper {
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 8afc0a1b..ce822192 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -199,7 +199,14 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
       return;
     }
-    state.service = logStore.services[0];
+    if (!logStore.services.length) {
+      return;
+    }
+    if (props.data.filters && props.data.filters.id) {
+      state.service = logStore.services.find((item: { id: string }) => item.id === props.data.filters?.id);
+    } else {
+      state.service = logStore.services[0];
+    }
     getInstances(state.service.id);
     getEndpoints(state.service.id);
   }
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index ec4bd9b8..53f5ce7d 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -102,12 +102,17 @@ limitations under the License. -->
   import { dateFormat } from "@/utils/dateFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
+  const props = {
+    serviceId: { type: String, default: "" },
+  };
+
   export default defineComponent({
     name: "TraceDetail",
     components: {
       ...graphs,
     },
-    setup() {
+    props,
+    setup(props) {
       const appStore = useAppStoreWithOut();
       /*global Recordable */
       const options: Recordable<LayoutConfig> = inject("options") || {};
@@ -138,6 +143,7 @@ limitations under the License. -->
           {
             sourceId: options?.id || "",
             traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
+            id: props.serviceId || undefined,
           },
           "Log",
         );
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 429f71c2..b9eeb38f 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -90,7 +90,8 @@ limitations under the License. -->
   import { EntityType, QueryOrders, Status } from "../../data";
   import type { LayoutConfig } from "@/types/dashboard";
 
-  /*global defineProps, Recordable */
+  /*global defineProps, defineEmits, Recordable */
+  const emits = defineEmits(["get"]);
   const props = defineProps({
     needQuery: { type: Boolean, default: true },
     data: {
@@ -150,6 +151,8 @@ limitations under the License. -->
       return;
     }
     state.service = getCurrentNode(traceStore.services) || traceStore.services[0];
+    emits("get", state.service.id);
+
     getEndpoints(state.service.id);
     getInstances(state.service.id);
   }
@@ -232,6 +235,7 @@ limitations under the License. -->
     if (type === "service") {
       getEndpoints(state.service.id);
       getInstances(state.service.id);
+      emits("get", state.service.id);
     }
   }
   function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {