perf: alertList性能优化

2020-09-28 16:27:03 +08:00
parent ffbb33e7af
commit 4d1d89cd84
5 changed files with 228 additions and 92 deletions
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <div class="alert-label" :style="calcPosition(that.position)">
    <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
      <div class="alert-label-box">
        <div class="alert-label-title">ID</div>
@@ -93,7 +93,7 @@
        <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
      </div>
    </div>
-  </span>
+  </div>
 </template>

 <script>
@@ -102,11 +102,13 @@
    props:{
      id:{},
      type:{},
-      labelLoading:{},
+      //labelLoading:{},
      that:{}
    },
-    watch:{
-      labelLoading(){
+    /*watch:{
+      labelLoading: {
+        immediate: true,
+        handler(n) {
          if(this.type==='asset'){
            this.$get('/asset/info?id='+this.id).then((res)=>{
              if(res.msg==='success'){
@@ -138,7 +140,8 @@
            })
          }
        }
-    },
+      }
+    },*/
    data() {
      return {
        alertLabelData:null,
@@ -148,7 +151,16 @@
    components:{

    },
-
+    computed: {
+      calcPosition() {
+        return function(position) {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - 20}px`,
+          }
+        }
+      }
+    },
    methods:{
      alertActiveStr(){
        return vm.$t('overall.active');
@@ -162,13 +174,66 @@
      },
    },
    mounted(){
-
+      if(this.type==='asset'){
+        this.$get('/asset/info?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.Basic;
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+      if(this.type==='project'){
+        this.$get('/project/info?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.basic;
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
+      if(this.type==='module'){
+        this.$get('/module?id='+this.id).then((res)=>{
+          if(res.msg==='success'){
+            this.loading=false;
+            this.alertLabelData=res.data.list[0];
+          } else{
+            this.$message.error(res.msg);
+          }
+        })
+      }
    },
  }

 </script>

 <style scoped>
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
  .alert-label-info{
    border: 1px solid #ebeef5;
    border-bottom: none;
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -59,14 +59,12 @@
      >
        <template slot-scope="scope" :column="item">
          <template v-if="item.prop == 'alertRule'">
-            <span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
-                    <el-tooltip
-                      :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
-                      effect="light">
-                      <alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
-                      <span>{{scope.row[item.prop].alertName}}</span>
-                    </el-tooltip>
+            <div class="too-long-split pointer"v-if="scope.row.alertRule.alertName" >
+              <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">
+                <span>{{scope.row.alertRule.alertName}}</span>
              </span>
+              <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
+            </div>
            <template v-else>-</template>
          </template>
          <template v-else-if="item.prop == 'summary'">
@@ -83,7 +81,26 @@
            <span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
          </span>
          <template v-else-if="item.prop == 'labels'" class="labels">
-            <el-tooltip
+            <div v-for="(item,i) in labelsSort(scope.row.labels)">
+              <span @mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseleave="labelHover(scope.row, item.label, false)">
+                <nz-alert-tag
+                   :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
+                   :cursor-point="tagType(item.label) == 'info' ? false : true"
+                   :key="item.label"
+                   v-if="item.label != 'alertname' && item.label != 'severity'"
+                >
+                 {{item.value}}
+                </nz-alert-tag>
+              </span>
+              <alertLabel
+                v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
+                :id="scope.row[item.label].id"
+                :that="scope.row[item.label]"
+                :type="item.label"
+              ></alertLabel>
+            </div>
+
+            <!--<el-tooltip
              v-for="(item,i) in labelsSort(scope.row.labels)"
              :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
              effect="light"
@@ -107,7 +124,8 @@
                       {{item.value}}
                     </nz-alert-tag>
              </span>
-            </el-tooltip>
+            </el-tooltip>-->
+
          </template>
          <div v-else-if="item.prop == 'state'">
                <span class="">
@@ -755,17 +773,28 @@
        }
      },
      // alertNmae鼠标划入
-      alertMessagehover(item,index){
-        item.loading=true;
-        this.$set(this.tableData,index,item);// 调用父组件
+      alertMessagehover(item, loading, e) {
+        if (e) {
+          let dom = e.currentTarget;
+          let position = dom.getBoundingClientRect();
+          this.$set(item, "position", position);
+        }
+        this.$set(item, "loading", loading);
+        //item.loading = true;
+       //this.$set(this.tableData,index,item);// 调用父组件
      },
      // label 鼠标划入
-      labelHover(item,index,type){
+      labelHover(item, type, loading, e){
        if(this.labelToolTipDis(type)){
-          return
+          return;
        }
-        item[type].loading=true;
-        this.$set(this.tableData,index,item);// 调用父组件
+        if (e) {
+          let dom = e.currentTarget;
+          let position = dom.getBoundingClientRect();
+          this.$set(item[type], "position", position);
+        }
+        this.$set(item[type], "loading", loading);
+        //this.$set(this.tableData,index,item);// 调用父组件
      },
      // Severity Label
      returnSeverityLabel(key){
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="alert-rule-info" v-loading="loading">
+  <div class="alert-rule-info" :style="calcPosition(that.position)" v-loading="loading">
    <div class="alert-rule-box">
      <div class="alert-rule-title">ID</div>
      <div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
@@ -30,8 +30,9 @@
    props:{
 		  id:{},
      messageLoad:{},
+      that: {}
    },
-    watch:{
+    /*watch:{
      messageLoad:{
        handler:function(){
          this.$get('/alert/rule?id='+this.id).then((res)=>{
@@ -45,7 +46,7 @@
        },
        deep:true
      }
-    },
+    },*/
    data() {
 		  return {
 		    loading:true,
@@ -55,34 +56,73 @@
    components:{

    },
-
+    computed: {
+      calcPosition() {
+        return function(position) {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top + 20}px`,
+          }
+        }
+      }
+    },
    methods:{
      formatThreshold(value,unit) {
        let unitMethod = chartDataFormat.getUnit(unit);
        if (unitMethod&&value) {
          return unitMethod.compute(value, null, 2);
        } else {
-          return value
+          return value;
        }
      },
    },
    mounted(){
-
+      this.$get('/alert/rule?id='+this.id).then((res)=>{
+        if(res.msg === 'success') {
+          this.loading = false;
+          this.alertRuleData=res.data.list[0];
+        } else{
+          this.$message.error(res.msg);
+        }
+      });
    },
 	}

 </script>

 <style scoped>
+  .alert-rule-info::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: calc(50% - 6px);
+    left: 0;
+    transform: translate(-100%, -100%);
+  }
  .alert-rule-info{
    border: 1px solid #ebeef5;
    border-bottom: none;
    font-size: 13px;
    line-height: 26px;
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    transform: translateY(-50%);
+    overflow-wrap: break-word;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
  }
  .alert-rule-box{
    display: flex;
-    justify-content:space-between;
    border-bottom: 1px solid #ebeef5;
  }
  .alert-rule-title{
@@ -94,7 +134,6 @@
  }
  .alert-rule-value{
    text-align: left;
-    width: 180px;
    color: #1a1a1a;
    padding: 0 3px 0 13px;
  }
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -485,6 +485,7 @@
          this.tools.loading = false;
          if (response.code == 200) {
            this.tableData = response.data.list;
+            this.$nextTick(() => {
              this.tableData.forEach((item) => {
                item.labels = JSON.parse(item.labels);
                let paramStr = JSON.stringify(this.promQueryParamConvert(item));
@@ -509,6 +510,7 @@
                  }
                });
              });
+            });
            this.deleteBox.ids='';
            this.pageObj.total = response.data.total;
          }
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -686,7 +686,7 @@
          geoJson: {geoJson: world.worldData}
        };

-        setTimeout(()=>{this.queryDataCenterMapData();this.$refs.dataCenterMap.endLoading();},200)
+        setTimeout(()=>{this.queryDataCenterMapData();},1000)
      },
      queryDataCenterMapData() {
        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
@@ -767,6 +767,7 @@
              data:seriesDatas
            }]
            this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
+            this.$refs.dataCenterMap.endLoading();
          }
        })
      },