From 3b3df49722f4fc443af73bbb729e5efa45297837 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 11 Apr 2024 15:21:03 +0800
Subject: [PATCH] fix: metrics

---
 src/views/dashboard/Widget.vue                           | 2 +-
 .../dashboard/configuration/widget/metric/Index.vue      | 9 +++++----
 .../dashboard/configuration/widget/metric/Standard.vue   | 6 +-----
 src/views/dashboard/controls/Widget.vue                  | 2 +-
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 902ed18a..6a87e97e 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -183,7 +183,7 @@ limitations under the License. -->
     height: 25px;
     line-height: 25px;
     text-align: center;
-    background-color: aliceblue;
+    background-color: var(--sw-config-header);
     font-size: $font-size-smaller;
     position: relative;
   }
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index 7f00dc9c..44cfc4aa 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -25,9 +25,9 @@ limitations under the License. -->
       :clearable="true"
     />
   </div>
-  <div>{{ t("metrics") }}</div>
   <div class="flex-h">
-    <div class="ml-5 link">
+    <div>{{ t("metrics") }}</div>
+    <div class="link">
       <a target="_blank" href="https://skywalking.apache.org/docs/main/next/en/api/metrics-query-expression/">
         <Icon iconName="info_outline" size="middle" />
       </a>
@@ -289,8 +289,7 @@ limitations under the License. -->
       states.metrics = [""];
       states.metricTypes = [""];
       states.tips = [""];
-      let v = {};
-      v = { typesOfMQE: states.metricTypes, expressions: states.metrics };
+      let v: any = { typesOfMQE: states.metricTypes, expressions: states.metrics };
       if (states.isList) {
         states.subMetrics = [""];
         states.subMetricTypes = [""];
@@ -331,6 +330,7 @@ limitations under the License. -->
       ...p,
       metricConfig,
     });
+    queryMetrics();
   }
 
   function setMetricConfig(index: number) {
@@ -434,5 +434,6 @@ limitations under the License. -->
   .link {
     cursor: pointer;
     color: $active-color;
+    padding-left: 2px;
   }
 </style>
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 8068f2cb..6b8de5b6 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -28,7 +28,7 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10" v-if="hasLabel">
+    <div class="item mb-10">
       <span class="label">{{ t("labels") }}</span>
       <el-input
         class="input"
@@ -104,10 +104,6 @@ limitations under the License. -->
     topN: props.currentMetricConfig.topN || 10,
   });
   const metricTypes = computed(() => dashboardStore.selectedGrid.typesOfMQE || []);
-  const hasLabel = computed(() => {
-    const graph = dashboardStore.selectedGrid.graph || {};
-    return ListChartTypes.includes(graph.type);
-  });
   const isList = computed(() => {
     const graph = dashboardStore.selectedGrid.graph || {};
     return ListChartTypes.includes(graph.type);
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 9265b9c8..49078a07 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -160,7 +160,7 @@ limitations under the License. -->
         dashboardStore.selectWidget(props.data);
       }
       watch(
-        () => [props.data.metricTypes, props.data.metrics, props.data.expressions],
+        () => props.data.expressions,
         () => {
           if (!dashboardStore.selectedGrid) {
             return;