feat： 所有表格的 alert列调整

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

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

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',

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',

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',

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'
         }
       ]

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 = ''

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 = ''

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 = ''

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])
           }