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

<template>
  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-loading="loading" ref="alertLabels">
    <div class="alert-rule-info" >
      <div class="alert-rule-box">
        <div class="alert-rule-title">ID</div>
        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.name')}}</div>
        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.type')}}</div>
        <div class="alert-rule-value">
          <span v-if="alertRuleData.type === 1">
            {{$t('project.metrics.metrics')}}
          </span>
          <span v-else-if="alertRuleData.type === 2">
            {{$t('overall.logs')}}
          </span>
          <span v-else-if="alertRuleData.type === 3">SNMP trap</span>
          <span v-else>--</span>
        </div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.severity')}}</div>
        <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
        <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="severity-info" style='justify-content: space-between'>
              <div class="severity-name">{{$t('overall.result.total')}}</div>
              <div class="severity-value">{{alertRuleData.alertNum}}</div>
            </div>
          </div>
          <alertDaysInfo
            v-show="!trendLoading"
            :alertDaysData="alertDaysData"
          />
        </div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
        <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">{{$t('alert.state')}}</div>
        <div class="alert-rule-value" style="margin-left: 3px">
          <div v-if="alertRuleData.state === 1">
            <i class="active-icon green-bg inline-block"></i>
            {{ $t('overall.enabled') }}
          </div>
          <div v-else-if="alertRuleData.state === 0">
            <i class="active-icon gray-bg inline-block"></i>
            {{ $t('overall.disabled') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chartDataFormat from '../../charts/chartDataFormat'
import trendMixins from '@/components/common/alert/trendMixins'
export default {
  name: 'alert-rule-info',
  mixins: [trendMixins],
  props: {
    id: {},
    messageLoad: {},
    detailList: Boolean,
    that: {},
    severityData: Array
  },
  data () {
    return {
      loading: true,
      alertRuleData: '',
      severityColor: ''
    }
  },
  components: {

  },
  computed: {
    calcPosition () {
      return function (position) {
        if (!position) {
          return {
            left: '0px',
            top: '0px'
          }
        }
        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
        // const windowWidth = window.innerWidth
        const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
        const windowHeight = window.innerHeight
        const leftOffSetView = this.detailList ? -80 : 10
        if (position.top > windowHeight / 2) {
          return {
            left: `${position.left + position.width + leftOffSetView}px`,
            top: `${position.top - boxHeight}px`
          }
        } else {
          return {
            left: `${position.left + position.width + leftOffSetView}px`,
            top: `${position.top}px`
          }
        }
      }
    }
  },
  methods: {
    formatThreshold (value, unit) {
      const unitMethod = chartDataFormat.getUnit(unit)
      if (unitMethod && value) {
        return unitMethod.compute(value, null, 2)
      } else {
        return value
      }
    },
    trbShotShow () {
      this.$emit('showText')
    },
    severityDataColor () {
      this.severityData.map(item => {
        this.severityColor = item.color
      })
    }
  },
  mounted () {
    this.$get('/alert/rule/' + this.id).then((res) => {
      if (res.msg === 'success') {
        this.loading = false
        this.severityDataColor()
        this.alertRuleData = res.data
        const weekDays = this.getWeeksTime()
        if (this.trendTimer) {
          clearTimeout(this.trendTimer)
          this.trendTimer = null
        }
        this.trendTimer = setTimeout(() => {
          this.trendLoading = true
          const params = {
            type: 'total',
            dimension: 'priority',
            step: 'd'
          }
          params['rule' + 'Id'] = this.id
          this.$get('/stat/alertMessage/trend', params).then((res) => {
            if (!res.data) {
              return
            }
            const alertDaysData = res.data.result ? res.data.result[0].values : []
            const newWeekDays = JSON.parse(JSON.stringify(weekDays))
            alertDaysData.forEach(item => {
              item.values.forEach(time => {
                const findItem = newWeekDays.find(days => days.time == time[0])
                if (findItem) {
                  findItem[item.metric.priority] = time[1]
                }
              })
            })
            setTimeout(() => {
              this.alertDaysData = newWeekDays
              this.trendLoading = false
            })
          })
        })
      } else {
        this.$message.error(res.msg)
      }
    })
  }
}

</script>