From d5c263e2718c813cf39e0512713c71c2aaf936d7 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 26 Jul 2022 15:40:29 +0800
Subject: [PATCH] view log

---
 src/views/components/ConditionTags.vue       | 15 ++-------
 src/views/dashboard/related/trace/Detail.vue | 32 ++++++++++++++++++--
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index f7e2ae60..d1f56ff6 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -15,11 +15,7 @@ limitations under the License. -->
 <template>
   <div>
     <span class="grey">{{ t("tags") }}: </span>
-    <span
-      v-if="tagsList.length"
-      class="trace-tags"
-      :style="type === 'LOG' ? `min-width: 122px;` : ''"
-    >
+    <span v-if="tagsList.length" class="trace-tags">
       <span class="selected" v-for="(item, index) in tagsList" :key="index">
         <span>{{ item }}</span>
         <span class="remove-icon" @click="removeTags(index)">×</span>
@@ -33,13 +29,7 @@ limitations under the License. -->
       @change="addLabels"
       :placeholder="t('addTags')"
     />
-    <el-popover
-      v-else
-      trigger="click"
-      style="margin: 10px 0 0 -130px"
-      :visible="visible"
-      width="300px"
-    >
+    <el-popover v-else trigger="click" :visible="visible" width="300px">
       <template #reference>
         <el-input
           size="small"
@@ -226,7 +216,6 @@ watch(
   padding: 2px 5px;
   border-radius: 3px;
   width: 250px;
-  z-index: 999;
 }
 
 .remove-icon {
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index b7638e30..852fffc1 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -123,6 +123,8 @@ 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";
@@ -132,6 +134,7 @@ 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",
@@ -140,8 +143,10 @@ export default defineComponent({
     LogTable,
   },
   setup() {
+    /*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>("");
@@ -156,7 +161,6 @@ export default defineComponent({
     );
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
-    const showTraceLogs = ref<boolean>(false);
 
     function handleClick() {
       copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
@@ -174,7 +178,8 @@ export default defineComponent({
 
     async function searchTraceLogs() {
       const { widgets } = getDashboard(dashboardStore.currentDashboard);
-      const widget = widgets.filter((d: { type: string }) => d.type === "Log");
+      const widget =
+        widgets.filter((d: { type: string }) => d.type === "Log")[0] || {};
       const item = {
         ...widget,
         filters: {
@@ -183,6 +188,28 @@ 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;
+        }
+      } 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;
+      }
     }
 
     function turnLogsPage(page: number) {
@@ -197,7 +224,6 @@ export default defineComponent({
       handleClick,
       t,
       searchTraceLogs,
-      showTraceLogs,
       turnLogsPage,
       pageSize,
       pageNum,