From 7ae484671ba922ee5cd9ae3ed5a10de406feaa38 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 26 Jul 2022 16:43:35 +0800
Subject: [PATCH] link log from trace

---
 src/store/modules/dashboard.ts               |  3 ++
 src/views/dashboard/controls/Tab.vue         | 20 ++++++++++
 src/views/dashboard/related/trace/Detail.vue | 41 ++++++++------------
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 9809221f..450c2373 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -39,6 +39,7 @@ interface DashboardState {
   dashboards: DashboardItem[];
   currentDashboard: Nullable<DashboardItem>;
   editMode: boolean;
+  currentTabIndex: number;
 }
 
 export const dashboardStore = defineStore({
@@ -56,6 +57,7 @@ export const dashboardStore = defineStore({
     dashboards: [],
     currentDashboard: null,
     editMode: false,
+    currentTabIndex: 0,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -189,6 +191,7 @@ export const dashboardStore = defineStore({
       this.activedGridItem = index;
     },
     setActiveTabIndex(index: number, target?: number) {
+      this.currentTabIndex = index;
       const m = target || this.activedGridItem;
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === m);
       if (idx < 0) {
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 8c353993..370b28a5 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -259,6 +259,26 @@ export default defineComponent({
         }
       }
     );
+    watch(
+      () => dashboardStore.currentTabIndex,
+      () => {
+        activeTabIndex.value = dashboardStore.currentTabIndex;
+        dashboardStore.activeGridItem(props.data.i);
+        dashboardStore.selectWidget(props.data);
+        const l = dashboardStore.layout.findIndex(
+          (d: LayoutConfig) => d.i === props.data.i
+        );
+        dashboardStore.setCurrentTabItems(
+          dashboardStore.layout[l].children[activeTabIndex.value].children
+        );
+        needQuery.value = true;
+        if (route.params.activeTabIndex) {
+          let p = location.href.split("/tab/")[0];
+          p = p + "/tab/" + activeTabIndex.value;
+          history.replaceState({}, "", p);
+        }
+      }
+    );
     return {
       handleClick,
       layoutUpdatedEvent,
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 852fffc1..d88a9de0 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -123,8 +123,6 @@ limitations under the License. -->
 import dayjs from "dayjs";
 import { ref, defineComponent, computed, inject } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import router from "@/router";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
 import copy from "@/utils/copy";
@@ -134,7 +132,6 @@ import { ElMessage } from "element-plus";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
-import { local } from "d3-selection";
 
 export default defineComponent({
   name: "TraceDetail",
@@ -146,7 +143,6 @@ export default defineComponent({
     /*global Nullable */
     const options: LayoutConfig | undefined = inject("options");
     const { t } = useI18n();
-    const route = useRoute();
     const traceStore = useTraceStore();
     const loading = ref<boolean>(false);
     const traceId = ref<string>("");
@@ -178,8 +174,12 @@ export default defineComponent({
 
     async function searchTraceLogs() {
       const { widgets } = getDashboard(dashboardStore.currentDashboard);
-      const widget =
-        widgets.filter((d: { type: string }) => d.type === "Log")[0] || {};
+      const widget = widgets.filter(
+        (d: { type: string }) => d.type === "Log"
+      )[0];
+      if (!widget) {
+        return;
+      }
       const item = {
         ...widget,
         filters: {
@@ -190,25 +190,18 @@ export default defineComponent({
       dashboardStore.setWidget(item);
       const logTabIndex = widget.id.split("-");
       const traceTabindex = options?.id?.split("-") || [];
-      if (logTabIndex[1] === traceTabindex[1] || logTabIndex[1] === undefined) {
-        let container: Nullable<Element>;
-        if (logTabIndex[1] === undefined) {
-          container = document.querySelector(".ds-main");
-        } else {
-          container = document.querySelector(".tab-layout");
-        }
-        if (container && options) {
-          container.scrollTop = options.y * 10;
-        }
+      let container: Nullable<Element>;
+
+      if (logTabIndex[1] === undefined) {
+        container = document.querySelector(".ds-main");
       } else {
-        let path = "";
-        if (route.params.activeTabIndex === undefined) {
-          path = location.href + "/tab/" + logTabIndex[1];
-        } else {
-          const p = location.href.split("/tab/")[0];
-          path = p + "/tab/" + logTabIndex[1];
-        }
-        location.href = path;
+        container = document.querySelector(".tab-layout");
+      }
+      if (logTabIndex[1] && logTabIndex[1] !== traceTabindex[1]) {
+        dashboardStore.setActiveTabIndex(Number(logTabIndex[1]));
+      }
+      if (container && widget) {
+        container.scrollTop = widget.y * 10;
       }
     }