NEZ-1618 feat： alert message 列表页面修改

nezha-fronted/src/assets/css/common.scss

@@ -73,6 +73,9 @@
 .green-bg {
   background-color:$--color-success !important;
 }
+.yellow-bg {
+  background-color:$--color-silence !important;
+}
 .gray-bg {
   background-color: $--color-suspended !important;
 }

nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss

@@ -101,3 +101,8 @@
 .nz-message .el-textarea textarea{
   height: 108px !important;
 }
+.alert-message-state{
+  padding: 3px 5px;
+  border-radius: 4px;
+  color: $--color-text-primary;
+}

nezha-fronted/src/assets/css/themes/theme-dark.scss

@@ -69,6 +69,8 @@ $--color-info: #999998;
 $--color-suspended: #9e9c98;
 // 监控色
 $--color-monitor: #98AEC5;
+// silence
+$--color-silence: #FFC107;
 
 /* 6.table */
 // 表头字色

nezha-fronted/src/assets/css/themes/theme-light.scss

@@ -69,6 +69,8 @@ $--color-info: #999998;
 $--color-suspended: #9e9c98;
 // 监控色
 $--color-monitor: #98AEC5;
+// sliences
+$--color-silence: #FFC107;
 
 /* 6.table */
 // 表头字色

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

@@ -19,7 +19,7 @@
         <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 100px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
-        <pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTimeHeader" :default-pick="8" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
       </template>
       <template v-slot>
         <alertMessageTable
@@ -230,7 +230,7 @@ export default {
       sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
       legend: [],
       searchTime: [],
-      searchTimeHeader: [],
+      searchTimeHeader: [bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 24)), bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))],
       searchTimeSelect: bus.getTimezontDateRange(),
       currentMsg: {},
       chartUnit: 5,
@@ -296,7 +296,11 @@ export default {
       }
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (this.state) {
         this.$set(this.searchLabel, 'state', this.state)
+      } else {
+        delete this.searchLabel.state
+      }
       if (this.searchTimeHeader && this.searchTimeHeader.length > 1) {
         this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTimeHeader[0]))
         this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTimeHeader[1]))
@@ -305,10 +309,10 @@ export default {
         delete this.searchLabel.endAt
       }
       this.tools.loading = true
-      if (state) {
+      // if (state) {
-        delete this.searchLabel.startAt
+      //   delete this.searchLabel.startAt
-        delete this.searchLabel.endAt
+      //   delete this.searchLabel.endAt
-      }
+      // }
       if (this.from === fromRoute.module) {
         this.searchLabel.moduleIds = this.obj.id
       } else if (this.from === fromRoute.endpoint) {
@@ -401,6 +405,15 @@ export default {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
         this.$nextTick(() => {
           this.searchTime = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
+          this.$store.dispatch('dispatchPanelTime', {
+            time: this.searchTime ,
+            nowTimeType: {
+              id: 4,
+              text: this.$t('dashboard.panel.lastOneHour'),
+              type: 'hour',
+              value: 1
+            }
+          })
           this.queryDate()
         })
       })

nezha-fronted/src/components/common/js/constants.js

@@ -202,6 +202,7 @@ export const alertMessage = {
     { value: 'P3', label: i18n.t('alert.config.P3') }
   ],
   states: [
+    { value: '', label: i18n.t('overall.all') },
     { value: '1', label: i18n.t('overall.active') },
     { value: '2', label: i18n.t('overall.silence') },
     { value: '3', label: i18n.t('alert.list.expired') }

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -83,9 +83,10 @@
             </span>
           </span>
           </template>
-          <span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
+          <span v-else-if="item.prop === 'state'">
-            {{scope.row['state'] == 1 ? "Pending" : ""}}
+            <span class="alert-message-state" :class="{'green-bg': scope.row['state'] == 3, 'red-bg': scope.row['state'] == 1,'yellow-bg': scope.row['state'] == 2}">
-            {{scope.row['state'] == 2 ? "Expired" : ""}}
+              {{$t(stateOptions.find(state=>state.value == scope.row['state']).label)}}
+            </span>
           </span>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
           <template v-else>-</template>
@@ -141,6 +142,7 @@ import chartDataFormat from '../../../charts/chartDataFormat'
 import alertRuleInfo from '../../alert/alertRuleInfo'
 import alertLabel from '../../alert/alertLabel'
 import { calcDurationByStringTimeB } from '../../js/tools'
+import {alertMessage as alertMessageConstant} from "@/components/common/js/constants";
 export default {
   name: 'alertMessageTable',
   components: {
@@ -166,7 +168,7 @@ export default {
       /* 二级列表相关 */
       tabList: [], // 二级列表的标签
       tabDetailList: [], // 多个详情
-
+      stateOptions: alertMessageConstant.states,
       // 详情相关
       graphShow: false,
       chartDatas: [],
@@ -178,6 +180,7 @@ export default {
       chartUnit: 5,
       severityData: [],
       tableTitle: [
+
         {
           label: 'ID',
           prop: 'id',
@@ -213,6 +216,12 @@ export default {
           prop: 'description',
           show: true,
           minWidth: 200
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 100,
+          sortable: 'custom'
         }, {
           label: this.$t('alert.startAt'),
           prop: 'startAt',

nezha-fronted/src/components/common/timePicker.vue

@@ -305,6 +305,7 @@ export default {
           const showTime = this.timeData.find(item => item.id == n)
           if (showTime) {
             this.showTime = Object.assign({}, showTime)
+            this.searchTime = this.$parent.searchTime
           }
           if (this.showEmpty && this.defaultPick === 12) {
             this.searchTime = []

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -18,7 +18,7 @@
         <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
-        <pick-time v-model="searchTime" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTime" :default-pick="8" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                 type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
@@ -192,7 +192,7 @@ export default {
       chartDatas: [],
       sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
       legend: [],
-      searchTime: [],
+      searchTime: [bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 24)), bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))],
       searchTimeDialog: [],
       searchTimeSelect: bus.getTimezontDateRange(),
       currentMsg: {},
@@ -560,6 +560,15 @@ export default {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
         this.$nextTick(() => {
           this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
+          this.$store.dispatch('dispatchPanelTime', {
+            time: this.searchTimeDialog,
+            nowTimeType: {
+              id: 4,
+              text: this.$t('dashboard.panel.lastOneHour'),
+              type: 'hour',
+              value: 1
+            }
+          })
           this.queryDate()
         })
       })
@@ -731,7 +740,11 @@ export default {
       }
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (this.state) {
         this.$set(this.searchLabel, 'state', this.state)
+      } else {
+        delete this.searchLabel.state
+      }
       if (this.searchTime && this.searchTime.length > 1) {
         this.$set(this.searchLabel, 'startAt', bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTime[0])), 'YYYY-MM-DD HH:mm:ss'))
         this.$set(this.searchLabel, 'endAt', bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTime[1])), 'YYYY-MM-DD HH:mm:ss'))
@@ -745,10 +758,10 @@ export default {
         delete this.searchLabel.statistics
       } */
       this.tools.loading = true
-      if (state) {
+      // if (state) {
-        delete this.searchLabel.startAt
+      //   delete this.searchLabel.startAt
-        delete this.searchLabel.endAt
+      //   delete this.searchLabel.endAt
-      }
+      // }
       const param = {
         ...this.searchLabel,
         ...this.searchCheckBox