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

Merge branch 'dev-3.7' of git.mesalab.cn:nezha/nezha-fronted into dev-3.7

Browse Source
This commit is contained in:
zyh
2023-04-12 15:05:56 +08:00
parent 80cadbc313 c910286318
commit bbd59f570b
8 changed files with 457 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
nezha-fronted/src/assets/css/components/common/project/L5/topologyTopTool.scss
View File

@@ -29,22 +29,31 @@
.top-tool-item {
cursor: pointer;
background: $--background-color-base;
border: 1px solid $--border-color-light;
background-color: $--background-color-empty;
border: 1px solid $--button-icon-border-color;
border-radius: 2px;
padding: 8px 11px;
line-height: 14px;
margin-right: 10px;
}
.top-tool-item:active{
background-color: $--button-icon-active-background-color;
border: 1px solid $--button-icon-active-border-color !important;
color: $--color-primary;
}
.top-tool-item.nz-btn-disabled {
background-color: $--background-color-empty !important;
border: 1px solid $--button-icon-border-color !important;
}
.is-active-meta2d.top-tool-item {
background: mix(#FFF, $--background-color-disabled, 35%);
border: 1px solid mix(#000, $--background-color-disabled, 35%);
color: $--color-text-disabled;
//background: mix(#FFF, $--background-color-disabled, 35%);
//border: 1px solid mix(#000, $--background-color-disabled, 35%);
//color: $--color-text-disabled;
}
.top-tool-item-delete:active{
background: mix(#FFF, $--background-color-disabled, 35%);
border: 1px solid mix(#000, $--background-color-disabled, 35%);
color: $--color-text-disabled;
//background: mix(#FFF, $--background-color-disabled, 35%);
//border: 1px solid mix(#000, $--background-color-disabled, 35%);
//color: $--color-text-disabled;
}
.top-tool-item-scale {
margin-left: 40px;
@@ -125,8 +134,9 @@
}
}
.top-tool-item-disabled {
color: #CECECE;
opacity: 0.3;
background-image: none;
opacity: .6;
cursor: default !important;
}
.tool-item-active {
background: #1a1a1a;

140
nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
View File

@@ -1,65 +1,81 @@
.right-box-alert-rule {
.severity-circle{
.severity-circle {
position: absolute;
left: 10px;
top: 0;
}
.severity-box{
.severity-box {
position: relative;
}
.severity-box .el-select .el-input__inner{
.severity-box .el-select .el-input__inner {
padding-left: 25px;
}
.half-form-item {
width: calc(50% - 5px);
display: inline-block;
.el-form-item__content,.el-select{
.el-form-item__content, .el-select {
width: 100%;
}
}
.alert-box-duration.half-form-item {
.el-form-item__content {
line-height: 31px !important;
}
}
.right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
.right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend {
width: 100%;
}
.rich-text-editor{
.rich-text-editor {
line-height: 24px;
}
.el-input-group__prepend{
.el-input-group__prepend {
position: relative;
background: $--border-color-light;
border: $--border-color-light;
.hide-icon{
.hide-icon {
width: auto;
.el-input__inner{
.el-input__inner {
border: none;
text-align: center;
}
}
}
.el-input-group__append {
border: 1px solid $--border-color-light;
background-color: $--right-box-sub-title-background-color;
border-left: none;
}
.alert-rule-split-title{
background: $--background-color-base;
.alert-rule-split-title {
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;
width: 100%;
}
.query-row .metric-selector-input-box {
width: calc(100% - 120px) !important;
}
@@ -67,37 +83,93 @@
.el-input-number--small {
width: 100%;
}
.el-tag--mini.el-tag--light {
background-color: $--alert-rule-background-color;
border-color: $--border-color-light;
.el-tag__close {
color: $--alert-rule-color;
}
.el-tag__close:hover {
color: #FFFFFF;
}
}
.ͼ2 .cm-content{
caret-color:$--color-text-regular;
.ͼ2 .cm-content {
caret-color: $--color-text-regular;
}
.alert-box-threshold {
.hide-icon {
.el-input__inner{
.hide-icon {
.el-input__inner {
text-align: center;
padding: 0;
border: 1px solid $--border-color-light;
}
}
.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;
padding: 0;
border:1px solid $--border-color-light;
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;
font-size: 12px;
max-width: 120px;
overflow: hidden;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
}
.severity-item{
color: $--color-text-secondary;
font-size: 12px;
max-width: 120px;
overflow: hidden;
}
.text-ellipsis{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}

31
nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue
View File

@@ -63,6 +63,11 @@
<div class="search-item-value" v-html="getPathContent(item.key)">
</div>
</div>
<div class="search-item-value-box" v-else-if="obj.type === 'alertrule'&&item.key==='severityId'">
<!-- <i v-if="item.icon&&getPathContent(item.key)!=='&#45;&#45;'" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>-->
<!-- <div class="search-item-value" v-html="getPathContent(item.key)">-->
<!-- </div>-->
</div>
<div style="cursor: pointer" v-else-if="item.key === 'alertNum'">
<i :class="Number(getPathContent(item.key)) ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;" @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
<div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
@@ -488,7 +493,26 @@ export default {
this.$get('/alert/rule/' + this.obj.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.severityColor = this.severityData.find(item => res.data.severityId == item.id).color
// // this.severityColor = this.severityData.find(item => res.data.severityId == item.id).color
// this.severityColor = 'blue'
res.data.condition = JSON.parse(res.data.condition)
res.data.condition = this.severityData.map(item => {
item = {
...item,
value: '',
operator: '>'
}
res.data.condition.forEach(subItem => {
if (item.id === subItem.id) {
item = {
...item,
operator: subItem.operator,
value: subItem.value
}
}
})
return item
})
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
@@ -587,8 +611,9 @@ export default {
if (key === 'trbShot' && this.obj.type === 'alertrule') {
// str = ''
}
if (key === 'severityId' && this.obj.type === 'alertrule' && this.alertLabelData.severityId) {
str = this.severityData.find(item => this.alertLabelData.severityId == item.id).name
if (key === 'severityId' && this.obj.type === 'alertrule') {
// str = this.severityData.find(item => this.alertLabelData.severityId == item.id).name
// str = 'p1'
}
return str || '--'
},

4
nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
View File

@@ -27,13 +27,13 @@
<!-- </div>-->
<div id="undo"
class="top-tool-item"
:class="undoFlag ? '' : 'is-active-meta2d' "
:class="undoFlag ? '' : 'nz-btn-disabled' "
@click="undo">
<i class="nz-icon nz-icon-revoke" :title="$t('overall.revocation')"/>
</div>
<div id="redo"
class="top-tool-item"
:class="redoFlag ? '' : 'is-active-meta2d' "
:class="redoFlag ? '' : 'nz-btn-disabled' "
@click="redo"
>
<i class="nz-icon nz-icon-revoke1" :title="$t('overall.redo')"/>

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

@@ -10,7 +10,7 @@
</div>
<!-- begin--表单-->
<div class="right-box__container">
<div class="right-box__container alert-box-threshold">
<div class="container__form">
<el-form ref="alertRuleForm" :model="editAlertRule" :rules="rules" label-position = "top" label-width="120px">
<!--name-->
@@ -18,36 +18,26 @@
<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"
@change="selectAlertRuleMetric">
<el-option
v-for="item in searchMetrics"
:key="item.value"
:key="editAlertRule.type+ '-' + item.value"
:label="item.label"
: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
v-if="showMetrics"
@@ -64,8 +54,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
v-if="!showMetrics"
@@ -80,37 +70,49 @@
@change="metricChange"
></promql-input>
</el-row>
</template>
</el-form-item>
<el-form-item label="OID" prop="expr" v-if="!showSnmpTrap">
</div>
</el-form-item>
<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.dashboard.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="'threshold-list' + 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 :disabled="!showSnmpTrap" :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="'Result' + 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:24px">{{$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">
@@ -118,21 +120,46 @@
</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>
<!--autoExpired-->
<el-form-item :label="$t('alert.config.autoExpired')" prop="autoExpired" class="half-form-item">
<!--unit-->
<el-form-item v-if="showSnmpTrap" :label="$t('dashboard.dashboard.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>
<!-- 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>
</el-form-item>
<!--description-->
<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-autoExpired"
v-model="editAlertRule.autoExpired"
id="alert-box-input-notifyActive"
v-model="editAlertRule.notifyActive"
class="right-box__select half-form-item"
placeholder=""
popper-class="prevent-clickoutside right-box-select-top "
:popper-append-to-body="false"
popper-class="prevent-clickoutside right-box-select-top"
size="small"
@change="receiverAndNotifyValidate"
>
<el-option
:label="$t('overall.enabled')"
@@ -144,19 +171,61 @@
</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>
<!--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>
<!--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>
<!--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, index) in userData"
:key="'receiver' + index + 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>
<!--description-->
<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>
<!--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="'notify' + 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">
@@ -215,7 +284,7 @@
>
<el-option
v-for="item in weekList"
:key="item.value"
:key="'schedDays' + item.value"
:label="item.label"
:value="item.value">
</el-option>
@@ -246,82 +315,6 @@
}">
</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('dashboard.dashboard.receivers')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-select
id="alert-box-input-receiver"
v-model="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>
<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>
@@ -455,12 +448,15 @@ export default {
{
label: '<=',
value: '<='
},
{
label: '=~',
value: '=~'
}
],
unitOptions: chartDataFormat.unitOptions(),
userData: [],
severityData: [],
notifyData: [],
MetricsType: 1,
weekList: [
@@ -491,6 +487,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)
},
@@ -504,10 +509,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
}
if (this.editAlertRule.trbShot && this.editAlertRule.trbShot == '<div class="editor-core ql-container ql-snow"><div class="ql-editor"><p><br></p></div></div>') {
this.editAlertRule.trbShot = ''
@@ -517,6 +532,7 @@ export default {
params.receiver = this.editAlertRule.receiverShow.join(',')
params.schedDays = this.editAlertRule.schedDays.join(',')
params.trbShot = this.$refs.richTextEditor.getContent()
params.condition = JSON.stringify(params.condition)
if (this.editAlertRule.id) {
this.$put('alert/rule', params).then(response => {
this.prevent_opt.save = false
@@ -575,16 +591,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) {
@@ -610,9 +616,6 @@ export default {
}
},
selectAlertRuleMetric (val) {
if (!this.editAlertRule.operator) {
this.editAlertRule.operator = '>'
}
if (val === 1) {
this.showSnmpTrap = false // showSnmpTrap 为 true 时显示 expr,threshold,unit
this.showMetrics = true
@@ -633,23 +636,31 @@ export default {
} else if (val === 3) {
this.showSnmpTrap = false // showSnmpTrap 为 false 时,展示 OID
this.showMetrics = false
// this.editAlertRule.inr = ''
// this.editAlertRule.last = '15'
// this.editAlertRule.unit = 2
// this.editAlertRule.operator = '>'
// this.editAlertRule.threshold = ''
if (!this.editAlertRule.last) {
this.editAlertRule.last = 60
}
// type为3时 只能输入正则
this.editAlertRule.condition.forEach((item, index) => {
item.operator = '=~'
item.value = ''
this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 验证
})
}
},
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: {
@@ -658,7 +669,40 @@ export default {
immediate: true,
handler (n, o) {
this.isEdit = true
this.editAlertRule = JSON.parse(JSON.stringify(n))
const obj = this.$loadsh.cloneDeep(n)
this.editAlertRule = this.$loadsh.cloneDeep(obj)
// 获取缓存中的告警等级列表
const severityData = JSON.parse(localStorage.getItem('nz-severityDataWeight'))
// 给condition赋值
if (this.editAlertRule.condition && this.editAlertRule.condition.length) {
this.editAlertRule.condition = JSON.parse(this.editAlertRule.condition)
this.$set(this.editAlertRule, 'condition', 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', severityData.map(item => {
return {
...item,
value: '',
operator: '>'
}
}))
}
if (this.editAlertRule.id || this.editAlertRule.name) {
this.expressions = [this.editAlertRule.expr]
this.showTypeSelect = !!this.editAlertRule.id // 当 edit 时禁用 type下拉框
@@ -682,7 +726,7 @@ export default {
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs.promql.metricChange(ex)
this.$refs.promql && this.$refs.promql.metricChange(ex)
}
})
})

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

@@ -193,61 +193,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('overall.alert'),
prop: 'alertNum',
show: true,
width: 120,
sortable: 'custom'
}, {
},
{
label: this.$t('dashboard.dashboard.receivers'),
prop: 'receivers',
show: false,
@@ -258,7 +268,8 @@ export default {
prop: 'method',
show: false,
minWidth: 100
}, {
},
{
label: this.$t('overall.state'),
prop: 'state',
show: true,

106
nezha-fronted/src/components/page/alert/alertRule.vue
View File

@@ -200,14 +200,14 @@ export default {
unit: 2,
operator: '>',
last: 60,
severityId: 1,
// severityId: '',
summary: '',
description: '',
method: [],
name: '',
threshold: '',
// threshold: '',
receiver: [],
autoExpired: 1,
// autoExpired: 1,
schedEnable: 0,
schedDays: '',
schedStime: '00:00',
@@ -215,7 +215,8 @@ export default {
notifyActive: 0,
notifyExpired: 0,
timeout: 300,
trbShot: ''
trbShot: '',
condition: []
},
blankSilenceObject: {
id: '',
@@ -235,33 +236,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,
@@ -406,25 +412,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,

1
nezha-fronted/src/entrance/exportHtml/App.vue
View File

@@ -82,6 +82,7 @@ export default {
const localOffset = this.dataJson.timezone || moment.tz.guess()
this.dataJson.timezone = localOffset
localStorage.setItem('nz-sys-timezone', localOffset)
localStorage.setItem('nz-default-dateFormat', 'YYYY-MM-DD HH:mm:ss')
if (window.dataJson && (
navigator.userAgent.match(/Mobi/i) ||
navigator.userAgent.match(/Android/i) ||