From c10420d16192a274817b8226cf7903ff55b6bedd Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Fri, 1 Apr 2022 11:14:51 +0800
Subject: [PATCH] fix metrics

---
 src/views/dashboard/configuration/Widget.vue  | 16 +------------
 .../configuration/widget/metric/Index.vue     |  4 +---
 src/views/dashboard/graphs/EndpointList.vue   | 23 +++++++++++++------
 src/views/dashboard/graphs/InstanceList.vue   | 22 ++++++++++++++----
 4 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index ad7c7344..9e804297 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -37,8 +37,6 @@ limitations under the License. -->
             metricTypes: dashboardStore.selectedGrid.metricTypes,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
           }"
-          :isEdit="isEdit"
-          @changeOpt="setStatus"
         />
         <div v-show="!graph.type" class="no-data">
           {{ t("noData") }}
@@ -51,11 +49,7 @@ limitations under the License. -->
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
         <el-collapse-item :title="t('selectVisualization')" name="1">
-          <MetricOptions
-            @update="getSource"
-            @changeOpt="setStatus"
-            @loading="setLoading"
-          />
+          <MetricOptions @update="getSource" @loading="setLoading" />
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="2">
           <component :is="`${graph.type}Config`" />
@@ -100,7 +94,6 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
     const loading = ref<boolean>(false);
-    const isEdit = ref<boolean>(false);
     const states = reactive<{
       activeNames: string;
       source: unknown;
@@ -128,14 +121,9 @@ export default defineComponent({
 
     function applyConfig() {
       dashboardStore.setConfigPanel(false);
-      setStatus();
       dashboardStore.setConfigs(dashboardStore.selectedGrid);
     }
 
-    function setStatus() {
-      isEdit.value = true;
-    }
-
     function cancelConfig() {
       dashboardStore.selectWidget(originConfig);
       dashboardStore.setConfigPanel(false);
@@ -152,8 +140,6 @@ export default defineComponent({
       cancelConfig,
       getSource,
       setLoading,
-      setStatus,
-      isEdit,
       widget,
       graph,
       title,
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index 6c156efb..14cb8363 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -120,7 +120,7 @@ import Standard from "./Standard.vue";
 
 /*global defineEmits */
 const { t } = useI18n();
-const emit = defineEmits(["update", "loading", "changeOpt"]);
+const emit = defineEmits(["update", "loading"]);
 const dashboardStore = useDashboardStore();
 const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
 const graph = computed(() => dashboardStore.selectedGrid.graph || {});
@@ -308,7 +308,6 @@ function changeMetrics(
     ...{ metricTypes: states.metricTypes, metrics: states.metrics },
   });
   if (states.isList) {
-    emit("changeOpt");
     return;
   }
   queryMetrics();
@@ -339,7 +338,6 @@ function changeMetricType(index: number, opt: Option[] | any) {
     ...{ metricTypes: states.metricTypes },
   });
   if (states.isList) {
-    emit("changeOpt");
     return;
   }
   queryMetrics();
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 41bba2c3..52924694 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -44,7 +44,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">
@@ -110,7 +112,6 @@ const props = defineProps({
     }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  isEdit: { type: Boolean, default: false },
 });
 // const emit = defineEmits(["changeOpt"]);
 const selectorStore = useSelectorStore();
@@ -183,20 +184,28 @@ async 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],
   async () => {
     queryEndpointMetrics(endpoints.value);
-    // emit("changeOpt", false);
   }
 );
 watch(
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index b0291fbd..ee52ffb5 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -44,7 +44,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">
@@ -234,16 +236,26 @@ 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],
   () => {