feat: enhance metric labels (#382)

src/views/dashboard/configuration/widget/graph-styles/Table.vue

@@ -22,16 +22,6 @@ limitations under the License. -->
       @change="updateConfig({ showTableValues })"
     />
   </div>
-  <div class="item">
-    <span class="label">{{ t("tableHeaderCol1") }}</span>
-    <el-input
-      class="input"
-      v-model="tableHeaderCol1"
-      size="small"
-      placeholder="none"
-      @change="updateConfig({ tableHeaderCol1 })"
-    />
-  </div>
   <div class="item">
     <span class="label">{{ t("tableHeaderCol2") }}</span>
     <el-input
@@ -52,7 +42,6 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const graph = dashboardStore.selectedGrid.graph || {};
   const showTableValues = ref(graph.showTableValues);
-  const tableHeaderCol1 = ref(graph.tableHeaderCol1);
   const tableHeaderCol2 = ref(graph.tableHeaderCol2);
 
   function updateConfig(param: { [key: string]: unknown }) {

src/views/dashboard/data.ts

@@ -93,7 +93,6 @@ export const DefaultGraphConfig: { [key: string]: any } = {
   Table: {
     type: "Table",
     showTableValues: true,
-    tableHeaderCol1: "",
     tableHeaderCol2: "",
   },
   TopList: {

src/views/dashboard/graphs/Table.vue

@@ -16,17 +16,33 @@ limitations under the License. -->
 <template>
   <div class="chart-table">
     <div class="row header flex-h">
-      <div class="name" :style="`width: ${nameWidth}`">
-        {{ config.tableHeaderCol1 || t("name") }}
+      <div
+        v-for="key in dataKeys[0]"
+        :key="key"
+        class="name"
+        :style="`width: ${dataKeys[0].length > 1 ? (nameWidth as number) / (dataKeys[0].length || 1) : nameWidth}%`"
+      >
+        {{ key.split("=")[0] || 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: ${keys.length > 1 ? (nameWidth as number) / (keys.length || 1) : nameWidth}%`"
+        :key="k"
+        >{{ k.split("=")[1] }}</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 +51,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: {
@@ -45,24 +62,30 @@ limitations under the License. -->
       type: Object as PropType<{
         showTableValues: boolean;
         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 +117,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;
       }