feat：添加时间轴

2022-03-31 19:07:46 +08:00
parent f42e4b90bf
commit 67b74fef67
10 changed files with 198 additions and 21 deletions
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -63,6 +63,12 @@
    position: absolute;
  }
 }
+.no-position-alert-label {
+  .alert-label.alert-label__border{
+    border: none !important;
+    position: unset;
+  }
+}
 //.alert-label::after, .alert-labelUp::after {
 //  content: '';
 //  display: block;
--- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
@@ -59,10 +59,6 @@
            overflow-y: auto;
          }
        }
-        .alert-label.alert-label__border{
-          border: none !important;
-          position: unset;
-        }
      }
    }
    .info-box-right{
@@ -71,7 +67,54 @@
      border: 1px solid #E7EAED;
      border-radius: 2px;
      box-sizing: border-box;
+      padding: 0px 20px 20px 0;
+      .time-line-header{
        padding: 20px;
+        font-size: 16px;
+        color: $--color-text-primary;
+        font-weight: 600;
+      }
+      .el-timeline{
+        height: calc(100% - 80px);
+        overflow-y: auto;
+        padding-top: 14px;
+        padding-left: 40px;
+        box-sizing: border-box;
+        .el-timeline-item{
+          padding-bottom: 24px;
+        }
+        .has-time{
+          padding-top: 36px;
+          .el-timeline-item__tail{
+            height: calc(100% + 14px);
+            top: -14px;
+          }
+        }
+        .el-timeline-item:last-child .el-timeline-item__tail{
+          display: block;
+          top: -100%;
+        }
+        .el-timeline-item:last-child .el-timeline-item__tail.only{
+          display: block;
+          top: -100%;
+        }
+        .el-timeline-item__timestamp.is-top{
+          position: absolute;
+          top: -40px;
+          left: -20px;
+          font-size: 14px;
+          color: $--color-text-regular;
+          font-weight: 600;
+          background: $--background-color-empty;
+          margin: 0;
+          padding: 10px 0;
+        }
+        .time-line-item-header{
+          font-size: 14px;
+          color: #333333;
+          font-weight: 400;
+        }
+      }
    }
    .table-no-data {
      width: 100%;
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
@@ -104,5 +104,5 @@
 .alert-message-state{
  padding: 3px 5px;
  border-radius: 4px;
-  color: $--color-text-primary;
+  color: $--color-text-label;
 }
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -41,6 +41,8 @@ $--color-text-secondary: #999998;
 $--color-text-link: #3C92F1;
 // 禁用字色
 $--color-text-disabled: #505050;
+// 标签内白色
+$--color-text-label: #505050;

 /* 4.边框色 */
 // 普通边框色
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -41,6 +41,8 @@ $--color-text-secondary: #999998;
 $--color-text-link: #3C92F1;
 // 禁用字色
 $--color-text-disabled: #FFFFFF;
+// 标签内白色
+$--color-text-label: #FFFFFF;

 /* 4.边框色 */
 // 普通边框色(覆盖element-ui内置变量)
--- a/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertDaysInfo.vue
@@ -25,7 +25,7 @@ export default {
      daysData: [],
      severityData: this.$store.getters.severityData,
      severityDataWeight: this.$store.getters.severityDataWeight,
-      dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD'
+      dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm'
    }
  },
  // watch: {
--- a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue
@@ -17,7 +17,7 @@
      @close="showFullscreen"
      class="alert-message-info-header"
    >
-      <span slot="title-icon"> active </span>
+      <span slot="title-icon" v-if="infoData['state']" style="margin-left: 5px" class="alert-message-state" :class="{'gray-bg': infoData['state'] == 3, 'red-bg': infoData['state'] == 1,'yellow-bg': infoData['state'] == 2}">{{$t(stateOptions.find(state=>state.value == infoData['state']).label)}}</span>
    </chart-screen-header>
    <!-- chart -->
    <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
@@ -42,10 +42,11 @@
        ></chart>
        <alertMessageInfoTab
          class="alert-message-info-tab"
+          :noData="tabNoData"
          :infoData="infoData" />
      </div>
      <div class="info-box-right">
-        <alertMessageInfoTimeLine />
+        <alertMessageInfoTimeLine :info-data="chartInfo" :time="time"/>
      </div>
    </div>
  </div>
@@ -55,7 +56,7 @@
 import ChartScreenHeader from '@/components/chart/ChartScreenHeader'
 import chart from '@/components/chart/chart'
 import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from '@/components/chart/chart/tools'
-import { chartType, fromRoute } from '@/components/common/js/constants'
+import {alertMessage as alertMessageConstant, chartType, fromRoute} from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
 import chartTempData from '@/components/charts/chartTempData'
@@ -63,7 +64,6 @@ import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'
 import alertMessageInfoTimeLine from '@/components/common/alert/alertMessageInfoTimeLine'
-
 export default {
  name: 'panelChart',
  components: {
@@ -96,7 +96,12 @@ export default {
      allDataLength: 0,
      severityData: this.$store.getters.severityData,
      severityDataWeight: this.$store.getters.severityDataWeight,
-      infoData: {}
+      infoData: {},
+      timeLineData: [],
+      tabNoData: false,
+      timeLineNoData: false,
+      time: [],
+      stateOptions: alertMessageConstant.states
    }
  },
  computed: {
@@ -152,6 +157,7 @@ export default {
      const step = bus.getStep(startTime, endTime)
      startTime = this.$stringTimeParseToUnix(startTime)
      endTime = this.$stringTimeParseToUnix(endTime)
+      this.time = [startTime, endTime]
      const elements = this.chartInfo.elements || []
      this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
    },
@@ -311,13 +317,13 @@ export default {
      this.$emit('showFullscreen', show, this.chartInfo)
    },
    getAlertMessageInfo () {
-      this.nodata = false
+      this.tabNoData = false
      this.$get('/alert/message/' + this.chartInfo.id).then(res => {
        if (res.code === 200) {
          this.infoData = res.data
-          this.nodata = false
+          this.tabNoData = false
        } else {
-          this.nodata = true
+          this.tabNoData = true
        }
      })
    }
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
@@ -5,7 +5,7 @@
        <div v-if="item.key === 'detail' && activeName === 'detail'">
          <alert-message-info-detail :info-data="infoData"/>
        </div>
-        <div v-else-if="(activeName === 'alertRule' || activeName === 'dc' || activeName === 'asset' || activeName === 'project' || activeName === 'module' || activeName === 'endpoint') && infoData[item.key]">
+        <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
 <!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
          <alertLabel
            v-if="item.key !=='alertRule'"
@@ -52,6 +52,10 @@ export default {
  props: {
    infoData: {
      type: Object
+    },
+    nodata: {
+      type: Boolean,
+      default: false
    }
  },
  computed: {
@@ -62,7 +66,6 @@ export default {
  data () {
    return {
      activeName: 'detail',
-      nodata: false,
      cardNames: [{
        key: 'detail',
        label: this.$t('overall.detail')
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -1,20 +1,135 @@
 <template>
+  <div style="height: 100%;width: 100%">
+    <div class="time-line-header">
+      {{$t('alert.relatedAlerts')}}
+    </div>
+    <el-timeline v-my-loading="loading" v-if="!noData">
+      <el-timeline-item
+        v-for="(item,index) in timeLineData"
+        :key="item.id"
+        :class="{
+          'only': timeLineData.length === 1 ,
+          'has-time': item.startAt
+        }"
+        :timestamp="item.startAt?item.startAt: ''"
+        placement="top">
+        <div >
+          <div class='margin-b-10'>
+            <span slot="title-icon" v-if="item['state']" style="margin-left: 5px" class="alert-message-state" :class="{'gray-bg': item['state'] == 3, 'red-bg': item['state'] == 1,'yellow-bg': item['state'] == 2}">{{$t(stateOptions.find(state=>state.value == item['state']).label)}}</span>
+            <span class="time-line-item-header"> {{item.alertRule.name}}</span>
+          </div>
          <div>
-
+          <span v-for="(label, i) in labelsSort(JSON.parse(item.labels))" :key="i">
+            <span
+              @mouseenter="labelHover(item, label.label, true, true, $event)"
+              @mouseleave="labelHover(item, label.label, false, true,)">
+              <nz-alert-tag
+                v-if="label.label !== 'alertname' && label.label !== 'severity'" :key="label.label" :cursor-point="tagType(label.label) !== 'info'"
+                :label="label.label"
+                :type="tagType(label.label)"
+                style="margin: 5px 0 5px 5px;"
+              >
+               {{label.value}}
+              </nz-alert-tag>
+            </span>
+          </span>
+          </div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+    <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+    ></alertLabel>
  </div>
 </template>

 <script>
+import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
+import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+
 export default {
  name: 'alertMessageInfoTimeLine',
  props: {
    infoData: {
      type: Object
+    },
+    time: {}
+  },
+  mixins: [alertMessageLabelMixin, alertLabelMixin],
+  computed: {
+    severityData () {
+      return this.$store.getters.severityData
    }
  },
  data () {
    return {
-
+      pageNo: 1,
+      pageSize: 20,
+      scope: ['asset', 'datacenter', 'project', 'module', 'endpoint', 'alertrule', 'hash '],
+      timeLineData: [],
+      lastDataTime: '',
+      loading: false,
+      dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm',
+      noData: false,
+      stateOptions: alertMessageConstant.states
+    }
+  },
+  mounted () {
+    this.getTimeLineData(1)
+    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
+    if (dateFormatStr) {
+      this.dateFormatStr = dateFormatStr.split(' ')[0]
+    } else {
+      this.dateFormatStr = 'YYYY-MM-DD'
+    }
+  },
+  methods: {
+    getTimeLineData (pageNo) {
+      this.noData = false
+      this.loading = true
+      const params = {
+        pageNo: pageNo,
+        pageSize: this.pageSize,
+        scope: this.scope.join(','),
+        id: this.infoData.id,
+        state: '',
+        startAt: this.time[1],
+        endAt: this.time[0],
+        orderBy: '-startAt'
+      }
+      this.$get('/alert/message/rel', params).then(res => {
+        this.loading = false
+        if (res.code === 200) {
+          if (pageNo == 1) {
+            this.timeLineData = res.data.list
+          } else {
+            this.timeLineData.push(...res.data.list)
+          }
+          this.disposeTime(pageNo)
+          this.noData = false
+        } else {
+          this.noData = true
+        }
+      }).catch(() => {
+        this.loading = false
+        this.noData = true
+      })
+    },
+    disposeTime (pageNo) {
+      let i = (pageNo - 1) * this.pageSize
+      for (i; i < this.timeLineData.length; i++) {
+        const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr)
+        if (this.lastDataTime !== lastDataTime) {
+          this.lastDataTime = lastDataTime
+          this.timeLineData[i].startAt = lastDataTime
+        } else {
+          this.timeLineData[i].startAt = ''
+        }
+      }
    }
  }
 }
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -86,7 +86,7 @@
          </span>
          </template>
          <span v-else-if="item.prop === 'state'">
-            <span class="alert-message-state" :class="{'green-bg': scope.row['state'] == 3, 'red-bg': scope.row['state'] == 1,'yellow-bg': scope.row['state'] == 2}">
+            <span class="alert-message-state" :class="{'gray-bg': scope.row['state'] == 3, 'red-bg': scope.row['state'] == 1,'yellow-bg': scope.row['state'] == 2}">
              {{$t(stateOptions.find(state=>state.value == scope.row['state']).label)}}
            </span>
          </span>