[web-app] 告警通知-接收人配置和消息策略配置。全局字体基础大小修改为12px

web-app/src/app/routes/alert/alert-notice/alert-notice.component.html

@@ -1 +1,234 @@
-<p>alert-notice works!</p>
+<nz-divider></nz-divider>
+<nz-breadcrumb>
+  <nz-breadcrumb-item>
+    <a [routerLink]="['/']">
+      <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
+    </a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
+    <i nz-icon nzType="alert"></i>
+    <span>告警通知配置</span>
+  </nz-breadcrumb-item>
+</nz-breadcrumb>
+<nz-divider></nz-divider>
+
+<nz-tabset nzSize="large">
+  <nz-tab nzTitle="告警接收人">
+    <button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      新增接收人
+    </button>
+    <nz-table #fixedTable [nzData]="receivers"
+              nzFrontPagination ="false"
+              [nzLoading] = "receiverTableLoading"
+              [nzScroll]="{ x: '1150px', y: '1240px' }">
+      <thead>
+      <tr>
+        <th nzAlign="center">接收人</th>
+        <th nzAlign="center">通知方式</th>
+        <th nzAlign="center">配置</th>
+        <th nzAlign="center">最新修改时间</th>
+        <th nzAlign="center" nzRight>操作</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let data of fixedTable.data">
+       <td nzAlign="center">
+          <span>{{ data.name}}</span>
+        </td>
+        <td nzAlign="center">
+          <nz-tag *ngIf="data.type == 0" nzColor="red">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>短信</span>
+          </nz-tag>
+          <nz-tag *ngIf="data.type == 1" nzColor="orange">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>邮件</span>
+          </nz-tag>
+          <nz-tag *ngIf="data.type == 2" nzColor="yellow">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>WebHook</span>
+          </nz-tag>
+          <nz-tag *ngIf="data.type == 3" nzColor="yellow">
+            <i nz-icon nzType="notification" nzTheme="outline"></i>
+            <span>微信公众号</span>
+          </nz-tag>
+        </td>
+        <td nzAlign="center">
+          <span *ngIf="data.type == 0">{{data.phone}}</span>
+          <span *ngIf="data.type == 1">{{data.email}}</span>
+          <span *ngIf="data.type == 2">{{data.hookUrl}}</span>
+          <span *ngIf="data.type == 3">{{data.wechatId}}</span>
+        </td>
+        <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
+        <td nzAlign="center" nzRight>
+          <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)">
+            <i nz-icon nzType="edit" nzTheme="outline"></i>
+          </button>
+          <button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)">
+            <i nz-icon nzType="delete" nzTheme="outline"></i>
+          </button>
+        </td>
+      </tr>
+      </tbody>
+    </nz-table>
+  </nz-tab>
+  <nz-tab nzTitle="告警通知策略">
+    <button nz-button nzType="primary" (click)="onNewNoticeRule()">
+      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+      新增通知策略
+    </button>
+    <nz-table #ruleFixedTable [nzData]="rules"
+              nzFrontPagination ="false"
+              [nzLoading] = "ruleTableLoading"
+              [nzScroll]="{ x: '1150px', y: '1240px' }">
+      <thead>
+      <tr>
+        <th nzAlign="center">策略名称</th>
+        <th nzAlign="center">接收人</th>
+        <th nzAlign="center">转发所有</th>
+        <th nzAlign="center">最新修改时间</th>
+        <th nzAlign="center" nzRight>操作</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let data of ruleFixedTable.data">
+        <td nzAlign="center">
+          <span>{{ data.name}}</span>
+        </td>
+        <td nzAlign="center">
+          <span>{{ data.receiverName}}</span>
+        </td>
+        <td nzAlign="center">
+          <nz-tag *ngIf="data.filterAll" nzColor="green">
+            <span>是</span>
+          </nz-tag>
+          <nz-tag *ngIf="!data.filterAll" nzColor="orange">
+            <span>否</span>
+          </nz-tag>
+        </td>
+        <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
+        <td nzAlign="center" nzRight>
+          <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)">
+            <i nz-icon nzType="edit" nzTheme="outline"></i>
+          </button>
+          <button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)">
+            <i nz-icon nzType="delete" nzTheme="outline"></i>
+          </button>
+        </td>
+      </tr>
+      </tbody>
+    </nz-table>
+  </nz-tab>
+</nz-tabset>
+
+
+<!-- 新增或修改通知接收人弹出框 -->
+<nz-modal
+  [(nzVisible)]="isManageReceiverModalVisible"
+  [nzTitle]="isManageReceiverModalAdd?'新增接收人' : '修改接收人'"
+  (nzOnCancel)="onManageReceiverModalCancel()"
+  (nzOnOk)="onManageReceiverModalOk()"
+  nzMaskClosable="false"
+  nzWidth="60%"
+  [nzOkLoading]="isManageReceiverModalOkLoading"
+>
+  <div *nzModalContent class = "-inner-content">
+    <form nz-form>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">接收人名称</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7"
+                       nzRequired="true"
+                       nzFor= "type">通知方式
+        </nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-select
+            [(ngModel)]="receiver.type"
+            nzAllowClear
+            nzPlaceHolder="Choose"
+            name="type" id="type"
+          >
+            <nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
+            <nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
+            <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
+            <nz-option [nzValue]="3" nzDisabled nzLabel="微信公众号"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item *ngIf="receiver.type === 0">
+        <nz-form-label [nzSpan]="7" nzFor= 'phone' [nzRequired]="receiver.type === 0">手机号</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item *ngIf="receiver.type === 1">
+        <nz-form-label [nzSpan]="7" nzFor= 'email' [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item *ngIf="receiver.type === 2">
+        <nz-form-label [nzSpan]="7" nzFor= 'hookUrl' [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item *ngIf="receiver.type === 3">
+        <nz-form-label [nzSpan]="7" nzFor= 'wechatId' [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId">
+        </nz-form-control>
+      </nz-form-item >
+    </form>
+  </div>
+</nz-modal>
+
+<!-- 新增或修改通知策略弹出框 -->
+<nz-modal
+  [(nzVisible)]="isManageRuleModalVisible"
+  [nzTitle]="isManageRuleModalAdd?'新增策略' : '修改策略'"
+  (nzOnCancel)="onManageRuleModalCancel()"
+  (nzOnOk)="onManageRuleModalOk()"
+  nzMaskClosable="false"
+  nzWidth="60%"
+  [nzOkLoading]="isManageRuleModalOkLoading"
+>
+  <div *nzModalContent class = "-inner-content">
+    <form nz-form>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzFor= 'rule_name' nzRequired="true">策略名称</nz-form-label>
+        <nz-form-control [nzSpan]="8">
+          <input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name">
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "filterAll">全局默认</nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-switch [(ngModel)]="rule.filterAll" name="filterAll" id="filterAll"></nz-switch>
+        </nz-form-control>
+      </nz-form-item >
+      <nz-form-item>
+        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "receiver">全局默认</nz-form-label>
+        <nz-form-control nzSpan="8">
+          <nz-select
+            [(ngModel)]="rule.receiverId"
+            nzAllowClear
+            nzPlaceHolder="Choose"
+            name="receiver" id="receiver"
+          >
+            <!--todo 消息接收人选择-->
+            <nz-option [nzValue]="0" [nzLabel]="rule.receiverName"></nz-option>
+            <nz-option [nzValue]="1" [nzLabel]="rule.receiverName"></nz-option>
+            <nz-option [nzValue]="2" [nzLabel]="rule.receiverName"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item >
+    </form>
+  </div>
+</nz-modal>

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);
+        })
+    }
   }
 
 }