From c4489c7640073ff486f558bb6ad816f3ef4bf974 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 16 Jun 2023 10:56:26 +0800
Subject: [PATCH] fix: view related trace

---
 src/hooks/data.ts                      |  4 ++--
 src/views/dashboard/Widget.vue         |  6 +++++-
 src/views/dashboard/graphs/TopList.vue | 19 ++++++++++++-------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
index f1667e0d..8d88e076 100644
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -122,9 +122,9 @@ export const RespFields: Indexable = {
         }
       }
       values {
-        id
+        name: id
         value
-        traceID
+        refId: traceID
       }
     }
     error
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index ce3a337d..44ee041f 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -37,7 +37,7 @@ limitations under the License. -->
           metricConfig: config.metricConfig,
           metricMode: config.metricMode,
           expressions: config.expressions || [],
-          typesOfMQE: config.typesOfMQE || [],
+          typesOfMQE: typesOfMQE || [],
           subExpressions: config.subExpressions || [],
           subTypesOfMQE: config.subTypesOfMQE || [],
         }"
@@ -80,6 +80,7 @@ limitations under the License. -->
       const dashboardStore = useDashboardStore();
       const title = computed(() => (config.value.widget && config.value.widget.title) || "");
       const tips = computed(() => (config.value.widget && config.value.widget.tips) || "");
+      const typesOfMQE = ref<string[]>([]);
 
       init();
       async function init() {
@@ -137,8 +138,10 @@ limitations under the License. -->
             metricConfig: config.value.metricConfig || [],
             subExpressions: config.value.subExpressions || [],
           });
+
           loading.value = false;
           source.value = params.source || {};
+          typesOfMQE.value = params.typesOfMQE;
           return;
         }
         const params = await useQueryProcessor({ ...config.value });
@@ -173,6 +176,7 @@ limitations under the License. -->
         config,
         title,
         tips,
+        typesOfMQE,
       };
     },
   });
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index ed4fbe9b..f8b05109 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
         <div class="desc">
           <span class="calls mr-10">{{ i.value }}</span>
           <span class="cp mr-20">
-            {{ i.name || i.id }}
+            {{ i.name }}
           </span>
         </div>
         <el-popover placement="bottom" trigger="click">
@@ -64,21 +64,23 @@ limitations under the License. -->
   import copy from "@/utils/copy";
   import { TextColors } from "@/views/dashboard/data";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
-  import { QueryOrders, Status, RefIdTypes, ProtocolTypes } from "../data";
+  import { QueryOrders, Status, RefIdTypes, ProtocolTypes, ExpressionResultType } from "../data";
 
   /*global defineProps */
   const props = defineProps({
     data: {
       type: Object as PropType<{
-        [key: string]: { name: string; value: number; id: string }[];
+        [key: string]: { name: string; value: number; refId: string }[];
       }>,
       default: () => ({}),
     },
     config: {
       type: Object as PropType<{
+        metricMode: string;
         color: string;
         metrics: string[];
         metricTypes: string[];
+        typesOfMQE: string[];
         relatedTrace: any;
       }>,
       default: () => ({ color: "purple" }),
@@ -107,14 +109,17 @@ limitations under the License. -->
   function handleClick(i: string) {
     copy(i);
   }
-  function viewTrace(item: { name: string; id: string; value: unknown }) {
+  function viewTrace(item: { name: string; refId: string; value: unknown }) {
     const filters = {
       ...item,
       queryOrder: QueryOrders[1].value,
       status: Status[2].value,
-      id: item.id || item.name,
+      id: item.refId,
       metricValue: [{ label: props.config.metrics[0], data: item.value, value: item.name }],
-      isReadRecords: props.config.metricTypes.includes(ProtocolTypes.ReadRecords) || undefined,
+      isReadRecords:
+        props.config.typesOfMQE.includes(ExpressionResultType.RECORD_LIST) ||
+        props.config.metricTypes.includes(ProtocolTypes.ReadRecords) ||
+        undefined,
     };
     traceOptions.value = {
       ...traceOptions.value,
@@ -163,7 +168,7 @@ limitations under the License. -->
   }
 
   .chart-slow-link {
-    padding: 4px 10px 7px 10px;
+    padding: 4px 10px 7px;
     border-radius: 4px;
     border: 1px solid #ddd;
     color: #333;