gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-972 fix： 支持 配置 snmp trap 告警规则

Browse Source
This commit is contained in:
@changcode
2021-09-06 18:58:35 +08:00
parent f5b746d026
commit 9a4c09de8d
3 changed files with 97 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
View File

@@ -23,6 +23,7 @@
class="right-box__select" class="right-box__select"
popper-class="right-box-select-dropdown prevent-clickoutside" popper-class="right-box-select-dropdown prevent-clickoutside"
size="small" size="small"
:disabled="showTypeSelect"
@change="selectAlertRuleMetric"> @change="selectAlertRuleMetric">
<el-option <el-option
v-for="item in searchMetrics" v-for="item in searchMetrics"
@@ -31,40 +32,43 @@
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label='$t("alert.config.expr")' prop="expr"> <el-form-item v-if="showSnmpTrap" :label='$t("alert.config.exprBox")' prop="expr">
<template v-if="showMetrics"> <template v-if="showMetrics">
<el-row style="line-height: 32px;"> <el-row style="line-height: 32px;">
<promql-input <promql-input
id="alert-box-input-promql" id="alert-box-input-promql"
ref="promql" ref="promql"
:expression-list.sync="expressions" :expression-list.sync="expressions"
:index="0" :index="0"
:plugins="['metric-selector','metric-input']" :plugins="['metric-selector','metric-input']"
:required="true" :required="true"
type="metric" type="metric"
:styleType="3" :styleType="3"
@change="metricChange" @change="metricChange"
></promql-input> ></promql-input>
</el-row> </el-row>
</template> </template>
<template v-else> <template v-else>
<el-row style="line-height: 32px;"> <el-row style="line-height: 32px;">
<promql-input <promql-input
id="alert-box-input-promql" id="alert-box-input-promql"
ref="promql" ref="promql"
:expression-list.sync="expressions" :expression-list.sync="expressions"
:index="0" :index="0"
:plugins="['metric-selector','metric-input']" :plugins="['metric-selector','metric-input']"
:required="true" :required="true"
type="log" type="log"
:styleType="3" :styleType="3"
@change="metricChange" @change="metricChange"
></promql-input> ></promql-input>
</el-row> </el-row>
</template> </template>
</el-form-item>
<el-form-item label="OID" prop="expr" v-if="!showSnmpTrap">
<el-input id="alert-box-input-oid" v-model="editAlertRule.expr" size="small" type="text"></el-input>
</el-form-item> </el-form-item>
<!--threshold--> <!--threshold-->
<el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;"> <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
<el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text"> <el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text">
<el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="hide-icon" popper-class="right-box-select-dropdown prevent-clickoutside" size="small"> <el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="hide-icon" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
<el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -72,7 +76,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<!--unit--> <!--unit-->
<el-form-item :label="$t('alert.config.unit')" prop="unit"> <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" prop="unit">
<el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
placeholder="" placeholder=""
popper-class="no-style-class unit-popper-class" popper-class="no-style-class unit-popper-class"
@@ -178,6 +182,16 @@ export default {
}, },
mixins: [editRigthBox], mixins: [editRigthBox],
data () { data () {
const nzOid = (rule, value, callback) => {
if (this.MetricsType === 3) {
const Oid = /^(\d{1,9}\.){0,}[\d]+$/
if (Oid.test(value)) {
callback()
} else {
callback(new Error(this.$t('overall.oid')))
}
}
}
return { return {
promqlCount: 1, promqlCount: 1,
promqlKeys: [0], promqlKeys: [0],
@@ -194,16 +208,23 @@ export default {
{ {
value: 'Logs', value: 'Logs',
label: this.$t('overall.logs') label: this.$t('overall.logs')
},
{
value: 'SNMP trap',
label: 'SNMP trap'
} }
], ],
showMetrics: true, showMetrics: true,
showSnmpTrap: true,
showTypeSelect: false,
editAlertRule: {}, editAlertRule: {},
rules: { rules: {
name: [ name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
], ],
expr: [ expr: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' } { required: true, message: this.$t('validate.required'), trigger: 'change' },
{ validator: nzOid, trigger: 'blur' }
], ],
last: [ last: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { required: true, message: this.$t('validate.required'), trigger: 'blur' },
@@ -271,7 +292,9 @@ export default {
save () { save () {
if (this.prevent_opt.save) { return } ; if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true this.prevent_opt.save = true
this.editAlertRule.expr = this.expressions[0] if (this.MetricsType !== 3) {
this.editAlertRule.expr = this.expressions[0]
}
const params = { const params = {
...this.editAlertRule, ...this.editAlertRule,
method: this.editAlertRule.method.join(','), method: this.editAlertRule.method.join(','),
@@ -369,13 +392,29 @@ export default {
}, },
selectAlertRuleMetric (val) { selectAlertRuleMetric (val) {
if (val === 'Metrics') { if (val === 'Metrics') {
// showMetrics 为 true 时,展示 Metrics
this.showMetrics = true this.showMetrics = true
// showSnmpTrap 为 true 时,展示 Expression,Threshold,Unit
this.showSnmpTrap = true
// type = 1
this.MetricsType = 1 this.MetricsType = 1
// 移除from表单的 expr 验证
this.$refs.alertRuleForm.clearValidate('expr')
} else if (val === 'Logs') { } else if (val === 'Logs') {
// showMetrics 为 false 时,展示 Logs label
this.showMetrics = false this.showMetrics = false
// showSnmpTrap 为 true 时,展示Expression,Threshold,Unit
this.showSnmpTrap = true
// type = 2
this.MetricsType = 2 this.MetricsType = 2
// 移除from表单的 expr 验证
this.$refs.alertRuleForm.clearValidate('expr')
} else if (val === 'SNMP trap') {
// showSnmpTrap 为 false 时,展示 OID
this.showSnmpTrap = false
// type = 3
this.MetricsType = 3
} }
this.$refs.promql.expressionList[0] = ''
} }
}, },
mounted () { mounted () {
@@ -389,17 +428,32 @@ export default {
immediate: true, immediate: true,
handler (n, o) { handler (n, o) {
this.isEdit = true this.isEdit = true
console.log(n.type)
this.editAlertRule = JSON.parse(JSON.stringify(n)) this.editAlertRule = JSON.parse(JSON.stringify(n))
if (this.editAlertRule.id || this.editAlertRule.name) { if (this.editAlertRule.id || this.editAlertRule.name) {
this.expressions = [this.editAlertRule.expr]
// 当 edit 时禁用 type下拉框
this.showTypeSelect = true
if (n.type === 1) { if (n.type === 1) {
this.fromData.status = 'Metrics' this.fromData.status = 'Metrics'
// showMetrics 为 true 时,展示 Metrics
this.showMetrics = true this.showMetrics = true
// showSnmpTrap 为 true 时,展示Expression,Threshold,Unit
this.showSnmpTrap = true
this.MetricsType = 1
} else if (n.type === 2) { } else if (n.type === 2) {
this.fromData.status = 'Logs' this.fromData.status = 'Logs'
// showMetrics 为 false 时,展示 Logs label
this.showMetrics = false this.showMetrics = false
// showSnmpTrap 为 true 时,展示Expression,Threshold,Unit
this.showSnmpTrap = true
this.MetricsType = 2
} else if (n.type === 3) {
this.fromData.status = 'SNMP trap'
// showSnmpTrap 为 false 时,展示 OID
this.showSnmpTrap = false
this.MetricsType = 3
return
} }
this.expressions = [this.editAlertRule.expr]
this.$nextTick(() => { this.$nextTick(() => {
this.expressions.forEach((ex, index) => { this.expressions.forEach((ex, index) => {
if (ex) { if (ex) {

2
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -49,7 +49,7 @@
<template v-else-if="item.prop === 'type'"> <template v-else-if="item.prop === 'type'">
<span v-if="scope.row[item.prop] === 1">{{ $t('project.metrics.metrics') }}</span> <span v-if="scope.row[item.prop] === 1">{{ $t('project.metrics.metrics') }}</span>
<span v-else-if="scope.row[item.prop] === 2">{{ $t('overall.logs') }}</span> <span v-else-if="scope.row[item.prop] === 2">{{ $t('overall.logs') }}</span>
<span v-else-if="scope.row[item.prop] === 3">SNMP TRAP</span> <span v-else-if="scope.row[item.prop] === 3">SNMP trap</span>
<span v-else>-</span> <span v-else>-</span>
</template> </template>
<template v-else-if="item.prop === 'threshold'">{{formatThreshold(scope.row[item.prop], scope.row.unit)}}</template> <template v-else-if="item.prop === 'threshold'">{{formatThreshold(scope.row[item.prop], scope.row.unit)}}</template>

7
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -84,13 +84,14 @@
</template> </template>
<template v-else-if="item.prop === 'clientState'"> <template v-else-if="item.prop === 'clientState'">
<div v-if="scope.row[item.prop]===1"> <div v-if="scope.row[item.prop]===1">
<div class="active-icon green-bg inline-block"></div> 正常 <div class="active-icon green-bg inline-block"></div>
{{ $t('overall.normal') }}
</div> </div>
<div v-else-if="scope.row[item.prop]===0"> <div v-else-if="scope.row[item.prop]===0">
<div class="active-icon red-bg inline-block"></div> 不正常 <div class="active-icon red-bg inline-block"></div> {{ $t('overall.unusual') }}
</div> </div>
<div v-else-if="scope.row[item.prop]===-1"> <div v-else-if="scope.row[item.prop]===-1">
<div class="active-icon red-bg inline-block"></div> 认证失败 <div class="active-icon red-bg inline-block"></div> {{ $t('overall.AuthenticationFailed') }}
</div> </div>
<template v-else>-</template> <template v-else>-</template>
</template> </template>