From 1e2963950c7d8d5ce76197d59eadc0900bd31a06 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 27 Sep 2022 15:30:14 +0800
Subject: [PATCH] toplist associate with trace

---
 src/types/dashboard.d.ts                     |  1 +
 src/views/dashboard/graphs/TopList.vue       |  8 +--
 src/views/dashboard/related/trace/Filter.vue | 53 ++++++++++++++------
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index e8cd4b11..e562722d 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -50,6 +50,7 @@ export interface LayoutConfig {
     traceId?: string;
     spanId?: string;
     segmentId?: string;
+    id?: string;
   };
 }
 
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 93e938e0..14032de2 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -68,7 +68,7 @@ import Trace from "../controls/Trace.vue";
 const props = defineProps({
   data: {
     type: Object as PropType<{
-      [key: string]: { name: string; value: number; traceIds: string[] }[];
+      [key: string]: { name: string; value: number; id: string }[];
     }>,
     default: () => ({}),
   },
@@ -80,7 +80,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const showTrace = ref<boolean>(false);
-const traceOptions = ref<{ type: string; filter?: unknown }>({
+const traceOptions = ref<{ type: string; filters?: unknown }>({
   type: "Trace",
 });
 const key = computed(() => Object.keys(props.data)[0] || "");
@@ -101,10 +101,10 @@ function handleClick(event: PointerEvent, i: string) {
   event.stopPropagation();
   copy(i);
 }
-function viewTrace(item: { name: string }) {
+function viewTrace(item: { name: string; id: string }) {
   traceOptions.value = {
     ...traceOptions.value,
-    filter: item,
+    filters: item,
   };
   showTrace.value = true;
 }
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index d10e896d..1a4709ff 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -164,7 +164,7 @@ async function getServices() {
     ElMessage.error(resp.errors);
     return;
   }
-  state.service = traceStore.services[0];
+  state.service = getCurrentNode(traceStore.services) || traceStore.services[0];
   getEndpoints(state.service.id);
   getInstances(state.service.id);
 }
@@ -175,7 +175,8 @@ async function getEndpoints(id?: string, keyword?: string) {
     ElMessage.error(resp.errors);
     return;
   }
-  state.endpoint = traceStore.endpoints[0];
+  state.endpoint =
+    getCurrentNode(traceStore.endpoints) || traceStore.endpoints[0];
 }
 async function getInstances(id?: string) {
   const resp = await traceStore.getInstances(id);
@@ -183,9 +184,36 @@ async function getInstances(id?: string) {
     ElMessage.error(resp.errors);
     return;
   }
-  state.instance = traceStore.instances[0];
+  state.instance =
+    getCurrentNode(traceStore.instances) || traceStore.instances[0];
 }
-function searchTraces() {
+function getCurrentNode(arr: { id: string }[]) {
+  let item;
+  if (props.data.filters && props.data.filters.id) {
+    item = arr.find((d: { id: string }) => d.id === props.data.filters?.id);
+  }
+  return item;
+}
+function setCondition() {
+  let param: any = {
+    traceState: state.status.value || "ALL",
+    tags: tagsMap.value.length ? tagsMap.value : undefined,
+    queryOrder: traceStore.conditions.queryOrder || "BY_DURATION",
+    queryDuration: duration.value,
+    minTraceDuration: Number(minTraceDuration.value),
+    maxTraceDuration: Number(maxTraceDuration.value),
+    traceId: traceId.value || undefined,
+    paging: { pageNum: 1, pageSize: 20 },
+  };
+  if (props.data.filters && props.data.filters.id) {
+    param = {
+      ...param,
+      serviceId: selectorStore.currentService.id,
+      endpointId: state.endpoint.id || undefined,
+      serviceInstanceId: state.instance.id || undefined,
+    };
+    return param;
+  }
   let endpoint = "",
     instance = "";
   if (dashboardStore.entity === EntityType[2].value) {
@@ -194,21 +222,18 @@ function searchTraces() {
   if (dashboardStore.entity === EntityType[3].value) {
     instance = selectorStore.currentPod.id;
   }
-  traceStore.setTraceCondition({
+  param = {
+    ...param,
     serviceId: selectorStore.currentService
       ? selectorStore.currentService.id
       : state.service.id,
-    traceId: traceId.value || undefined,
     endpointId: endpoint || state.endpoint.id || undefined,
     serviceInstanceId: instance || state.instance.id || undefined,
-    traceState: state.status.value || "ALL",
-    queryDuration: duration.value,
-    minTraceDuration: Number(minTraceDuration.value),
-    maxTraceDuration: Number(maxTraceDuration.value),
-    queryOrder: traceStore.conditions.queryOrder || "BY_DURATION",
-    tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 20 },
-  });
+  };
+  return param;
+}
+function searchTraces() {
+  traceStore.setTraceCondition(setCondition());
   queryTraces();
 }
 async function queryTraces() {