From f8a16501df2ef64b5713256c3cd145531ed31070 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 10 Apr 2024 13:40:26 +0800
Subject: [PATCH] feat: update

---
 src/hooks/useExpressionsProcessor.ts | 11 +++-------
 src/views/dashboard/graphs/Table.vue | 31 +++++++++++++++++++++-------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 90f40e00..408dd724 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -117,16 +117,11 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
             const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value;
             source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
           } else {
-            const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
             for (const item of results) {
               const values = item.values.map((d: { value: unknown }) => d.value) || [];
-              const index = item.metric.labels[0].value;
-              const indexNum = labels.findIndex((_, i: number) => i === Number(index));
-              if (labels[indexNum] && indexNum > -1) {
-                source[labels[indexNum]] = values;
-              } else {
-                source[index] = values;
-              }
+              const label = item.metric.labels.map((d: any) => `${d.key}=${d.value}`).join(",");
+
+              source[label] = values;
             }
           }
         }
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index 2dbae271..1ef07560 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -16,17 +16,22 @@ limitations under the License. -->
 <template>
   <div class="chart-table">
     <div class="row header flex-h">
-      <div class="name" :style="`width: ${nameWidth}`">
+      <div class="name" :style="`width: ${nameWidth}%`">
         {{ config.tableHeaderCol1 || t("name") }}
       </div>
       <div class="value-col" v-if="config.showTableValues">
         {{ config.tableHeaderCol2 || t("value") }}
       </div>
     </div>
-    <div class="row flex-h" v-for="key in dataKeys" :key="key">
-      <div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
+    <div class="row flex-h" v-for="(keys, index) in dataKeys" :key="index">
+      <div v-for="k in keys" class="name" :style="`width: ${(nameWidth as number) / 2}%`" :key="k">{{ k }}</div>
       <div class="value-col" v-if="config.showTableValues">
-        {{ config.metricTypes[0] === "readMetricsValue" ? data[key] : data[key][data[key].length - 1 || 0] }}
+        {{
+          (config.metricTypes && config.metricTypes[0] === "readMetricsValue") ||
+          (props.config.typesOfMQE && props.config.typesOfMQE[0] === ExpressionResultType.SINGLE_VALUE)
+            ? data[keys[0]]
+            : data[(keys as string[]).join(",")][data[(keys as string[]).join(",")].length - 1 || 0]
+        }}
       </div>
     </div>
   </div>
@@ -35,6 +40,7 @@ limitations under the License. -->
   import { computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
+  import { ExpressionResultType } from "@/views/dashboard/data";
   /*global defineProps */
   const props = defineProps({
     data: {
@@ -47,22 +53,29 @@ limitations under the License. -->
         tableHeaderCol2: string;
         tableHeaderCol1: string;
         metricTypes: string[];
+        typesOfMQE: string[];
       }>,
       default: () => ({ showTableValues: true }),
     },
   });
 
   const { t } = useI18n();
-  const nameWidth = computed(() => (props.config.showTableValues ? "80%" : "100%"));
+  const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
   const dataKeys = computed(() => {
-    if (props.config.metricTypes[0] === "readMetricsValue") {
+    if (props.config.metricTypes && props.config.metricTypes[0] === "readMetricsValue") {
+      const keys = Object.keys(props.data || {});
+      return keys;
+    }
+    if (props.config.typesOfMQE && props.config.typesOfMQE[0] === ExpressionResultType.SINGLE_VALUE) {
       const keys = Object.keys(props.data || {});
       return keys;
     }
     const keys = Object.keys(props.data || {}).filter(
       (i: string) => Array.isArray(props.data[i]) && props.data[i].length,
     );
-    return keys;
+    const list = keys.map((d: string) => d.split(","));
+
+    return list;
   });
 </script>
 <style lang="scss" scoped>
@@ -94,6 +107,10 @@ limitations under the License. -->
         border-bottom: 1px solid $disabled-color;
       }
 
+      div:first-child {
+        border-bottom: 1px solid $disabled-color;
+      }
+
       div:nth-last-child(2) {
         border-bottom: 1px solid $disabled-color;
       }