fix: view related trace (#285)

Author: Fine0830

src/hooks/data.ts

@@ -122,9 +122,9 @@ export const RespFields: Indexable = {
         }
       }
       values {
-        id
+        name: id
         value
-        traceID
+        refId: traceID
       }
     }
     error

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

src/views/dashboard/controls/Widget.vue

@@ -61,7 +61,7 @@ limitations under the License. -->
           associate: data.associate || [],
           metricMode: data.metricMode,
           expressions: data.expressions || [],
-          typesOfMQE: data.typesOfMQE || [],
+          typesOfMQE: typesOfMQE || [],
           subExpressions: data.subExpressions || [],
           subTypesOfMQE: data.subTypesOfMQE || [],
         }"
@@ -114,6 +114,7 @@ limitations under the License. -->
       const graph = computed(() => props.data.graph || {});
       const widget = computed(() => props.data.widget || {});
       const isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || ""));
+      const typesOfMQE = ref<string[]>([]);
 
       if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList.value) {
         queryMetrics();
@@ -131,6 +132,7 @@ limitations under the License. -->
           const params = (await useExpressionsQueryProcessor(e)) || {};
           loading.value = false;
           state.source = params.source || {};
+          typesOfMQE.value = params.typesOfMQE;
           return;
         }
         const params = await useQueryProcessor({ ...props.data });
@@ -259,6 +261,7 @@ limitations under the License. -->
         t,
         graph,
         widget,
+        typesOfMQE,
         clickHandle,
       };
     },

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;

src/views/dashboard/panel/Tool.vue

@@ -363,8 +363,6 @@ limitations under the License. -->
   async function changePods(pod: Option[]) {
     selectorStore.setCurrentPod(pod[0] || null);
     if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
-      selectorStore.setCurrentProcess(null);
-      states.currentProcess = "";
       fetchProcess(true);
     }
   }
@@ -594,6 +592,9 @@ limitations under the License. -->
       if (currentProcess) {
         selectorStore.setCurrentProcess(currentProcess);
         states.currentProcess = currentProcess.label;
+      } else {
+        selectorStore.setCurrentProcess(null);
+        states.currentProcess = "";
       }
     }
     return resp;