Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

nezha-fronted/src/components/chart/chart.vue

@@ -1,7 +1,7 @@
 <template>
   <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
     <loading :loading="loading"></loading>
-    <chart-no-data v-if="isNoData || isError || chartChildrenData"></chart-no-data>
+    <chart-no-data  v-if="isNoData || isError || chartChildrenData"></chart-no-data>
     <template v-else>
       <chart-time-series
         v-if="isTimeSeries(chartInfo.type)"
@@ -309,6 +309,7 @@ export default {
       this.chartChildrenData = flag
     },
     resize () {
+      console.log(this.$refs['chart' + this.chartInfo.id])
       this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].resize()
     },
     refreshLogs (params) {

nezha-fronted/src/components/chart/chart/chartAssetInfo.vue

@@ -16,6 +16,11 @@ export default {
   data () {
     return {
 
+    }
+  },
+  methods: {
+    resize () {
+
     }
   }
 }

nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue

@@ -16,6 +16,11 @@ export default {
   data () {
     return {
 
+    }
+  },
+  methods: {
+    resize () {
+
     }
   }
 }

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -214,9 +214,11 @@ export default {
       })
     },
     resize () {
-      this.getLayout().then(layout => {
+      setTimeout(() => {
-        this.renderGauge(layout).then(() => {
+        this.getLayout().then(layout => {
-          this.gaugeChartResize()
+          this.renderGauge(layout).then(() => {
+            this.gaugeChartResize()
+          })
         })
       })
     },

nezha-fronted/src/components/chart/chart/chartGroup.vue

@@ -54,9 +54,8 @@ export default {
       setTimeout(() => {
         this.dataList = this.dataList.map(item => {
           return {
-            ...item,
+            ...item
             // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
-            loaded: false
           }
         })
       }, 100)
@@ -70,9 +69,9 @@ export default {
           const arr = JSON.parse(JSON.stringify(n))
           this.dataList = arr.map(item => {
             return {
-              ...item,
+              ...item
               // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
-              loaded: false
+              // loaded: false
             }
           })
         })

nezha-fronted/src/components/chart/chart/chartNoData.vue

@@ -6,6 +6,11 @@
 
 <script>
 export default {
-  name: 'chartNoData'
+  name: 'chartNoData',
+  methods: {
+    resize () {
+
+    }
+  }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartText.vue

@@ -21,6 +21,9 @@ export default {
     }
   },
   methods: {
+    resize () {
+
+    }
   },
   watch: {
     chartInfo: {

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -98,6 +98,9 @@ export default {
       chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue, copies, unit, decimals)
       chartOption.yAxis.minInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'min')
       chartOption.yAxis.maxInterval = chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(chartOption.series.length / 5)
+      if (this.chartInfo.param.stack) {
+        chartOption.yAxis.maxInterval = chartOption.yAxis.maxInterval * (Math.ceil(chartOption.series.length / 5) + 1)
+      }
       if (unit.type === 'Time') {
         delete chartOption.yAxis.minInterval
         delete chartOption.yAxis.maxInterval
@@ -169,7 +172,6 @@ export default {
         maxValue = Math.floor(oldValue) / Math.pow(10, dot)
         dot++
       }
-      console.log(oldValue)
       const copies = chartDataFormat.copies(Number(oldValue), unit.type)
       return { minTime, maxTime, minValue, maxValue, copies, unit, dot }
     },
@@ -210,7 +212,11 @@ export default {
         let sum = 0
         let flag = true
         params.forEach((item, i) => {
-          const seriesName = item.seriesName.split('-')[0]
+          const nameArr = item.seriesName.split('-')
+          if (nameArr.length > 1) {
+            nameArr.splice(nameArr.length - 1, 1)
+          }
+          const seriesName = nameArr.join('-')
           if (i === 0 && item.seriesName.indexOf('Previous') === -1) {
             const value = bus.computeTimezone(item.data[0] * 1000)
             const tData = new Date(value)
@@ -326,11 +332,19 @@ export default {
         self.isStack = !self.isStack
         // 改变tooltip
         option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
+        if (!self.chartInfo.param.stack) {
+          option.yAxis.maxInterval = option.yAxis.maxInterval / (Math.ceil(option.series.length / 5) + 1)
+        } else {
+          option.yAxis.maxInterval = option.yAxis.maxInterval * (Math.ceil(option.series.length / 5) + 1)
+        }
         myChart.setOption(option)
       }
     },
     resize () {
-      getChart(this.chartId).resize()
+      console.log(213)
+      setTimeout(() => {
+        getChart(this.chartId) && getChart(this.chartId).resize()
+      }, 100)
     }
   },
   mounted () {

nezha-fronted/src/components/chart/chart/legend.vue

@@ -5,7 +5,10 @@
       <div class="legend--table">
         <div class="legend--table-row table-header">
           <div class="legend--table-cell"></div>
-          <div v-for="statistics in chartInfo.param.legend.values" :key="statistics" class="legend--table-cell">{{statistics}}</div>
+          <div v-for="statistics in chartInfo.param.legend.values" :key="statistics" class="legend--table-cell">
+            <span v-if="statisticsList.find(key=>key.value === statistics)">{{$t(statisticsList.find(key=>key.value === statistics).label)}}</span>
+            <span v-else>--</span>
+          </div>
         </div>
         <div v-for="(item, index) in legends"
              :key="index"
@@ -40,6 +43,7 @@
 import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'
 import chartDataFormat from '@/components/charts/chartDataFormat'
+import { statisticsList } from '@/components/common/js/constants'
 export default {
   name: 'chartLegend',
   props: {
@@ -51,6 +55,7 @@ export default {
   },
   data () {
     return {
+      statisticsList,
       isGrey: [],
       legendDefaultCount: 20, // 初始显示的legend条数
       showLegends: [], // 要显示的legend；若legend数量过多，初始时这个数据里只有前20条legend

nezha-fronted/src/components/chart/chartList.vue

@@ -47,6 +47,7 @@
           :chart-info="item"
           :from="from"
           :time-range="timeRange"
+          @groupShow="groupShow"
           :chart-detail-info="chartDetailInfo"
           @refreshPanel="refreshPanel"
           @showFullscreen="showFullscreen"
@@ -232,7 +233,7 @@ export default {
         this.copyDataList = [...this.copyDataList]
         // this.$refs.layout.layoutUpdate()
       }
-      this.moveChart()
+      this.onScroll(this.scrollTop)
     },
     cleanData () {
 
@@ -243,51 +244,46 @@ export default {
       this.onScroll(this.scrollTop)
     },
     moveChart () {
-      if (this.timer) {
+      this.onScroll(this.scrollTop)
-        clearTimeout(this.timer)
+      const arr = this.copyDataList.filter(item => !item.staic)
-        this.timer = null
+      const charts = []
-      }
+      let weight = 0
-      this.timer = setTimeout(() => {
+      arr.forEach(item => {
-        const arr = this.copyDataList.filter(item => !item.staic)
+        charts.push({
-        const charts = []
+          id: item.id,
-        let weight = 0
+          x: item.x,
-        arr.forEach(item => {
+          y: item.y,
-          charts.push({
+          span: item.span,
-            id: item.id,
+          height: item.height,
-            x: item.x,
+          groupId: item.groupId,
-            y: item.y,
+          weight: weight
-            span: item.span,
-            height: item.height,
-            groupId: item.groupId,
-            weight: weight
-          })
-          weight++
-          if (item.type === 'group') {
-            item.children && item.children.forEach(children => {
-              charts.push({
-                id: children.id,
-                x: children.x,
-                y: children.y,
-                span: children.span,
-                height: children.height,
-                groupId: children.groupId,
-                weight: weight
-              })
-              weight++
-            })
-          }
         })
-        const params = {
+        weight++
-          panelId: this.panelId,
+        if (item.type === 'group') {
-          charts: charts
+          item.children && item.children.forEach(children => {
-        }
+            charts.push({
-        if (charts && charts.length) {
+              id: children.id,
-          this.$put('/visual/panel/chart/weights', params).then(() => {
+              x: children.x,
-            const position = getLayoutPosition(this.copyDataList)
+              y: children.y,
-            this.$store.commit('setChartLastPosition', position)
+              span: children.span,
+              height: children.height,
+              groupId: children.groupId,
+              weight: weight
+            })
+            weight++
           })
         }
-      }, 1000)
+      })
+      const params = {
+        panelId: this.panelId,
+        charts: charts
+      }
+      if (charts && charts.length) {
+        this.$put('/visual/panel/chart/weights', params).then(() => {
+          const position = getLayoutPosition(this.copyDataList)
+          this.$store.commit('setChartLastPosition', position)
+        })
+      }
     },
     onScroll (scrollTop = 0, groupTop = 0) {
       const self = this
@@ -298,14 +294,19 @@ export default {
       this.scrollTopTimer = setTimeout(() => {
         this.copyDataList.forEach(item => {
           if (!this.$refs['grid-item' + item.id] || !this.$refs['grid-item' + item.id][0]) {
-            return;
+            return
           }
           const dom = this.$refs['grid-item' + item.id][0].$el
           if (dom) {
             let top = dom.style.top
             top = Number(top.substring(0, top.length - 2)) + groupTop
-            if (item.type === 'group') {
+            if (item.type === 'group' && item.loaded) {
               this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.onScroll(scrollTop, top)
+              return
+            }
+            if (item.type === 'group' && !item.loaded) {
+              item.loaded = true
+              this.$refs['chart' + item.id][0].getChartData()
             }
             if (item.loaded) {
               return
@@ -333,6 +334,16 @@ export default {
         })
       }, 200)
     },
+    resize () {
+      this.init()
+      this.copyDataList.forEach(item => {
+        if (item.type === 'group') {
+          this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].groupShow(item.param.collapse)
+          this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.resize()
+        }
+        this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].resize()
+      })
+    },
     refreshPanel () {
       bus.$emit('refreshPanel')
     }
@@ -345,8 +356,12 @@ export default {
     if (!this.isGroup) {
       bus.$on('groupMove', this.changeGroupHeight)
       this.$store.commit('setChartListId', `chartList${this.timestamp}`)
+      window.addEventListener('resize', this.resize)
     }
   },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize)
+  },
   watch: {
     dataList: {
       deep: true,
@@ -397,7 +412,9 @@ export default {
           this.copyDataList = JSON.parse(JSON.stringify(tempList))
           setTimeout(() => {
             this.gridLayoutShow = true
-            this.onScroll()
+            if (!this.isGroup) {
+              this.onScroll()
+            }
           })
           setTimeout(() => {
             this.firstInit = false

nezha-fronted/src/components/chart/chartMixin.js

@@ -110,16 +110,17 @@ export default {
       if (data.metric.__name__) {
         legend += '}'
       }
-      if (!legend && chartInfo.elements) {
+      // if (!legend && chartInfo.elements) {
-        legend = chartInfo.elements[expressionIndex].expression
+      //   // legend = chartInfo.elements[expressionIndex].expression
-      }
+      //   legend = ''
+      // }
       // 处理legend别名
       alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
       if (!alias) {
-        alias = legend
+        alias = chartInfo.elements[expressionIndex].expression
       }
       if (alias == 'Previous ') {
-        alias += legend
+        alias += chartInfo.elements[expressionIndex].expression
       }
       // proj_status_
       const name = alias + '-' + dataIndex
@@ -146,6 +147,9 @@ export default {
       if (/\{\{.+\}\}/.test(aliasExpression)) {
         const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
           const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          if (!legend) {
+            return label
+          }
           const reg = new RegExp(label + '=".+?"')
           let value = null
           if (reg.test(legend)) {
@@ -257,7 +261,10 @@ export default {
       }
     },
     resize () {
-      getChart(this.chartId) && getChart(this.chartId).resize()
+      console.log('reszie')
+      setTimeout(() => {
+        getChart(this.chartId) && getChart(this.chartId).resize()
+      }, 100)
     }
   },
   watch: {

nezha-fronted/src/components/chart/panelChart.vue

@@ -420,7 +420,7 @@ export default {
       })
     },
     resize () {
-      this.$refs.chart.resize()
+      this.$refs.chart && this.$refs.chart.resize()
     },
     refresh () {
       this.getChartData(true)
@@ -532,7 +532,7 @@ export default {
     timeRange: {
       deep: true,
       handler (n) {
-        this.refresh()
+        // this.refresh()
       }
     },
     loading: {

nezha-fronted/src/components/charts/chart-table.vue

@@ -495,7 +495,7 @@ export default {
           })
           break
         }
-        case 'average': {
+        case 'avg': {
           result = classifies.map(group => {
             const groupData = group.map(t => parseFloat(t.data[1]))
             const sum = eval(groupData.join('+'))

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -397,6 +397,9 @@ function asciiCompute2 (num, ascii, units, dot = 2, unitIndex = 0) {
 * unit:设置的单位
 * */
 function timeCompute (value, unit, dot = 0) {
+  if (isNaN(value)) {
+    return `0 ${unit}`
+  }
   if (unit == 'year') {
     return `${value.toFixed(dot)} ${unit}`
   }

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

@@ -1449,7 +1449,7 @@ export default {
           })
           break
         }
-        case 'average': {
+        case 'avg': {
           result = classifies.map(group => {
             const groupData = group.map(t => parseFloat(t.data[1]))
             const sum = eval(groupData.join('+'))

nezha-fronted/src/components/common/js/constants.js

@@ -212,7 +212,7 @@ export const alertMessage = {
 export const statisticsList = [
   { value: 'min', label: i18n.t('dashboard.panel.chartForm.statisticsVal.min') },
   { value: 'max', label: i18n.t('dashboard.panel.chartForm.statisticsVal.max') },
-  { value: 'average', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') },
+  { value: 'avg', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') },
   { value: 'total', label: i18n.t('dashboard.panel.chartForm.statisticsVal.total') },
   { value: 'first', label: i18n.t('dashboard.panel.chartForm.statisticsVal.first') },
   { value: 'last', label: i18n.t('dashboard.panel.chartForm.statisticsVal.last') },

nezha-fronted/src/components/common/js/tools.js

@@ -13,6 +13,7 @@ export const clickoutside = {
     let oldValue
     try {
       oldValue = JSON.parse(JSON.stringify(binding.value.obj))
+      el.__newValue__ = oldValue
     } catch (e) {
 
     }
@@ -36,8 +37,8 @@ export const clickoutside = {
           return false
         }
         if (oldValue) {
-          const newValue = JSON.parse(JSON.stringify(binding.value.obj))
+          // const newValue = JSON.parse(JSON.stringify(binding.value.obj))
-          if (unsavedChange == 'on' && !isEqual(oldValue, newValue)) {
+          if (unsavedChange == 'on' && !isEqual(oldValue, el.__newValue__)) {
             MessageBox.confirm(i18n.t('tip.confirmCancel'), {
               confirmButtonText: i18n.t('tip.yes'),
               cancelButtonText: i18n.t('tip.no'),
@@ -66,6 +67,9 @@ export const clickoutside = {
     el.__vueClickOutside__ = documentHandler
     document.addEventListener('mousedown', documentHandler)
   },
+  update (el, binding, vnode) {
+    el.__newValue__ = binding.value.obj
+  },
   unbind (el, binding) {
     // 解除事件监听
     document.removeEventListener('mousedown', el.__vueClickOutside__)
@@ -907,7 +911,7 @@ export function getMetricTypeValue (queryItem, type) {
       const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1]
       return max
     }
-    case 'average': {
+    case 'avg': {
       copy = copy.map(t => parseFloat(t[1]))
       const sum = eval(copy.join('+'))
       const avg = sum / copy.length

nezha-fronted/src/components/common/language/cn.js

@@ -349,7 +349,7 @@ const cn = {
         statisticsVal: {
           min: 'Min',
           max: 'Max',
-          average: 'Average',
+          avg: 'Avg',
           total: 'Total',
           first: 'First',
           last: 'Last',

nezha-fronted/src/components/common/language/en.js

@@ -365,7 +365,7 @@ const en = {
         statisticsVal: {
           min: 'Min',
           max: 'Max',
-          average: 'Average',
+          avg: 'Avg',
           total: 'Total',
           first: 'First',
           last: 'Last',

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -487,7 +487,7 @@
                   <span @click="addColumns('')">
                       <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
                   </span>
-                  <span class="nz-icon-copy">
+                  <span style="margin-right: 5px">
                       <i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
                   </span>
                   <span class="nz-icon-minus-medium">

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
+  <div v-clickoutside="{obj: editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
     <transition v-if="from !== 'chartTemp'" name="right-box">
 <!--      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>-->
     </transition>
@@ -457,42 +457,42 @@ export default {
         if (obj.param && !obj.param.thresholds) {
           obj.param.thresholds = []
         }
-        this.editChart = obj
+        if (obj.groupId === -1) {
-        if (this.editChart.groupId === -1) {
+          obj.groupId = ''
-          this.editChart.groupId = ''
         }
-        if (this.editChart.param) {
+        if (obj.param) {
-          if (!this.editChart.param.min) {
+          if (!obj.param.min) {
-            this.editChart.param.min = 0
+            obj.param.min = 0
           }
-          if (!this.editChart.param.max) {
+          if (!obj.param.max) {
-            this.editChart.param.max = 100
+            obj.param.max = 100
           }
-          if (!this.editChart.param.link) {
+          if (!obj.param.link) {
-            this.$set(this.editChart.param, 'link', '')
+            this.$set(obj.param, 'link', '')
           }
-          if (!this.editChart.param.enable) {
+          if (!obj.param.enable) {
-            this.editChart.param.enable = {
+            obj.param.enable = {
               thresholds: false,
               legend: false,
               valueMapping: false
             }
           }
           // this.editChart.varType = 1
-          if (this.editChart.param.enable.legend && !this.editChart.param.legend) {
+          if (obj.param.enable.legend && !obj.param.legend) {
-            this.editChart.param.legend = { placement: 'bottom', values: [], show: true }
+            obj.param.legend = { placement: 'bottom', values: [], show: true }
           }
-          if (this.editChart.param.datasource && !this.editChart.param.datasource[0].legend) {
+          if (obj.param.datasource && !obj.param.datasource[0].legend) {
-            this.editChart.param.datasource[0].legend = ''
+            obj.param.datasource[0].legend = ''
           }
-          if (this.editChart.param.valueMapping) {
+          if (obj.param.valueMapping) {
-            this.editChart.param.valueMapping.forEach(item => {
+            obj.param.valueMapping.forEach(item => {
               if (!item.show) {
                 item.show = false
               }
             })
           }
         }
+        this.editChart = obj
       }
     },
     'editChart.type': {
@@ -501,6 +501,12 @@ export default {
           this.editChart.groupId = ''
         }
       }
+    },
+    editChart: {
+      deep: true,
+      handler () {
+
+      }
     }
   }
 }

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -346,6 +346,7 @@ export default {
     },
     showMapping (index) {
       this.chartConfig.param.valueMapping[index].show = !this.chartConfig.param.valueMapping[index].show
+      this.change()
     },
     mappingItemChange (index, type) {
       const mapping = this.chartConfig.param.valueMapping[index]
@@ -416,6 +417,7 @@ export default {
     },
     showColumns (index) {
       this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
+      this.change()
     },
     tagsChange (newTags) {
       this.chartConfig.param.tags = newTags

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -449,7 +449,7 @@
                   <span @click="addColumns('')">
                       <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
                   </span>
-                  <span class="nz-icon-copy">
+                  <span style="margin-right: 5px">
                       <i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
                   </span>
                   <span class="nz-icon-minus-medium">

nezha-fronted/src/libs/bus.js

@@ -192,7 +192,7 @@ export default new Vue({
           statisticsRlt = dataArray.reduce(function (a, b) {
             return b > a ? b : a
           })
-        } else if (statistics === 'average') { // average：平均值
+        } else if (statistics === 'avg') { // avg：平均值
           let sum = 0
           dataArray.forEach((item) => {
             sum = Number(sum) + Number(item)