NAS-113738: Hack-fixes alerts

(cherry picked from commit 8cc4e956)

src/app/components/common/notifications/notifications.component.html

@@ -62,17 +62,21 @@
   </mat-list-item>
 
   <mat-list-item
-    *ngFor="let n of notifications; let last = last"
+    *ngFor="let notification of notifications; let last = last"
     class="notific-item unread m-0 p-0"
     role="listitem"
     [class.last]="last"
   >
-    <mat-icon [color]="n.color" class="notific-icon" [matTooltip]="n.icon_tooltip">{{n.icon}}</mat-icon>
+    <mat-icon
+      [color]="notification.color"
+      class="notific-icon"
+      [matTooltip]="notification.icon_tooltip"
+    >{{notification.icon}}</mat-icon>
     <div class="mat-list-text">
-      <h3 class="notific-title {{n.color}}">{{n.level}}</h3>
-      <h4 class="message" [innerHTML]="n.message"></h4>
-      <small class="time">{{n.time_locale | date: ngDateFormat }} ({{n.timezone}})</small>
-      <a (click)="turnMeOff(n,$event)" class="dismiss">{{ 'Dismiss' | translate }}</a>
+      <h3 class="notific-title {{notification.color}}">{{notification.level}}</h3>
+      <h4 class="message" [innerHTML]="notification.message"></h4>
+      <small class="time">{{notification.time_locale | date: ngDateFormat }} ({{notification.timezone}})</small>
+      <a (click)="onDismiss(notification,$event)" class="dismiss">{{ 'Dismiss' | translate }}</a>
     </div>
   </mat-list-item>
 
@@ -83,16 +87,16 @@
   </div>
 
   <mat-list-item
-    *ngFor="let n of dismissedNotifications; let last = last"
+    *ngFor="let notification of dismissedNotifications; let last = last"
     class="notific-item read"
     role="listitem"
     [class.last]="last"
   >
     <mat-icon class="notific-icon dismissed" [matTooltip]="'DISMISSED' | translate">check_circle</mat-icon>
     <div class="mat-list-text dismissed">
-      <h4 class="message" [innerHTML]="n.message"></h4>
-      <small class="time">{{n.time_locale | date: ngDateFormat }} ({{n.timezone}})</small>
-      <a (click)="turnMeOn(n, $event)" class="dismiss">{{ 'Re-Open' | translate }}</a>
+      <h4 class="message" [innerHTML]="notification.message"></h4>
+      <small class="time">{{notification.time_locale | date: ngDateFormat }} ({{notification.timezone}})</small>
+      <a (click)="onRestore(notification, $event)" class="dismiss">{{ 'Re-Open' | translate }}</a>
     </div>
   </mat-list-item>
 

src/app/components/common/notifications/notifications.component.ts

@@ -33,18 +33,16 @@ export class NotificationsComponent implements OnInit {
       this.notifications = [];
       this.dismissedNotifications = [];
 
-      setTimeout(() => {
-        this.ngDateFormat = `${this.localeService.getAngularFormat()}`;
-        notifications.forEach((notification: NotificationAlert) => {
-          if (!notification.dismissed) {
-            if (!_.find(this.notifications, { id: notification.id })) {
-              this.notifications.push(notification);
-            }
-          } else if (!_.find(this.dismissedNotifications, { id: notification.id })) {
-            this.dismissedNotifications.push(notification);
+      this.ngDateFormat = `${this.localeService.getAngularFormat()}`;
+      notifications.forEach((notification: NotificationAlert) => {
+        if (!notification.dismissed) {
+          if (!_.find(this.notifications, { id: notification.id })) {
+            this.notifications.push(notification);
           }
-        });
-      }, -1);
+        } else if (!_.find(this.dismissedNotifications, { id: notification.id })) {
+          this.dismissedNotifications.push(notification);
+        }
+      });
     });
     this.localeService.dateTimeFormatChange$.pipe(untilDestroyed(this)).subscribe(() => {
       this.ngDateFormat = `${this.localeService.getAngularFormat()}`;
@@ -75,12 +73,12 @@ export class NotificationsComponent implements OnInit {
     this.notificationsService.restoreNotifications(this.dismissedNotifications);
   }
 
-  turnMeOff(notification: NotificationAlert, e: MouseEvent): void {
+  onDismiss(notification: NotificationAlert, e: MouseEvent): void {
     e.preventDefault();
     this.notificationsService.dismissNotifications([notification]);
   }
 
-  turnMeOn(notification: NotificationAlert, e: MouseEvent): void {
+  onRestore(notification: NotificationAlert, e: MouseEvent): void {
     e.preventDefault();
     this.notificationsService.restoreNotifications([notification]);
   }

src/app/enums/api-event-message.enum.ts

 export enum ApiEventMessage {
   Changed = 'changed',
   Added = 'added',
+  Removed = 'removed',
   Result = 'result',
   Connected = 'connected',
   Connect = 'connect',

src/app/interfaces/api-event.interface.ts

@@ -5,4 +5,7 @@ export interface ApiEvent<T> {
   fields: T;
   id: number;
   msg: ApiEventMessage;
+  // true when item is fully removed from the collection
+  // TODO: Find usages and guard against directly in WebsocketService. Only rely on 'removed' ApiEventMessage
+  cleared?: boolean;
 }

src/app/services/notifications.service.ts

@@ -48,17 +48,26 @@ export class NotificationsService {
       });
 
       this.ws.sub('alert.list').pipe(untilDestroyed(this)).subscribe((alert) => {
-        // check for updates to alerts
+        if ((alert.msg === ApiEventMessage.Changed && alert.cleared) || alert.msg === ApiEventMessage.Removed) {
+          // Sometimes alerts are dismissed and sometimes they are fully removed.
+          // Full removal is handled below.
+          // TODO: Rewrite.
+          return;
+        }
+
         const notification = this.alertsArrivedHandler([alert])[0];
-        if (!_.find(this.notifications, { id: notification.id })) {
+        const existingIndex = _.findIndex(this.notifications, { id: notification.id });
+        if (existingIndex === -1) {
           this.notifications.push(notification);
+        } else {
+          this.notifications[existingIndex] = notification;
         }
         this.subject$.next(this.notifications);
       });
 
       this.ws.subscribe('alert.list').pipe(untilDestroyed(this)).subscribe((event) => {
-        // check for changed alerts
-        if (event && event.msg === ApiEventMessage.Changed && (event as any).cleared) {
+        // Handle full removal of an alert.
+        if (event && event.msg === ApiEventMessage.Changed && event.cleared) {
           const index = _.findIndex(this.notifications, { id: String(event.id) });
           if (index !== -1) {
             this.notifications.splice(index, 1);