[web-app] 告警中心告警列表展示

web-app/src/app/pojo/Alert.ts

@@ -0,0 +1,11 @@
+export class Alert {
+  id!: number;
+  target!: string;
+  monitorId!: number;
+  monitorName!: string;
+  priority: number = 2;
+  status!: number;
+  content!: string;
+  duration!: number;
+  gmtCreate!: number;
+}

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

@@ -1 +1,86 @@
-<p>alert-center 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>
+
+<button nz-button nzType="primary" (click)="onRestoreAlerts()" >
+  <i nz-icon nzType="up-circle" nzTheme="outline"></i>
+  恢复告警
+</button>
+<button nz-button nzType="primary" (click)="onDeleteAlerts()">
+  <i nz-icon nzType="delete" nzTheme="outline"></i>
+  删除告警
+</button>
+
+<nz-table #fixedTable [nzData]="alerts"
+          [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total"
+          nzFrontPagination ="false"
+          [nzLoading] = "tableLoading"
+          nzShowSizeChanger
+          [nzShowTotal]="rangeTemplate"
+          [nzPageSizeOptions]="[8,15,25]"
+          (nzQueryParams)="onTablePageChange($event)"
+          nzShowPagination = "true" [nzScroll]="{ x: '1150px', y: '1240px' }">
+  <thead>
+  <tr>
+    <th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
+    <th nzAlign="center">告警对象</th>
+    <th nzAlign="center">所属监控</th>
+    <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" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
+    <td nzAlign="center">{{ data.target }}</td>
+    <td nzAlign="center">
+      <a [routerLink]="['/monitors/' + data.monitorId]">
+        <span>{{ data.monitorName }}</span>
+      </a>
+    </td>
+    <td nzAlign="center">
+      <nz-tag *ngIf="data.priority == 0" nzColor="red">
+        <i nz-icon nzType="bell" nzTheme="outline"></i>
+        <span>紧急告警</span>
+      </nz-tag>
+      <nz-tag *ngIf="data.priority == 1" nzColor="orange">
+        <i nz-icon nzType="bell" nzTheme="outline"></i>
+        <span>严重告警</span>
+      </nz-tag>
+      <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
+        <i nz-icon nzType="bell" nzTheme="outline"></i>
+        <span>警告告警</span>
+      </nz-tag>
+    </td>
+    <td nzAlign="center">{{ data.content }}</td>
+    <td nzAlign="center">{{ data.gmtCreate }}</td>
+    <td nzAlign="center">{{ data.duration }}</td>
+    <td nzAlign="center" nzRight>
+      <button nz-button nzType="primary" (click)="onRestoreOneAlert(data.id)">
+        <i nz-icon nzType="up-circle" nzTheme="outline"></i>
+      </button>
+      <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)">
+        <i nz-icon nzType="delete" nzTheme="outline"></i>
+      </button>
+    </td>
+  </tr>
+  </tbody>
+</nz-table>
+
+<ng-template #rangeTemplate>
+  总量 {{ total }}
+</ng-template>

web-app/src/app/routes/alert/alert-center/alert-center.component.ts

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import {NzTableQueryParams} from "ng-zorro-antd/table";
+import {Alert} from "../../../pojo/Alert";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {NzMessageService} from "ng-zorro-antd/message";
+import {AlertService} from "../../../service/alert.service";
 
 @Component({
   selector: 'app-alert-center',
@@ -8,9 +13,80 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AlertCenterComponent implements OnInit {
 
-  constructor() { }
+  constructor(private notifySvc: NzNotificationService,
+              private msg: NzMessageService,
+              private alertSvc: AlertService) { }
+
+  pageIndex: number = 1;
+  pageSize: number = 8;
+  total: number = 0;
+  alerts!: Alert[];
+  tableLoading: boolean = false;
+  checkedAlertIds = new Set<number>();
 
   ngOnInit(): void {
+    this.loadAlertsTable();
   }
 
+  loadAlertsTable() {
+    this.tableLoading = true;
+    let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize)
+      .subscribe(message => {
+        this.tableLoading = false;
+        this.checkedAll = false;
+        this.checkedAlertIds.clear();
+        if (message.code === 0) {
+          let page = message.data;
+          this.alerts = page.content;
+          this.pageIndex = page.number + 1;
+          this.total = page.totalElements;
+        } else {
+          console.warn(message.msg);
+        }
+        alertsInit$.unsubscribe();
+      }, error => {
+        this.tableLoading = false;
+        alertsInit$.unsubscribe();
+      });
+  }
+
+  onRestoreAlerts() {
+
+  }
+  onRestoreOneAlert(alertId: number) {
+
+  }
+  onDeleteAlerts() {
+
+  }
+
+  onDeleteOneAlert(alertId: number) {
+
+  }
+
+  // begin: 列表多选分页逻辑
+  checkedAll: boolean = false;
+  onAllChecked(checked: boolean) {
+    if (checked) {
+      this.alerts.forEach(monitor => this.checkedAlertIds.add(monitor.id));
+    } else {
+      this.checkedAlertIds.clear();
+    }
+  }
+  onItemChecked(monitorId: number, checked: boolean) {
+    if (checked) {
+      this.checkedAlertIds.add(monitorId);
+    } else {
+      this.checkedAlertIds.delete(monitorId);
+    }
+  }
+  onTablePageChange(params: NzTableQueryParams) {
+    const { pageSize, pageIndex, sort, filter } = params;
+    this.pageIndex = pageIndex;
+    this.pageSize = pageSize;
+    this.loadAlertsTable();
+  }
+  // end: 列表多选分页逻辑
+
+
 }

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

@@ -3,6 +3,7 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
@@ -58,15 +59,15 @@
     </td>
     <td nzAlign="center">
       <nz-tag *ngIf="data.priority == 0" nzColor="red">
-        <i nz-icon nzType="robot" nzTheme="outline"></i>
+        <i nz-icon nzType="bell" nzTheme="outline"></i>
         <span>紧急告警</span>
       </nz-tag>
       <nz-tag *ngIf="data.priority == 1" nzColor="orange">
-        <i nz-icon nzType="smile" nzTheme="outline"></i>
+        <i nz-icon nzType="bell" nzTheme="outline"></i>
         <span>严重告警</span>
       </nz-tag>
       <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
-        <i nz-icon nzType="meh" nzTheme="outline"></i>
+        <i nz-icon nzType="bell" nzTheme="outline"></i>
         <span>警告告警</span>
       </nz-tag>
     </td>

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html

@@ -3,6 +3,7 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html

@@ -3,6 +3,7 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html

@@ -3,6 +3,7 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

@@ -3,6 +3,7 @@
   <nz-breadcrumb-item>
     <a [routerLink]="['/']">
       <i nz-icon nzType="home"></i>
+      <span>仪表盘</span>
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>

web-app/src/app/service/alert.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AlertService } from './alert.service';
+
+describe('AlertService', () => {
+  let service: AlertService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AlertService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

web-app/src/app/service/alert.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpParams} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Message} from "../pojo/Message";
+import {Page} from "../pojo/Page";
+import {Alert} from "../pojo/Alert";
+
+const alerts_uri = '/alerts';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AlertService {
+
+  constructor(private http : HttpClient) { }
+
+  public getAlerts(pageIndex: number, pageSize: number) : Observable<Message<Page<Alert>>> {
+    pageIndex = pageIndex ? pageIndex : 0;
+    pageSize = pageSize ? pageSize : 8;
+    // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
+    let httpParams = new HttpParams();
+    httpParams = httpParams.appendAll({
+      'sort': 'id',
+      'order': 'desc',
+      'pageIndex': pageIndex,
+      'pageSize': pageSize
+    });
+    const options = { params: httpParams };
+    return this.http.get<Message<Page<Alert>>>(alerts_uri, options);
+  }
+}