From 7712603706a56bb7c9008d4947e6e904a25c6087 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 27 Jul 2022 10:46:19 +0800
Subject: [PATCH] log associate with trace

---
 .../components/LogTable/LogService.vue        | 44 ++++++++++++++-----
 .../related/components/LogTable/data.ts       |  8 ++--
 src/views/dashboard/related/log/List.vue      |  2 +-
 src/views/dashboard/related/trace/Filter.vue  | 12 +++--
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/views/dashboard/related/components/LogTable/LogService.vue b/src/views/dashboard/related/components/LogTable/LogService.vue
index 4b40ff80..a24e1ce8 100644
--- a/src/views/dashboard/related/components/LogTable/LogService.vue
+++ b/src/views/dashboard/related/components/LogTable/LogService.vue
@@ -14,46 +14,68 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div @click="showSelectSpan" class="log-item">
+  <div class="log-item">
     <div v-for="(item, index) in columns" :key="index" :class="item.label">
-      <span v-if="item.label === 'timestamp'">
+      <span v-if="item.label === 'timestamp'" @click="showSelectSpan">
         {{ dateFormat(data.timestamp) }}
       </span>
-      <span v-else-if="item.label === 'tags'">
+      <span v-else-if="item.label === 'tags'" @click="showSelectSpan">
         {{ tags }}
       </span>
-      <!-- <router-link
+      <span
         v-else-if="item.label === 'traceId' && !noLink"
-        :to="{ name: 'trace', query: { traceid: data[item.label] } }"
+        :class="noLink ? '' : 'blue'"
+        @click="linkTrace(data[item.label])"
       >
-        <span :class="noLink ? '' : 'blue'">{{ data[item.label] }}</span>
-      </router-link> -->
-      <span v-else>{{ data[item.label] }}</span>
+        {{ data[item.label] }}
+      </span>
+      <span v-else @click="showSelectSpan">{{ data[item.label] }}</span>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import dayjs from "dayjs";
 import { ServiceLogConstants } from "./data";
-/*global defineProps, defineEmits */
+import getDashboard from "@/hooks/useDashboardsSession";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
+
+/*global defineProps, defineEmits, Recordable */
 const props = defineProps({
   data: { type: Object as any, default: () => ({}) },
   noLink: { type: Boolean, default: true },
 });
+const dashboardStore = useDashboardStore();
+const options: Recordable<LayoutConfig> = inject("options") || {};
 const emit = defineEmits(["select"]);
 const columns = ServiceLogConstants;
 const tags = computed(() => {
   if (!props.data.tags) {
     return "";
   }
-  return String(props.data.tags.map((d: any) => `${d.key}=${d.value}`));
+  return String(
+    props.data.tags.map(
+      (d: { key: string; value: string }) => `${d.key}=${d.value}`
+    )
+  );
 });
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 function showSelectSpan() {
   emit("select", props.data);
 }
+function linkTrace(id: string) {
+  const { associationWidget } = getDashboard(dashboardStore.currentDashboard);
+  associationWidget(
+    (options.id as any) || "",
+    {
+      sourceId: options.id || "",
+      traceId: id,
+    },
+    "Trace"
+  );
+}
 </script>
 <style lang="scss" scoped>
 .log-item {
diff --git a/src/views/dashboard/related/components/LogTable/data.ts b/src/views/dashboard/related/components/LogTable/data.ts
index 58009b25..efb4e6ec 100644
--- a/src/views/dashboard/related/components/LogTable/data.ts
+++ b/src/views/dashboard/related/components/LogTable/data.ts
@@ -40,14 +40,14 @@ export const ServiceLogConstants = [
     label: "tags",
     value: "tags",
   },
-  {
-    label: "content",
-    value: "content",
-  },
   {
     label: "traceId",
     value: "traceID",
   },
+  {
+    label: "content",
+    value: "content",
+  },
 ];
 export const ServiceLogDetail = [
   {
diff --git a/src/views/dashboard/related/log/List.vue b/src/views/dashboard/related/log/List.vue
index 583b30a1..b93c8fa1 100644
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       v-loading="logStore.loadLogs"
       :tableData="logStore.logs || []"
       :type="type"
-      :noLink="true"
+      :noLink="false"
     >
       <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") }}</div>
     </LogTable>
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 4901953c..813e8ed1 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -92,7 +92,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { Status } from "../../data";
@@ -103,8 +103,10 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
+import { LayoutConfig } from "@/types/dashboard";
 
-/*global defineProps */
+/*global defineProps, Recordable */
+const options: LayoutConfig | undefined = inject("options");
 const props = defineProps({
   needQuery: { type: Boolean, default: true },
 });
@@ -113,12 +115,14 @@ const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
-const traceId = ref<string>("");
+const traceId = ref<string>(
+  (options && options.filters && options.filters.traceId) || ""
+);
 const minTraceDuration = ref<number>();
 const maxTraceDuration = ref<number>();
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
-const state = reactive<any>({
+const state = reactive<Recordable>({
   status: { label: "All", value: "ALL" },
   instance: { value: "0", label: "All" },
   endpoint: { value: "0", label: "All" },