NEZ-598 alert message 页面修改

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

@@ -118,6 +118,7 @@
         fixed="right">
         <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
         <div slot-scope="scope" class="table-operation-items">
+          <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog',scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
           <button class="table-operation-item" @click="toDeleteMessage(scope.row)"><i class="nz-icon nz-icon-delete"></i></button>
         </div>
       </el-table-column>
@@ -198,11 +199,6 @@ export default {
           prop: 'remark',
           show: false,
           minWidth: 200
-        }, {
-          label: this.$t('alert.list.state'),
-          prop: 'state',
-          show: true,
-          width: 100
         },  {
           label: this.$t('alert.startAt'),
           prop: 'startAt',
@@ -213,12 +209,7 @@ export default {
           prop: 'duration',
           show: true,
           width: 150
-        }, {
+        },
-          label: this.$t('overall.value'),
-          prop: 'current',
-          show: true,
-          width: 100
-        }
       ],
       viewAssetState: false,
       tableDataInitNum: 0
@@ -593,7 +584,7 @@ export default {
 
 </script>
 
-<style scoped>
+<style scoped lang=scss>
   .alertLabelInfo{
     border: 1px solid #ebeef5;
     border-bottom: none;

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

@@ -12,6 +12,13 @@
       :search-msg="searchMsg"
       @search="search"
     >
+      <template v-slot:top-tool-left >
+        <div v-for="(item,ind) in tablist">
+          <div class="nz-tab-item-box"   @click="getstate(ind)" :index="ind" :key="item.state">
+            <div class="nz-tab-item" :class="{active:ind==isActive}">{{item.name}}</div>
+          </div>
+        </div>
+      </template>
       <template v-slot:top-tool-right>
         <pick-time v-model="searchTime" :default-pick="12" :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"
@@ -33,6 +40,7 @@
           @edit="edit"
           @orderBy="tableDataSort"
           @reload="getTableData"         
+          @queryMessage="queryMessage"
           @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
           @toDelete="toDeleteMessage"></alert-message-table>
@@ -113,6 +121,21 @@ export default {
   mixins: [dataListMixin],
   data () {
     return {
+      tablist:[
+        {
+          state:'1',
+          name:'Active'
+        },
+        {
+          state:'2',
+          name:'Silebt'
+        },
+        {
+          state:'3',
+          name:'Expired'
+        }
+      ],
+      isActive:0,
       url: 'alert/message',
       // 导出相关
       importBox: { show: false, title: this.$t('overall.exportExcel') },
@@ -224,6 +247,59 @@ export default {
     }
   },
   methods: {
+    queryMessage (alertRule) {
+      if (!this.hasButton('alertMessage_view')) {
+        return
+      }
+      this.$refs.dataList.showBottomBox('alertMessage', alertRule)
+    },
+    getstate(ind){
+      const i =ind+1
+      // console.log(i);
+      this.isActive=ind
+      this.tools.loading = true
+      this.$get(this.url+'?state='+i+'&pageNo=1&pageSize=20').then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          // console.log(response.data);
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          this.tableData = response.data.list
+          const axiosAll = []
+          this.$nextTick(() => {
+            this.tableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels)
+              if (!this.isBuildIn(item.alertRule)) {
+                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
+                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
+              } else {
+                axiosAll.push('')
+              }
+            })
+            axios.all(axiosAll).then(res => {
+              res.forEach((item, index) => {
+                let current = []
+                const response2 = item.data
+                if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                  current = response2.data.result[0].value.map((item, i) => {
+                    if (i == 0) {
+                      return bus.computeTimezone(item)
+                    } else {
+                      return parseFloat(item).toFixed(2)
+                    }
+                  })
+                } else {
+                  current = [null, null]
+                }
+                this.tableData[index].current = current
+              })
+              this.$set(this.tableData, [...this.tableData])
+            })
+          })
+          this.deleteBox.ids = ''
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
     labelsSort (obj) {
       const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
       const labels = JSON.parse(JSON.stringify(obj))
@@ -363,7 +439,7 @@ export default {
         delete this.searchLabel.endAt
       }
       this.tools.loading = true
-      this.$get(this.url, this.searchLabel).then(response => {
+      this.$get(this.url+'?state=1', this.searchLabel).then(response => {
         this.tools.loading = false
         if (response.code == 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
@@ -595,3 +671,12 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+  .active{
+    border-bottom: 3px solid #fa901c;
+    color: #333;
+    cursor: default;
+    font-weight: bold;
+  }
+</style>