NEZ-1224 fix： 首次进入 Endpoint 页面加载缓慢

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

@@ -0,0 +1,186 @@
+<template>
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels"
+       @mouseenter="tooltipHover(true)"
+       @mouseleave="tooltipHover(false)">
+    <slot name="default"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'nzTooltip',
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true,
+      heightList: 0
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const leftOffSetView = this.detailList ? -80 : 10
+        const leftOffSet = this.detailList ? -80 : 10
+        const topOffSet = this.detailList ? 60 : 22
+        if (position.top + this.heightList > clientHeight) {
+          return {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - this.heightList + topOffSet}px`
+          }
+        } else if (this.alertTableDialog) {
+          const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
+          const dialogHeight = dialog.getBoundingClientRect()
+          if (dialogHeight) {
+            return {
+              left: `${position.left + position.width + 10 - dialogHeight.x}px`,
+              top: `${position.top - dialogHeight.y}px`
+            }
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top}px`
+          }
+        }
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    tooltipHover (show) {
+      if (show) {
+        clearTimeout(this.that.timeout)
+      } else {
+        this.that.loading = false
+      }
+    }
+  },
+  mounted () {
+    this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+  }
+}
+</script>
+
+<style scoped>
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px 23px 10px 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label__border {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .alert-labelUp {
+    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-labelUp::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;
+    bottom: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-label-info{
+    /*border: 1px solid #ebeef5;*/
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-label-box{
+    display: flex;
+    flex-direction: row;
+    /*border-bottom: 1px solid #ebeef5;*/
+  }
+  .alert-label-title{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 26px;
+    min-width: 110px;
+    padding: 0 3px 0 13px;
+  }
+  .alert-label-value{
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
+    max-width: 200px;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 26px;
+  }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>

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

@@ -95,64 +95,61 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'configs'">
-<!--          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
+          <span class="configs-endpoint metrics"
-<!--            <span class="configs-endpoint metrics">{ Metrics }</span>-->
+                @mouseenter="labelHover(scope.row, item.prop, true, $event)"
-<!--            <div class="endpointConfigsTips" slot="content">-->
+                @mouseleave="labelHover(scope.row, item.prop, false, $event, true)">
-<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[0].config)"></i></span>-->
+            [{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]
-<!--              <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>-->
+          </span>
-<!--            </div>-->
+          <nz-tooltip :that="scope.row[item.prop]"  v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
-<!--          </el-tooltip>-->
+            <div class="endpointConfigsTips" name="default">
-<!--          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[1].enable">-->
-<!--            <span class="configs-endpoint logs">{ Logs }</span>-->
-<!--            <div class="endpointConfigsTips" slot="content">-->
-<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[1].config)"></i></span>-->
-<!--              <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>-->
-<!--            </div>-->
-<!--          </el-tooltip>-->
-
-          <el-tooltip placement="left" effect="light" v-if="scope.row.configs[0].enable || scope.row.configs[1].enable">
-            <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
-            <div class="endpointConfigsTips" slot="content">
               <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
               <pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
             </div>
-          </el-tooltip>
+          </nz-tooltip>
         </template>
+
         <template v-else-if="item.prop === 'state'">
-          <el-popover placement="left" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
+          <!--          metrics-->
-            <div>
+          <span style="width: auto;display: inline-block"
+                @mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
+                @mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
+          >
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="scope.row.configs[0].state===1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="scope.row.configs[0].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <nz-tooltip :that="scope.row.configs[0]"  v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state  > 1" :type="'configs[0]'">
+            <div name="default">
               <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
             </div>
-            <span slot="reference" style="width: auto">
+          </nz-tooltip>
-              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+          <!--          logs-->
-              <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
+         <span style="width: auto;display: inline-block"
-                <span class="active-icon red-bg inline-block"></span>
+               @mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
-              </span>
+               @mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
-              <span v-else-if="scope.row.configs[0].state===1">
+           <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
-                <span class="active-icon green-bg inline-block"></span>
+           <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
-              </span>
+             <span class="active-icon red-bg inline-block"></span>
-              <span v-else-if="scope.row.configs[0].state">
+           </span>
-                <span class="active-icon gray-bg inline-block"></span>
+           <span v-else-if="scope.row.configs[1].state===1">
-              </span>
+             <span class="active-icon green-bg inline-block"></span>
-            </span>
+           </span>
-          </el-popover>
+           <span v-else-if="scope.row.configs[1].state">
-          <el-popover placement="right" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
+             <span class="active-icon gray-bg inline-block"></span>
-            <div>
+           </span>
+         </span>
+          <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
+            <div name="default">
               <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
             </div>
-            <span slot="reference" style="width: auto">
+          </nz-tooltip>
-              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
-              <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
-                <span class="active-icon red-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[1].state===1">
-                <span class="active-icon green-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[1].state">
-                <span class="active-icon gray-bg inline-block"></span>
-              </span>
-            </span>
-          </el-popover>
         </template>
         <template v-else-if="item.prop === 'enabled'">
           <span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
@@ -199,10 +196,12 @@
 <script>
 import table from '@/components/common/mixin/table'
 import alertLabel from '../../alert/alertLabel'
+import nzTooltip from '../../alert/nzTooltip'
 export default {
   name: 'endpointTable',
   components: {
-    alertLabel
+    alertLabel,
+    nzTooltip
   },
   mixins: [table],
   props: {
@@ -313,13 +312,34 @@ export default {
       return str
     },
     // label 鼠标划入
-    labelHover (item, type, loading, e) {
+    labelHover (item, type, loading, e, slow) {
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
         this.$set(item[type], 'position', position)
       }
-      this.$set(item[type], 'loading', loading)
+      if (slow) {
+        item[type].timeout = setTimeout(() => {
+          this.$set(item[type], 'loading', loading)
+        }, 200)
+      } else {
+        this.$set(item[type], 'loading', loading)
+      }
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    labelHoverConfigs (item, type, loading, e, slow) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item.configs[type], 'position', position)
+      }
+      if (slow) {
+        item.configs[type].timeout = setTimeout(() => {
+          this.$set(item.configs[type], 'loading', loading)
+        }, 200)
+      } else {
+        this.$set(item.configs[type], 'loading', loading)
+      }
       // this.$set(this.tableData,index,item);// 调用父组件
     },
     clConfigs (item) {
@@ -354,6 +374,17 @@ export default {
     border-radius: 4px;
     padding: 2px 7px;
     color: #3C92F1;
+    position: relative;
+    display: inline-block;
+  }
+  .configs-endpoint .endpointConfigsTips {
+    display: none;
+  }
+  .configs-endpoint:hover .endpointConfigsTips {
+    display: block;
+    position: absolute;
+    right: 0;
+    left: 0;
   }
   .configs-endpoint.metrics{
     color: #3C92F1;