From c0c8d8179be6db18af5c19e5c36bb1527b411c9e Mon Sep 17 00:00:00 2001 From: tomsun28 Date: Thu, 16 Dec 2021 22:10:57 +0800 Subject: [PATCH] =?UTF-8?q?[web-app]=20=E5=91=8A=E8=AD=A6=E9=80=9A?= =?UTF-8?q?=E7=9F=A5-=E6=8E=A5=E6=94=B6=E4=BA=BA=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=92=8C=E6=B6=88=E6=81=AF=E7=AD=96=E7=95=A5=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E3=80=82=E5=85=A8=E5=B1=80=E5=AD=97=E4=BD=93=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E4=BF=AE=E6=94=B9=E4=B8=BA12px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-app/src/app/pojo/NoticeReceiver.ts | 14 ++ web-app/src/app/pojo/NoticeRule.ts | 13 + .../alert-notice/alert-notice.component.html | 235 +++++++++++++++++- .../alert-notice/alert-notice.component.ts | 211 +++++++++++++++- web-app/src/app/routes/alert/alert.module.ts | 22 +- .../service/notice-receiver.service.spec.ts | 16 ++ .../app/service/notice-receiver.service.ts | 32 +++ .../app/service/notice-rule.service.spec.ts | 16 ++ .../src/app/service/notice-rule.service.ts | 32 +++ web-app/src/assets/tmp/app-data.json | 2 +- web-app/src/assets/tmp/i18n/zh-CN.json | 2 +- web-app/src/styles/theme.less | 3 + 12 files changed, 583 insertions(+), 15 deletions(-) create mode 100644 web-app/src/app/pojo/NoticeReceiver.ts create mode 100644 web-app/src/app/pojo/NoticeRule.ts create mode 100644 web-app/src/app/service/notice-receiver.service.spec.ts create mode 100644 web-app/src/app/service/notice-receiver.service.ts create mode 100644 web-app/src/app/service/notice-rule.service.spec.ts create mode 100644 web-app/src/app/service/notice-rule.service.ts diff --git a/web-app/src/app/pojo/NoticeReceiver.ts b/web-app/src/app/pojo/NoticeReceiver.ts new file mode 100644 index 0000000..334d7ed --- /dev/null +++ b/web-app/src/app/pojo/NoticeReceiver.ts @@ -0,0 +1,14 @@ +export class NoticeReceiver { + id!: number; + name!: string; + // 通知信息方式: 0-手机短信 1-邮箱 2-webhook 3-微信公众号 + type: number = 1; + phone!: string; + email!: number; + hookUrl!: string; + wechatId!: string; + creator!: string; + modifier!: string; + gmtCreate!: number; + gmtUpdate!: number; +} diff --git a/web-app/src/app/pojo/NoticeRule.ts b/web-app/src/app/pojo/NoticeRule.ts new file mode 100644 index 0000000..8b627d3 --- /dev/null +++ b/web-app/src/app/pojo/NoticeRule.ts @@ -0,0 +1,13 @@ +export class NoticeRule { + id!: number; + name!: string; + receiverId!: string; + receiverName!: string; + enable: boolean = true; + // 是否转发所有 + filterAll: boolean = true; + creator!: string; + modifier!: string; + gmtCreate!: number; + gmtUpdate!: number; +} diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html index 7f7375d..942ee03 100644 --- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html +++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html @@ -1 +1,234 @@ -

alert-notice works!

+ + + + + + 仪表盘 + + + + + 告警通知配置 + + + + + + + + + + + 接收人 + 通知方式 + 配置 + 最新修改时间 + 操作 + + + + + + {{ data.name}} + + + + + 短信 + + + + 邮件 + + + + WebHook + + + + 微信公众号 + + + + {{data.phone}} + {{data.email}} + {{data.hookUrl}} + {{data.wechatId}} + + {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} + + + + + + + + + + + + + + 策略名称 + 接收人 + 转发所有 + 最新修改时间 + 操作 + + + + + + {{ data.name}} + + + {{ data.receiverName}} + + + + 是 + + + 否 + + + {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} + + + + + + + + + + + + + +
+
+ + 接收人名称 + + + + + + 通知方式 + + + + + + + + + + + + 手机号 + + + + + + 邮箱 + + + + + + URL地址 + + + + + + 微信OPENID + + + + +
+
+ + + + +
+
+ + 策略名称 + + + + + + 全局默认 + + + + + + 全局默认 + + + + + + + + + +
+
+ diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts index 4a9661f..1ea8a00 100644 --- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts +++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts @@ -1,4 +1,13 @@ import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {NzModalService} from "ng-zorro-antd/modal"; +import {NzNotificationService} from "ng-zorro-antd/notification"; +import {NzMessageService} from "ng-zorro-antd/message"; +import {NoticeReceiverService} from "../../../service/notice-receiver.service"; +import {NoticeRuleService} from "../../../service/notice-rule.service"; +import {NoticeReceiver} from "../../../pojo/NoticeReceiver"; +import {finalize} from "rxjs/operators"; +import {NoticeRule} from "../../../pojo/NoticeRule"; @Component({ selector: 'app-alert-notice', @@ -8,9 +17,209 @@ import { Component, OnInit } from '@angular/core'; }) export class AlertNoticeComponent implements OnInit { - constructor() { } + constructor(private route: ActivatedRoute, + private router: Router, + private modal: NzModalService, + private notifySvc: NzNotificationService, + private msg: NzMessageService, + private noticeReceiverSvc: NoticeReceiverService, + private noticeRuleSvc : NoticeRuleService) { } + + receivers!: NoticeReceiver[]; + receiverTableLoading: boolean = true; + rules!: NoticeRule[]; + ruleTableLoading: boolean = true; ngOnInit(): void { + this.loadReceiversTable(); + this.loadRulesTable(); + } + + loadReceiversTable() { + this.receiverTableLoading = true; + let receiverInit$ = this.noticeReceiverSvc.getReceivers() + .subscribe(message => { + this.receiverTableLoading = false; + if (message.code === 0) { + this.receivers = message.data; + } else { + console.warn(message.msg); + } + receiverInit$.unsubscribe(); + }, error => { + this.receiverTableLoading = false; + receiverInit$.unsubscribe(); + }); + } + loadRulesTable() { + this.ruleTableLoading = true; + let rulesInit$ = this.noticeRuleSvc.getNoticeRules() + .subscribe(message => { + this.ruleTableLoading = false; + if (message.code === 0) { + this.rules = message.data; + } else { + console.warn(message.msg); + } + rulesInit$.unsubscribe(); + }, error => { + this.ruleTableLoading = false; + rulesInit$.unsubscribe(); + }); + } + + onDeleteOneNoticeReceiver(receiveId : number) { + const deleteReceiver$ = this.noticeReceiverSvc.deleteReceiver(receiveId) + .pipe(finalize(() => { + deleteReceiver$.unsubscribe(); + })) + .subscribe(message => { + if (message.code === 0) { + this.notifySvc.success("删除成功！", ""); + this.loadReceiversTable(); + } else { + this.notifySvc.error("删除失败！", message.msg); + } + }, error => { + this.notifySvc.error("删除失败！", error.msg); + }) + } + + onDeleteOneNoticeRule(ruleId : number) { + const deleteRule$ = this.noticeRuleSvc.deleteNoticeRule(ruleId) + .pipe(finalize(() => { + deleteRule$.unsubscribe(); + })) + .subscribe(message => { + if (message.code === 0) { + this.notifySvc.success("删除成功！", ""); + this.loadRulesTable(); + } else { + this.notifySvc.error("删除失败！", message.msg); + } + }, error => { + this.notifySvc.error("删除失败！", error.msg); + }) + } + + // start 新增或修改通知接收人弹出框 + isManageReceiverModalVisible : boolean = false; + isManageReceiverModalAdd: boolean = true; + isManageReceiverModalOkLoading: boolean = false; + receiver!: NoticeReceiver; + + onNewNoticeReceiver() { + this.receiver = new NoticeReceiver(); + this.isManageReceiverModalVisible = true; + this.isManageReceiverModalAdd = true; + } + onEditOneNoticeReceiver(receiver : NoticeReceiver) { + this.receiver = receiver; + this.isManageReceiverModalVisible = true; + this.isManageReceiverModalAdd = false; + } + + onManageReceiverModalCancel() { + this.isManageReceiverModalVisible = false; + } + onManageReceiverModalOk() { + this.isManageReceiverModalOkLoading = true; + if (this.isManageReceiverModalAdd) { + const modalOk$ = this.noticeReceiverSvc.newReceiver(this.receiver) + .pipe(finalize(() => { + modalOk$.unsubscribe(); + this.isManageReceiverModalOkLoading = false; + })) + .subscribe(message => { + if (message.code === 0) { + this.isManageReceiverModalVisible = false; + this.notifySvc.success("新增成功！", ""); + this.loadReceiversTable(); + } else { + this.notifySvc.error("新增失败！", message.msg); + } + }, error => { + this.notifySvc.error("新增失败！", error.msg); + }) + } else { + const modalOk$ = this.noticeReceiverSvc.editReceiver(this.receiver) + .pipe(finalize(() => { + modalOk$.unsubscribe(); + this.isManageReceiverModalOkLoading = false; + })) + .subscribe(message => { + if (message.code === 0) { + this.isManageReceiverModalVisible = false; + this.notifySvc.success("修改成功！", ""); + this.loadReceiversTable(); + } else { + this.notifySvc.error("修改失败！", message.msg); + } + }, error => { + this.notifySvc.error("修改失败！", error.msg); + }) + } + } + + // start 新增或修改通知策略弹出框 + isManageRuleModalVisible : boolean = false; + isManageRuleModalAdd: boolean = true; + isManageRuleModalOkLoading: boolean = false; + rule!: NoticeRule; + + onNewNoticeRule() { + this.rule = new NoticeRule(); + this.isManageRuleModalVisible = true; + this.isManageRuleModalAdd = true; + } + + onEditOneNoticeRule(rule : NoticeRule) { + this.rule = rule; + this.isManageRuleModalVisible = true; + this.isManageRuleModalAdd = false; + } + + onManageRuleModalCancel() { + this.isManageRuleModalVisible = false; + } + + onManageRuleModalOk() { + this.isManageRuleModalOkLoading = true; + if (this.isManageRuleModalAdd) { + const modalOk$ = this.noticeRuleSvc.newNoticeRule(this.rule) + .pipe(finalize(() => { + modalOk$.unsubscribe(); + this.isManageRuleModalOkLoading = false; + })) + .subscribe(message => { + if (message.code === 0) { + this.isManageRuleModalVisible = false; + this.notifySvc.success("新增成功！", ""); + this.loadRulesTable(); + } else { + this.notifySvc.error("新增失败！", message.msg); + } + }, error => { + this.notifySvc.error("新增失败！", error.msg); + }) + } else { + const modalOk$ = this.noticeRuleSvc.editNoticeRule(this.rule) + .pipe(finalize(() => { + modalOk$.unsubscribe(); + this.isManageRuleModalOkLoading = false; + })) + .subscribe(message => { + if (message.code === 0) { + this.isManageRuleModalVisible = false; + this.notifySvc.success("修改成功！", ""); + this.loadRulesTable(); + } 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 559356f..ad432a9 100644 --- a/web-app/src/app/routes/alert/alert.module.ts +++ b/web-app/src/app/routes/alert/alert.module.ts @@ -19,17 +19,17 @@ const COMPONENTS: Type[] = [ ]; @NgModule({ - imports: [ - SharedModule, - AlertRoutingModule, - NzDividerModule, - NzBreadCrumbModule, - NzTagModule, - NzRadioModule, - NzSwitchModule, - NzCascaderModule, - NzTransferModule, - ], + imports: [ + SharedModule, + AlertRoutingModule, + NzDividerModule, + NzBreadCrumbModule, + NzTagModule, + NzRadioModule, + NzSwitchModule, + NzCascaderModule, + NzTransferModule + ], declarations: COMPONENTS, }) export class AlertModule { } diff --git a/web-app/src/app/service/notice-receiver.service.spec.ts b/web-app/src/app/service/notice-receiver.service.spec.ts new file mode 100644 index 0000000..d1d1dfb --- /dev/null +++ b/web-app/src/app/service/notice-receiver.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NoticeReceiverService } from './notice-receiver.service'; + +describe('NoticeReceiverService', () => { + let service: NoticeReceiverService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NoticeReceiverService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/web-app/src/app/service/notice-receiver.service.ts b/web-app/src/app/service/notice-receiver.service.ts new file mode 100644 index 0000000..7438a57 --- /dev/null +++ b/web-app/src/app/service/notice-receiver.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {Observable} from "rxjs"; +import {Message} from "../pojo/Message"; +import {NoticeReceiver} from "../pojo/NoticeReceiver"; + +const notice_receiver_uri = '/notice/receiver'; +const notice_receivers_uri = '/notice/receivers'; + +@Injectable({ + providedIn: 'root' +}) +export class NoticeReceiverService { + + constructor(private http : HttpClient) { } + + public newReceiver(body: NoticeReceiver) : Observable> { + return this.http.post>(notice_receiver_uri, body); + } + + public editReceiver(body: NoticeReceiver) : Observable> { + return this.http.put>(notice_receiver_uri, body); + } + public deleteReceiver(receiverId: number) : Observable> { + return this.http.delete>(`${notice_receiver_uri}/${receiverId}`); + } + + public getReceivers() : Observable> { + return this.http.get>(notice_receivers_uri); + } + +} diff --git a/web-app/src/app/service/notice-rule.service.spec.ts b/web-app/src/app/service/notice-rule.service.spec.ts new file mode 100644 index 0000000..4ad6f04 --- /dev/null +++ b/web-app/src/app/service/notice-rule.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NoticeRuleService } from './notice-rule.service'; + +describe('NoticeRuleService', () => { + let service: NoticeRuleService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NoticeRuleService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/web-app/src/app/service/notice-rule.service.ts b/web-app/src/app/service/notice-rule.service.ts new file mode 100644 index 0000000..91d7c68 --- /dev/null +++ b/web-app/src/app/service/notice-rule.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import {Observable} from "rxjs"; +import {Message} from "../pojo/Message"; +import {HttpClient} from "@angular/common/http"; +import {NoticeRule} from "../pojo/NoticeRule"; + +const notice_rule_uri = '/notice/rule'; +const notice_rules_uri = '/notice/rules'; + +@Injectable({ + providedIn: 'root' +}) +export class NoticeRuleService { + + constructor(private http : HttpClient) { } + + public newNoticeRule(body: NoticeRule) : Observable> { + return this.http.post>(notice_rule_uri, body); + } + + public editNoticeRule(body: NoticeRule) : Observable> { + return this.http.put>(notice_rule_uri, body); + } + + public deleteNoticeRule(ruleId: number) : Observable> { + return this.http.delete>(`${notice_rule_uri}/${ruleId}`); + } + + public getNoticeRules() : Observable> { + return this.http.get>(notice_rules_uri); + } +} diff --git a/web-app/src/assets/tmp/app-data.json b/web-app/src/assets/tmp/app-data.json index b31f061..a116bf1 100644 --- a/web-app/src/assets/tmp/app-data.json +++ b/web-app/src/assets/tmp/app-data.json @@ -99,7 +99,7 @@ "link": "/alert/setting" }, { - "text": "告警转发", + "text": "告警通知", "i18n": "menu.alert.dispatch", "icon": "anticon-notification", "link": "/alert/notice" diff --git a/web-app/src/assets/tmp/i18n/zh-CN.json b/web-app/src/assets/tmp/i18n/zh-CN.json index aed2726..c2812e4 100644 --- a/web-app/src/assets/tmp/i18n/zh-CN.json +++ b/web-app/src/assets/tmp/i18n/zh-CN.json @@ -25,7 +25,7 @@ "": "告警", "center": "告警中心", "setting": "告警配置", - "dispatch": "告警转发" + "dispatch": "告警通知" }, "extras": { "": "更多", diff --git a/web-app/src/styles/theme.less b/web-app/src/styles/theme.less index a33e5fb..e5e921c 100644 --- a/web-app/src/styles/theme.less +++ b/web-app/src/styles/theme.less @@ -8,6 +8,9 @@ // The theme parameters can be generated at https://ng-alain.github.io/ng-alain/ // @primary-color: #f50; @primary-color: #722ED1; +@font-size-base: 12px; +@nz-table-rep-padding-vertical: 2px; +@nz-table-rep-padding-horizontal: 2px; @alain-default-header-hg: 52px; @alain-default-header-bg: #722ED1; @alain-default-header-padding: 8px;