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

2021-09-28 16:54:07 +08:00
parent 8388a0593f
commit cd72fad4b7
11 changed files with 168 additions and 142 deletions
--- a/nezha-fronted/src/components/charts/logs.vue
+++ b/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'))
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue
+++ b/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,
--- a/nezha-fronted/src/components/common/mixin/promqlInput.js
+++ b/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', [])
+  }
+}
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/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('')
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
+++ b/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' },
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/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)
      }
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/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: {
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/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()
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/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;
  }
--- a/nezha-fronted/src/store/index.js
+++ b/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: {