NEZ-1989 fix：优化加载顺序的相关问题以及 chart legend 展示的问题

2022-07-04 14:46:46 +08:00
parent b20eae8a47
commit 47ac8fa815
4 changed files with 91 additions and 20 deletions
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -193,8 +193,8 @@ export default {
      })
      const timeSorted = this.$loadsh.sortBy(datas, function (o) { return o[0] })
      const valueSorted = datas.sort((a, b) => {
-        const a1 = isNaN(a[1]) && !a[1] ? 0 : Number(a[1])
-        const b1 = isNaN(b[1]) && !b[1] ? 0 : Number(b[1])
+        const a1 = isNaN(a[1]) || !a[1] ? 0 : Number(a[1])
+        const b1 = isNaN(b[1]) || !b[1] ? 0 : Number(b[1])
        return a1 - b1
      })
      minTime = timeSorted.length ? timeSorted[0][0] : ''
@@ -208,6 +208,11 @@ export default {
      } else {
        maxValue = 0
      }
+      if (!isNaN(minValue)) {
+        minValue = Number(minValue)
+      } else {
+        minValue = 0
+      }
      if (maxValue < 0) {
        maxValue = Math.abs(maxValue)
      }
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -110,7 +110,7 @@ export default {
      allDataLength: 0,
      severityData: this.$store.getters.severityData, // 告警级别的数据
      severityDataWeight: this.$store.getters.severityDataWeight,
-      myVariables: []
+      myVariables: [] // 添加当前使用的变量 用于判断是否需要重新加载
      // isExportData: false
    }
  },
@@ -172,6 +172,17 @@ export default {
      const step = bus.getStep(startTime, endTime)
      startTime = this.$stringTimeParseToUnix(startTime)
      endTime = this.$stringTimeParseToUnix(endTime)
+      if (!this.chartInfo.oldElements) {
+        this.chartInfo.oldElements = this.chartInfo.elements || []
+      }
+      this.chartInfo.elements = this.chartInfo.oldElements.map(item => {
+        const variables = this.variablesReplace(item.expression)
+        this.myVariables.push(variables)
+        return {
+          ...item,
+          expression: variables
+        }
+      })
      const elements = this.chartInfo.elements || []
      if (this.isExportHtml) {
        this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params)
@@ -229,7 +240,6 @@ export default {
              // if (isChartPie(this.chartInfo.type)) {
              //   query += `&statistics=${this.chartInfo.param.statistics || 'last'}`
              // }
-              this.myVariables.push(this.variablesReplace(element.expression))
              query += `&query=${encodeURIComponent(this.variablesReplace(element.expression))}`
              return this.$get(query)
            })
@@ -725,7 +735,7 @@ export default {
    },
    variablesArr: {
      handler (n) {
-        const elements = this.chartInfo.elements || []
+        const elements = this.chartInfo.oldElements || []
        const variables = elements.map((element) => {
          return this.variablesReplace(element.expression)
        })
--- a/nezha-fronted/src/components/common/panel/panelVariables.vue
+++ b/nezha-fronted/src/components/common/panel/panelVariables.vue
@@ -85,7 +85,7 @@ export default {
    }
  },
  methods: {
-    getLabelData () {
+    getLabelData () { // 获取所有变量组合的可选择的值
      const isRegExp = (v) => {
        let isReg
        try {
@@ -97,7 +97,7 @@ export default {
      }
      const arrPromise = []
      this.labelValue = {}
-      this.labelArr.forEach((item, index) => {
+      this.labelArr.forEach((item, index) => {  // 根据变量的type类型 以及 expression 对应的值 查询不同的接口
        this.labelValue[item.name] = []
        if (item.type === 'custom') {
          arrPromise.push('')
@@ -134,7 +134,6 @@ export default {
            }
          }
          match = item.expression.match(this.specialKey[2].reg)
-          console.log(match)
          if (match) {
            arrPromise.push(this.metricNameQuery(match[1]))
            return
@@ -148,7 +147,6 @@ export default {
        }
      })
      Promise.all(arrPromise).then((res) => {
-        console.log(res)
        res.forEach((response, index) => {
          if (response) {
            if (this.labelArr[index].regex) {
@@ -284,7 +282,6 @@ export default {
          query: encodeURIComponent(query)
        }
        this.$get(url, params).then(res => {
-          console.log(res)
          const arr = res.data.result.map((metricData) => {
            let text = metricData.metric.__name__ || ''
            delete metricData.metric.__name__
@@ -336,14 +333,14 @@ export default {
        .join(',')
      return `${metricName}{${labelPart}}`
    },
-    setLabelArrDefault () {
+    setLabelArrDefault () { // 设置变量默认值 默认第一个
      this.labelArr.forEach((item, index) => {
        item.checked = this.labelValue[item.name][0] ? [this.labelValue[item.name][0].value] : []
      })
-      this.$store.dispatch('dispatchVariablesArr', this.labelArr)
+      this.$emit('getPanelData') // 同步加载chart 拿不到使用的变量值
+      this.$store.dispatch('dispatchVariablesArr', this.labelArr) // 通过vuex 管理变量值
    },
    checkAllChange (item) {
-      console.log(item)
      const allValue = this.labelValue[item.name].map(value => {
        return value.value
      })
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -92,7 +92,7 @@
        <div id="tableList" class="table-list" style='overflow-y: unset'>
          <div class="table-list-box">
            <div  id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
-              <panel-variables :labelArrs="variables" :time-range="searchTime"></panel-variables>
+              <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
              <chart-list
                ref="chartList"
                name="panel"
@@ -298,7 +298,8 @@ export default {
      exportBoxShow: false,
      // 查看模式
      mode: '',
-      variables: []
+      variables: [],
+      variablesInit: false // 判断variables 是否加载完成
    }
  },
  components: {
@@ -308,7 +309,7 @@ export default {
    selectDashboard,
    chartTempBox,
    chartRightBox,
-    panelVariables
+    panelVariables // 处理panel变量的组件
  },
  computed: {
    chartRightBoxShow () {
@@ -343,6 +344,7 @@ export default {
      if (!val) {
        return false
      }
+      this.variablesInit = false
      this.filter.searchName = ''
      // this.$refs.searchInput.select();
      this.showPanel = val
@@ -357,6 +359,58 @@ export default {
          { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, z:z:1, a', expression: '', regex: '' }
        ]
      }
+      this.showPanel.param.variables = [
+        { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
+        {
+          name: 'bbb',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'label_names()',
+          regex: '/a\.*/',
+          show: true
+        },
+        {
+          name: 'ccc',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'label_values(up, asset)',
+          regex: '',
+          show: true
+        },
+        {
+          name: 'ddd',
+          type: 'query',
+          multi: true,
+          allOption: true,
+          expression: 'label_values(asset)',
+          regex: '',
+          show: true
+        },
+        {
+          name: 'eeee',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'label_values(up, endpoint)',
+          regex: '/.*-(?<text>.*)-(?<value>.*)-.*/',
+          show: true
+        },
+        {
+          name: 'fff',
+          type: 'query',
+          multi: false,
+          allOption: true,
+          expression: 'query_result(node_filefd_allocated{module="OLAP-Node-Exporter"})',
+          regex: '/asset="(?<text>[^"]+)\.*\asset_id="(?<value>[^"]+)/',
+          show: true
+        }
+      ]
+      this.variables = this.showPanel.param.variables
      this.showPanel.type = 'dashboard'
      this.filter.panelId = this.showPanel.id
      this.panelId = this.showPanel.id
@@ -685,7 +739,7 @@ export default {
      this.filter.value = this.searchTime[2]
      this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
      // this.getTableData()
-      this.getData(this.filter)
+      this.variablesInit && this.getData(this.filter)
      const param = {
        panelId: this.panelId,
        nowTimeType: JSON.stringify(this.nowTimeType),
@@ -765,7 +819,7 @@ export default {
            if (!this.showPanel.id) {
              this.showPanel = response.data.list[0]
              this.filter.panelId = this.showPanel.id
-              this.getData(this.filter)
+              this.variablesInit && this.getData(this.filter)
              isInitData = true
            } else {
              handler(response.data.list)
@@ -779,7 +833,7 @@ export default {
          }
          this.pageObj.total = response.data.total
          if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
-            this.getData(this.filter)
+            this.variablesInit && this.getData(this.filter)
          }
          this.$store.state.showPanel.id = 0
          this.$store.state.showPanel.name = ''
@@ -804,7 +858,7 @@ export default {
            { show: true, type: 'custom', multi: false, allOption: true, name: 'azy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' }
          ]
        }
-        this.variables = [
+        this.showPanel.param.variables = [
          { show: true, type: 'custom', multi: true, allOption: true, name: 'mazy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
          { show: true, type: 'custom', multi: true, allOption: false, name: 'mzy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
          { show: true, type: 'custom', multi: false, allOption: false, name: 'zy', customOptions: 'z:1, b:z:1, a,c:123', expression: '', regex: '' },
@@ -855,6 +909,7 @@ export default {
            show: true
          }
        ]
+        this.variables = this.showPanel.param.variables
      }).catch((error) => {
        // console.log('error................'+JSON.stringify(error));
        if (error) {
@@ -1099,6 +1154,10 @@ export default {
        const path = this.fromRoute.panel
        this.updatePath(param, path)
      }
+    },
+    getPanelData () {
+      this.variablesInit = true
+      this.getData(this.filter)
    }
  },
  created () {