NAS-123151 / 24.04 / HA: Alert is duplicated (#8582)

* NAS-123151: HA: Alert is duplicated

* NAS-123151: PR update

* NAS-123151: PR update

* NAS-123151: PR update

* NAS-123151: PR update

* NAS-123151: PR update

* NAS-123151: PR update

src/app/modules/alerts/components/alerts-panel/alerts-panel.component.spec.ts

@@ -18,6 +18,7 @@ import { WebSocketService } from 'app/services/ws.service';
 import { adminUiInitialized } from 'app/store/admin-panel/admin.actions';
 import { haInfoReducer } from 'app/store/ha-info/ha-info.reducer';
 import { haInfoStateKey } from 'app/store/ha-info/ha-info.selectors';
+import { alertIndicatorPressed } from 'app/store/topbar/topbar.actions';
 
 const unreadAlerts = [
   {
@@ -188,4 +189,9 @@ describe('AlertsPanelComponent', () => {
     expect(alertPanel.unreadAlertComponents).toHaveLength(1);
     expect(alertPanel.dismissedAlertComponents).toHaveLength(3);
   });
+
+  it('calls alert.list when alerts panel is open', () => {
+    spectator.inject(Store).dispatch(alertIndicatorPressed());
+    expect(websocket.call).toHaveBeenCalledWith('alert.list');
+  });
 });

src/app/modules/alerts/store/alert.actions.ts

@@ -8,6 +8,7 @@ export const alertsNotLoaded = createAction('[Alerts API] Not Loaded', props<{ e
 
 export const alertAdded = createAction('[Alerts API] Alert Added', props<{ alert: Alert }>());
 export const alertChanged = createAction('[Alerts API] Alert Changed', props<{ alert: Alert }>());
+export const alertReceivedWhenPanelIsOpen = createAction('[Alerts API] Alert Received (when alerts panel is open)');
 export const alertRemoved = createAction('[Alerts API] Alert Removed', props<{ id: string }>());
 
 export const dismissAlertPressed = createAction('[Alert Panel] Dismiss Pressed', props<{ id: string }>());

src/app/modules/alerts/store/alert.effects.ts

@@ -2,29 +2,35 @@ import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
-import { EMPTY, forkJoin, of } from 'rxjs';
 import {
-  catchError, filter, map, mergeMap, pairwise, switchMap, withLatestFrom,
+  EMPTY, forkJoin, of,
+} from 'rxjs';
+import {
+  catchError, map, mergeMap, pairwise, switchMap, withLatestFrom,
 } from 'rxjs/operators';
 import { IncomingApiMessageType } from 'app/enums/api-message-type.enum';
 import {
   dismissAlertPressed, dismissAllAlertsPressed,
   reopenAlertPressed,
   reopenAllAlertsPressed,
-  alertAdded,
-  alertChanged,
   alertRemoved,
-  alertsLoaded,
   alertsNotLoaded,
+  alertReceivedWhenPanelIsOpen,
+  alertAdded,
+  alertsLoaded,
+  alertChanged,
 } from 'app/modules/alerts/store/alert.actions';
-import { AlertSlice, selectDismissedAlerts, selectUnreadAlerts } from 'app/modules/alerts/store/alert.selectors';
+import {
+  AlertSlice, selectDismissedAlerts, selectIsAlertPanelOpen, selectUnreadAlerts,
+} from 'app/modules/alerts/store/alert.selectors';
 import { WebSocketService } from 'app/services/ws.service';
 import { adminUiInitialized } from 'app/store/admin-panel/admin.actions';
+import { alertIndicatorPressed } from 'app/store/topbar/topbar.actions';
 
 @Injectable()
 export class AlertEffects {
   loadAlerts$ = createEffect(() => this.actions$.pipe(
-    ofType(adminUiInitialized),
+    ofType(adminUiInitialized, alertIndicatorPressed, alertReceivedWhenPanelIsOpen),
     switchMap(() => {
       return this.ws.call('alert.list').pipe(
         map((alerts) => alertsLoaded({ alerts })),
@@ -43,32 +49,31 @@ export class AlertEffects {
     ofType(adminUiInitialized),
     switchMap(() => {
       return this.ws.subscribe('alert.list').pipe(
-        filter((event) => event.msg !== IncomingApiMessageType.Removed),
         switchMap((event) => {
-          switch (event.msg) {
-            case IncomingApiMessageType.Added:
-              return of(alertAdded({ alert: event.fields }));
-            case IncomingApiMessageType.Changed:
-              return of(alertChanged({ alert: event.fields }));
-            default:
-              return EMPTY;
-          }
+          return this.store$.select(selectIsAlertPanelOpen).pipe(
+            switchMap((isAlertsPanelOpen) => {
+              switch (true) {
+                case [
+                  IncomingApiMessageType.Added, IncomingApiMessageType.Changed,
+                ].includes(event.msg) && isAlertsPanelOpen:
+                  return of(alertReceivedWhenPanelIsOpen());
+                case event.msg === IncomingApiMessageType.Added && !isAlertsPanelOpen:
+                  return of(alertAdded({ alert: event.fields }));
+                case event.msg === IncomingApiMessageType.Changed && !isAlertsPanelOpen:
+                  return of(alertChanged({ alert: event.fields }));
+                case event.msg === IncomingApiMessageType.Removed:
+                  return of(alertRemoved({ id: event.id.toString() }));
+                default:
+                  return EMPTY;
+              }
+            }),
+          );
         }),
       );
     }),
   ));
 
-  subscribeToRemoval$ = createEffect(() => this.actions$.pipe(
-    ofType(adminUiInitialized),
-    switchMap(() => {
-      return this.ws.subscribe('alert.list').pipe(
-        filter((event) => event.msg === IncomingApiMessageType.Removed),
-        map((event) => alertRemoved({ id: event.id.toString() })),
-      );
-    }),
-  ));
-
-  // TODO: Action errors are not handled. Standartize on how to report on errors and show them.
+  // TODO: Action errors are not handled. Standardize on how to report on errors and show them.
   dismissAlert$ = createEffect(() => this.actions$.pipe(
     ofType(dismissAlertPressed),
     mergeMap(({ id }) => {

src/app/modules/alerts/store/alert.reducer.ts

@@ -4,7 +4,8 @@ import { AlertLevel } from 'app/enums/alert-level.enum';
 import { Alert } from 'app/interfaces/alert.interface';
 import {
   alertAdded,
-  alertChanged, alertPanelClosed,
+  alertChanged,
+  alertPanelClosed,
   alertRemoved,
   alertsLoaded,
   alertsNotLoaded, dismissAlertPressed, dismissAllAlertsPressed, reopenAlertPressed, reopenAllAlertsPressed,