From 4d1d89cd844ca0d0d6d1c274c7e8d6f53698cc3f Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 28 Sep 2020 16:27:03 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20alertList=E6=80=A7=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.vue    | 143 +++++++++++++-----
 .../common/alert/alertMessageTable.vue        |  71 ++++++---
 .../components/common/alert/alertRuleInfo.vue |  55 ++++++-
 .../src/components/page/alert/list.vue        |  46 +++---
 .../page/dashboard/overview/overview2.vue     |   5 +-
 5 files changed, 228 insertions(+), 92 deletions(-)

diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index ed2e49753..9ec84a209 100644
--- 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>
@@ -58,7 +58,7 @@
         <div class="alert-label-title">Administrator</div>
         <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
       </div>
-  </div>
+    </div>
 
     <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
       <div class="alert-label-box">
@@ -93,7 +93,7 @@
         <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
       </div>
     </div>
-  </span>
+  </div>
 </template>
 
 <script>
@@ -102,53 +102,65 @@
     props:{
       id:{},
       type:{},
-      labelLoading:{},
+      //labelLoading:{},
       that:{}
     },
-    watch:{
-      labelLoading(){
-        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);
-            }
-          })
+    /*watch:{
+      labelLoading: {
+        immediate: true,
+        handler(n) {
+          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);
+              }
+            })
+          }
         }
       }
-    },
+    },*/
     data() {
       return {
         alertLabelData:null,
-        loading:true
+        loading: true
       }
     },
     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;
diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 515fa161e..8f4e2463e 100644
--- 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>
-                  </span>
+            <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'">
@@ -78,12 +76,31 @@
             <span v-else>-</span>
           </template>
           <span v-else-if="item.prop == 'severity'">
-                <span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
-                <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
-                <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>
+            <span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
+            <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
+            <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){
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 8957130c1..7216b926b 100644
--- 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;
   }
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 19b03cafb..ea5361cc6 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -485,28 +485,30 @@
           this.tools.loading = false;
           if (response.code == 200) {
             this.tableData = response.data.list;
-            this.tableData.forEach((item) => {
-              item.labels = JSON.parse(item.labels);
-              let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-              this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
-                let current = [];
-                if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                  current = response2.data.result[0].value.map((item, i) => {
-                    if (i == 0) {
-                      return bus.computeTimezone(item);
-                    } else {
-                      return parseFloat(item).toFixed(2);
-                    }
-                  });
-                }else{
-                  current=[null,null]
-                }
-                this.requestIndex+=1;
-                item.current=current;
-                if(this.requestIndex===this.tableData.length){
-                  this.$set(item, "current", current);
-                  this.requestIndex=0;
-                }
+            this.$nextTick(() => {
+              this.tableData.forEach((item) => {
+                item.labels = JSON.parse(item.labels);
+                let paramStr = JSON.stringify(this.promQueryParamConvert(item));
+                this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
+                  let current = [];
+                  if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                    current = response2.data.result[0].value.map((item, i) => {
+                      if (i == 0) {
+                        return bus.computeTimezone(item);
+                      } else {
+                        return parseFloat(item).toFixed(2);
+                      }
+                    });
+                  }else{
+                    current=[null,null]
+                  }
+                  this.requestIndex+=1;
+                  item.current=current;
+                  if(this.requestIndex===this.tableData.length){
+                    this.$set(item, "current", current);
+                    this.requestIndex=0;
+                  }
+                });
               });
             });
             this.deleteBox.ids='';
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 3873e9751..84ab50471 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -112,7 +112,7 @@
         <div class="content-col-box">
           <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
           <div class="content-col-content">
-            <chart-box  chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
+            <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
             <div class="right-bottom-zoom">
               <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
               <div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
@@ -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();
           }
         })
       },