From 677e14a7a9e305d859cb7b9c38256ced9163b25b Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 2 Mar 2022 16:05:27 +0800
Subject: [PATCH] =?UTF-8?q?=20NEZ-1618=20feat=EF=BC=9A=20alert=20message?=
 =?UTF-8?q?=20=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      |  3 +++
 .../common/table/alert/alertMessageTable.scss |  5 ++++
 .../src/assets/css/themes/theme-dark.scss     |  2 ++
 .../src/assets/css/themes/theme-light.scss    |  2 ++
 .../bottomBox/tabs/alertMessageTabNew.vue     | 27 ++++++++++++++-----
 .../src/components/common/js/constants.js     |  1 +
 .../common/table/alert/alertMessageTable.vue  | 19 +++++++++----
 .../src/components/common/timePicker.vue      |  1 +
 .../components/page/alert/alertMessage.vue    | 27 ++++++++++++++-----
 9 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index b66e76bf4..2bd0c8f84 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/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;
 }
diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
index e79e19333..5c380bfa0 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/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;
+}
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 95bdc1a69..11ef03a7e 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/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 */
 // 表头字色
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 413cd8ff3..8ceb5e38a 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/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 */
 // 表头字色
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
index 611c9ea88..ecfedb583 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/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)
-      this.$set(this.searchLabel, 'state', this.state)
+      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) {
-        delete this.searchLabel.startAt
-        delete this.searchLabel.endAt
-      }
+      // if (state) {
+      //   delete this.searchLabel.startAt
+      //   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()
         })
       })
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 7538d06fc..7601557a2 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/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') }
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 14ba44e12..a95329d85 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -83,10 +83,11 @@
             </span>
           </span>
           </template>
-          <span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
-            {{scope.row['state'] == 1 ? "Pending" : ""}}
-            {{scope.row['state'] == 2 ? "Expired" : ""}}
-        </span>
+          <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}">
+              {{$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>
         </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',
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 15a2c5ee3..88d10e969 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/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 = []
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 216719baa..d8c8165e8 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/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)
-      this.$set(this.searchLabel, 'state', this.state)
+      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) {
-        delete this.searchLabel.startAt
-        delete this.searchLabel.endAt
-      }
+      // if (state) {
+      //   delete this.searchLabel.startAt
+      //   delete this.searchLabel.endAt
+      // }
       const param = {
         ...this.searchLabel,
         ...this.searchCheckBox