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

# Conflicts:
#	nezha-fronted/src/components/common/project/popData/Info.vue

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

@@ -68,7 +68,7 @@
             <div class="basic-info-table-value" v-if="chartDetail">
               <i :class="chartDetail.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
               <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-                <div class="tooltip-title">Alert message (active)</div>
+                <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
                 <div class="severity-info" style='justify-content: space-between'>
                   <div class="severity-name">{{$t('overall.result.total')}}</div>
                   <div class="severity-value">{{chartDetail.alertNum}}</div>
@@ -118,7 +118,7 @@
             <div class="basic-info-table-value" v-if="chartDetail">
               <i :class="chartDetail.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
               <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-                <div class="tooltip-title">Alert message (active)</div>
+                <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
                 <div class="severity-info" style='justify-content: space-between'>
                   <div class="severity-name">{{$t('overall.result.total')}}</div>
                   <div class="severity-value">{{chartDetail.alertNum}}</div>

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

@@ -210,6 +210,8 @@ export default {
       if (!this.isGroup) {
         this.moveChart()
         this.onScroll(this.scrollTop)
+      } else {
+        bus.$emit('groupChildMove')
       }
     },
     containerResizedEvent (i, newH, newW, newHPx, newWPx) {
@@ -346,6 +348,65 @@ export default {
     },
     refreshPanel () {
       bus.$emit('refreshPanel')
+    },
+    createChartSuccess (params) {
+      const arr = this.copyDataList.filter(item => !item.staic)
+      const charts = []
+      let weight = 0
+      arr.forEach(item => {
+        const chart = {
+          id: item.id,
+          x: item.x,
+          y: item.y,
+          span: item.span,
+          height: item.height,
+          groupId: item.groupId,
+          weight: weight
+        }
+        if (!params.groupId && chart.y >= params.y) {
+          chart.y = chart.y + 1
+        }
+        if (params.id == item.id) {
+          chart.y = params.y
+          chart.x = params.x
+        }
+        charts.push(chart)
+
+        weight++
+        if (item.type === 'group') {
+          item.children && item.children.forEach(children => {
+            const childrenChart = {
+              id: children.id,
+              x: children.x,
+              y: children.y,
+              span: children.span,
+              height: children.height,
+              groupId: children.groupId,
+              weight: weight
+            }
+            if (item.id === params.groupId && children.y >= params.y) {
+              childrenChart.y = childrenChart.y + 1
+            }
+            if (params.id == childrenChart.id) {
+              childrenChart.y = params.y
+              childrenChart.x = params.x
+            }
+            charts.push(childrenChart)
+            weight++
+          })
+        }
+      })
+      const chartParams = {
+        panelId: this.panelId,
+        charts: charts
+      }
+      if (charts && charts.length) {
+        this.$put('/visual/panel/chart/weights', chartParams).then(() => {
+          if (params.cb) {
+            params.cb()
+          }
+        })
+      }
     }
   },
   created () {
@@ -355,6 +416,8 @@ export default {
     this.init()
     if (!this.isGroup) {
       bus.$on('groupMove', this.changeGroupHeight)
+      bus.$on('creat-chart-success', this.createChartSuccess)
+      bus.$on('groupChildMove', this.moveChart)
       this.$store.commit('setChartListId', `chartList${this.timestamp}`)
       window.addEventListener('resize', this.resize)
     }

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

@@ -261,7 +261,6 @@ export default {
       }
     },
     resize () {
-      console.log('reszie')
       setTimeout(() => {
         getChart(this.chartId) && getChart(this.chartId).resize()
       }, 100)

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -49,7 +49,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -62,7 +62,7 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-title">{{$t('asset.endpoint')}}</div>
         <div class="alert-label-value">
           <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
           <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
@@ -83,7 +83,7 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-title">{{$t('asset.endpoint')}}</div>
         <div class="alert-label-value">
           <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
           <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
@@ -100,7 +100,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -152,7 +152,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -202,7 +202,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -276,7 +276,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>

nezha-fronted/src/components/common/alert/alertLabel2.vue

@@ -56,7 +56,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -107,7 +107,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -158,7 +158,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -208,7 +208,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>
@@ -282,7 +282,7 @@
         <div class="alert-label-value" v-if="alertLabelData">
           <i :class="alertLabelData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertLabelData.alertNum}}</div>

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -35,7 +35,7 @@
         <div class="alert-rule-value" v-if="alertRuleData">
           <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
           <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-            <div class="tooltip-title">Alert message (active)</div>
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
             <div class="severity-info" style='justify-content: space-between'>
               <div class="severity-name">{{$t('overall.result.total')}}</div>
               <div class="severity-value">{{alertRuleData.alertNum}}</div>

nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue

@@ -66,7 +66,7 @@
           <div style="cursor: pointer" v-else-if="item.key === 'alertNum'">
             <i :class="Number(getPathContent(item.key)) ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
             <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
-              <div class="tooltip-title">Alert message (active)</div>
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
               <div class="severity-info" style='justify-content: space-between'>
                 <div class="severity-name">{{$t('overall.result.total')}}</div>
                 <div class="severity-value">{{getPathContent(item.key)}}</div>

nezha-fronted/src/components/common/project/popData/Info.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="info-content pop-data-info-content" v-if="showInfo">
-    <div class="info-box" v-my-loading="loading">
+    <div class="info-box"v-my-loading="loading">
-      <div class="info-box-title">Module info</div>
+      <div class="info-box-title">{{$t('overall.module')}} {{$t('project.topo.icon.info')}}</div>
       <div class="info-box-content">
         <div class="content-box">
           <span class="content-title">ID</span>
@@ -16,7 +16,7 @@
           <span class="content-text">{{moduleInfo.project ? moduleInfo.project.name : '--'}}</span>
         </div>
         <div class="content-box">
-          <span class="content-title">{{ $t('project.endpoint.endpoints') }}</span>
+          <span class="content-title">{{ $t('asset.endpoint') }}</span>
           <span class="content-text">
             <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
             <span>{{moduleInfo.endpointNum ? moduleInfo.endpointNum : 0}}</span>

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -14,7 +14,7 @@
       >
         <template  v-slot:default="slotProps">
           <endpoint-table
-            style="height: calc(100% - 200px)"
+            style="height: 100%"
             ref="dataTable"
             :orderByFa="orderBy"
             v-my-loading="tools.loading"

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

@@ -207,6 +207,8 @@ export default {
     },
     // 保存endpoint
     save () {
+      const self = this
+      let resetFlag = false // 页面是否需要重排
       const arr = [this.$refs.chartForm.validate()]
       arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
       Promise.all(arr).then(res => {
@@ -245,6 +247,7 @@ export default {
         if (params.x + params.span > 12) {
           params.x = 0
           params.y += 1
+          resetFlag = true
         }
         delete params.panel
         if (params.type === 'table') {
@@ -257,8 +260,18 @@ export default {
           this.$put('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+              if (resetFlag) {
-              this.esc(true)
+                bus.$emit('creat-chart-success', {
+                  ...params,
+                  cb: function () {
+                    self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                    self.esc(true)
+                  }
+                })
+              } else {
+                self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                self.esc(true)
+              }
             } else {
               this.$message.error(response.msg)
             }
@@ -267,8 +280,18 @@ export default {
           this.$post('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+              if (resetFlag) {
-              this.esc(true)
+                bus.$emit('creat-chart-success', {
+                  ...params,
+                  cb: function () {
+                    self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                    self.esc(true)
+                  }
+                })
+              } else {
+                self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                self.esc(true)
+              }
             } else {
               this.$message.error(response.msg)
             }

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -45,7 +45,7 @@
           <span style="cursor: pointer" @click="queryMessage(scope.row)">
             <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
             <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
-              <div class="tooltip-title">Alert message (active)</div>
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
               <div class="severity-info" style='justify-content: space-between'>
                 <div class="severity-name">{{$t('overall.result.total')}}</div>
                 <div class="severity-value">{{scope.row.alertNum}}</div>

nezha-fronted/src/components/common/table/settings/dcTable.vue

@@ -69,7 +69,7 @@
            <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
             <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
             <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
-              <div class="tooltip-title">Alert message (active)</div>
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
               <div class="severity-info" style='justify-content: space-between'>
                 <div class="severity-name">{{$t('overall.result.total')}}</div>
                 <div class="severity-value">{{scope.row.alertNum}}</div>

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -76,7 +76,7 @@
           <span style="cursor: pointer"  @click="showBottomBox('endpointAlertMessage', scope.row)">
             <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
             <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
-              <div class="tooltip-title">Alert message (active)</div>
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
               <div class="severity-info" style='justify-content: space-between'>
                 <div class="severity-name">{{$t('overall.result.total')}}</div>
                 <div class="severity-value">{{scope.row.alertNum}}</div>

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -55,7 +55,7 @@
           <span style="cursor: pointer"  @click="showBottomBox('moduleAlertMessage', scope.row)">
             <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
             <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
-              <div class="tooltip-title">Alert message (active)</div>
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
               <div class="severity-info" style='justify-content: space-between'>
                 <div class="severity-name">{{$t('overall.result.total')}}</div>
                 <div class="severity-value">{{scope.row.alertNum}}</div>

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -59,7 +59,7 @@
            <span style="cursor: pointer" @click="jumpAlertMessage(scope.row)">
             <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
             <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
-              <div class="tooltip-title">Alert message (active)</div>
+              <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
               <div class="severity-info" style='justify-content: space-between'>
                 <div class="severity-name">{{$t('overall.result.total')}}</div>
                 <div class="severity-value">{{scope.row.alertNum}}</div>