339 lines
12 KiB
Vue
339 lines
12 KiB
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>
|