From ce2dc59e0384335ea0b25b78ea0b4c9cd848af21 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Thu, 30 Jun 2022 15:47:54 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1987=20feat=EF=BC=9Aalert=20rule=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=EF=BC=88=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=A4=9A=E9=98=88=E5=80=BC=E5=91=8A=E8=AD=A6=E8=A7=84?=
 =?UTF-8?q?=E5=88=99=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/rightBox/alertRuleBox.scss         |  56 ++-
 .../common/rightBox/alertRuleBox.vue          | 350 +++++++++++-------
 .../common/table/alert/alertRuleTable.vue     |  61 +--
 .../src/components/page/alert/alertRule.vue   | 114 +++---
 4 files changed, 356 insertions(+), 225 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
index bcaf315f8..cc397314b 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
@@ -45,15 +45,17 @@
     border: $--border-color-light;
   }
   .alert-rule-split-title{
-    background: $--background-color-base;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    margin-bottom: 20px;
+    line-height: 32px;
     font-size: 14px;
+    font-weight: bold;
     color: $--color-text-primary;
-    letter-spacing: 0;
-    font-weight: 400;
-    line-height: 24px;
-    padding-left: 10px;
-    margin-bottom: 10px;
-    height: 24px;
+    background-color: $--right-box-sub-title-background-color;
+    border: 1px solid $--right-box-sub-title-border-color;
   }
   .el-form-item__content .el-input-group.el-input-group--prepend {
     vertical-align: middle;
@@ -76,6 +78,46 @@
       color: #FFFFFF;
     }
   }
+  .threshold-list{
+    border: 1px solid $--border-color-light;
+    padding: 16px;
+    .threshold-item{
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      .threshold-item-left{
+        width: 64px;
+        height: 26px;
+        border-radius: 4px;
+        background-color:$--color-success;
+        color: #fff;
+        text-align: center;
+        line-height: 26px;        
+      }
+      .threshold-item-center{
+        margin: 0 24px;
+        color: $--color-text-regular;
+        font-size: 14px;
+      }
+      .threshold-item-msg{
+        color: $--color-text-regular;
+        font-size: 14px;
+      }
+      .hide-icon{
+        width: 38px;
+        .el-input__inner{
+          border: none;
+          text-align: center;
+        }
+      }
+    }
+    .el-form-item__content{
+      line-height: 31px !important;
+    }
+    .el-form-item__error{
+      padding-top: 2px;
+    }
+  }
 }
 .severity-item{
   color: $--color-text-secondary;
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 49e512c69..23541757f 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -18,10 +18,10 @@
             <el-input id="alert-box-input-name" ref="alertName" v-model="editAlertRule.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
           </el-form-item>
           <!--type-->
-          <el-form-item :label="$t('overall.type')" prop="type" class="half-form-item">
+          <el-form-item :label="$t('overall.type')" prop="type">
             <el-select
               v-model="editAlertRule.type"
-              class="right-box__select half-form-item"
+              class="right-box__select"
               popper-class="right-box-select-top prevent-clickoutside"
               size="small"
               :disabled="showTypeSelect"
@@ -33,21 +33,11 @@
                 :value="item.value"></el-option>
             </el-select>
           </el-form-item>
-          <!--severity-->
-          <el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId">
-            <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
-              <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
-                <div style="display: flex;justify-content: space-between;padding: 5px;line-height: 23px">
-                  <div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div>
-                  <div class="severity-item text-ellipsis" :title="item.remark">{{item.remark}}</div>
-                </div>
-              </el-option>
-            </el-select>
-            <i v-if="editAlertRule.severityId" :style="{color:severityData.length > 0 && severityData.find(severity => severity.id ===  editAlertRule.severityId).color,'font-size':'12px'}" class="nz-icon nz-icon-circle severity-circle"></i>
-          </el-form-item>
+
+          <div class="alert-rule-split-title">{{$t('alert.config.condition')}}</div>
           <!--expr-->
           <el-form-item  v-if="showSnmpTrap" :label='$t("config.exprTemp.expression")' prop="expr">
-              <template v-if="showMetrics">
+              <div v-if="showMetrics" key="metric">
                 <el-row style="line-height: 32px;">
                   <promql-input
                     :from-father-data="true"
@@ -63,8 +53,8 @@
                     @change="metricChange"
                   ></promql-input>
                 </el-row>
-              </template>
-              <template v-else>
+              </div>
+              <div v-else key="log">
                 <el-row style="line-height: 32px;">
                   <promql-input
                     id="alert-box-input-promql"
@@ -78,37 +68,49 @@
                     @change="metricChange"
                   ></promql-input>
                 </el-row>
-              </template>
+              </div>
             </el-form-item>
-          <el-form-item label="OID" prop="expr" v-if="!showSnmpTrap">
+          <el-form-item label="OID" prop="expr" v-if="!showSnmpTrap" key="OID">
             <el-input id="alert-box-input-oid" v-model="editAlertRule.expr" size="small" type="text"></el-input>
           </el-form-item>
           <!--threshold-->
-          <el-form-item
-            v-if="showSnmpTrap"
-            :label="$t('alert.config.threshold')"
-            prop="threshold" class="half-form-item alert-box-threshold"
-            style="display: inline-block;"
-            :rules="[
-              { required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' },
-              { validator: nzNumber, trigger: 'blur' }
-             ]">
-            <el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text" :disabled="!showSnmpTrap">
-              <el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="hide-icon" popper-class="prevent-clickoutside" size="small" :disabled="!showSnmpTrap">
-                <el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
-            </el-input>
-          </el-form-item>
-          <!--unit-->
-          <el-form-item v-if="showSnmpTrap" :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
-            <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
-                         placeholder=""
-                         popper-class="no-style-class dc-dropdown  unit-popper-class"
-                         size="small"
-                         :disabled="!showSnmpTrap"
-                         style="width: 100%"
-            >
-            </el-cascader>
+          <el-form-item :label="$t('alert.config.threshold')" key="threshold">
+            <div class="threshold-list">
+                <el-form-item v-for="(item,index) of editAlertRule.condition" :key="index" :prop="'condition.' + index + '.value'"
+                  :rules="[
+                    { required: true, message: $t('validate.required'), trigger: 'blur'},
+                    { validator: thresholdValidator, trigger: 'blur' , item:item},
+                  ]"
+                >
+                  <div class="threshold-item">
+                    <div class="threshold-item-left" :style="{background:item.color}" >{{item.name}}</div>
+                    <div class="threshold-item-center">
+                      <span>{{$t('alert.config.when')}} Result</span>
+                      <el-select :value="item.operator" @change="operatorChange(item,index,$event)" class="hide-icon" popper-class="prevent-clickoutside" size="small">
+                        <el-option v-for="subItem in operators" :id="'operator-'+subItem.key" :key="subItem.value" :label="subItem.label" :value="subItem.value"></el-option>
+                      </el-select>
+                    </div>
+                    <el-input v-model="item.value" :placeholder="item.operator==='~='?$t('alert.config.enterRegular'):$t('alert.config.enterThreshold')" size="small" type="text" style="flex:1"/>
+                  </div>
+                </el-form-item>
+                <el-form-item prop="timeout" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" style="margin-bottom:0;">
+                  <div class="threshold-item">
+                    <div class="threshold-item-left" style="margin-right:15px">{{$t('alert.config.normal')}}</div>
+                    <el-input-number
+                      size="small"
+                      placeholder="N"
+                      :min="15"
+                      v-model="editAlertRule.timeout"
+                      :controls="false"
+                      style="width:80px"
+                    />
+                    <div class="threshold-item-msg" style="margin-left:8px">
+                      <span v-if="showSnmpTrap">{{$t('alert.config.detectionNormal')}}</span>
+                      <span v-else>{{$t('alert.config.secondNormal')}}</span>
+                    </div>
+                  </div>
+                </el-form-item>
+            </div>
           </el-form-item>
           <!--inr-->
           <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.inr')" prop="inr"  class="half-form-item">
@@ -116,18 +118,30 @@
           </el-form-item>
           <!--last-->
           <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last"  class="half-form-item alert-box-duration" :rules=" [
-          { required: showSnmpTrap, message: this.$t('validate.required'), trigger: 'change' },
-        ]">
+            { required: showSnmpTrap, message: this.$t('validate.required'), trigger: 'change' },
+            ]"
+          >
             <el-input id="alert-box-input-last" :controls="false" v-model.number="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">
               <template slot="append">{{$t('alert.config.second')}}</template>
             </el-input>
           </el-form-item>
+          <!--unit-->
+          <el-form-item v-if="showSnmpTrap" :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
+            <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
+              placeholder=""
+              popper-class="no-style-class dc-dropdown  unit-popper-class"
+              size="small"
+              :disabled="!showSnmpTrap"
+              style="width: 100%"
+            >
+            </el-cascader>
+          </el-form-item>
           <!--autoExpired-->
-          <el-form-item :label="$t('alert.config.autoExpired')" prop="autoExpired" class="half-form-item">
+          <el-form-item :label="$t('alert.config.autoExpired')" prop="autoExpired" :class="{'half-form-item':showSnmpTrap}">
             <el-select
               id="alert-box-input-autoExpired"
               v-model="editAlertRule.autoExpired"
-              class="right-box__select half-form-item"
+              class="right-box__select"
               placeholder=""
               popper-class="prevent-clickoutside right-box-select-top "
               size="small"
@@ -142,11 +156,9 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <!--timeout-->
-          <el-form-item :label="$t('alert.config.timeout')" prop="timeout"  class="half-form-item">
-            <el-input id="alert-box-input-timeout" v-model.number="editAlertRule.timeout" placeholder="" size="small" type="text"></el-input>
-            <template slot="append">{{$t('alert.config.second')}}</template>
-          </el-form-item>
+
+          <!-- notification -->
+          <div class="alert-rule-split-title">{{ $t('alert.config.notificationConfig') }}</div>
           <!--summary-->
           <el-form-item :label="$t('alert.summary')" prop="summary">
             <el-input id="alert-box-input-summary" v-model="editAlertRule.summary" maxlength="512" placeholder="" rows="2" show-word-limit size="small" type="textarea"></el-input>
@@ -155,6 +167,83 @@
           <el-form-item :label="$t('overall.remark')" prop="description">
             <el-input id="alert-box-input-description" v-model="editAlertRule.description" maxlength="256" placeholder="" rows="2" show-word-limit size="small" type="textarea"></el-input>
           </el-form-item>
+          <!--notifyActive-->
+          <el-form-item :label="$t('alert.config.notifyActive')" prop="notifyActive" class="half-form-item">
+            <el-select
+              id="alert-box-input-notifyActive"
+              v-model="editAlertRule.notifyActive"
+              class="right-box__select half-form-item"
+              placeholder=""
+              :popper-append-to-body="false"
+              popper-class="prevent-clickoutside right-box-select-top"
+              size="small"
+              @change="receiverAndNotifyValidate"
+            >
+              <el-option
+                :label="$t('overall.enabled')"
+                :value="1">
+              </el-option>
+              <el-option
+                :label="$t('overall.disabled')"
+                :value="0">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--notifyExpired-->
+          <el-form-item :label="$t('alert.config.notifyExpired')" prop="notifyExpired" class="half-form-item">
+            <el-select
+              id="alert-box-input-notifyExpired"
+              v-model="editAlertRule.notifyExpired"
+              class="right-box__select half-form-item"
+              placeholder=""
+              :popper-append-to-body="false"
+              popper-class="prevent-clickoutside right-box-select-top"
+              size="small"
+              @change="receiverAndNotifyValidate"
+            >
+              <el-option
+                :label="$t('overall.enabled')"
+                :value="1">
+              </el-option>
+              <el-option
+                :label="$t('overall.disabled')"
+                :value="0">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--receiver-->
+          <el-form-item :label="$t('alert.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
+            <el-select
+              id="alert-box-input-receiver"
+              v-model.trim="editAlertRule.receiverShow"
+              class="right-box__select"
+              filterable
+              multiple
+              placeholder=""
+              popper-class="prevent-clickoutside right-box-select-top"
+              size="small"
+              value-key="userId"
+              @change="receiverShowChange"
+            >
+              <el-option
+                style="width: 620px"
+                v-for="item in userData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+                <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--notify-->
+          <el-form-item :label="$t('alert.notify')" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'change' }]" class="notify-box" prop="method" >
+            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top prevent-clickoutside" size="small">
+              <el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- effective -->
           <div class="alert-rule-split-title">{{ $t('alert.config.effectiveConfig') }}</div>
           <!--state-->
           <el-form-item :label="$t('overall.state')" prop="state" class="half-form-item">
@@ -244,82 +333,8 @@
               }">
             </el-time-picker>
           </el-form-item>
-          <div class="alert-rule-split-title">{{ $t('alert.config.notificationConfig') }}</div>
-          <!--notifyActive-->
-          <el-form-item :label="$t('alert.config.notifyActive')" prop="notifyActive" class="half-form-item">
-            <el-select
-              id="alert-box-input-notifyActive"
-              v-model="editAlertRule.notifyActive"
-              class="right-box__select half-form-item"
-              placeholder=""
-              :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-select-top"
-              size="small"
-              @change="receiverAndNotifyValidate"
-            >
-              <el-option
-                :label="$t('overall.enabled')"
-                :value="1">
-              </el-option>
-              <el-option
-                :label="$t('overall.disabled')"
-                :value="0">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <!--notifyExpired-->
-          <el-form-item :label="$t('alert.config.notifyExpired')" prop="notifyExpired" class="half-form-item">
-            <el-select
-              id="alert-box-input-notifyExpired"
-              v-model="editAlertRule.notifyExpired"
-              class="right-box__select half-form-item"
-              placeholder=""
-              :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-select-top"
-              size="small"
-              @change="receiverAndNotifyValidate"
-            >
-              <el-option
-                :label="$t('overall.enabled')"
-                :value="1">
-              </el-option>
-              <el-option
-                :label="$t('overall.disabled')"
-                :value="0">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <!--receiver-->
-          <el-form-item :label="$t('alert.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
-            <el-select
-              id="alert-box-input-receiver"
-              v-model.trim="editAlertRule.receiverShow"
-              class="right-box__select"
-              filterable
-              multiple
-              placeholder=""
-              popper-class="prevent-clickoutside right-box-select-top"
-              size="small"
-              value-key="userId"
-              @change="receiverShowChange"
-            >
-              <el-option
-                style="width: 620px"
-                v-for="item in userData"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-                <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <!--notify-->
-          <el-form-item :label="$t('alert.notify')" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'change' }]" class="notify-box" prop="method" >
-            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top prevent-clickoutside" size="small">
-              <el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
+
+          <!-- more -->
           <div class="alert-rule-split-title">{{ $t('overall.more') }}</div>
           <el-form-item :label="$t('alert.config.trbShot')" prop="trbShot">
             <rich-text-editor ref="richTextEditor" :edit-data="editAlertRule.trbShot" @after-init="afterInitRich"></rich-text-editor>
@@ -352,7 +367,8 @@ import promqlInputMixin from '@/components/common/mixin/promqlInput'
 export default {
   name: 'alertRuleBox',
   props: {
-    alertRule: Object
+    alertRule: Object,
+    severityData: Array
   },
   components: {
     'promql-input': promqlInput,
@@ -453,12 +469,15 @@ export default {
         {
           label: '<=',
           value: '<='
+        },
+        {
+          label: '~=',
+          value: '~='
         }
       ],
       unitOptions: chartDataFormat.unitOptions(),
 
       userData: [],
-      severityData: [],
       notifyData: [],
       MetricsType: 1,
       weekList: [
@@ -489,6 +508,15 @@ export default {
   },
   methods: {
     nzNumber: nzNumber,
+    thresholdValidator (rule, value, callback) {
+      if (rule.item.operator === '~=' || !value) {
+        callback()
+      } else if (isNaN(Number(value))) {
+        callback(new Error(this.$t('validate.number')))
+      } else {
+        callback()
+      }
+    },
     clickOutside () {
       this.esc(false)
     },
@@ -502,10 +530,20 @@ export default {
       if (this.editAlertRule.type !== 3) {
         this.editAlertRule.expr = this.expressions[0]
       }
+      // 处理condition 删除掉不需要的属性
+      const condition = this.editAlertRule.condition.map(item => {
+        return {
+          id: item.id,
+          weight: item.weight,
+          operator: item.operator,
+          value: item.value
+        }
+      })
       const params = {
         ...this.editAlertRule,
         method: this.editAlertRule.method.join(','),
-        type: this.editAlertRule.type
+        type: this.editAlertRule.type,
+        condition
       }
       this.$refs.alertRuleForm.validate((valid) => {
         if (valid) {
@@ -570,16 +608,6 @@ export default {
     metricChange (val) {
       this.editAlertRule.expr = val
     },
-    getSeverityData () {
-      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
-        if (response.code == 200) {
-          this.severityData = response.data.list
-          if (!this.editAlertRule.id && this.severityData.length > 0) {
-            this.editAlertRule.severityId = this.severityData[0].id
-          }
-        }
-      })
-    },
     getNotifyData () {
       this.$get('alert/notify/method', { pageNo: 1, pageSize: -1 }).then(response => {
         if (response.code == 200) {
@@ -631,11 +659,18 @@ export default {
     },
     afterInitRich () {
       this.$refs.alertName.focus()
+    },
+    // 比较符号变化
+    operatorChange (item, index, value) {
+      if (item.operator === '~=' || value === '~=') {
+        item.value = ''
+        this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 验证
+      }
+      item.operator = value
     }
   },
   mounted () {
     this.getUserList()
-    this.getSeverityData()
     this.getNotifyData()
   },
   watch: {
@@ -645,6 +680,35 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editAlertRule = JSON.parse(JSON.stringify(n))
+        // 给condition赋值
+        if (this.editAlertRule.condition && this.editAlertRule.condition.length) {
+          this.$set(this.editAlertRule, 'condition', this.severityData.map(item => {
+            item = {
+              ...item,
+              value: '',
+              operator: '>'
+            }
+            this.editAlertRule.condition.forEach(subItem => {
+              if (item.id === subItem.id) {
+                item = {
+                  ...item,
+                  operator: subItem.operator,
+                  value: subItem.value
+                }
+              }
+            })
+            return item
+          }))
+        } else {
+          this.$set(this.editAlertRule, 'condition', this.severityData.map(item => {
+            return {
+              ...item,
+              value: '',
+              operator: '>'
+            }
+          }))
+        }
+
         if (this.editAlertRule.id || this.editAlertRule.name) {
           this.expressions = [this.editAlertRule.expr]
           this.showTypeSelect = true // 当 edit 时禁用 type下拉框
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index 8c20f519b..7b9885a07 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -188,61 +188,71 @@ export default {
           show: true,
           width: 80,
           sortable: 'custom'
-        }, {
+        },
+        {
           label: this.$t('alert.alertName'),
           prop: 'name',
           show: true,
           minWidth: 200,
           sortable: 'custom'
-        }, {
+        },
+        {
           label: this.$t('overall.type'),
           prop: 'type',
           show: true,
           minWidth: 200,
           sortable: 'custom'
-        }, {
+        },
+        {
           label: this.$t('alert.config.expr'),
           prop: 'expr',
           minWidth: 200,
           show: true
-        }, {
-          label: this.$t('alert.config.operator'),
-          prop: 'operator',
-          minWidth: 100,
-          show: true
-        }, {
-          label: this.$t('alert.config.threshold'),
-          prop: 'threshold',
-          minWidth: 100,
-          show: true
-        }, {
+        },
+        // {
+        //   label: this.$t('alert.config.operator'),
+        //   prop: 'operator',
+        //   minWidth: 100,
+        //   show: true
+        // }, {
+        //   label: this.$t('alert.config.threshold'),
+        //   prop: 'threshold',
+        //   minWidth: 100,
+        //   show: true
+        // },
+        {
           label: this.$t('alert.config.for'),
           prop: 'last',
           minWidth: 100,
           show: true
-        }, {
-          label: this.$t('alert.severity'),
-          prop: 'severity',
-          show: true,
-          minWidth: 100,
-          sortable: 'custom'
-        }, {
+        },
+        // {
+        //   label: this.$t('alert.severity'),
+        //   prop: 'severity',
+        //   show: true,
+        //   minWidth: 100,
+        //   sortable: 'custom'
+        // },
+        {
           label: this.$t('alert.summary'),
           prop: 'summary',
           minWidth: 200,
           show: true
-        }, {
+        },
+        {
           label: this.$t('overall.remark'),
           prop: 'description',
           minWidth: 200,
           show: true
-        }, {
+        },
+        {
           label: this.$t('alert.alert'),
           prop: 'alertNum',
           show: true,
           width: 120,
           sortable: 'custom'
-        }, {
+        },
+        {
           label: this.$t('alert.receiver'),
           prop: 'receivers',
           show: false,
@@ -253,7 +263,8 @@ export default {
           prop: 'method',
           show: false,
           minWidth: 100
-        }, {
+        },
+        {
           label: this.$t('overall.state'),
           prop: 'state',
           show: true,
diff --git a/nezha-fronted/src/components/page/alert/alertRule.vue b/nezha-fronted/src/components/page/alert/alertRule.vue
index 74511d50a..7c477490a 100644
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -133,7 +133,7 @@
       </template>
     </nz-data-list>
     <transition name="right-box">
-      <alert-rule-box v-if="rightBox.show" ref="alertConfigBox" :alert-rule="object" @close="closeRightBox"></alert-rule-box>
+      <alert-rule-box v-if="rightBox.show" ref="alertConfigBox" :severityData="severityData" :alert-rule="object" @close="closeRightBox"></alert-rule-box>
     </transition>
     <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
     </transition>
@@ -186,12 +186,12 @@ export default {
         unit: 2,
         operator: '>',
         last: 60,
-        severityId: '',
+        // severityId: '',
         summary: '',
         description: '',
         method: [],
         name: '',
-        threshold: '',
+        // threshold: '',
         receiver: [],
         autoExpired: 1,
         schedEnable: 0,
@@ -201,7 +201,8 @@ export default {
         notifyActive: 0,
         notifyExpired: 0,
         timeout: 300,
-        trbShot: ''
+        trbShot: '',
+        condition: []
       },
       blankSilenceObject: {
         id: '',
@@ -221,33 +222,38 @@ export default {
       silenceBoxShow: false,
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
-        searchLabelList: [{
-          id: 1,
-          name: 'ID',
-          type: 'input',
-          label: 'ids',
-          disabled: false
-        }, {
-          id: 2,
-          name: this.$t('alert.alertName'),
-          type: 'input',
-          label: 'name',
-          disabled: false
-        }, {
-          id: 4,
-          name: this.$t('alert.severity'),
-          type: 'severity',
-          label: 'severityIds',
-          readonly: true,
-          disabled: false
-        }, {
-          id: 5,
-          name: this.$t('overall.type'),
-          type: 'alertTypes',
-          label: 'type',
-          readonly: true,
-          disabled: false
-        }]
+        searchLabelList: [
+          {
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'ids',
+            disabled: false
+          },
+          {
+            id: 2,
+            name: this.$t('alert.alertName'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          },
+          // {
+          //   id: 4,
+          //   name: this.$t('alert.severity'),
+          //   type: 'severity',
+          //   label: 'severityIds',
+          //   readonly: true,
+          //   disabled: false
+          // },
+          {
+            id: 5,
+            name: this.$t('overall.type'),
+            type: 'alertTypes',
+            label: 'type',
+            readonly: true,
+            disabled: false
+          }
+        ]
       },
       searchTime: bus.getTimezontDateRange(),
       needAlertDaysData: true,
@@ -367,6 +373,13 @@ export default {
     },
     copy (u) {
       this.edit(u, true)
+    },
+    getSeverityData () {
+      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.severityData = response.data.list
+        }
+      })
     }
   },
   created () {
@@ -391,25 +404,25 @@ export default {
         },
         jsonKey: 'val'
       },
-      severityIds: {
-        target: this.searchLabel,
-        isSearchInput: true,
-        propertyName: 'severityIds',
-        type: 'string',
-        defaultJson: {
-          disabled: false,
-          id: 4,
-          label: 'severityIds',
-          name: 'Priority',
-          readonly: true,
-          type: 'severity',
-          val: '',
-          valnum: '',
-          valString: '',
-          listStr: 'severitySelect'
-        },
-        jsonKey: 'valnum'
-      },
+      // severityIds: {
+      //   target: this.searchLabel,
+      //   isSearchInput: true,
+      //   propertyName: 'severityIds',
+      //   type: 'string',
+      //   defaultJson: {
+      //     disabled: false,
+      //     id: 4,
+      //     label: 'severityIds',
+      //     name: 'Priority',
+      //     readonly: true,
+      //     type: 'severity',
+      //     val: '',
+      //     valnum: '',
+      //     valString: '',
+      //     listStr: 'severitySelect'
+      //   },
+      //   jsonKey: 'valnum'
+      // },
       type: {
         target: this.searchLabel,
         isSearchInput: true,
@@ -445,6 +458,7 @@ export default {
       }
     }
     this.initQueryFromPath(searchKeys)
+    this.getSeverityData()
   },
   mounted () {
   },