From 3a36dccf183713c15d27a2d18bbed2c00a2b3057 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 1 Jun 2021 15:19:47 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E4=B8=BA=E5=8F=B3=E6=BB=91=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/dialog/alertSilenceBox.vue         | 444 ------------------
 .../src/components/common/mixin/dataList.js   |   1 +
 .../components/page/alert/alertMessage.vue    |   7 +-
 .../src/components/page/alert/alertRule.vue   |   7 +-
 .../src/components/page/asset/asset.vue       |   7 +-
 .../page/config/template/chartTemp.vue        |   1 +
 .../page/monitor/endpoint/endpointList.vue    |   7 +-
 .../page/monitor/module/moduleList.vue        |   7 +-
 .../page/monitor/project/projectList.vue      |   7 +-
 9 files changed, 20 insertions(+), 468 deletions(-)
 delete mode 100644 nezha-fronted/src/components/common/dialog/alertSilenceBox.vue

diff --git a/nezha-fronted/src/components/common/dialog/alertSilenceBox.vue b/nezha-fronted/src/components/common/dialog/alertSilenceBox.vue
deleted file mode 100644
index de9e6e4f8..000000000
--- a/nezha-fronted/src/components/common/dialog/alertSilenceBox.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<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>
diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js
index 1a62e87bc..87c45a367 100644
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -217,6 +217,7 @@ export default {
       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))
+      this.objectSilence.name = 'Quick silence'
       if (type !== 'alertMessage' && type !== 'alertRule') {
         this.objectSilence.matchers = [
           { name: type, value: row.name, regex: 0 },
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 480f847a6..30aa59823 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -95,9 +95,8 @@
       </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>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+</transition>
   </div>
 </template>
 <script>
@@ -112,7 +111,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";
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 export default {
   name: 'alertList',
   components: {
diff --git a/nezha-fronted/src/components/page/alert/alertRule.vue b/nezha-fronted/src/components/page/alert/alertRule.vue
index 626c84783..e00f38f37 100644
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -59,9 +59,8 @@
     <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>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+</transition>
   </div>
 </template>
 <script>
@@ -73,7 +72,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";
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {
   name: 'alert-config',
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index c10c97619..995237e27 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -89,9 +89,8 @@
                             @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>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+</transition>
   </div>
 </template>
 
@@ -104,7 +103,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'
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {
   name: 'asset',
diff --git a/nezha-fronted/src/components/page/config/template/chartTemp.vue b/nezha-fronted/src/components/page/config/template/chartTemp.vue
index d52f06d1e..46dac15d2 100644
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/nezha-fronted/src/components/page/config/template/chartTemp.vue
@@ -184,6 +184,7 @@ export default {
       this.tools.loading = true
       this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox, panelId: 0, returnChildren: 0, groupId: 0 }).then(response => {
         this.tools.loading = false
+        response = { msg: 'success', code: 200, data: { total: 62, pageSize: 20, pages: 4, pageNo: 1, list: [{ id: 1303, name: 'Up Time', panelId: 0, groupId: 0, span: 2, height: 2, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 30, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 500, chartId: 1303, expression: 'sum(time() - node_boot_time_seconds{project="Common",asset="{{asset.host}}"})', type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1304, name: 'Endpoint down', panelId: 0, groupId: 0, span: 2, height: 2, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 2, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 501, chartId: 1304, expression: "count(up{project!='',asset='{{asset.host}}'})-count(up{project!='',asset='{{asset.host}}'}==1)", type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1305, name: 'Maximum open file descriptors', panelId: 0, groupId: 0, span: 4, height: 2, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 1, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 502, chartId: 1305, expression: 'process_max_fds{project="Common",module="node_exporter" ,asset="{{asset.host}}"}', type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1306, name: 'Ping rrt', panelId: 0, groupId: 0, span: 2, height: 2, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 29, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 503, chartId: 1306, expression: 'nz_asset_ping{host="{{asset.host}}"}', type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1307, name: 'Memory Total', panelId: 0, groupId: 0, span: 2, height: 2, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 7, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 504, chartId: 1307, expression: 'node_memory_MemTotal_bytes{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1308, name: 'Total transmit traffic (1day)', panelId: 0, groupId: 0, span: 4, height: 3, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 7, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 505, chartId: 1308, expression: 'sum(increase(node_network_transmit_bytes_total{project="Common",asset="{{asset.host}}"}[1d]))', type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1309, name: 'Total receive traffic (1day)', panelId: 0, groupId: 0, span: 4, height: 3, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'singleStat', unit: 7, weight: 0, param: { valueMapping: { mapping: [{ text: '', value: '' }], type: 'value' }, nullType: 'connected', statistics: 'last' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 506, chartId: 1309, expression: 'sum(increase(node_network_receive_bytes_total{project="Common",asset="{{asset.host}}"}[1d]))', type: 'expert', legend: null, buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1310, name: 'CPU usage', panelId: 0, groupId: 0, span: 4, height: 3, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 4, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 507, chartId: 1310, expression: 'avg(irate(node_cpu_seconds_total{project="Common",asset="{{asset.host}}",mode="system"}[1m])) by (asset)', type: 'expert', legend: 'System', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 508, chartId: 1310, expression: 'avg(irate(node_cpu_seconds_total{project="Common",asset="{{asset.host}}",mode="user"}[1m])) by (instance)', type: 'expert', legend: 'User', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 509, chartId: 1310, expression: 'avg(irate(node_cpu_seconds_total{project="Common",asset="{{asset.host}}",mode="iowait"}[1m])) by (asset)', type: 'expert', legend: 'Iowait', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 510, chartId: 1310, expression: '1 - avg(irate(node_cpu_seconds_total{project="Common",asset="{{asset.host}}",mode="idle"}[1m])) by (asset)', type: 'expert', legend: 'Total', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1311, name: 'System load average', panelId: 0, groupId: 0, span: 4, height: 3, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 3, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 511, chartId: 1311, expression: 'node_load1{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'Load1', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 512, chartId: 1311, expression: 'node_load5{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'Load5', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 513, chartId: 1311, expression: 'node_load15{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'Load15', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1312, name: 'Notebook', panelId: 0, groupId: 0, span: 4, height: 3, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'text', unit: 2, weight: 0, param: { text: '<div  class="editor-core ql-container ql-snow"><div class="ql-editor"><h2>维修记录（Repair Record）</h2><p><br></p><ol><li>XXXX年XX月XX日 返厂维修</li><li>。。。</li></ol><p><br></p></div></div>' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: null, sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1313, name: 'Memory usage', panelId: 0, groupId: 0, span: 4, height: 3, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 3, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 514, chartId: 1313, expression: '100 - ((node_memory_MemFree_bytes\n{project="Common",asset="{{asset.host}}"}+node_memory_Cached_bytes\n{project="Common",asset="{{asset.host}}"}+node_memory_Buffers_bytes\n{project="Common",asset="{{asset.host}}"})/node_memory_MemTotal_bytes\n{project="Common",asset="{{asset.host}}"}) * 100', type: 'expert', legend: 'Memory usage', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1314, name: 'Disk usage', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 4, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 515, chartId: 1314, expression: '1-(node_filesystem_free_bytes{project="Common",asset="{{asset.host}}",fstype=~"ext4|xfs"} / node_filesystem_size_bytes{project="Common",asset="{{asset.host}}",fstype=~"ext4|xfs"})', type: 'expert', legend: '{{mountpoint}}', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1315, name: 'Disk partition free space', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'table', unit: 7, weight: 0, param: { last: 1, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, threshold: '', nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 516, chartId: 1315, expression: 'node_filesystem_avail_bytes {project="Common",asset="{{asset.host}}",fstype=~"ext4|xfs"}-0', type: 'expert', legend: 'Available : {{device}} - {{mountpoint}}', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 517, chartId: 1315, expression: 'node_filesystem_size_bytes{project="Common",asset="{{asset.host}}",fstype=~"ext4|xfs"}-0', type: 'expert', legend: 'Total : {{device}} - {{mountpoint}}', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1316, name: 'Disk read and write rate (IOPS)', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 2, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 518, chartId: 1316, expression: 'irate(node_disk_reads_completed_total{project="Common",asset="{{asset.host}}"}[30m])', type: 'expert', legend: '{{device}}_read', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 519, chartId: 1316, expression: 'irate(node_disk_writes_completed_total{project="Common",asset="{{asset.host}}"}[30m])', type: 'expert', legend: '{{device}}_write', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1317, name: 'Disk read and write speed (byte/s)', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 2, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 520, chartId: 1317, expression: 'irate(node_disk_read_bytes_total{project="Common",asset="{{asset.host}}"}[30m])', type: 'expert', legend: '{{device}}_read', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 521, chartId: 1317, expression: 'irate(node_disk_written_bytes_total{project="Common",asset="{{asset.host}}"}[30m])', type: 'expert', legend: '{{device}}_write', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1318, name: 'Time-consuming for each IO read and write', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 30, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 522, chartId: 1318, expression: 'irate(node_disk_read_time_seconds_total{project="Common",asset="{{asset.host}}"}[30m]) / irate(node_disk_reads_completed_total{project="Common",asset="{{asset.host}}"}[30m])', type: 'expert', legend: '{{device}}_read', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 523, chartId: 1318, expression: 'irate(node_disk_write_time_seconds_total{project="Common",asset="{{asset.host}}"}[30m]) / irate(node_disk_writes_completed_total{project="Common",asset="{{asset.host}}"}[30m])', type: 'expert', legend: '{{device}}_write', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1319, name: 'Network traffic', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 15, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 524, chartId: 1319, expression: "irate(node_network_receive_bytes_total{project=\"Common\",asset=\"{{asset.host}}\",device!~'tap.*|veth.*|br.*|docker.*|virbr*|lo*'}[30m])", type: 'expert', legend: '{{device}}_receive', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 525, chartId: 1319, expression: "irate(node_network_transmit_bytes_total{project=\"Common\",asset=\"{{asset.host}}\",device!~'tap.*|veth.*|br.*|docker.*|virbr*|lo*'}[30m])", type: 'expert', legend: '{{device}}_transmit', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1320, name: 'Network connection information', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 2, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 526, chartId: 1320, expression: 'node_netstat_Tcp_CurrEstab{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'CurrEstab', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 527, chartId: 1320, expression: 'node_sockstat_TCP_tw{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'TCP_tw', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 528, chartId: 1320, expression: 'node_sockstat_sockets_used{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'Sockets_used', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 529, chartId: 1320, expression: 'node_sockstat_UDP_inuse{project="Common",asset="{{asset.host}}"}', type: 'expert', legend: 'UDP_inuse', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1321, name: 'Network traffic drop', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 15, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 530, chartId: 1321, expression: "irate(node_network_receive_drop_total{project=\"Common\",asset=\"{{asset.host}}\",device!~'tap.*|veth.*|br.*|docker.*|virbr*|lo*'}[30m])", type: 'expert', legend: '{{device}}_receive', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 531, chartId: 1321, expression: "irate(node_network_transmit_drop_total{project=\"Common\",asset=\"{{asset.host}}\",device!~'tap.*|veth.*|br.*|docker.*|virbr*|lo*'}[30m])", type: 'expert', legend: '{{device}}_transmit', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }, { id: 1322, name: 'Network traffic error', panelId: 0, groupId: 0, span: 4, height: 4, updateBy: -1, updateAt: '2020-10-27 08:56:07', type: 'line', unit: 15, weight: 0, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, valueMapping: { mapping: [{ text: '', value: '' }], type: 'text' }, nullType: 'connected' }, pid: null, buildIn: 0, remark: '', seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db', elements: [{ id: 532, chartId: 1322, expression: "irate(node_network_receive_errs_total{project=\"Common\",asset=\"{{asset.host}}\",device!~'tap.*|veth.*|br.*|docker.*|virbr*|lo*'}[30m])", type: 'expert', legend: '{{device}}_receive', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }, { id: 533, chartId: 1322, expression: "irate(node_network_transmit_errs_total{project=\"Common\",asset=\"{{asset.host}}\",device!~'tap.*|veth.*|br.*|docker.*|virbr*|lo*'}[30m])", type: 'expert', legend: '{{device}}_transmit', buildIn: 0, seq: '7aac254f-b6ff-4123-99c4-92fcdcc0d2db' }], sync: null, panel: { id: 0, name: null, createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null }, children: null, chartNums: null, asset: null, varType: 1, varId: null, varName: null }] }, time: '2021-06-01 06:55:01' }
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index 222c38e14..09a705dc3 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -76,9 +76,8 @@
     <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>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+</transition>
   </div>
 </template>
 <script>
@@ -91,7 +90,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";
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {
   beforeRouteLeave (to, from, next) { // 路由离开之前触发
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 51f0023e5..522927945 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -58,9 +58,8 @@
     <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>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+</transition>
   </div>
 </template>
 <script>
@@ -70,7 +69,7 @@ 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'
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {
   beforeRouteLeave (to, from, next) { // 路由离开之前触发
diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue
index ad08e56cf..34c630496 100644
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -45,9 +45,8 @@
     <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>
+    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
+</transition>
   </div>
 </template>
 <script>
@@ -56,7 +55,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'
+import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {
   name: 'projectList',