feat: alertSilences 二级列表页面

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

@@ -62,6 +62,8 @@
         <scrape-endpoint v-if="from === fromRoute.agent && targetTab === 'agent'" :from="from" :obj="obj" :tabs="tabs.agent" @changeTab="changeTab" :targetTab.sync="targetTab"></scrape-endpoint>
         <!-- ipam -->
         <ip-details v-if="from === fromRoute.ipam && targetTab === 'ipam'" :from="from" :obj="obj" :tabs="tabs.ipam" @changeTab="changeTab" :targetTab.sync="targetTab"></ip-details>
+        <!--alertRule Tab-->
+        <alertMessageTabNew v-if="from === fromRoute.alertSilence && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
       </div>
     </div>
   </div>
@@ -253,6 +255,9 @@ export default {
         ],
         ipam: [
           { prop: 'ipam', name: this.$t('config.ipam.ipDetails'), active: true }
+        ],
+        alertSilence: [
+          { prop: 'alertMessageTab', name: this.$t('config.ipam.alertSilence'), active: true }
         ]
       }
     }

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

@@ -170,6 +170,7 @@ export default {
     return {
       stateOptions: alertMessageConstant.states,
       url: 'alert/message',
+      alertSilenceUrl: '',
       tableId: 'alertMessageModule', // 需要分页的table的id，用于记录每页数量
       state: '1',
       blankSilenceObject: {
@@ -285,7 +286,14 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(response => {
+        let url = ''
+        if (this.from === fromRoute.alertSilence) {
+          this.alertSilenceUrl = `/alert/silence/${this.obj.id}/rel`
+          url = this.alertSilenceUrl
+        } else {
+          url = this.url
+        }
+        this.$delete(url + '?ids=' + row.id + '&state=' + this.state).then(response => {
           if (response.code === 200) {
             self.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -331,7 +339,14 @@ export default {
       } else if (this.from === fromRoute.dc) {
         this.searchLabel.dcIds = this.obj.id
       }
-      this.$get(this.url, this.searchLabel).then(response => {
+      let url = ''
+      if (this.from === fromRoute.alertSilence) {
+        this.alertSilenceUrl = `/alert/silence/${this.obj.id}/rel`
+        url = this.alertSilenceUrl
+      } else {
+        url = this.url
+      }
+      this.$get(url, this.searchLabel).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
@@ -430,7 +445,14 @@ export default {
     deleteMessage () {
       this.$refs.remarkForm.validate(valid => {
         if (valid) {
-          this.$put(this.url, this.deleteBox).then(res => {
+          let url = ''
+          if (this.from === fromRoute.alertSilence) {
+            this.alertSilenceUrl = `/alert/silence/${this.obj.id}/rel`
+            url = this.alertSilenceUrl
+          } else {
+            url = this.url
+          }
+          this.$put(url, this.deleteBox).then(res => {
             if (res.code === 200) {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
               this.deleteBox.ids = []

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

@@ -80,13 +80,14 @@
       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--disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>
+<!--        <button :class="{'table-operation-item&#45;&#45;disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>-->
+        <button class="table-operation-item"  @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
         <el-dropdown size="medium" v-has="['alertSilence_expire', 'alertSilence_edit']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-<!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
+            <el-dropdown-item :command="['edit', scope.row]" :class="{'table-operation-item--disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>