From 95926fcf6ff6c5285b4f40cd188dcbb144028822 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 25 Feb 2022 14:31:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E6=89=80=E6=9C=89=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=9A=84=20alert=E5=88=97=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/endpointTabNew.vue  | 23 ++++++++++++++++++-
 .../src/components/common/mixin/table.js      |  5 ++++
 .../common/table/alert/alertRuleTable.vue     | 18 ++++++++++++---
 .../common/table/settings/endpointTable.vue   | 18 ++++++++++++---
 .../common/table/settings/moduleTable.vue     | 18 ++++++++++++---
 .../common/table/settings/projectTable.vue    | 23 +++++++++++++++----
 .../src/components/page/alert/alertRule.vue   | 23 ++++++++++++++++++-
 .../page/monitor/endpoint/endpointList.vue    | 23 ++++++++++++++++++-
 .../page/monitor/module/moduleList.vue        | 23 ++++++++++++++++++-
 .../page/monitor/project/projectList.vue      | 23 ++++++++++++++++++-
 10 files changed, 179 insertions(+), 18 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
index e50febbe5..16ed248b0 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
@@ -110,7 +110,9 @@ export default {
         editShow: false,
         show: false
       },
-      fromBottom: true
+      fromBottom: true,
+      needAlertDaysData: true,
+      trendKey: 'endpointId'
     }
   },
   methods: {
@@ -136,6 +138,25 @@ export default {
               item.config = JSON.parse(item.config)
             })
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
           this.pageObj.total = response.data.total
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index abba627b9..5be856c43 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -1,4 +1,9 @@
+import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
+
 export default {
+  components: {
+    alertDaysInfo
+  },
   props: {
     tableData: {
       type: Array
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 13225af91..338f5ba95 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -41,9 +41,19 @@
             <i class="nz-icon nz-icon-circle" :style="{color:scope.row[item.prop].color,'font-size':'12px','margin-right':'5px'}"></i> {{scope.row[item.prop].name}}
         </span>
         <template v-else-if="item.prop === 'alertNum'">
-          <span class="link" @click="queryMessage(scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row.alertNum}}
+          <span style="cursor: pointer" @click="queryMessage(scope.row)">
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.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">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!scope.row.trendLoading"
+              :alertDaysData="scope.row.alertDaysData"
+            />
           </span>
         </template>
         <template v-else-if="item.prop === 'type'">
@@ -156,6 +166,8 @@ export default {
   },
   data () {
     return {
+      needAlertDaysData: true,
+      trendKey: 'ruleId',
       tableTitle: [
         {
           label: 'ID',
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index e81271e1d..9437c3910 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -89,9 +89,19 @@
           ></alertLabel>
         </template>
         <template v-else-if="item.prop === 'alerts'">
-          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row.alertNum}}
+          <span style="cursor: pointer"  @click="showBottomBox('endpointAlertMessage', scope.row)">
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.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">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!scope.row.trendLoading"
+              :alertDaysData="scope.row.alertDaysData"
+            />
           </span>
         </template>
         <template v-else-if="item.prop === 'configs'">
@@ -215,6 +225,8 @@ export default {
   },
   data () {
     return {
+      needAlertDaysData: true,
+      trendKey: 'endpointId',
       tableTitle: [ // 原始table列
         {
           label: 'ID',
diff --git a/nezha-fronted/src/components/common/table/settings/moduleTable.vue b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
index fff7e500e..61d83bde5 100644
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -51,9 +51,19 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          <span class="alert-num" @click="showBottomBox('moduleAlertMessage', scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row[item.prop]}}
+          <span style="cursor: pointer"  @click="showBottomBox('moduleAlertMessage', scope.row)">
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.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">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!scope.row.trendLoading"
+              :alertDaysData="scope.row.alertDaysData"
+            />
           </span>
         </template>
         <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
@@ -104,6 +114,8 @@ export default {
   },
   data () {
     return {
+      needAlertDaysData: true,
+      trendKey: 'moduleId',
       tableTitle: [ // 原始table列
         {
           label: 'ID',
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
index 2d20d3ebf..0e2cf66b1 100644
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -54,9 +54,21 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-         <span class="alert-num" @click="jumpAlertMessage(scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row[item.prop]}}
+         <span class="alert-num">
+           <span style="cursor: pointer" @click="jumpAlertMessage(scope.row)">
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.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">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!scope.row.trendLoading"
+              :alertDaysData="scope.row.alertDaysData"
+            />
+          </span>
           </span>
         </template>
         <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
@@ -96,6 +108,7 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 export default {
   name: 'projectTable',
   mixins: [table],
@@ -104,6 +117,8 @@ export default {
   },
   data () {
     return {
+      needAlertDaysData: true,
+      trendKey: 'projectId',
       tableTitle: [ // 原始table列
         {
           label: 'ID',
@@ -133,7 +148,7 @@ export default {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alertNum',
           show: true,
-          width: 100,
+          width: 120,
           sortable: 'custom'
         }
       ]
diff --git a/nezha-fronted/src/components/page/alert/alertRule.vue b/nezha-fronted/src/components/page/alert/alertRule.vue
index cf614af9c..41c8da975 100644
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -248,7 +248,9 @@ export default {
           disabled: false
         }]
       },
-      searchTime: bus.getTimezontDateRange()
+      searchTime: bus.getTimezontDateRange(),
+      needAlertDaysData: true,
+      trendKey: 'ruleId',
     }
   },
   methods: {
@@ -282,6 +284,25 @@ export default {
             }
             item.receiverShow = temp
           })
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           const globalSearchId = this.$store.getters.getGlobalSearchId
           let detailViewRightObj = ''
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 477e888a5..8cd1a2abf 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -458,7 +458,9 @@ export default {
         type: []
       },
       searchCheckBox: {},
-      endpointNzTableHeightOffset: 204
+      endpointNzTableHeightOffset: 204,
+      needAlertDaysData: true,
+      trendKey: 'endpointId'
     }
   },
   methods: {
@@ -623,6 +625,25 @@ export default {
               item.config = JSON.parse(item.config)
             })
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           const globalSearchId = this.$store.getters.getGlobalSearchId
           let detailViewRightObj = ''
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 4b50b5f9f..54e704184 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -280,7 +280,9 @@ export default {
             disabled: false
           }
         ]
-      }
+      },
+      needAlertDaysData: true,
+      trendKey: 'moduleId'
     }
   },
   methods: {
@@ -404,6 +406,25 @@ export default {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           const globalSearchId = this.$store.getters.getGlobalSearchId
           let detailViewRightObj = ''
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index 47bb4ec5e..005c9827d 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -114,7 +114,9 @@ export default {
           }
         ]
       },
-      roles: []
+      roles: [],
+      needAlertDaysData: true,
+      trendKey: 'projectId'
     }
   },
   methods: {
@@ -142,6 +144,25 @@ export default {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           if (!this.$store.state.currentProject.id) {
             this.$store.commit('currentProjectChange', response.data.list[0])
           }