update topn config

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;
 }

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)) {
+    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) || "";
+  if (!filters.id) {
     state.service = selectorStore.currentService.id;
     if (dashboardStore.entity === EntityType[2].value) {
       state.instance = selectorStore.currentPod.id;
@@ -211,8 +211,6 @@ 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];
@@ -221,7 +219,6 @@ function setCondition() {
   if (!isNaN(params.minTraceDuration)) {
     params.queryOrder = QueryOrders[1].value;
   }
-  }
   return params;
 }
 async function queryTraces() {