fix： 优化 metrics 的数据 不再频繁调用接口

nezha-fronted/src/components/charts/logs.vue

@@ -483,7 +483,6 @@ export default {
             })
           }
         }).catch(e => {
-          console.log(e)
           this.isError = true
           this.errorContent = this.$t('terminallog.statusItem.unknownError')
           // this.$message.error(this.$t('terminallog.statusItem.unknownError'))

nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue

@@ -99,7 +99,7 @@ export default {
             disabled: false
           }, {
             id: 17,
-            name: this.$t('config.terminallog.status'),
+            name: this.$t('config.terminallog.stat us'),
             type: 'terminalStatus',
             label: 'state',
             readonly: true,

nezha-fronted/src/components/common/mixin/promqlInput.js

@@ -0,0 +1,81 @@
+export default {
+  data () {
+    return {
+      metricOptions: [],
+      showTemp: true
+    }
+  },
+  methods: {
+    queryMetrics () {
+      this.metricOptions = []
+      const metricsList = []
+      this.$get('prom/api/v1/label/__name__/values').then(response => {
+        if (response.status == 'success') {
+          const metrics = response.data.sort()
+          const metricMap = new Map()
+          metrics.forEach((item) => {
+            let key = ''
+            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+              key = item.split('_')[0]
+            } else if (/^_\w*/.test(item)) {
+              key = '      '
+            } else {
+              key = item
+            }
+            if (metricMap.get(key)) {
+              const values = metricMap.get(key)
+              values.push({ label: item, value: item })
+            } else {
+              const values = [{ label: item, value: item }]
+              metricMap.set(key, values)
+            }
+            // this.metricStore.push({label:item,value:item,insertText:item})
+          })
+          for (const key of metricMap.keys()) {
+            const option = {
+              label: key,
+              value: key
+            }
+            if (metricMap.get(key) && metricMap.get(key).length > 1) {
+              option.children = []
+              this.metricOptions.push({ ...option })
+              option.children = metricMap.get(key)
+              metricsList.push(option)
+            } else {
+              this.metricOptions.push(option)
+              metricsList.push(option)
+            }
+          }
+          this.$store.commit('setMetricsList', metricsList)
+          if (this.showTemp) {
+            this.getExprTemp()
+          }
+        }
+      })
+    },
+    getExprTemp () {
+      this.$get('/expression/tmpl/gname').then(res => {
+        this.loading = false
+        if (res.code === 200) {
+          res.data.list.forEach(item => {
+            this.metricOptions.unshift({
+              label: item,
+              value: item,
+              children: [],
+              temp: true,
+              child: false
+            })
+          })
+        }
+      })
+    }
+  },
+  watch: {
+  },
+  created () {
+    this.queryMetrics()
+  },
+  beforeDestroy () {
+    this.$store.commit('setMetricsList', [])
+  }
+}

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -60,13 +60,13 @@
               <el-row v-for="(item,index) in selection.pen.data.expressArr" :key="index" class="element-item form-row-item"
                       style="">
                 <promql-input
+                  :from-father-data="true"
+                  :metricOptionsParent="metricOptions"
                   :id="index"
                   :key="index"
                   :ref="'promql-'+'-1'"
                   :expression-list="selection.pen.data.expressArr"
-                  :from-father-data="true"
                   :index="index"
-                  :metricOptionsParent="metricOptions"
                   :plugins="['metric-selector', 'metric-input', 'remove']"
                   :showRemove="false"
                   :styleType="2"
@@ -234,13 +234,13 @@
                       class="element-item form-row-item"
                       style="width: 100%; border: 1px dashed rgba(0,0,0,0.15); border-radius: 2px; padding-right: 60px;">
                 <promql-input
+                  :from-father-data="true"
+                  :metricOptionsParent="metricOptions"
                   :id="index"
                   :key="index"
                   :ref="'promql-'+index"
                   :expression-list="selection.pen.data.expressAllArr"
-                  :from-father-data="true"
                   :index="index"
-                  :metricOptionsParent="metricOptions"
                   :plugins="['metric-selector', 'metric-input', 'remove']"
                   :showRemove="false"
                   :styleType="2"
@@ -1114,6 +1114,7 @@ import { getTopology, resetZIndex } from '../../js/common'
 import chartDataFormat from '../../../charts/chartDataFormat'
 import promqlInput from '../../../page/dashboard/explore/promqlInput'
 import nezhaColor from '../../nezhaColor'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
 
 const rz = {
   methods: {
@@ -1403,7 +1404,7 @@ export default {
       ]
     }
   },
-  mixins: [rz],
+  mixins: [rz, promqlInputMixin],
   components: {
     promqlInput,
     nezhaColor
@@ -1506,43 +1507,6 @@ export default {
     }
   },
   methods: {
-    queryMetrics () {
-      this.metricOptions = []
-      this.$get('prom/api/v1/label/__name__/values').then(response => {
-        if (response.status == 'success') {
-          const metrics = response.data.sort()
-          const metricMap = new Map()
-          metrics.forEach((item) => {
-            let key = ''
-            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
-              key = item.split('_')[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
-            } else {
-              key = item
-            }
-            if (metricMap.get(key)) {
-              const values = metricMap.get(key)
-              values.push({ label: item, value: item })
-            } else {
-              const values = [{ label: item, value: item }]
-              metricMap.set(key, values)
-            }
-            // this.metricStore.push({label:item,value:item,insertText:item})
-          })
-          for (const key of metricMap.keys()) {
-            const option = {
-              label: key,
-              value: key
-            }
-            if (metricMap.get(key) && metricMap.get(key).length > 1) {
-              option.children = metricMap.get(key)
-            }
-            this.metricOptions.push(option)
-          }
-        }
-      })
-    },
     tabClick (n) {
     },
     moduleIdChange (n) {
@@ -1778,9 +1742,6 @@ export default {
       const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
       this.$emit('del', delObj)
     },
-    getMetricOptions () {
-      return this.metricOptions
-    },
     addExpression () {
       this.selection.pen.data.expressAllArr.push('')
       this.selection.pen.data.legendsAll.push('')

nezha-fronted/src/components/common/rightBox/alertRuleBox.vue

@@ -50,6 +50,8 @@
               <template v-if="showMetrics">
                 <el-row style="line-height: 32px;">
                   <promql-input
+                    :from-father-data="true"
+                    :metricOptionsParent="metricOptions"
                     id="alert-box-input-promql"
                     ref="promql"
                     :expression-list.sync="expressions"
@@ -345,6 +347,7 @@ import promqlInput from '../../page/dashboard/explore/promqlInput'
 import { nzNumber } from '../js/validate'
 import editRigthBox from '../mixin/editRigthBox'
 import richTextEditor from '@/components/charts/richTextEditor'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
 export default {
   name: 'alertRuleBox',
   props: {
@@ -354,7 +357,7 @@ export default {
     'promql-input': promqlInput,
     richTextEditor
   },
-  mixins: [editRigthBox],
+  mixins: [editRigthBox, promqlInputMixin],
   data () {
     const nzOid = (rule, value, callback) => {
       if (this.editAlertRule.type === 3) {

nezha-fronted/src/components/common/rightBox/exprTmplBox.vue

@@ -31,6 +31,8 @@
           <el-form-item :label="$t('config.exprTemp.expression')" prop="expression">
             <el-row style="line-height: 32px;">
               <promql-input
+                :from-father-data="true"
+                :metricOptionsParent="metricOptions"
                 :id="'promqlKeys0'"
                 :key="'promqlKeys0'"
                 :expression-list="editExprTemp.expression"
@@ -75,6 +77,7 @@
 import promqlInput from '../../page/dashboard/explore/promqlInput'
 import editRigthBox from '../mixin/editRigthBox'
 import { checkExpressionAge } from '@/components/common/js/validate'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
 
 export default {
   name: 'exprTempBox',
@@ -84,7 +87,7 @@ export default {
   props: {
     exprTemp: Object
   },
-  mixins: [editRigthBox],
+  mixins: [editRigthBox, promqlInputMixin],
   watch: {
     exprTemp: {
       deep: true,
@@ -107,6 +110,7 @@ export default {
         remark: ''
       },
       gnameList: [],
+      showTemp: false,
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' },

nezha-fronted/src/components/common/searchInput.vue

@@ -1174,7 +1174,6 @@ export default {
     },
     // 删除要搜索的条件
     close_selcet_list (ind, e) {
-      console.log(this.searchMsg.searchLabelList,this.searchLabelList)
       if (e) {
         this.stop_click(e)
       }

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -379,6 +379,8 @@
           <div style="margin-bottom: 20px">
             <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group' && editChart.type != 'diagram'">
               <promql-input
+                :from-father-data="true"
+                :metricOptionsParent="metricOptions"
                 :expression-list="expressions"
                 :id="promqlKeys[index-1]"
                 :index="index-1"
@@ -536,6 +538,7 @@ import i18n from '../../common/i18n'
 import { fromRoute } from '@/components/common/js/constants'
 import diagram from '@/components/common/ChartDiagram/diagram'
 import editRigthBox from '../../common/mixin/editRigthBox'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
 const rz = {
   methods: {
     rz (e) {
@@ -556,7 +559,7 @@ export default {
       default: false
     }
   },
-  mixins: [rz, editRigthBox],
+  mixins: [rz, editRigthBox, promqlInputMixin],
   data () {
     return {
       fromRoute,
@@ -683,7 +686,6 @@ export default {
       unitOptions: chartDataFormat.unitOptions(),
       sortedOptionKeys: [{ key: 'min', label: 'Min' }, { key: 'max', label: 'Max' }, { key: 'avg', label: 'Avg' }, { key: 'last', label: 'Last' }, { key: 'total', label: 'Total' }],
       textShow: false,
-      metricOptions: [],
       showPicker: [],
       varTypeArr: [
         { name: 'Asset', id: 1 },
@@ -1759,46 +1761,6 @@ export default {
     delMapping: function (index) {
       this.editChart.param.valueMapping.mapping.splice(index, 1)
     },
-    queryMetrics () {
-      this.metricOptions = []
-      this.$get('prom/api/v1/label/__name__/values').then(response => {
-        if (response.status == 'success') {
-          const metrics = response.data.sort()
-          const metricMap = new Map()
-          metrics.forEach((item) => {
-            let key = ''
-            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
-              key = item.split('_')[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
-            } else {
-              key = item
-            }
-            if (metricMap.get(key)) {
-              const values = metricMap.get(key)
-              values.push({ label: item, value: item })
-            } else {
-              const values = [{ label: item, value: item }]
-              metricMap.set(key, values)
-            }
-            // this.metricStore.push({label:item,value:item,insertText:item})
-          })
-          for (const key of metricMap.keys()) {
-            const option = {
-              label: key,
-              value: key
-            }
-            if (metricMap.get(key) && metricMap.get(key).length > 1) {
-              option.children = metricMap.get(key)
-            }
-            this.metricOptions.push(option)
-          }
-        }
-      })
-    },
-    getMetricOptions () {
-      return this.metricOptions
-    },
     topologyDialogChange (flag, data) {
       this.topologyDialog = flag
       if (data) {
@@ -1808,7 +1770,6 @@ export default {
   },
   created () {
     this.getSuggestMetric()
-    this.queryMetrics()
   },
   watch: {
     chart: {

nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue

@@ -46,6 +46,8 @@
         <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
           <template v-if="showMetrics">
             <promql-input
+              :from-father-data="true"
+              :metricOptionsParent="metricOptions"
               v-for="index of promqlKeys.length"
               :id="promqlKeys[index-1]"
               :key="promqlKeys[index-1]"
@@ -296,6 +298,7 @@ import chartBox from '../../../page/dashboard/chartBox'
 import { getUUID } from '../../../common/js/common'
 import chartDataFormat from '../../../charts/chartDataFormat'
 import logTab from './logTab'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
 
 export default {
   name: 'exploreItem',
@@ -309,6 +312,7 @@ export default {
     tabIndex: Number,
     closable: Boolean
   },
+  mixins: [promqlInputMixin],
   data () {
     return {
       chartLoading: false,
@@ -366,7 +370,6 @@ export default {
       chartUnit: 0,
       historyParam: { useHistory: true, key: 'expore-history' },
       chart: {},
-      metricOptions: [],
       collapseValue: ['1', '2'],
       showTab: ['1', '2'],
       logData: []
@@ -374,7 +377,6 @@ export default {
   },
   created () {
     this.getPanelData()
-    this.queryMetrics()
     this.promqlKeys.push(getUUID())
     this.selectMetricsLogs()
   },
@@ -944,48 +946,7 @@ export default {
         }
       })
     },
-    queryMetrics () {
-      this.metricOptions = []
-      this.$get('prom/api/v1/label/__name__/values').then(response => {
-        if (response.status == 'success') {
-          const metrics = response.data.sort()
-          const metricMap = new Map()
-          metrics.forEach((item) => {
-            let key = ''
-            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
-              key = item.split('_')[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
-            } else {
-              key = item
-            }
-            if (metricMap.get(key)) {
-              const values = metricMap.get(key)
-              values.push({ label: item, value: item })
-            } else {
-              const values = [{ label: item, value: item }]
-              metricMap.set(key, values)
-            }
-            // this.metricStore.push({label:item,value:item,insertText:item})
-          })
-          for (const key of metricMap.keys()) {
-            const option = {
-              label: key,
-              value: key
-            }
-            if (metricMap.get(key) && metricMap.get(key).length > 1) {
-              option.children = metricMap.get(key)
-            }
-            this.metricOptions.push(option)
-          }
-        }
-      })
-    },
-    getMetricOptions () {
-      return this.metricOptions
-    },
     logsCollapseChange (activeNames, a, b) {
-      console.log(activeNames, a, b)
       this.$nextTick(() => {
         if (this.$refs.exploreChart) {
           this.$refs.exploreChart.resize()

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -13,9 +13,10 @@
                                v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew" style="margin-top: 5px">
 
               <template slot-scope="{ node, data }">
-                <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
+                <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'',data.more?'cascader-panel-more':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
                   <i class="nz-icon nz-icon-template2"></i>
                   {{data.label}}
+                  <i v-if="data.more" class="nz-icon nz-icon-arrow-down"></i>
                 </div>
               </template>
             </el-cascader-panel>
@@ -23,7 +24,7 @@
                                v-model="cascaderValue" v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading"
                                :loading="loading" :props="cascaderProps" @change="logLabelChange">
               <template slot-scope="{ node, data }">
-<div :title="data.label" class="nz-cascade">
+                <div :title="data.label" class="nz-cascade">
                   {{data.label}}
                 </div>
               </template>
@@ -62,9 +63,10 @@
                                    v-if="type !== 'log'"  :props="{emitPath:false}" :options="metricOptions" @change="metricChangeNew">
 
                   <template slot-scope="{ node, data }">
-                    <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
+                    <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'',data.more?'cascader-panel-more':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
                       <i class="nz-icon nz-icon-template2"></i>
                       {{data.label}}
+                      <i v-if="data.more" class="nz-icon nz-icon-arrow-down"></i>
                     </div>
                   </template>
 
@@ -269,7 +271,7 @@ export default {
     }
   },
   mounted () {
-    if (!this.fromFatherData) {
+    if (!this.fromFatherData && this.type !== 'logs') {
       this.queryMetrics()
     }
   },
@@ -442,6 +444,42 @@ export default {
             }
           })
         }
+      } else if (data.children && !data.children.length && this.type !== 'log') {
+        this.metricOptions.forEach(item => {
+          if (!item.temp && item.children && item.value != data.value) {
+            item.children = []
+          }
+        })
+        setTimeout(() => {
+          new Promise(resolve => {
+            const children = this.$store.state.metricsList.find(item => item.value === data.value).children
+            resolve(children)
+          }).then((children) => {
+            const childrenCopy = JSON.parse(JSON.stringify(children))
+            this.metricOptions.find(item => item.label === data.label).children = childrenCopy
+            // if (childrenCopy.length > 100) {
+            //   childrenCopy.splice(100, children.length)
+            //   childrenCopy.push({
+            //     label: 'More',
+            //     value: false,
+            //     parent: data.label,
+            //     more: true
+            //   })
+            //   this.metricOptions.find(item => item.label === data.label).children = childrenCopy
+            // } else {
+            //   this.metricOptions.find(item => item.label === data.label).children = childrenCopy
+            // }
+          })
+        })
+      } else if (data.more) {
+        setTimeout(() => {
+          new Promise(resolve => {
+            const children = this.$store.state.metricsList.find(item => item.label === data.parent).children
+            resolve(children)
+          }).then((children) => {
+            this.metricOptions.find(item => item.label === data.parent).children = children
+          })
+        })
       }
     },
     tempBoxShowChange (flag) {
@@ -604,6 +642,15 @@ export default {
           this.cascaderValue = ''
         }
       }
+    },
+    metricOptionsParent: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        if (n) {
+          this.metricOptions = JSON.parse(JSON.stringify(n))
+        }
+      }
     }
   }
 }
@@ -740,6 +787,9 @@ export default {
 
     /*background: #F8F9FB;*/
   }
+  .cascader-panel-more {
+    text-align: center;
+  }
   .temp-form-box{
     width: 480px;
   }

nezha-fronted/src/store/index.js

@@ -34,7 +34,8 @@ const store = new Vuex.Store({
     dcDataRefresh: false,
     showTopoScreen: false,
     logo: '',
-    isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true'
+    isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
+    metricsList: []
   },
   getters: {
     getLinkData (state) {
@@ -66,7 +67,10 @@ const store = new Vuex.Store({
     },
     getIsShrink (state) {
       return state.isShrink
-    }
+    },
+    getMetricsList (state) {
+      return state.metricsList
+    },
   },
   mutations: {
     /* 监听对象变化，用于顶部菜单与底部内容的同步 */
@@ -146,6 +150,9 @@ const store = new Vuex.Store({
     isShrink (state) {
       state.isShrink = !state.isShrink
       localStorage.setItem('nz-left-menu-shrink', state.isShrink)
+    },
+    setMetricsList (state, metricsList) {
+      state.metricsList = [...metricsList]
     }
   },
   actions: {