NEZ-699：增加告警静默一键配置功能

2021-06-01 14:26:09 +08:00
parent 80364781c2
commit 2ee081df1a
27 changed files with 655 additions and 22 deletions
--- a/nezha-fronted/src/assets/css/font/iconfont.ttf
+++ b/nezha-fronted/src/assets/css/font/iconfont.ttf
--- a/nezha-fronted/src/assets/css/font/iconfont.woff
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff
--- a/nezha-fronted/src/assets/css/font/iconfont.woff2
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff2
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1622444713388') format('woff2'),
-  url('./font/iconfont.woff?t=1622444713388') format('woff'),
-  url('./font/iconfont.ttf?t=1622444713388') format('truetype');
+  src: url('./font/iconfont.woff2?t=1622511827153') format('woff2'),
+  url('./font/iconfont.woff?t=1622511827153') format('woff'),
+  url('./font/iconfont.ttf?t=1622511827153') format('truetype');
 }

 .nz-icon {
@@ -13,6 +13,14 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.nz-icon-fast-silence:before {
+  content: "\e64e";
+}
+
+.nz-icon-mute:before {
+  content: "\e63e";
+}
+
 .nz-icon-guide:before {
  content: "\e669";
 }
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -2182,3 +2182,6 @@ li{
  border-color: $global-text-color-active;
  background-color: $global-text-color-active;
 }
+.nz-dialog.silence-box .el-dialog__body{
+  padding-bottom: 0;
+}
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
@@ -341,7 +341,6 @@ export default {
      if (canvas && canvasclone) {
        const image = new Image()
        image.src = canvas.toDataURL()
-        // console.log('clone-image',image);
        const ctxClone = canvasclone.getContext('2d')
        // ctxClone.drawImage(image,0,0);
        image.onload = function () {
--- a/nezha-fronted/src/components/common/dialog/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/dialog/alertSilenceBox.vue
@@ -0,0 +1,444 @@
+<template>
+  <div class="right-box right-box-alert-config" style="height: 600px;position: unset;width: auto;box-shadow: none;">
+    <!-- begin--表单-->
+    <div class="right-box-form-box right-box__container" style="padding: 0;height: 100%;">
+      <el-form class="right-box-form right-box-form-left" :model="editAlertSilence" label-position="top"
+               label-width="120px" :rules="rules" ref="alertSilenceForm" style="width: calc(100% - 20px);">
+        <el-form-item :label='$t("alert.silence.name")' prop="name" class="range-name">
+          <el-input
+            maxlength="64" show-word-limit
+            :placeholder="''"
+            size="small"
+            v-model="editAlertSilence.name">
+          </el-input>
+        </el-form-item>
+        <el-form-item :label='$t("alert.silence.time")' prop="time" class="range-time">
+          <div>
+            <el-radio-group v-model="rangeTime" size="small" @change="rangeTimeChange">
+              <el-radio-button label="1">{{ $t("overall.oneHour") }}</el-radio-button>
+              <el-radio-button label="2">{{ $t("overall.twoHour") }}</el-radio-button>
+              <el-radio-button label="6">{{ $t("overall.sixHour") }}</el-radio-button>
+              <el-radio-button label="12">{{ $t("overall.twelveHour") }}</el-radio-button>
+              <el-radio-button label="24">{{ $t("overall.oneDay") }}</el-radio-button>
+              <el-radio-button label="48">{{ $t("overall.twoDay") }}</el-radio-button>
+              <el-radio-button label="168">{{ $t("overall.week") }}</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="datepicker">
+            <div class="datepicker-box">
+              <span class="datepicker-title">{{ $t("overall.startTime") }}</span>
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
+                              format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
+                              type="datetime"
+                              :clearable="false"
+                              popper-class="panel-time-picker-popper"
+                              :placeholder="$t('dashboard.panel.startTime')"
+                              align="right"
+              >
+              </my-date-picker>
+            </div>
+            <div class="datepicker-box">
+              <span class="datepicker-title">{{ $t("overall.endTime") }}</span>
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
+                              format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
+                              type="datetime"
+                              :clearable="false"
+                              popper-class="panel-time-picker-popper"
+                              :placeholder="$t('dashboard.panel.startTime')"
+                              align="right"
+              >
+              </my-date-picker>
+            </div>
+            <!--( :range-separator="")-->
+          </div>
+        </el-form-item>
+
+        <el-form-item :label='$t("alert.silence.matchers")' prop="matchers" class="matchers">
+          <div v-for="(item, index) in editAlertSilence.matchers" :key="index" class="param-box-row">
+            <el-form-item class="param-box-row-key" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" :prop="'matchers.' + index + '.name'">
+              <el-autocomplete
+                class="inline-input silence-matchers-key"
+                placeholder="key"
+                size="mini"
+                v-model="item.name"
+                :fetch-suggestions="querySearch"
+                @select="handleSelect"
+              ></el-autocomplete>
+            </el-form-item>
+            <span class="param-box-row-eq">=</span>
+            <el-form-item class="param-box-row-value" :prop="'matchers.' + index + '.value'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" >
+              <el-input placeholder="value" size="mini" v-model="item.value"  class="silence-matchers-value"></el-input>
+              <el-checkbox class="silence-matchers-regex" v-model="item.regex" :true-label="1" :false-label="0" >Regex</el-checkbox>
+            </el-form-item>
+            <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+          </div>
+          <div style="text-align: center;" class="">
+               <span id="module-add-label" type="button" @click="addmatchers" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">
+              <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
+            </span>
+          </div>
+        </el-form-item>
+
+        <el-form-item :label='$t("alert.silence.remark")' prop="remark" class="range-time">
+          <el-input
+            type="textarea"
+            :placeholder="$t('alert.description')"
+            v-model="editAlertSilence.remark"
+            maxlength="256"
+            show-word-limit>
+
+          </el-input>
+        </el-form-item>
+
+      </el-form>
+
+    </div>
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box__footer" style="box-shadow: none;justify-content: flex-end;">
+      <button @click="esc" id="alert-box-esc"
+              class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save"
+              class="footer__btn" id="alert-box-save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+import { sameLabels } from '@/components/common/js/constants'
+// import selectAlertSilence from '../alert/selectAlertSilence'
+export default {
+  name: 'alertSilenceBox',
+  components: {
+    // selectAlertSilence
+  },
+
+  props: {
+    alertSilence: Object
+  },
+  watch: {
+    alertSilence: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        const obj = JSON.parse(JSON.stringify(n))
+        if (obj.ruleId == -1) {
+          obj.ruleId = null
+        }
+        if (obj.linkId == -1) {
+          obj.linkId = null
+        }
+        this.editAlertSilence = Object.assign(this.editAlertSilence, obj)
+        this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime()
+        this.endAtTamp = new Date(this.editAlertSilence.endAt).getTime()
+        this.editAlertSilence.time = this.startAtTamp
+        this.rangeTimeCallback()
+      }
+    }
+  },
+  data () {
+    const validate = (rule, value, callback) => {
+      if (!this.editAlertSilence.startAt) {
+        callback(new Error(this.$t('alert.silence.selectTime')))
+      } else if (!this.editAlertSilence.endAt) {
+        callback(new Error(this.$t('alert.silence.selectTime')))
+      } else {
+        callback()
+      }
+    }
+    return {
+      editAlertSilence: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: '',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      rules: {
+        time: [
+          // { required: true, message: this.$t('alert.silence.selectTime'), trigger: 'change' },
+          { required: true, trigger: 'change' },
+          { validator: validate, trigger: 'change' }
+        ],
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      rangeTime: '',
+      ruleList: [],
+      filterSilence: '',
+      silenceData: [],
+      typeContentLoading: false,
+      typeList: [
+        { type: 'datacenter', name: 'Datacenter' },
+        { type: 'project', name: 'Project' },
+        { type: 'module', name: 'Module' },
+        { type: 'endpoint', name: 'Endpoint' },
+        { type: 'asset', name: 'Asset' }
+      ],
+      datacenterData: null,
+      assetData: null,
+      projectData: null,
+      moduleData: null,
+      endpointData: null,
+      startAtTamp: '',
+      endAtTamp: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$refs.alertSilenceForm.validate((valid) => {
+        if (this.endAtTamp < this.startAtTamp) {
+          this.prevent_opt.save = false
+          this.$message({
+            message: this.$t('alert.silence.timeError'),
+            type: 'error'
+          })
+          return
+        }
+        const params = { ...this.editAlertSilence, matchers: JSON.stringify(this.editAlertSilence.matchers) }
+        if (valid) {
+          params.startAt = bus.timeFormate(new Date(this.timezoneToUtcTime(params.startAt)))
+          params.endAt = bus.timeFormate(new Date(this.timezoneToUtcTime(params.endAt)))
+          if (this.editAlertSilence.id) {
+            this.$put('/alert/silence', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else {
+            this.$post('alert/silence', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/alert/silence?ids=' + this.editAlertSilence.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    dateChange (val, type) {
+      if (type === 'startAt') {
+        this.editAlertSilence.startAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
+        this.startAtTamp = new Date(val).getTime()
+      } else if (type === 'endAt') {
+        this.editAlertSilence.endAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
+        this.endAtTamp = new Date(val).getTime()
+      }
+      this.$forceUpdate()
+      this.rangeTimeCallback()
+    },
+    rangeTimeCallback () {
+      if (this.editAlertSilence.time) {
+        const num = new Date(this.editAlertSilence.endAt).getTime() - new Date(this.editAlertSilence.startAt).getTime()
+        this.rangeTime = num / (60 * 60 * 1000)// 以小时为单位
+      } else {
+        this.rangeTime = null
+      }
+    },
+    rangeTimeChange (val) {
+      const arr = [bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(val * 1), 'yyyy-MM-dd hh:mm:ss')]
+      this.$set(this.editAlertSilence, 'startAt', arr[0])
+      this.$set(this.editAlertSilence, 'endAt', arr[1])
+      this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime()
+      this.endAtTamp = new Date(this.editAlertSilence.endAt).getTime()
+      this.$forceUpdate()
+    },
+    clearValue () {
+      this.editAlertSilence.name = ''
+      this.editAlertSilence.linkId = ''
+    },
+    // 新增label
+    addmatchers () {
+      this.editAlertSilence.matchers.push({ name: '', value: '', regex: 0 })
+    },
+    // 移除单个Label
+    removematchers (index) {
+      if (this.editAlertSilence.matchers.length === 1) {
+        this.editAlertSilence.matchers = [{ name: '', value: '', regex: 0 }]
+      }
+      this.editAlertSilence.matchers.splice(index, 1)
+    },
+    querySearch (queryString, cb) {
+      const labels = sameLabels.map(item => {
+        return {
+          name: item,
+          value: item
+        }
+      })
+      const results = queryString ? labels.filter(this.createFilter(queryString)) : labels
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (label) => {
+        return (label.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    handleSelect (item) {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .range-time {
+    /deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group {
+      width: 100%
+    }
+
+    /deep/ .el-radio-button {
+      width: 14.2%
+    }
+
+    /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
+      width: 100%;
+    }
+
+    .datepicker {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      .datepicker-box{
+        width: 48%;
+        flex: 1;
+        position: relative;
+        /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
+          width: 100%;
+        }
+        /deep/ .el-input__inner{
+          text-align: center;
+        }
+        .datepicker-title{
+          position: absolute;
+          left: 15px;
+          z-index: 1;
+        }
+      }
+    }
+  }
+  .matchers{
+    /deep/ .el-input__prefix{
+      left: 0;
+    }
+    /deep/ .el-form-item__error{
+      left: 126px;
+      padding-top: 5px;
+    }
+    .matchers-type{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      .matchers-type-title{
+        width: 125px;
+        background:#E7EAED;
+        font-family: ArialMT;
+        font-size: 14px;
+        color: #333333;
+        letter-spacing: 0;
+        font-weight: 400;
+        text-align: center;
+      }
+      /deep/ .matchers-type-title.el-select--small .el-input__inner{
+        background:#E7EAED;
+        font-family: ArialMT;
+        font-size: 14px;
+        color: #333333;
+        letter-spacing: 0;
+        font-weight: 400;
+        text-align: center;
+        border: none;
+      }
+      .matchers-type-content{
+        flex: 1;
+      }
+    }
+  }
+  /deep/ .silence-matchers-value{
+    width: calc(100% - 100px);
+  }
+  /deep/ .silence-matchers-key{
+    width: 100%;
+  }
+  .silence-matchers-regex{
+    margin-left: 10px;
+  }
+  /deep/ .param-box-row-key{
+    width: 36%;
+  }
+  /deep/ .param-box-row-value{
+    width: 50%;
+  }
+  .module-add-label{
+    display: inline-block;
+    width: 300px;
+    height: 18px;
+    background: #FFFCF9;
+    border: 1px solid #FFE0BD;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 18px;
+    margin-right: 80px;
+  }
+</style>
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -131,7 +131,9 @@ const cn = {
    editType: '类型',
    searchCondition: '搜索条件',
    batchDel: '批量删除',
-    tempPrev: '模板预览'
+    tempPrev: '模板预览',
+    silenceAlert: '告警静默',
+    quickSilent: '快速静默'
  },
  setup: {
    step0: '欢迎',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -136,7 +136,9 @@ const en = {
    editType: 'Type',
    searchCondition: 'Search condition',
    batchDel: 'Batches delete',
-    tempPrev: 'Template preview'
+    tempPrev: 'Template preview',
+    silenceAlert: 'silence alert',
+    quickSilent: 'Quick silent'
  },
  pageSize: '/page',
  setup: {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -1,6 +1,7 @@
 import bus from '@/libs/bus'
 import { tableSet } from '@/components/common/js/tools'
 import { fromRoute } from '@/components/common/js/constants'
+import {object} from "cytoscape/src/is";
 export default {
  data () {
    return {
@@ -130,6 +131,13 @@ export default {
        this.getTableData()
      }
    },
+    closeSilenceBox (refresh) {
+      this.silenceBoxShow = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
    edit (u) {
      this.$get(`${this.url}/${u.id}`).then(response => {
        if (response.code === 200) {
@@ -204,6 +212,34 @@ export default {
      } else {
        this.dataListLayout.push('clickSearch')
      }
+    },
+    addSilence (row, type) {
+      this.blankSilenceObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      this.blankSilenceObject.endAt = bus.timeFormate(bus.getOffsetTimezoneData(1), 'yyyy-MM-dd hh:mm:ss')
+      this.objectSilence = JSON.parse(JSON.stringify(this.blankSilenceObject))
+      if (type !== 'alertMessage' && type !== 'alertRule') {
+        this.objectSilence.matchers = [
+          { name: type, value: row.name, regex: 0 },
+          { name: type + '_id', value: row.id, regex: 0 }
+        ]
+      } else if (type === 'alertMessage') {
+        if (typeof row.labels === 'string') row.labels = JSON.parse(row.labels)
+        const labels = JSON.parse(JSON.stringify(row.labels))
+        this.objectSilence.matchers = []
+        Object.keys(labels).forEach((key, i) => {
+          this.objectSilence.matchers.push(
+            { name: key, value: labels[key], regex: 0 }
+          )
+        })
+      } else if (type === 'alertRule') {
+        this.objectSilence.matchers = [
+          { name: 'alertName', value: row.name, regex: 0 },
+        ]
+      }
+      this.silenceBoxShow = true
+    },
+    closeDialog () {
+      this.silenceBoxShow = false
    }
  },
  watch: {
@@ -240,7 +276,7 @@ export default {
      return item
    })
    if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) {
-      const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length,localStorageTableTitle.length)
+      const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length)
      this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
    }
    if (!this.fromBottom) {
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -42,6 +42,11 @@ export default {
          this.$emit('sync', row)
          break
        }
+        case 'fastSilence': {
+          // this.$emit('copy', row)
+          this.$emit('addSilence', row, param)
+          break
+        }
        default:
          this.$emit(command, row)
          break
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/nezha-fronted/src/components/common/pagination.vue
@@ -143,14 +143,12 @@ export default {
    popClass: {
      immediate: true,
      handler (n, o) {
-        // console.log(n)
      }
    },
    pageObj: {
      immediate: true,
      deep: true,
      handler (n, o) {
-        // console.log(n,n)
      }
    }
  }
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -1345,7 +1345,6 @@ export default {
      this.onChange()
    },
    bkTypeChange (val) {
-      // console.log(val);
      this.selection.pen.data.gradientType = val
      this.$forceUpdate()
      if (val === 0) {
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -116,6 +116,7 @@
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-has="'alertMessage_expired'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -72,6 +72,7 @@
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-has="'alertRule_edit'" :command="['edit', scope.row]" :disabled="isBuiltIn(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 v-has="'alertRule_delete'" :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertRule']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -80,6 +80,7 @@
            <el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
            <el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
            <el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -105,6 +105,7 @@
            <el-dropdown-item :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>
            <el-dropdown-item v-has="'monitor_endpoint_edit'" :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 v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/common/table/settings/moduleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/moduleTable.vue
@@ -74,6 +74,7 @@
            <el-dropdown-item v-has="'monitor_module_edit'" :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 v-has="'monitor_module_delete'" :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
            <el-dropdown-item v-has="'panel_chart_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'module']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -76,6 +76,7 @@
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="['edit', scope.row]" v-has="'project_edit'"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1" v-has="'project_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'project']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -37,6 +37,7 @@
          @orderBy="tableDataSort"
          @queryMessage='queryMessage'
          @reload="getTableData"
+          @addSilence="addSilence"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
          @messageDetail="messageDetail"></alert-message-table>
@@ -94,6 +95,9 @@
      </div>
      <chart ref="messageChart" :unit="chartUnit" name="alertMessageChart"></chart>
    </el-dialog>
+    <el-dialog :show-close="true" :title="$t('overall.quickSilent')" :visible.sync="silenceBoxShow" append-to-body destroy-on-close class="nz-dialog silence-box" @close="closeDialog">
+      <alert-silence-box :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -108,6 +112,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import chartDataFormat from '@/components/charts/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
+import alertSilenceBox from "@/components/common/dialog/alertSilenceBox";
 export default {
  name: 'alertList',
  components: {
@@ -115,7 +120,8 @@ export default {
    pickTime,
    chart,
    nzDataList,
-    deleteButton
+    deleteButton,
+    alertSilenceBox
  },
  mixins: [dataListMixin],
  data () {
@@ -136,7 +142,22 @@ export default {
      searchTimeSelect: bus.getTimezontDateRange(),
      currentMsg: {},
      chartUnit: 5,
-
+      blankSilenceObject: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      objectSilence: {},
+      silenceBoxShow: false,
      tableId: 'alertMessageTable', // 需要分页的table的id，用于记录每页数量
      searchMsg: { // 给搜索框子组件传递的信息
        searchLabelList: [
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -47,6 +47,7 @@
          @orderBy="tableDataSort"
          @queryMessage="queryMessage"
          @reload="getTableData"
+          @addSilence="addSilence"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></alert-rule-table>
      </template>
@@ -58,6 +59,9 @@
    <transition name="right-box">
      <alert-rule-box v-if="rightBox.show" ref="alertConfigBox" :alert-rule="object" @close="closeRightBox"></alert-rule-box>
    </transition>
+    <el-dialog :show-close="true" :title="$t('overall.quickSilent')" :visible.sync="silenceBoxShow" append-to-body destroy-on-close class="nz-dialog silence-box" @close="closeDialog">
+      <alert-silence-box :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -69,6 +73,7 @@ import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import alertRuleTable from '@/components/common/table/alert/alertRuleTable'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import alertSilenceBox from "@/components/common/dialog/alertSilenceBox";

 export default {
  name: 'alert-config',
@@ -78,7 +83,8 @@ export default {
    alertRuleTable,
    nzDataList,
    'export-excel': exportXLSX,
-    topToolMoreOptions
+    topToolMoreOptions,
+    alertSilenceBox
  },
  mixins: [dataListMixin],
  data () {
@@ -98,6 +104,22 @@ export default {
        description: '',
        method: []
      },
+      blankSilenceObject: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      objectSilence: {},
+      silenceBoxShow: false,
      searchMsg: { // 给搜索框子组件传递的信息
        zheze_none: true,
        searchLabelList: [{
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -98,7 +98,7 @@ export default {
      importBox: { show: false, title: this.$t('overall.exportExcel') },
      deleteBox: { show: false, ids: '', remark: '', state: 2 },
      // 创建修改相关
-      blackObject: {
+      blankObject: {
        id: '',
        startAt: '',
        endAt: '',
@@ -176,9 +176,9 @@ export default {
      })
    },
    add () {
-      this.blackObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
-      this.blackObject.endAt = bus.timeFormate(bus.getOffsetTimezoneData(1), 'yyyy-MM-dd hh:mm:ss')
-      this.object = JSON.parse(JSON.stringify(this.blackObject))
+      this.blankObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      this.blankObject.endAt = bus.timeFormate(bus.getOffsetTimezoneData(1), 'yyyy-MM-dd hh:mm:ss')
+      this.object = JSON.parse(JSON.stringify(this.blankObject))
      this.rightBox.show = true
    },
    edit (u) {
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -60,6 +60,7 @@
          @orderBy="tableDataSort"
          @reload="getTableData"
          @selectionChange="selectionChange"
+          @addSilence="addSilence"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></asset-table>
      </template>
      <!-- 分页组件 -->
@@ -88,6 +89,9 @@
                            @close="closeRightBox"
                            @refresh="getTableData"></asset-batch-edit-box>
    </transition>
+    <el-dialog :show-close="true" :title="$t('overall.quickSilent')" :visible.sync="silenceBoxShow" append-to-body destroy-on-close class="nz-dialog silence-box" @close="closeDialog">
+      <alert-silence-box :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </el-dialog>
  </div>
 </template>

@@ -100,6 +104,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import assetTable from '@/components/common/table/asset/assetTable'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import alertSilenceBox from '@/components/common/dialog/alertSilenceBox'

 export default {
  name: 'asset',
@@ -110,7 +115,8 @@ export default {
    assetBatchEditBox,
    assetTable,
    clickSearch,
-    topToolMoreOptions
+    topToolMoreOptions,
+    alertSilenceBox
  },
  mixins: [dataListMixin],
  data () {
@@ -121,6 +127,7 @@ export default {
      rightBox: {
        batchShow: false
      },
+      silenceBoxShow: false,
      dataListLayout: ['searchInput', 'elementSet'],
      assetTableHeight: `calc(100% - ${48 + 201 + 20}px)`,
      blankObject: {
@@ -150,6 +157,21 @@ export default {
        fields: [],
        accounts: []
      },
+      blankSilenceObject: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      objectSilence: {},
      tableId: 'assetTable', // 需要分页的table的id，用于记录每页数量
      searchMsg: { // 给搜索框子组件传递的信息
        searchLabelList: [{
@@ -415,7 +437,7 @@ export default {
          return this.userData[item].username
        }
      }
-    }
+    },
    /* formatPingTime (str) {
      if (!str) {
        return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
--- a/nezha-fronted/src/components/page/config/system/systemCommon.js
+++ b/nezha-fronted/src/components/page/config/system/systemCommon.js
@@ -77,7 +77,6 @@ export const tableCommon = {
      let result = true
      for (const field in this.rules) {
        const rule = this.rules[field]
-        // console.log(field, !data[field])
        if (rule.required && !data[field]) {
          rule.switch = true
          result = false
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -57,6 +57,7 @@
          @edit="edit"
          @orderBy="tableDataSort"
          @reload="getTableData"
+          @addSilence="addSilence"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, item) => { $refs.dataList.showBottomBox(targetTab, item) }"></endpoint-table>
      </template>
@@ -75,6 +76,9 @@
    <transition name="right-box">
      <batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
    </transition>
+    <el-dialog :show-close="true" :title="$t('overall.quickSilent')" :visible.sync="silenceBoxShow" append-to-body destroy-on-close class="nz-dialog silence-box" @close="closeDialog">
+      <alert-silence-box :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -87,6 +91,7 @@ import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
 import batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
 import clickSearch from '@/components/common/labelFilter/clickSearch'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import alertSilenceBox from "@/components/common/dialog/alertSilenceBox";

 export default {
  beforeRouteLeave (to, from, next) { // 路由离开之前触发
@@ -103,12 +108,29 @@ export default {
    clickSearch,
    batchModifyEndpoint,
    topToolMoreOptions,
+    alertSilenceBox
  },
  mixins: [dataListMixin],
  data () {
    return {
      url: 'monitor/endpoint',
      blankObject: {}, // 新增/编辑的endpoint
+      blankSilenceObject: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      objectSilence: {},
+      silenceBoxShow: false,
      tableId: 'endpointTable',
      queryPermission: 'account_view',
      endpointTableHeight: 'calc(100% - 193px)', // 主列表table高度
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -45,6 +45,7 @@
          @orderBy="tableDataSort"
          @reload="getTableData"
          @sync="chartBySync"
+          @addSilence="addSilence"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></module-table>
      </template>
@@ -57,6 +58,9 @@
    <transition name="right-box">
      <moduleBox v-if="rightBox.show" :module="object" @close="closeRightBox"></moduleBox>
    </transition>
+    <el-dialog :show-close="true" :title="$t('overall.quickSilent')" :visible.sync="silenceBoxShow" append-to-body destroy-on-close class="nz-dialog silence-box" @close="closeDialog">
+      <alert-silence-box :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -66,6 +70,8 @@ import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import moduleTable from '@/components/common/table/settings/moduleTable'
 import exportXLSX from '@/components/common/exportXLSX'
+import alertSilenceBox from '@/components/common/dialog/alertSilenceBox'
+
 export default {
  beforeRouteLeave (to, from, next) { // 路由离开之前触发
    localStorage.removeItem('moduleProjectId')
@@ -77,7 +83,8 @@ export default {
    moduleBox,
    deleteButton,
    moduleTable,
-    'export-excel': exportXLSX
+    'export-excel': exportXLSX,
+    alertSilenceBox
  },
  mixins: [dataListMixin],
  data () {
@@ -117,6 +124,22 @@ export default {
          value: []
        }]
      }, // 新增/编辑的module
+      blankSilenceObject: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      objectSilence: {},
+      silenceBoxShow: false,
      tableId: 'moduleTable',
      queryPermission: 'account_view',
      searchMsg: { // 给搜索框子组件传递的信息
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -31,6 +31,7 @@
          @edit="edit"
          @orderBy="tableDataSort"
          @reload="getTableData"
+          @addSilence="addSilence"
          @selectionChange="selectionChange"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></project-table>
      </template>
@@ -44,6 +45,9 @@
    <transition name="right-box">
      <projectBox v-if="rightBox.show" :project="object" @close="closeRightBox"></projectBox>
    </transition>
+    <el-dialog :show-close="true" :title="$t('overall.quickSilent')" :visible.sync="silenceBoxShow" append-to-body destroy-on-close class="nz-dialog silence-box" @close="closeDialog">
+      <alert-silence-box :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+    </el-dialog>
  </div>
 </template>
 <script>
@@ -52,6 +56,7 @@ import projectBox from '@/components/common/rightBox/projectBox'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import projectTable from '@/components/common/table/settings/projectTable'
+import alertSilenceBox from '@/components/common/dialog/alertSilenceBox'

 export default {
  name: 'projectList',
@@ -59,7 +64,8 @@ export default {
    nzDataList,
    projectBox,
    deleteButton,
-    projectTable
+    projectTable,
+    alertSilenceBox
  },
  mixins: [dataListMixin],
  data () {
@@ -70,6 +76,22 @@ export default {
        name: '',
        remark: ''
      },
+      blankSilenceObject: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: 'asset',
+        linkId: '',
+        remark: '',
+        time: [],
+        matchers: [
+          { name: '', value: '', regex: 0 }
+        ],
+        name: ''
+      },
+      objectSilence: {},
+      silenceBoxShow: false,
      projectTableHeight: 'calc(100% - 58px)',
      tableId: 'projectTable',
      queryPermission: 'account_view',