nezha-nezha-fronted/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

<template>
  <div class="right-box right-box-alert-config" v-clickoutside="{obj:editAlertRule,func:clickOutside}">
    <!-- begin--顶部按钮-->
    <div class="right-box-top-btns right-box-form-delete">
      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button" v-has="'rule_delete'" v-if="alertRule.id">
        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
      </button>
    </div>
    <!-- end--顶部按钮-->

    <!-- begin--标题-->
    <div class="right-box-title">{{editAlertRule.id ? $t("alert.config.editAlertConfig") + "  ID：" + editAlertRule.id : $t("alert.config.createAlertConfig")}}</div>
    <!-- end--标题-->

    <!-- begin--表单-->
    <div class="right-box-form-box">
      <el-form class="right-box-form right-box-form-left" :model="editAlertRule" label-position = "top" label-width="120px" :rules="rules" ref="alertRuleForm">
        <!--alertName-->
        <el-form-item :label='$t("alert.config.name")' prop="alertName">
          <el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small" id="alert-box-input-name"></el-input>
        </el-form-item>
        <el-form-item style="width: calc(100% - 15px);margin-left: 15px" :label='$t("alert.config.expr")' prop="expr">
          <promql-input
            ref="promql"
            :expression-list.sync="expressions"
            :index="0"
            :styleType="2"
            :required="true"
            @change="metricChange"
            :plugins="['metric-selector','metric-input']"
            id="alert-box-input-promql"
          ></promql-input>
        </el-form-item>
        <!--threshold-->
        <el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
          <el-input type="text" placeholder="" v-model="editAlertRule.threshold" size="small" id="alert-box-input-threshold">
            <el-select popper-class="config-dropdown threshold-dropdown" v-model="editAlertRule.operator" placeholder=""  size="small" id="alert-box-input-operator" slot="prepend" class="input-with-select">
              <el-option :id="'operator-'+item.key" v-for="item in operators" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <!--unit-->
        <el-form-item :label="$t('alert.config.unit')" prop="unit">
          <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%" id="alert-box-input-unit"
                       :options="unitOptions"
                       :props="{ expandTrigger: 'click',emitPath:false }"
                       :show-all-levels="false"
                       v-model="editAlertRule.unit"
          >
          </el-cascader>
        </el-form-item>
        <!--last-->
        <el-form-item :label="$t('alert.config.for')" prop="last">
          <el-input type="text" placeholder="" v-model.number="editAlertRule.last" size="small" id="alert-box-input-last">
            <template slot="append">{{$t('alert.config.second')}}</template>
          </el-input>
        </el-form-item>
        <!--severity-->
        <el-form-item :label="$t('alert.severity')" prop="severity">
          <el-select popper-class="config-dropdown" v-model="editAlertRule.severity" placeholder=""  size="small" id="alert-box-input-severity">
            <el-option :id="'alert-severity-'+item.value" v-for="item in $CONSTANTS.alertMessage.severityData" :key="item.value" :label="item.label" :value="item.value">
              <template v-if="!item.isEdit">{{item.label}}</template>
              <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
                <el-input type="text" v-model="item.value" size="mini"></el-input>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <div class="rule-severity-remark">
          <i class="nz-icon nz-icon-info-normal"></i>
          <div>
            <p>{{$t('alert.P1Rule')}}</p>
            <p>{{$t('alert.P2Rule')}}</p>
            <p>{{$t('alert.P3Rule')}}</p>
          </div>
        </div>
        <!--receiver-->
        <el-form-item :label="$t('config.account.receiver')" prop="receiver">
          <el-select
            id="alert-box-input-receiver"
            v-model.trim="editAlertRule.receiverShow"
            placeholder=""
            multiple
            filterable
            size="small"
            value-key="userId"
            popper-class="no-style-class"
          >
            <el-option
              v-for="item in userData"
              :key="item.userId"
              :label="item.username"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <!--summary-->
        <el-form-item :label="$t('alert.summary')" prop="summary">
          <el-input maxlength="512" rows="3" type="textarea" show-word-limit placeholder="" v-model="editAlertRule.summary" size="small" id="alert-box-input-summary"></el-input>
        </el-form-item>
        <!--description-->
        <el-form-item :label="$t('alert.description')" prop="description">
          <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editAlertRule.description" size="small" id="alert-box-input-description"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- end--表单-->

    <!--底部按钮-->
    <div class="right-box-bottom-btns">
      <button v-cancel="{obj:editAlertRule,func:esc}" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
        <span>{{$t('overall.cancel')}}</span>
      </button>
      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="alert-box-save">
        <span>{{$t('overall.save')}}</span>
      </button>
    </div>
  </div>
</template>

<script>
  import chartDataFormat from "../../charts/chartDataFormat";
  import promqlInput from "../../page/dashboard/explore/promqlInput";
  import { nzNumber} from "../js/validate";
  export default {
    name: "alertConfigBox",
    props: {
      alertRule: Object
    },
    components: {
      'promql-input': promqlInput,
    },
    data() {
      return {
        promqlCount: 1,
        promqlKeys: [0],
        expressions: [''],
        legends: [''],

        editAlertRule: {},
        rules:{
          alertName:[
            {required:true,message:this.$t('validate.required'),trigger:'blur'}
          ],
          expr:[
            {required:true,message:this.$t('validate.required'),trigger:'change'}
          ],
          last:[
            {required:true,message:this.$t('validate.required'),trigger:'blur'},
            {type:'number',message:this.$t('validate.number')}
          ],
          severity:[
            {required:true,message:this.$t('validate.required'),trigger:'change'},
          ],
          summary:[
            {required:true,message:this.$t('validate.required'),trigger:'blur'},
          ],
          operator:[
            {required:true,message:this.$t('validate.required'),trigger:'blur'},
          ],
          unit:[
            {required:true,message:this.$t('validate.required'),trigger:'blur'},
          ],
          threshold:[
            {required:true,message:this.$t('validate.required'),trigger:'blur'},
            {validator:nzNumber,trigger: 'blur'}
          ],
        },
        operators:[
          {
            label:'==',
            value:'=='
          },
          {
            label:'!=',
            value:'!='
          },
          {
            label:'>',
            value:'>'
          },
          {
            label:'<',
            value:'<'
          },
          {
            label:'>=',
            value:'>='
          },
          {
            label:'<=',
            value:'<='
          },
        ],
        unitOptions: chartDataFormat.unitOptions(),

        userData: [],
      }
    },
    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.editAlertRule.expr = this.expressions[0];
        this.$refs.alertRuleForm.validate((valid) => {
          if (valid) {
            this.editAlertRule.receiver = this.editAlertRule.receiverShow.join(",");
            if (this.editAlertRule.id) {
              this.$put('alert/rule', this.editAlertRule).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/rule', this.editAlertRule).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/rule?ids=" + this.editAlertRule.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;
        });
      },
      getUserList() {
        this.$get('sys/user/list', {pageNo: 1, pageSize: -1}).then(response => {
          if (response.code == 200) {
            this.userData = response.data.list;
          }
        })
      },
      metricChange(val){
        this.editAlertRule.expr=val;
      }
    },
    mounted() {
      this.getUserList();
    },
    watch: {
      alertRule: {
        deep: true,
        immediate: true,
        handler(n, o) {
          this.editAlertRule = JSON.parse(JSON.stringify(n));
          if (this.editAlertRule.id) {
            this.expressions = [this.editAlertRule.expr];
            this.$nextTick(() => {
              this.expressions.forEach((ex, index) => {
                if (ex) {
                  this.$refs.promql.metricChange(ex);
                }
              });
            });
          }
        }
      }
    }
  }
</script>
<style>
  .unit-popper-class{
    z-index: 2052 !important;
  }
  .input-with-select{
    width: 70px !important;
  }
  .input-with-select #alert-box-input-operator{
    padding: 0;
    text-align: center;
    border-top:1px solid #d0d4dC;
    border-bottom:1px solid #d0d4dC;
    border-radius: 4px 0 0 4px;
  }
  .input-with-select #alert-box-input-operator + .el-input__suffix{
    display: none;
  }
</style>
<style scoped>
  .rule-severity-remark{
    display: inline-flex;
    justify-content: left;
    justify-items: center;
    align-items: center;
    width: calc(100% - 46px);
    padding: 10px 15px;
    background: #F6F6F6;
    color: #999999;
    margin-top: -13px;
    margin-bottom: 18px;
    margin-left: 15px;
    font-size: 14px;
  }
  .rule-severity-remark .nz-icon-info-normal{
    margin-right: 10px;
  }
  /deep/ .metric-selector-title{
    margin-left: 0 !important;
  }
</style>