From 23def5cc3735a3f804a4ef207c42aac128bbfe44 Mon Sep 17 00:00:00 2001 From: tomsun28 Date: Mon, 13 Dec 2021 01:17:58 +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-=E5=91=8A=E8=AD=A6=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=85=B3=E8=81=94=E7=9B=91=E6=8E=A7=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/AlertDefineBind.ts | 8 ++ .../alert-setting.component.html | 67 ++++++++- .../alert-setting/alert-setting.component.ts | 127 +++++++++++++++--- web-app/src/app/routes/alert/alert.module.ts | 2 + .../src/app/service/alert-define.service.ts | 14 +- web-app/src/app/service/monitor.service.ts | 4 + 6 files changed, 190 insertions(+), 32 deletions(-) create mode 100644 web-app/src/app/pojo/AlertDefineBind.ts diff --git a/web-app/src/app/pojo/AlertDefineBind.ts b/web-app/src/app/pojo/AlertDefineBind.ts new file mode 100644 index 0000000..09e0505 --- /dev/null +++ b/web-app/src/app/pojo/AlertDefineBind.ts @@ -0,0 +1,8 @@ +export class AlertDefineBind { + id!: number; + alertDefineId!: number; + monitorId!: number; + monitorName!: string; + gmtCreate!: number; + gmtUpdate!: number; +} 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 7d41ad5..d4c2c81 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 @@ -82,6 +82,9 @@ {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} + @@ -97,15 +100,15 @@ 总量 {{ total }} - +
@@ -177,3 +180,55 @@
+ + + + + + + + + + + 监控 + + + + + + {{ data.name }} + + + + + + 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 000736b..8bc7651 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,8 +6,14 @@ 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 {finalize, map} from "rxjs/operators"; import {AppDefineService} from "../../../service/app-define.service"; +import {TransferChange, TransferItem} from "ng-zorro-antd/transfer"; +import {zip} from "rxjs"; +import {MonitorService} from "../../../service/monitor.service"; +import {Message} from "../../../pojo/Message"; +import {AlertDefineBind} from "../../../pojo/AlertDefineBind"; +import {Monitor} from "../../../pojo/Monitor"; @Component({ selector: 'app-alert-setting', @@ -23,6 +29,7 @@ export class AlertSettingComponent implements OnInit { private notifySvc: NzNotificationService, private msg: NzMessageService, private appDefineSvc: AppDefineService, + private monitorSvc: MonitorService, private alertDefineSvc: AlertDefineService) { } pageIndex: number = 1; @@ -76,9 +83,9 @@ export class AlertSettingComponent implements OnInit { onNewAlertDefine() { this.define = new AlertDefine(); - this.isModalAdd = true; - this.isModalVisible = true; - this.isModalOkLoading = false; + this.isManageModalAdd = true; + this.isManageModalVisible = true; + this.isManageModalOkLoading = false; } onEditOneAlertDefine(alertDefineId: number) { @@ -105,9 +112,9 @@ export class AlertSettingComponent implements OnInit { } editAlertDefine(alertDefineId: number) { - this.isModalAdd = false; - this.isModalVisible = true; - this.isModalOkLoading = false; + this.isManageModalAdd = false; + this.isManageModalVisible = true; + this.isManageModalOkLoading = false; // 查询告警定义信息 const getDefine$ = this.alertDefineSvc.getAlertDefine(alertDefineId) .pipe(finalize(() => { @@ -207,28 +214,28 @@ export class AlertSettingComponent implements OnInit { // start 新增修改告警定义model - isModalVisible = false; - isModalOkLoading = false; - isModalAdd = true; + isManageModalVisible = false; + isManageModalOkLoading = false; + isManageModalAdd = true; define!: AlertDefine; cascadeValues: string[] = []; - onModalCancel() { - this.isModalVisible = false; + onManageModalCancel() { + this.isManageModalVisible = false; } - onModalOk() { - this.isModalOkLoading = true; + onManageModalOk() { + this.isManageModalOkLoading = true; this.define.app = this.cascadeValues[0]; this.define.metric = this.cascadeValues[1]; this.define.field = this.cascadeValues[2]; - if (this.isModalAdd) { + if (this.isManageModalAdd) { const modalOk$ = this.alertDefineSvc.newAlertDefine(this.define) .pipe(finalize(() => { modalOk$.unsubscribe(); - this.isModalOkLoading = false; + this.isManageModalOkLoading = false; })) .subscribe(message => { if (message.code === 0) { - this.isModalVisible = false; + this.isManageModalVisible = false; this.notifySvc.success("新增成功！", ""); this.loadAlertDefineTable(); } else { @@ -241,11 +248,11 @@ export class AlertSettingComponent implements OnInit { const modalOk$ = this.alertDefineSvc.editAlertDefine(this.define) .pipe(finalize(() => { modalOk$.unsubscribe(); - this.isModalOkLoading = false; + this.isManageModalOkLoading = false; })) .subscribe(message => { if (message.code === 0) { - this.isModalVisible = false; + this.isManageModalVisible = false; this.notifySvc.success("修改成功！", ""); this.loadAlertDefineTable(); } else { @@ -256,4 +263,86 @@ export class AlertSettingComponent implements OnInit { }) } } + // end 新增修改告警定义model + + // start 告警定义与监控关联model + isConnectModalVisible = false; + isConnectModalOkLoading = false; + transferData: TransferItem[] = []; + currentAlertDefineId!: number; + $asTransferItems = (data: unknown): TransferItem[] => data as TransferItem[]; + onOpenConnectModal(alertDefineId: number, app: string) { + this.isConnectModalVisible = true; + this.currentAlertDefineId = alertDefineId; + zip(this.alertDefineSvc.getAlertDefineMonitorsBind(alertDefineId), this.monitorSvc.getMonitorsByApp(app)) + .pipe( + map(([defineBindData, monitorData]: [Message, Message]) => { + let bindRecode: Record = {}; + if (defineBindData.data != undefined) { + defineBindData.data.forEach(bind => { + bindRecode[bind.monitorId] = bind.monitorName; + }) + } + let listTmp: any[] = []; + if (monitorData.data != undefined) { + monitorData.data.forEach(monitor => { + listTmp.push({ + id: monitor.id, + name: monitor.name, + key: monitor.id, + direction: bindRecode[monitor.id] == undefined ? 'left' : 'right' + }) + }) + } + return listTmp; + }) + ).subscribe(list => this.transferData = list); + } + onConnectModalCancel() { + this.isConnectModalVisible = false; + } + onConnectModalOk() { + this.isConnectModalOkLoading = true; + let defineBinds: AlertDefineBind[] = []; + this.transferData.forEach(item => { + if (item.direction == 'right') { + let bind = new AlertDefineBind(); + bind.alertDefineId = this.currentAlertDefineId; + bind.monitorId = item.id; + bind.monitorName = item.name; + defineBinds.push(bind); + } + }) + const applyBind$ = this.alertDefineSvc.applyAlertDefineMonitorsBind(this.currentAlertDefineId, defineBinds) + .pipe(finalize(() => { + applyBind$.unsubscribe(); + })) + .subscribe(message => { + this.isConnectModalOkLoading = false; + if (message.code === 0) { + this.notifySvc.success("应用成功！", ""); + this.isConnectModalVisible = false; + this.loadAlertDefineTable(); + } else { + this.notifySvc.error("应用失败！", message.msg); + } + }, error => { + this.notifySvc.error("应用失败！", error.msg); + }) + } + change(ret: TransferChange): void { + const listKeys = ret.list.map(l => l.key); + const hasOwnKey = (e: TransferItem): boolean => e.hasOwnProperty('key'); + this.transferData = this.transferData.map(e => { + if (listKeys.includes(e.key) && hasOwnKey(e)) { + if (ret.to === 'left') { + delete e.hide; + } else if (ret.to === 'right') { + e.hide = false; + } + } + return e; + }); + } + // end 告警定义与监控关联model } diff --git a/web-app/src/app/routes/alert/alert.module.ts b/web-app/src/app/routes/alert/alert.module.ts index ca774ba..559356f 100644 --- a/web-app/src/app/routes/alert/alert.module.ts +++ b/web-app/src/app/routes/alert/alert.module.ts @@ -10,6 +10,7 @@ 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"; +import {NzTransferModule} from "ng-zorro-antd/transfer"; const COMPONENTS: Type[] = [ AlertCenterComponent, @@ -27,6 +28,7 @@ const COMPONENTS: Type[] = [ NzRadioModule, NzSwitchModule, NzCascaderModule, + NzTransferModule, ], declarations: COMPONENTS, }) diff --git a/web-app/src/app/service/alert-define.service.ts b/web-app/src/app/service/alert-define.service.ts index 729aa73..2d2cd5d 100644 --- a/web-app/src/app/service/alert-define.service.ts +++ b/web-app/src/app/service/alert-define.service.ts @@ -4,6 +4,7 @@ import {Observable} from "rxjs"; import {Message} from "../pojo/Message"; import {Page} from "../pojo/Page"; import {AlertDefine} from "../pojo/AlertDefine"; +import {AlertDefineBind} from "../pojo/AlertDefineBind"; const alert_define_uri = "/alert/define"; const alert_defines_uri = "/alert/defines"; @@ -27,14 +28,13 @@ export class AlertDefineService { return this.http.get>(`${alert_define_uri}/${alertDefineId}`); } - /** - * 应用告警定义与监控关联 - * @param alertDefineId 告警定义ID - * @param monitorMap 关联的监控ID-监控名称 - */ public applyAlertDefineMonitorsBind(alertDefineId: number, - monitorMap: Record): Observable> { - return this.http.post>(`${alert_define_uri}/${alertDefineId}/monitors`, monitorMap); + binds: AlertDefineBind[]): Observable> { + return this.http.post>(`${alert_define_uri}/${alertDefineId}/monitors`, binds); + } + + public getAlertDefineMonitorsBind(alertDefineId: number) : Observable> { + return this.http.get>(`${alert_define_uri}/${alertDefineId}/monitors`); } public deleteAlertDefines(alertDefineIds: Set) : Observable> { diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts index b1f195e..a8b2336 100644 --- a/web-app/src/app/service/monitor.service.ts +++ b/web-app/src/app/service/monitor.service.ts @@ -69,6 +69,10 @@ export class MonitorService { return this.http.get>(`${monitor_uri}/${monitorId}`); } + public getMonitorsByApp(app: string) : Observable> { + return this.http.get>(`${monitors_uri}/${app}`); + } + public getMonitors(app: string, pageIndex: number, pageSize: number) : Observable>> { app = app.trim(); pageIndex = pageIndex ? pageIndex : 0;