From 9d2b7908de611a26866db67f339a9019cf0e06a5 Mon Sep 17 00:00:00 2001 From: tomsun28 Date: Sun, 12 Dec 2021 18:32:23 +0800 Subject: [PATCH] =?UTF-8?q?[web-app]=20=E5=91=8A=E8=AD=A6=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=88=97=E8=A1=A8,=E6=96=B0=E5=A2=9E=E5=91=8A?= =?UTF-8?q?=E8=AD=A6=E5=AE=9A=E4=B9=89=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=91=8A?= =?UTF-8?q?=E8=AD=A6=E5=AE=9A=E4=B9=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-app/src/app/pojo/AlertDefine.ts | 8 +- .../alert-setting.component.html | 83 +++++++++++- .../alert-setting/alert-setting.component.ts | 125 ++++++++++++++++-- web-app/src/app/routes/alert/alert.module.ts | 6 + .../monitor-new/monitor-new.component.ts | 1 + web-app/src/app/service/app-define.service.ts | 9 +- 6 files changed, 218 insertions(+), 14 deletions(-) diff --git a/web-app/src/app/pojo/AlertDefine.ts b/web-app/src/app/pojo/AlertDefine.ts index a84781d..1e8d0f1 100644 --- a/web-app/src/app/pojo/AlertDefine.ts +++ b/web-app/src/app/pojo/AlertDefine.ts @@ -3,12 +3,12 @@ export class AlertDefine { app!: string; metric!: string; field!: string; - preset!: boolean; + preset: boolean = false; expr!: string; // 告警级别 0:高-emergency-紧急告警-红色 1:中-critical-严重告警-橙色 2:低-warning-警告告警-黄色 - priority!: number; - duration!: number; - enable!: boolean; + priority: number = 2; + duration: number = 600; + enable: boolean = true; template!: string; creator!: string; modifier!: string; diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html index 804a13c..7d41ad5 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html @@ -70,7 +70,7 @@ 警告告警 - {{ data.duration }} + {{ data.duration + 's' }} {{ data.template }} @@ -96,3 +96,84 @@ 总量 {{ total }} + + + +
+
+ + 指标对象 + + + + + + + 阈值触发表达式 + + + + + + + + 告警级别 + + + + + + + + + + + 持续时间 + + + + + + + 通知模版 + + + + + + + + 默认预置 + + + + + + 启用告警 + + + + +
+
+ diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts index 143700f..000736b 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts @@ -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(); + 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) { 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); + }) + } } } diff --git a/web-app/src/app/routes/alert/alert.module.ts b/web-app/src/app/routes/alert/alert.module.ts index 1b92db1..ca774ba 100644 --- a/web-app/src/app/routes/alert/alert.module.ts +++ b/web-app/src/app/routes/alert/alert.module.ts @@ -7,6 +7,9 @@ import {AlertCenterComponent} from "./alert-center/alert-center.component"; import {AlertSettingComponent} from "./alert-setting/alert-setting.component"; import {AlertNoticeComponent} from "./alert-notice/alert-notice.component"; import {NzTagModule} from "ng-zorro-antd/tag"; +import {NzRadioModule} from "ng-zorro-antd/radio"; +import {NzSwitchModule} from "ng-zorro-antd/switch"; +import {NzCascaderModule} from "ng-zorro-antd/cascader"; const COMPONENTS: Type[] = [ AlertCenterComponent, @@ -21,6 +24,9 @@ const COMPONENTS: Type[] = [ NzDividerModule, NzBreadCrumbModule, NzTagModule, + NzRadioModule, + NzSwitchModule, + NzCascaderModule, ], declarations: COMPONENTS, }) diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts index 6bff766..ae14f86 100644 --- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts +++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts @@ -25,6 +25,7 @@ export class MonitorNewComponent implements OnInit { profileForm: FormGroup = new FormGroup({}); detected: boolean = true; passwordVisible: boolean = false; + // 是否显示加载中 isSpinning:boolean = false constructor(private appDefineSvc: AppDefineService, private monitorSvc: MonitorService, diff --git a/web-app/src/app/service/app-define.service.ts b/web-app/src/app/service/app-define.service.ts index 9bc4272..b031fce 100644 --- a/web-app/src/app/service/app-define.service.ts +++ b/web-app/src/app/service/app-define.service.ts @@ -1,9 +1,10 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import {HttpClient, HttpParams} from '@angular/common/http'; import {Message} from "../pojo/Message"; import {Observable} from "rxjs"; import {ParamDefine} from "../pojo/ParamDefine"; +const app_hierarchy = '/apps/hierarchy'; @Injectable({ providedIn: 'root' @@ -20,4 +21,10 @@ export class AppDefineService { return this.http.get>(paramDefineUri); } + public getAppHierarchy() : Observable> { + let httpParams = new HttpParams().append("lang",'zh-CN'); + const options = { params: httpParams }; + return this.http.get>(app_hierarchy,options); + } + }