OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[web-app] 告警配置列表,新增告警定义，修改告警定义功能

Browse Source
This commit is contained in:
tomsun28
2021-12-12 18:32:23 +08:00
parent 5dd417f369
commit 441df8f3c2
6 changed files with 218 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
View File

@@ -70,7 +70,7 @@
<span>警告告警</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.duration }}</td>
<td nzAlign="center">{{ data.duration + 's' }}</td>
<td nzAlign="center">{{ data.template }}</td>
<td nzAlign="center">
<nz-tag *ngIf="data.preset" nzColor="green">
@@ -96,3 +96,84 @@
<ng-template #rangeTemplate>
总量 {{ total }}
</ng-template>
<nz-modal
[(nzVisible)]="isModalVisible"
[nzTitle]="isModalAdd?'新增告警阈值' : '修改告警阈值'"
(nzOnCancel)="onModalCancel()"
(nzOnOk)="onModalOk()"
nzMaskClosable="false"
nzWidth="60%"
[nzOkLoading]="isModalOkLoading"
>
<div *nzModalContent class = "-inner-content">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'target' nzRequired="true">指标对象</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues">
</nz-cascader>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'expr' nzRequired="true">阈值触发表达式</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea [(ngModel)]="define.expr" rows="3" nz-input
name="expr" id="expr" placeholder="请输入阈值判断表达式">
</textarea>
</nz-textarea-count>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label nzSpan="7"
nzRequired="true"
nzFor= "priority">告警级别
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-select
[(ngModel)]="define.priority"
nzAllowClear
nzPlaceHolder="Choose"
name="priority" id="priority"
>
<nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option>
<nz-option [nzValue]="1" nzLabel="严重告警"></nz-option>
<nz-option [nzValue]="2" nzLabel="警告告警"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "duration">持续时间</nz-form-label>
<nz-form-control nzSpan="8">
<nz-input-number [(ngModel)]="define.duration" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
name="duration" id="duration" nzPlaceHolder="请输入告警的持续时间">
</nz-input-number>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'template' nzRequired="true">通知模版</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea [(ngModel)]="define.template" rows="3" nz-input
name="template" id="template" placeholder="请输入告警的通知模版">
</textarea>
</nz-textarea-count>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "preset">默认预置</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "enable">启用告警</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="define.enable" name="enable" id="enable"></nz-switch>
</nz-form-control>
</nz-form-item >
</form>
</div>
</nz-modal>

125
web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts
View File

@@ -6,6 +6,8 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
import {NzMessageService} from "ng-zorro-antd/message";
import {AlertDefineService} from "../../../service/alert-define.service";
import {AlertDefine} from "../../../pojo/AlertDefine";
import {finalize} from "rxjs/operators";
import {AppDefineService} from "../../../service/app-define.service";
@Component({
selector: 'app-alert-setting',
@@ -20,6 +22,7 @@ export class AlertSettingComponent implements OnInit {
private modal: NzModalService,
private notifySvc: NzNotificationService,
private msg: NzMessageService,
private appDefineSvc: AppDefineService,
private alertDefineSvc: AlertDefineService) { }
pageIndex: number = 1;
@@ -29,8 +32,24 @@ export class AlertSettingComponent implements OnInit {
tableLoading: boolean = true;
checkedDefineIds = new Set<number>();
appHierarchies!: any[];
ngOnInit(): void {
this.loadAlertDefineTable();
// 查询监控层级
const getHierarchy$ = this.appDefineSvc.getAppHierarchy()
.pipe(finalize(() => {
getHierarchy$.unsubscribe();
}))
.subscribe(message => {
if (message.code === 0) {
this.appHierarchies = message.data;
} else {
console.warn(message.msg);
}
}, error => {
console.warn(error.msg);
})
}
loadAlertDefineTable() {
@@ -56,11 +75,54 @@ export class AlertSettingComponent implements OnInit {
}
onNewAlertDefine() {
this.define = new AlertDefine();
this.isModalAdd = true;
this.isModalVisible = true;
this.isModalOkLoading = false;
}
onEditOneAlertDefine(alertDefineId: number) {
if (alertDefineId == null) {
this.notifySvc.warning("未选中任何待编辑项！","");
return;
}
this.editAlertDefine(alertDefineId);
}
onEditAlertDefine() {
// 编辑时只能选中一个
if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) {
this.notifySvc.warning("未选中任何待编辑项！","");
return;
}
if (this.checkedDefineIds.size > 1) {
this.notifySvc.warning("只能对一个选中项进行编辑！","");
return;
}
let alertDefineId = 0;
this.checkedDefineIds.forEach(item => alertDefineId = item);
this.editAlertDefine(alertDefineId);
}
editAlertDefine(alertDefineId: number) {
this.isModalAdd = false;
this.isModalVisible = true;
this.isModalOkLoading = false;
// 查询告警定义信息
const getDefine$ = this.alertDefineSvc.getAlertDefine(alertDefineId)
.pipe(finalize(() => {
getDefine$.unsubscribe();
}))
.subscribe(message => {
if (message.code === 0) {
this.define = message.data;
this.cascadeValues = [this.define.app, this.define.metric, this.define.field];
} else {
this.notifySvc.error("查询此监控定义详情失败！",message.msg);
}
}, error => {
this.notifySvc.error("查询此监控定义详情失败！",error.msg);
})
}
onDeleteAlertDefines() {
@@ -91,10 +153,6 @@ export class AlertSettingComponent implements OnInit {
});
}
onEditOneAlertDefine(alertDefineId: number) {
}
deleteAlertDefines(defineIds: Set<number>) {
if (defineIds == null || defineIds.size == 0) {
@@ -119,7 +177,7 @@ export class AlertSettingComponent implements OnInit {
})
}
// begin: 列表多选逻辑
// begin: 列表多选分页逻辑
checkedAll: boolean = false;
onAllChecked(checked: boolean) {
if (checked) {
@@ -135,8 +193,6 @@ export class AlertSettingComponent implements OnInit {
this.checkedDefineIds.delete(monitorId);
}
}
// end: 列表多选逻辑
/**
* 分页回调
* @param params 页码信息
@@ -145,6 +201,59 @@ export class AlertSettingComponent implements OnInit {
const { pageSize, pageIndex, sort, filter } = params;
this.pageIndex = pageIndex;
this.pageSize = pageSize;
// this.loadMonitorTable();
this.loadAlertDefineTable();
}
// end: 列表多选逻辑
// start 新增修改告警定义model
isModalVisible = false;
isModalOkLoading = false;
isModalAdd = true;
define!: AlertDefine;
cascadeValues: string[] = [];
onModalCancel() {
this.isModalVisible = false;
}
onModalOk() {
this.isModalOkLoading = true;
this.define.app = this.cascadeValues[0];
this.define.metric = this.cascadeValues[1];
this.define.field = this.cascadeValues[2];
if (this.isModalAdd) {
const modalOk$ = this.alertDefineSvc.newAlertDefine(this.define)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isModalVisible = false;
this.notifySvc.success("新增成功！", "");
this.loadAlertDefineTable();
} else {
this.notifySvc.error("新增失败！", message.msg);
}
}, error => {
this.notifySvc.error("新增失败！", error.msg);
})
} else {
const modalOk$ = this.alertDefineSvc.editAlertDefine(this.define)
.pipe(finalize(() => {
modalOk$.unsubscribe();
this.isModalOkLoading = false;
}))
.subscribe(message => {
if (message.code === 0) {
this.isModalVisible = false;
this.notifySvc.success("修改成功！", "");
this.loadAlertDefineTable();
} else {
this.notifySvc.error("修改失败！", message.msg);
}
}, error => {
this.notifySvc.error("修改失败！", error.msg);
})
}
}
}