From 9e21364a655afc2083ab9db6f08207af7bb8cdc6 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Fri, 1 Apr 2022 11:03:12 +0800
Subject: [PATCH] add label

---
 .../configuration/widget/metric/Standard.vue  | 15 +++++++++----
 src/views/dashboard/graphs/ServiceList.vue    | 21 ++++++++++++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 47a3fbf6..16204121 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -26,7 +26,7 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
+    <div class="item mb-10" v-if="hasLabel">
       <span class="label">{{ t("labels") }}</span>
       <el-input
         class="input"
@@ -40,7 +40,7 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
+    <div class="item mb-10" v-if="metricType === 'readLabeledMetricsValues'">
       <span class="label">{{ t("labelsIndex") }}</span>
       <el-input
         class="input"
@@ -95,6 +95,7 @@ import { useI18n } from "vue-i18n";
 import { SortOrder, CalculationOpts } from "../../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { MetricConfigOpt } from "@/types/dashboard";
+import { ListChartTypes } from "../../../data";
 
 /*global defineEmits, defineProps */
 const props = defineProps({
@@ -113,6 +114,13 @@ const currentMetric = ref<MetricConfigOpt>({
 });
 const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
 const metricType = ref<string>(metricTypes[props.index]);
+const hasLabel = computed(() => {
+  const graph = dashboardStore.selectedGrid.graph || {};
+  return (
+    ListChartTypes.includes(graph.type) ||
+    metricType.value === "readLabeledMetricsValues"
+  );
+});
 const isTopn = computed(() =>
   ["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
 );
@@ -121,7 +129,7 @@ function updateConfig(index: number, param: { [key: string]: string }) {
   if (!key) {
     return;
   }
-  changeConfigs(index, { key: decodeURIComponent(param[key]) });
+  changeConfigs(index, { [key]: decodeURIComponent(param[key]) });
 }
 function changeConfigs(
   index: number,
@@ -130,7 +138,6 @@ function changeConfigs(
   const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
 
   metricConfig[index] = { ...metricConfig[index], ...param };
-  currentMetric.value = metricConfig[index];
   dashboardStore.selectWidget({
     ...dashboardStore.selectedGrid,
     metricConfig,
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 8147ef0e..00f6fd68 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -56,7 +56,9 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in colMetrics"
-          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+          :label="`${decodeURIComponent(
+            getLabel(metric, index)
+          )} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -276,15 +278,24 @@ function searchList() {
 }
 function getUnit(index: number) {
   const u =
-    (props.config.metricConfig &&
-      props.config.metricConfig[index] &&
-      props.config.metricConfig[index].unit) ||
-    "";
+    props.config.metricConfig &&
+    props.config.metricConfig[index] &&
+    props.config.metricConfig[index].unit;
   if (u) {
     return `(${encodeURIComponent(u)})`;
   }
   return encodeURIComponent("");
 }
+function getLabel(metric: string, index: number) {
+  const label =
+    props.config.metricConfig &&
+    props.config.metricConfig[index] &&
+    props.config.metricConfig[index].label;
+  if (label) {
+    return encodeURIComponent(label);
+  }
+  return encodeURIComponent(metric);
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {