[webapp] 通知红标,近期未处理告警展示

web-app/src/app/layout/basic/widgets/notify.component.ts

@@ -1,8 +1,11 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
-import { NoticeIconList, NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon';
-import { add, formatDistanceToNow, parse } from 'date-fns';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import {AlertService} from "../../../service/alert.service";
+import {ALAIN_I18N_TOKEN} from "@delon/theme";
+import {I18NService} from "@core";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'header-notify',
@@ -13,53 +16,35 @@ import { NzMessageService } from 'ng-zorro-antd/message';
       [loading]="loading"
       btnClass="alain-default__nav-item"
       btnIconClass="alain-default__nav-item-icon"
-      (select)="select($event)"
-      (clear)="clear($event)"
+      (clear)="gotoAlertCenter($event)"
       (popoverVisibleChange)="loadData()"
     ></notice-icon>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HeaderNotifyComponent {
+export class HeaderNotifyComponent implements OnInit{
+
   data: NoticeItem[] = [
     {
-      title: '告警通知',
+      title: '近期未处理告警',
       list: [],
-      emptyText: '暂无告警通知',
+      emptyText: '暂无未处理告警',
       emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
-      clearText: '清空告警'
+      clearText: '进入告警中心'
     }
   ];
-  count = 5;
+  count = 0;
   loading = false;
 
-  constructor(private msg: NzMessageService, private nzI18n: NzI18nService, private cdr: ChangeDetectorRef) {}
+  constructor(private msg: NzMessageService,
+              private nzI18n: NzI18nService,
+              private router: Router,
+              @Inject(ALAIN_I18N_TOKEN)  private i18nSvc: I18NService,
+              private alertSvc: AlertService,
+              private cdr: ChangeDetectorRef) {}
 
-  private updateNoticeData(notices: NoticeIconList[]): NoticeItem[] {
-    const data = this.data.slice();
-    data.forEach(i => (i.list = []));
-
-    notices.forEach(item => {
-      const newItem = { ...item } as NoticeIconList;
-      if (typeof newItem.datetime === 'string') {
-        newItem.datetime = parse(newItem.datetime, 'yyyy-MM-dd', new Date());
-      }
-      if (newItem.datetime) {
-        newItem.datetime = formatDistanceToNow(newItem.datetime as Date, { locale: this.nzI18n.getDateLocale() });
-      }
-      if (newItem.extra && newItem.status) {
-        newItem.color = (
-          {
-            todo: undefined,
-            processing: 'blue',
-            urgent: 'red',
-            doing: 'gold'
-          } as { [key: string]: string | undefined }
-        )[newItem.status];
-      }
-      data.find(w => w.title === newItem.type)!.list.push(newItem);
-    });
-    return data;
+  ngOnInit(): void {
+    this.loadData();
   }
 
   loadData(): void {
@@ -67,60 +52,39 @@ export class HeaderNotifyComponent {
       return;
     }
     this.loading = true;
-    setTimeout(() => {
-      const now = new Date();
-      this.data = this.updateNoticeData([
-        {
-          id: '000000001',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-          title: '监控-MYSQL_192.135.34.2-发出2级告警',
-          datetime: add(now, { days: 10 }),
-          type: '告警通知'
-        },
-        {
-          id: '000000002',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-          title: '监控-MYSQL_192.135.44.2-发出1级告警',
-          datetime: add(now, { days: -3 }),
-          type: '告警通知'
-        },
-        {
-          id: '000000003',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-          title: '监控-WEBSITE_www.baidu.com-发出4级告警',
-          datetime: add(now, { months: -3 }),
-          read: true,
-          type: '告警通知'
-        },
-        {
-          id: '000000004',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
-          title: '监控-REDIS_192.34.55.3-发出4级告警',
-          datetime: add(now, { years: -1 }),
-          type: '告警通知'
-        },
-        {
-          id: '000000005',
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-          title: '监控-REDIS_192.34.55.6-发出4级告警',
-          datetime: '2020-08-07',
-          type: '告警通知'
+    let loadAlerts$ = this.alertSvc.searchAlerts(0, undefined,undefined, 0, 5)
+      .subscribe(message => {
+        loadAlerts$.unsubscribe();
+        if (message.code === 0) {
+          let page = message.data;
+          let alerts = page.content;
+          this.data[0].list = [];
+          alerts.forEach(alert => {
+            let item = {
+                id: alert.id,
+                avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+                title: '监控-' + alert.monitorName +'-发出' + this.i18nSvc.fanyi(`alert.priority.${alert.priority}`),
+                datetime: alert.gmtCreate,
+                color: 'blue',
+                type: '近期未处理告警'
+              }
+            this.data[0].list.push(item);
+          })
+          this.count = page.totalElements;
+        } else {
+          console.warn(message.msg);
         }
-      ]);
-
-      this.loading = false;
-      this.cdr.detectChanges();
-    }, 500);
+        this.loading = false;
+        this.cdr.detectChanges();
+      }, error => {
+        loadAlerts$.unsubscribe();
+        console.error(error.msg);
+        this.loading = false;
+      })
   }
 
-  clear(type: string): void {
-    this.loading = true;
-    setTimeout(() => {
-      this.data = this.updateNoticeData([]);
-      this.loading = false;
-      this.cdr.detectChanges();
-    }, 500);
-    this.msg.success(`已清空 ${type}`);
+  gotoAlertCenter(type: string): void {
+    this.router.navigateByUrl(`/alert/center`);
   }
 
   select(res: NoticeIconSelect): void {

web-app/src/app/layout/basic/widgets/user.component.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
 import { SettingsService, User } from '@delon/theme';
+import {LocalStorageService} from "../../../service/local-storage.service";
 
 @Component({
   selector: 'header-user',
@@ -20,10 +20,6 @@ import { SettingsService, User } from '@delon/theme';
           <i nz-icon nzType="setting" class="mr-sm"></i>
           {{ 'menu.account.settings' | i18n }}
         </div>
-        <div nz-menu-item routerLink="/exception/trigger">
-          <i nz-icon nzType="close-circle" class="mr-sm"></i>
-          {{ 'menu.account.trigger' | i18n }}
-        </div>
         <li nz-menu-divider></li>
         <div nz-menu-item (click)="logout()">
           <i nz-icon nzType="logout" class="mr-sm"></i>
@@ -39,10 +35,12 @@ export class HeaderUserComponent {
     return this.settings.user;
   }
 
-  constructor(private settings: SettingsService, private router: Router, @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
+  constructor(private settings: SettingsService,
+              private router: Router,
+              private localStorageSvc : LocalStorageService) {}
 
   logout(): void {
-    this.tokenService.clear();
-    this.router.navigateByUrl(this.tokenService.login_url!);
+    this.localStorageSvc.clear();
+    this.router.navigateByUrl('/passport/login');
   }
 }