feat：alertMessage 添加 info

2022-04-01 15:43:14 +08:00
parent e47e353566
commit 9c4e2a9525
9 changed files with 99 additions and 60 deletions
--- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
@@ -73,6 +73,8 @@
        font-size: 16px;
        color: $--color-text-primary;
        font-weight: 600;
+        display: flex;
+        justify-content: space-between;
        #time-line-scope{
          //float: right;
        }
@@ -93,7 +95,7 @@
            top: -14px;
          }
        }
-        .el-timeline-item:last-child .el-timeline-item__tail{
+        .el-timeline-item.last .el-timeline-item__tail{
          display: block;
          top: -100%;
        }
@@ -112,12 +114,20 @@
          margin: 0;
          padding: 10px 0;
        }
+        .el-timeline-item__node {
+          z-index: 1;
+        }
        .time-line-item-header{
          font-size: 14px;
          color: #333333;
          font-weight: 400;
        }
      }
+      .load-more-box{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
    }
    .table-no-data {
      width: 100%;
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -318,7 +318,8 @@ export default {
    return {
      alertLabelData: null,
      loading: true,
-      heightList: 0
+      heightList: 0,
+      boxWidth: 0
    }
  },
  watch: {
@@ -347,29 +348,45 @@ export default {
    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 > clientHeight / 2) {
-          return {
-            left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - this.heightList + topOffSet}px`
+        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')
          }
-        } 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`
-            }
+          console.log(dialogHeight, 'dialogHeight')
+          leftOffSet = leftOffSet - 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`
          }
        } else {
-          return {
-            left: `${position.left + position.width + leftOffSetView}px`,
-            top: `${position.top}px`
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top + topOffSet}px`
          }
        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right = (clientWidth - position.left - leftOffSetView) + 'px'
+        }
+        return labelPosition
      }
    },
    calcHeight () {
@@ -486,8 +503,10 @@ export default {
  mounted () {
    if (this.$refs.alertLabels) {
      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
    } else {
-      this.heightList = ''
+      this.heightList = 0
+      this.boxWidth = 0
    }
  },
  beforeDestroy () {
--- a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
@@ -25,6 +25,7 @@
      <div class="info-box-left">
        <chart
          ref="chart"
+          v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
          :chart-data="chartData"
          :chart-info="chartInfo"
          :panelLock="panelLock"
@@ -38,7 +39,6 @@
          :multipleTime="multipleTime"
          :isFullscreen="isFullscreen"
          :showAllData="showAllData"
-          v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
        ></chart>
        <alertMessageInfoTab
          class="alert-message-info-tab"
@@ -131,7 +131,8 @@ export default {
        this.minusTime = ''
        this.multipleTime = false
      }
-      this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
+      this.time = [startTime, endTime]
+      this.chartInfo.loaded && this.chartInfo.alertRule.type !== 3 && this.query(elements, startTime, endTime, step)
    },
    // 参数 isRefresh 标识是否是刷新操作
    getChartData (isRefresh, params) {
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -11,6 +11,7 @@
            v-if="item.key !=='alertRule'"
            :id="infoData[item.key].id"
            :that="findData2(item.key)"
+            :alertTableDialog="true"
            :type="item.key"/>
          <alertRuleInfo
            v-else
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -1,7 +1,7 @@
 <template>
  <div style="height: 100%;width: 100%">
    <div class="time-line-header">
-      {{$t('alert.relatedAlerts')}}
+      <span>{{$t('alert.relatedAlerts')}}</span>
      <el-select
        id="time-line-scope"
        v-model="scope"
@@ -21,14 +21,16 @@
        </el-option>
      </el-select>
    </div>
-    <el-timeline v-my-loading="loading" v-if="!noData">
+    <el-timeline v-my-loading="loading" v-if="!noData && timeLineData.length">
      <el-timeline-item
        v-for="(item,index) in timeLineData"
        :key="item.id"
        :class="{
          'only': timeLineData.length === 1 ,
-          'has-time': item.startAt
+          'has-time': item.startAt,
+          'last': index === timeLineData.length-1 && index !==0
        }"
+        :color="item.severity.color"
        :timestamp="item.startAt?item.startAt: ''"
        placement="top">
        <div >
@@ -54,8 +56,10 @@
          </div>
        </div>
      </el-timeline-item>
-<!--      <div @click="getTimeLineData" v-if="timeLineData.length === total">加载更多</div>-->
-<!--      <div v-else>没有更多了</div>-->
+      <div  v-if="timeLineData.length >= total">{{$t('overall.noMoreData')}}}</div>
+      <div v-else class="load-more-box">
+        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}}</el-button>
+      </div>
    </el-timeline>
    <div class="table-no-data" v-else>
      <svg class="icon" aria-hidden="true">
@@ -65,6 +69,7 @@
    </div>
    <alertLabel
      v-if="alertLabelShow"
+      :alertTableDialog="true"
      :id="alertLabelId"
      :that="alertLabelObj"
      :type="alertLabelType"
@@ -93,10 +98,12 @@ export default {
  },
  watch: {
    time: {
+      immediate: true,
      deep: true,
      handler (n) {
        if (n && n.length) {
-          this.getTimeLineData(1)
+          this.pageNo = 1
+          this.getTimeLineData()
        }
      }
    }
@@ -140,7 +147,7 @@ export default {
    }
  },
  mounted () {
-    this.getTimeLineData(1)
+    // this.getTimeLineData(1)
    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
    if (dateFormatStr) {
      this.dateFormatStr = dateFormatStr.split(' ')[0]
@@ -149,29 +156,29 @@ export default {
    }
  },
  methods: {
-    getTimeLineData (pageNo = this.pageNo) {
+    getTimeLineData () {
      this.noData = false
      this.loading = true
      const params = {
-        pageNo: pageNo,
+        pageNo: this.pageNo,
        pageSize: this.pageSize,
        scope: this.scope.join(','),
        id: this.infoData.id,
        state: '',
-        startAt: this.time[1],
-        endAt: this.time[0],
+        startAt: this.timezoneToUtcTimeStr(this.time[0] * 1000, 'YYYY-MM-DD HH:mm:ss'),
+        endAt: this.timezoneToUtcTimeStr(this.time[1] * 1000, 'YYYY-MM-DD HH:mm:ss'),
        orderBy: '-startAt'
      }
      this.$get('/alert/message/rel', params).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.total = res.data.total
-          if (pageNo == 1) {
+          if (this.pageNo == 1) {
            this.timeLineData = res.data.list
          } else {
            this.timeLineData.push(...res.data.list)
          }
-          this.disposeTime(pageNo)
+          this.disposeTime(this.pageNo)
          this.noData = false
          this.pageNo++
        } else {
@@ -186,6 +193,7 @@ export default {
      let i = (pageNo - 1) * this.pageSize
      for (i; i < this.timeLineData.length; i++) {
        const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr)
+        this.timeLineData[i].color = '#fa8'
        if (this.lastDataTime !== lastDataTime) {
          this.lastDataTime = lastDataTime
          this.timeLineData[i].startAt = lastDataTime
@@ -196,7 +204,8 @@ export default {
    },
    changeScope (value) {
      console.log(value)
-      this.getTimeLineData(1)
+      this.pageNo = 1
+      this.getTimeLineData()
    }
  }
 }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -90,7 +90,7 @@
      fullscreen
      :modal-append-to-body="false"
    >
-      <panel-chart
+      <alertMessageInfo
        :ref="'chart-fullscreen' + chartInfo.id"
        :chart-info="chartInfo"
        :from="fromRoute.alertMessage"
@@ -98,7 +98,7 @@
        :is-fullscreen="true"
        :time-range="searchTime"
        @showFullscreen="showFullscreen"
-      ></panel-chart>
+      ></alertMessageInfo>
    </el-dialog>
    <el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
               :visible.sync="dialogShowText"
@@ -131,6 +131,7 @@ import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+import alertMessageInfo from '@/components/common/alert/alertMessageInfo'
 import panelChart from '@/components/chart/panelChart'
 import lodash from 'lodash'
 import lineData from '@/components/chart/defaultLineData'
@@ -144,7 +145,8 @@ export default {
    alertMessageTable,
    alertSilenceBox,
    chart,
-    panelChart
+    panelChart,
+    alertMessageInfo
  },
  props: {
    from: String
@@ -426,9 +428,6 @@ export default {
      this.deleteBox.show = true
    },
    messageDetail (row) {
-      if (row.alertRule.type == 3) {
-        return
-      }
      this.$get('/alert/rule/' + row.alertRule.id).then(res => {
        this.currentMsg = { ...row, alertRule: { ...res.data } }
        this.$nextTick(() => {
@@ -635,8 +634,9 @@ export default {
    },
    queryDate () {
      this.chartLoading = true
-      if (this.currentMsg.alertRule.type === 1) {
-        const chartInfo = lodash.cloneDeep(lineData)
+      let chartInfo = {}
+      if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) {
+        chartInfo = lodash.cloneDeep(lineData)
        chartInfo.elements = [{}]
        if (!isNaN(this.currentMsg.alertRule.threshold)) {
          chartInfo.param.enable.thresholds = true
@@ -645,12 +645,8 @@ export default {
            color: '#d64f40'
          }]
        }
-        chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')
-        chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
-        chartInfo.unit = this.currentMsg.alertRule.unit
-        this.showFullscreen(true, chartInfo)
      } else if (this.currentMsg.alertRule.type === 2) {
-        const chartInfo = lodash.cloneDeep(logData)
+        chartInfo = lodash.cloneDeep(logData)
        chartInfo.elements = [{}]
        if (!isNaN(this.currentMsg.alertRule.threshold)) {
          chartInfo.param.enable.thresholds = true
@@ -659,11 +655,14 @@ export default {
            color: '#d64f40'
          }]
        }
-        chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
-        chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
-        chartInfo.unit = this.currentMsg.alertRule.unit
-        this.showFullscreen(true, chartInfo)
      }
+      chartInfo.id = this.currentMsg.id
+      chartInfo.name = this.currentMsg.alertRule.name
+      chartInfo.isAlertMessage = true
+      chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
+      chartInfo.elements && (chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))))
+      chartInfo.unit = this.currentMsg.alertRule.unit
+      this.showFullscreen(true, chartInfo)
    },
    exportLog ({ limit, descending }) {
      const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -101,7 +101,7 @@
        fixed="right">
        <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
        <div slot-scope="scope" class="table-operation-items">
-          <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+          <button v-if="scope.row.alertRule" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
          <el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
            <div class="table-operation-item table-operation-item--more">
              <i class="nz-icon nz-icon-more3"></i>
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -604,7 +604,7 @@ export default {
    queryDate () {
      this.chartLoading = true
      let chartInfo = {}
-      if (this.currentMsg.alertRule.type === 1) {
+      if (this.currentMsg.alertRule.type === 1  || this.currentMsg.alertRule.type === 3) {
        chartInfo = lodash.cloneDeep(lineData)
        chartInfo.elements = [{}]
        if (!isNaN(this.currentMsg.alertRule.threshold)) {
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -98,24 +98,24 @@ Vue.mixin({
    }
  },
  methods: {
-    utcTimeToTimezone: function (time) {
+    utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间  返回时间戳
      if (time) {
        return bus.UTCTimeToConfigTimezone(time)
      }
    },
-    utcTimeToTimezoneStr: function (time) {
+    utcTimeToTimezoneStr: function (time) { // 将utc时间 转为系统设者的时间  返回String
      if (time) {
        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss')
      } else {
        return '-'
      }
    },
-    timezoneToUtcTime: function (time) {
+    timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳
      if (time) {
        return bus.configTimezoneToUTCTime(time)
      }
    },
-    timezoneToUtcTimeStr: function (time, fmt) {
+    timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String
      if (!fmt) {
        fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss'
      }
@@ -123,7 +123,7 @@ Vue.mixin({
        return bus.timeFormate(this.timezoneToUtcTime(time), fmt)
      }
    },
-    timestampStr: function (time, fmt) {
+    timestampStr: function (time, fmt) { // 将utc时间 转为系统设者的时间  返回String
      const date = new Date(time)
      const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
      const dateStr = new Date(time).getTime() + localOffset