NEZ-1987 feat:alert rule编辑页面开发(支持多阈值告警规则)
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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下拉框
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 () {
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user