UI: Added sequenceNumber in WS notification updated

ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts

@@ -25,7 +25,7 @@ import {
 } from '@angular/core';
 import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
 import { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';
-import { distinctUntilChanged, map, share, tap } from 'rxjs/operators';
+import { distinctUntilChanged, map, share, skip, tap } from 'rxjs/operators';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
@@ -100,7 +100,9 @@ export class NotificationBellComponent implements OnDestroy {
 
   private initSubscription() {
     this.notificationSubscriber = NotificationSubscriber.createNotificationCountSubscription(this.notificationWsService, this.zone);
-    this.notificationCountSubscriber = this.notificationSubscriber.notificationCount$.subscribe(value => this.countSubject.next(value));
+    this.notificationCountSubscriber = this.notificationSubscriber.notificationCount$.pipe(
+      skip(1),
+    ).subscribe(value => this.countSubject.next(value));
 
     this.notificationSubscriber.subscribe();
   }

ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts

@@ -22,7 +22,7 @@ import { AppState } from '@core/core.state';
 import { Notification, NotificationRequest } from '@shared/models/notification.models';
 import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
 import { BehaviorSubject, Observable, ReplaySubject, Subscription } from 'rxjs';
-import { map, share, tap } from 'rxjs/operators';
+import { map, share, skip, tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { NotificationSubscriber } from '@shared/models/websocket/notification-ws.models';
 
@@ -71,7 +71,9 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
       }),
       tap(() => setTimeout(() => this.cd.markForCheck()))
     );
-    this.notificationCountSubscriber = this.notificationSubscriber.notificationCount$.subscribe(value => this.counter.next(value));
+    this.notificationCountSubscriber = this.notificationSubscriber.notificationCount$.pipe(
+      skip(1),
+    ).subscribe(value => this.counter.next(value));
     this.notificationSubscriber.subscribe();
   }
 

ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts

@@ -610,21 +610,25 @@ export class AlarmCountUpdate extends CmdUpdate {
 
 export class NotificationCountUpdate extends CmdUpdate {
   totalUnreadCount: number;
+  sequenceNumber: number;
 
   constructor(msg: NotificationCountUpdateMsg) {
     super(msg);
     this.totalUnreadCount = msg.totalUnreadCount;
+    this.sequenceNumber = msg.sequenceNumber;
   }
 }
 
 export class NotificationsUpdate extends CmdUpdate {
   totalUnreadCount: number;
+  sequenceNumber: number;
   update?: Notification;
   notifications?: Notification[];
 
   constructor(msg: NotificationsUpdateMsg) {
     super(msg);
     this.totalUnreadCount = msg.totalUnreadCount;
+    this.sequenceNumber = msg.sequenceNumber;
     this.update = msg.update;
     this.notifications = msg.notifications;
   }

ui-ngx/src/app/shared/models/websocket/notification-ws.models.ts

@@ -27,19 +27,27 @@ import { NgZone } from '@angular/core';
 import { isDefinedAndNotNull } from '@core/utils';
 import { Notification } from '@shared/models/notification.models';
 import { WsService, WsSubscriber } from '@shared/models/websocket/websocket.models';
-import { BehaviorSubject, ReplaySubject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { WebsocketService } from '@core/ws/websocket.service';
 
 export class NotificationSubscriber extends WsSubscriber {
-  private notificationCountSubject = new ReplaySubject<NotificationCountUpdate>(1);
+  private notificationCountSubject = new BehaviorSubject<NotificationCountUpdate>({
+    cmdId: 0,
+    cmdUpdateType: undefined,
+    errorCode: 0,
+    errorMsg: '',
+    totalUnreadCount: 0,
+    sequenceNumber: 0
+  });
   private notificationsSubject = new BehaviorSubject<NotificationsUpdate>({
     cmdId: 0,
     cmdUpdateType: undefined,
     errorCode: 0,
     errorMsg: '',
     notifications: null,
-    totalUnreadCount: 0
+    totalUnreadCount: 0,
+    sequenceNumber: 0
   });
 
   public messageLimit = 10;
@@ -84,6 +92,10 @@ export class NotificationSubscriber extends WsSubscriber {
   }
 
   onNotificationCountUpdate(message: NotificationCountUpdate) {
+    const currentNotificationCount = this.notificationCountSubject.value;
+    if (message.sequenceNumber <= currentNotificationCount.sequenceNumber) {
+      return;
+    }
     if (this.zone) {
       this.zone.run(
         () => {
@@ -103,6 +115,9 @@ export class NotificationSubscriber extends WsSubscriber {
 
   onNotificationsUpdate(message: NotificationsUpdate) {
     const currentNotifications = this.notificationsSubject.value;
+    if (message.sequenceNumber <= currentNotifications.sequenceNumber) {
+      message.totalUnreadCount = currentNotifications.totalUnreadCount;
+    }
     let processMessage = message;
     if (isDefinedAndNotNull(currentNotifications) && message.update) {
       currentNotifications.notifications.unshift(message.update);
@@ -165,13 +180,15 @@ export class MarkAllAsReadCmd implements WebsocketCmd {
 export interface NotificationCountUpdateMsg extends CmdUpdateMsg {
   cmdUpdateType: CmdUpdateType.NOTIFICATIONS_COUNT;
   totalUnreadCount: number;
+  sequenceNumber: number;
 }
 
 export interface NotificationsUpdateMsg extends CmdUpdateMsg {
   cmdUpdateType: CmdUpdateType.NOTIFICATIONS;
-  totalUnreadCount: number;
   update?: Notification;
   notifications?: Notification[];
+  totalUnreadCount: number;
+  sequenceNumber: number;
 }
 
 export const isNotificationCountUpdateMsg = (message: WebsocketDataMsg): message is NotificationCountUpdateMsg => {