NEZ-2014 feat : agent 列表页面 state 列增加 hover 提示框

2022-07-11 16:49:29 +08:00
parent aded0eb261
commit b34b28ed7a
4 changed files with 236 additions and 3 deletions
--- a/nezha-fronted/src/assets/css/components/common/alert/alertStateInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertStateInfo.scss
@@ -0,0 +1,44 @@
+.alert-state-info{
+    position: fixed;
+    background-color: $--background-color-empty;
+    z-index: 3000;
+    border-radius: 4px;
+    box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
+    padding: 10px 15px;
+    .alert-label-header-title{
+    padding: 0px;
+    padding-bottom: 10px;
+    border-bottom: 0px !important;
+    font-size: 14px;
+    .alert-label-header-text{
+        font-weight: normal;
+        padding-left: 10px;
+    }
+    }
+    .red-bg{
+        background-color: red;
+    }
+    .green-bg{
+        background-color: green;
+    }
+    .alert-label-box{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+    .alert-label-value{
+        height: 26px;
+        font-size: 14px;
+        color: $--color-text-primary;
+        letter-spacing: 0;
+        line-height: 23px;
+      }
+    .active-icon{
+        margin-top: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+        margin-right: 5px;
+    }
+}
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -3,6 +3,7 @@
@import './charts/chart-list.scss';
@import './cli/webSSH.scss';
@import './common/alert/alertLabel.scss';
+@import './common/alert/alertStateInfo.scss';
@import './common/alert/alertRuleInfo.scss';
@import './common/alert/selectAlertSilence.scss';
@import './common/alert/alertMessageInfo.scss';
--- a/nezha-fronted/src/components/common/alert/alertStateInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertStateInfo.vue
@@ -0,0 +1,161 @@
+<template>
+  <div
+    :class="calcHeight(that.position, that)"
+    :style="calcPosition(that.position, that)"
+    class="alert-state-info"
+    ref="alertLabels"
+  >
+  <div v-if="that.type === 'agent'">
+      <!-- v-my-loading="loading"> -->
+      <!-- title -->
+      <div class="alert-label-header-title">
+        <span>
+            {{$t('overall.version')}} :
+        </span>
+        <span class="alert-label-header-text">
+            {{ that && that.version ? that.version : "--" }}
+        </span>
+      </div>
+      <!-- body -->
+      <div class="alert-label-box" v-if="that.auth">
+        <span :class="that.auth ? 'green-bg' : 'red-bg'" class="active-icon"></span>
+        <span class="alert-label-value">{{$t('overall.auth')}}</span>
+      </div>
+       <div class="alert-label-box" v-if="that.prometheus">
+        <span :class="{'green-bg': that.prometheus == 'UP','red-bg': that.prometheus == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">{{$t('dashboard.overview.mapTooltip.prometheus')}}</span>
+      </div>
+       <div class="alert-label-box" v-if="that.cortex">
+        <span :class="{'green-bg': that.cortex == 'UP','red-bg': that.cortex == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">{{$t('overall.cortex')}}</span>
+      </div>
+       <div class="alert-label-box" v-if="that.loki">
+        <span :class="{'green-bg': that.loki == 'UP','red-bg': that.loki == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">{{$t('overall.loki')}}</span>
+      </div>
+      <div class="alert-label-box" v-if="that.snmp_exporter">
+        <span :class="{'green-bg': that.snmp_exporter == 'UP','red-bg': that.snmp_exporter == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">{{$t('overall.snmp_exporter')}}</span>
+      </div>
+      <div class="alert-label-box" v-if="that.blackbox_exporter">
+        <span :class="{'green-bg': that.blackbox_exporter == 'UP','red-bg': that.blackbox_exporter == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">{{$t('overall.blackbox_exporter')}}</span>
+      </div>
+  </div>
+  </div>
+</template>
+
+<script>
+import trendMixin from './trendMixins'
+
+export default {
+  name: 'alertLabel',
+  mixins: [trendMixin],
+  props: {
+    id: {},
+    type: {},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true,
+      heightList: 0,
+      boxWidth: 0
+    }
+  },
+  watch: {
+    that: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+      }
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
+          }
+          const dialogHeight = dialog.getBoundingClientRect()
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            // top: `${position.top - this.heightList - topOffSetView}px`
+            top: `${position.top - this.heightList - topOffSetView + position.height / 2}px`
+          }
+        } else {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            // top: `${position.top + topOffSet}px`
+            top: `${position.top + position.height / 2}px`
+          }
+        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView - position.width * 3.5 + 'px'
+        }
+        return labelPosition
+      }
+    },
+    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'
+        }
+      }
+    }
+  },
+  mounted () {
+    if (this.$refs.alertLabels) {
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+    } else {
+      this.heightList = 0
+      this.boxWidth = 0
+    }
+  }
+}
+</script>
+<style>
+</style>
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
  <el-table
    id="roleTable"
    ref="dataTable"
@@ -43,12 +44,13 @@
        <span v-else-if="item.prop === 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
        <span v-else-if="item.prop === 'ts'">{{scope.row[item.prop]?momentTz(scope.row[item.prop]):'-'}}</span>
        <span v-else-if="item.prop === 'status'">
-          <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200">
-            <div slot="reference" style="width: 60px">
+          <!-- <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200"> -->
+            <div slot="reference" style="width: 60px" @mouseenter="labelHover(JSON.parse(scope.row.statusInfo), 'agent', true, $event)"
+             @mouseleave="labelHover(JSON.parse(scope.row.statusInfo), 'agent', false)">
              <span :class="{'active-icon green-bg':scope.row[item.prop] == '1','active-icon red-bg':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></span>
              <span>{{scope.row[item.prop] == '1' ? 'UP' : 'Down'}}</span>
            </div>
-          </el-popover>
+          <!-- </el-popover> -->
        </span>
        <template v-else-if="item.prop === 'name'">
            <div class="document-copy-block">
@@ -96,21 +98,34 @@
      <div v-else>&nbsp;</div>
    </template>
  </el-table>
+   <alertStateInfo
+      v-if="alertLabelShow"
+      :that="alertLabelObj"
+      :type="agent"
+      :detail-list="true"
+    ></alertStateInfo>
+  </div>
 </template>

 <script>
 import bus from '@/libs/bus'
 import table from '@/components/common/mixin/table'
 import { agent } from '@/components/common/js/constants'
+import alertStateInfo from '@/components/common/alert/alertStateInfo'
 export default {
  name: 'agentTable',
  props: {
    loading: Boolean
  },
  mixins: [table],
+  components: {
+    alertStateInfo
+  },
  data () {
    return {
      agent: agent,
+      alertLabelShow: false,
+      alertLabelObj: {},
      tableTitle: [
        {
          label: 'ID',
@@ -184,6 +199,18 @@ export default {
    },
    computeTimezoneTime (time) {
      return bus.computeTimezoneTime(time)
+    },
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+        this.$set(item, 'type', type)
+        this.alertLabelObj = item
+      }
+      this.$set(item, 'loading', loading)
+      this.alertLabelShow = loading
    }
  }
 }