From d262a18b86c4083c68614fdd5a48b48b2732b5c7 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 28 Apr 2021 19:26:49 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E8=8A=82=E7=82=B9=20=E9=A2=91=E7=B9=81=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E6=8E=A5=E5=8F=A3=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/L5/CanvasProps.vue         |  3 ++-
 .../page/dashboard/explore/promqlInput.vue    | 23 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 4575750b9..c72146259 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -54,6 +54,7 @@
               :styleType="2"
               :metricOptionsParent="metricOptions"
               @change="expressionChange"
+              :from-father-data="true"
               @removeExpression="removeExpression"
             ></promql-input>
             <el-row>
@@ -1128,7 +1129,7 @@ export default {
     })
   },
   mounted () {
-    this.queryMetrics()
+    // this.queryMetrics()
     // this.topologyData.data.grid= !!dataOption.grid;
     // this.topologyData.data.rule= !!dataOption.rule;
     // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 2ed72a03a..199e58ebd 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -10,7 +10,7 @@
               <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric
                 &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button>
               <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
-                                 slot="dropdown" ref="metricSelector" :props="{emitPath:false,}"
+                                 slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading"
                                  :options="metricOptions" @change="metricChange">
 
                 <template slot-scope="{ node, data }">
@@ -178,6 +178,10 @@ export default {
     typeContentLoading: {
       type: Boolean,
       default: false
+    },
+    fromFatherData: {
+      type: Boolean,
+      default: false
     }
     // metricOptions: {type: Array},
     // metricStore: {type: Array}
@@ -204,11 +208,14 @@ export default {
       datacenterOption: [],
       projectOption: [],
       filterSilence: '',
-      tempBoxId: {}
+      tempBoxId: {},
+      loading: false
     }
   },
-  created () {
-    this.queryMetrics()
+  mounted () {
+    if (!this.fromFatherData) {
+      this.queryMetrics()
+    }
   },
   methods: {
     closeDropdown () {
@@ -229,8 +236,15 @@ export default {
     },
     toggleDropdown () {
       this.dropDownVisible = !this.dropDownVisible
+      this.getMetricOptions()
+    },
+    getMetricOptions () {
+      if (!this.metricOptions.length) {
+        this.queryMetrics()
+      }
     },
     queryMetrics: function () {
+      this.loading = true
       this.$get('prom/api/v1/label/__name__/values').then(response => {
         if (response.status == 'success') {
           const metrics = response.data.sort()
@@ -300,6 +314,7 @@ export default {
     },
     getExprTemp () {
       this.$get('/expression/tmpl/gname').then(res => {
+        this.loading = false
         if (res.code === 200) {
           res.data.list.forEach(item => {
             this.metricOptions.unshift({