From 0bc520e5f50a78f9900915dd1181499e91d8c2cb Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 25 Oct 2022 11:25:38 +0800
Subject: [PATCH] update topn config

---
 src/views/dashboard/graphs/TopList.vue       | 15 ++++++++--
 src/views/dashboard/related/trace/Header.vue | 29 +++++++++-----------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 5eae78d3..6eb9ee12 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -63,6 +63,7 @@ import { computed, ref } from "vue";
 import copy from "@/utils/copy";
 import { TextColors } from "@/views/dashboard/data";
 import Trace from "@/views/dashboard/related/trace/Index.vue";
+import { QueryOrders, Status } from "../data";
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -72,7 +73,7 @@ const props = defineProps({
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<{ color: string }>,
+    type: Object as PropType<{ color: string; metrics: string[] }>,
     default: () => ({ color: "purple" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -99,10 +100,18 @@ const maxValue = computed(() => {
 function handleClick(i: string) {
   copy(i);
 }
-function viewTrace(item: { name: string; id: string }) {
+function viewTrace(item: { name: string; id: string; value: unknown }) {
+  const filters = {
+    ...item,
+    queryOrder: QueryOrders[1].value,
+    status: Status[2].value,
+    metricValue: [
+      { label: props.config.metrics[0], data: item.value, value: item.name },
+    ],
+  };
   traceOptions.value = {
     ...traceOptions.value,
-    filters: item,
+    filters,
   };
   showTrace.value = true;
 }
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
index 2a421a21..ac735b2d 100644
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="conditions flex-h" v-if="!filters.id">
+  <div class="conditions flex-h">
     <el-radio-group v-model="conditions" @change="changeCondition">
       <el-radio-button
         v-for="(item, index) in items"
@@ -126,13 +126,13 @@ const currentLatency = ref<number[]>(
 init();
 
 async function init() {
-  if (!filters.id) {
-    for (const d of Object.keys(filters)) {
-      if (filters[d] && !["metricValue", "duration"].includes(d)) {
-        items.value.push({ label: d, value: FiltersKeys[d] });
-      }
+  for (const d of Object.keys(filters)) {
+    if (filters[d] && ["status", "queryOrder", "latency"].includes(d)) {
+      items.value.push({ label: d, value: FiltersKeys[d] });
     }
-    conditions.value = (items.value[0] && items.value[0].label) || "";
+  }
+  conditions.value = (items.value[0] && items.value[0].label) || "";
+  if (!filters.id) {
     state.service = selectorStore.currentService.id;
     if (dashboardStore.entity === EntityType[2].value) {
       state.instance = selectorStore.currentPod.id;
@@ -211,17 +211,14 @@ function setCondition() {
     endpointId: state.endpoint || undefined,
     serviceInstanceId: state.instance || undefined,
   };
-  // echarts
-  if (!filters.id) {
-    for (const k of items.value) {
-      if (k.label === conditions.value && FiltersKeys[k.label]) {
-        params[k.value] = filters[k.label];
-      }
-    }
-    if (!isNaN(params.minTraceDuration)) {
-      params.queryOrder = QueryOrders[1].value;
+  for (const k of items.value) {
+    if (k.label === conditions.value && FiltersKeys[k.label]) {
+      params[k.value] = filters[k.label];
     }
   }
+  if (!isNaN(params.minTraceDuration)) {
+    params.queryOrder = QueryOrders[1].value;
+  }
   return params;
 }
 async function queryTraces() {