NAS-123499: Replace usages of NetworkInterfacesChanged with something…

… else (#8583)

src/app/interfaces/events/index.ts

@@ -1,13 +1,9 @@
 import { LabelDrivesEvent } from 'app/interfaces/events/label-drives-event.interface';
-import { NetworkInterfacesChangedEvent } from 'app/interfaces/events/network-interfaces-changed-event.interface';
 
 export interface UntypedEvent {
   name: string;
   sender?: unknown;
   data?: unknown;
 }
 
-export type CoreEvent =
-  | UntypedEvent
-  | NetworkInterfacesChangedEvent
-  | LabelDrivesEvent;
+export type CoreEvent = UntypedEvent | LabelDrivesEvent;

src/app/modules/layout/components/topbar/topbar.component.ts

@@ -6,6 +6,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatSidenav } from '@angular/material/sidenav';
 import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Actions, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
@@ -19,7 +20,6 @@ import { WINDOW } from 'app/helpers/window.helper';
 import network_interfaces_helptext from 'app/helptext/network/interfaces/interfaces-list';
 import helptext from 'app/helptext/topbar';
 import { HaStatus } from 'app/interfaces/events/ha-status-event.interface';
-import { NetworkInterfacesChangedEvent } from 'app/interfaces/events/network-interfaces-changed-event.interface';
 import { SidenavStatusData } from 'app/interfaces/events/sidenav-status-event.interface';
 import { Interval } from 'app/interfaces/timeout.interface';
 import { WebsocketError } from 'app/interfaces/websocket-error.interface';
@@ -39,8 +39,8 @@ import { ErrorHandlerService } from 'app/services/error-handler.service';
 import { LayoutService } from 'app/services/layout.service';
 import { SystemGeneralService } from 'app/services/system-general.service';
 import { ThemeService } from 'app/services/theme/theme.service';
-import { WebsocketConnectionService } from 'app/services/websocket-connection.service';
 import { WebSocketService } from 'app/services/ws.service';
+import { adminNetworkInterfacesChanged } from 'app/store/admin-panel/admin.actions';
 import { selectHaStatus, selectIsHaLicensed, selectIsUpgradePending } from 'app/store/ha-info/ha-info.selectors';
 import { waitForSystemInfo } from 'app/store/system-info/system-info.selectors';
 import { alertIndicatorPressed, sidenavUpdated } from 'app/store/topbar/topbar.actions';
@@ -84,7 +84,6 @@ export class TopbarComponent implements OnInit, OnDestroy {
     public themeService: ThemeService,
     private router: Router,
     private ws: WebSocketService,
-    private wsManager: WebsocketConnectionService,
     private dialogService: DialogService,
     private systemGeneralService: SystemGeneralService,
     private dialog: MatDialog,
@@ -96,6 +95,7 @@ export class TopbarComponent implements OnInit, OnDestroy {
     private core: CoreService,
     private snackbar: SnackbarService,
     private errorHandler: ErrorHandlerService,
+    private actions$: Actions,
     @Inject(WINDOW) private window: Window,
   ) {
     this.systemGeneralService.getProductType$.pipe(untilDestroyed(this)).subscribe((productType) => {
@@ -161,17 +161,19 @@ export class TopbarComponent implements OnInit, OnDestroy {
 
     this.checkNetworkChangesPending();
     this.checkNetworkCheckinWaiting();
-    this.core.register({ observerClass: this, eventName: 'NetworkInterfacesChanged' }).pipe(untilDestroyed(this)).subscribe((evt: NetworkInterfacesChangedEvent) => {
-      if (evt && evt.data.commit) {
-        this.pendingNetworkChanges = false;
-        this.checkNetworkCheckinWaiting();
-      } else {
-        this.checkNetworkChangesPending();
-      }
-      if (evt && evt.data.checkin && this.checkinInterval) {
-        clearInterval(this.checkinInterval);
-      }
-    });
+
+    this.actions$.pipe(ofType(adminNetworkInterfacesChanged), untilDestroyed(this))
+      .subscribe(({ commit, checkIn }) => {
+        if (commit) {
+          this.pendingNetworkChanges = false;
+          this.checkNetworkCheckinWaiting();
+        } else {
+          this.checkNetworkChangesPending();
+        }
+        if (checkIn && this.checkinInterval) {
+          clearInterval(this.checkinInterval);
+        }
+      });
 
     this.ws.subscribe('zfs.pool.scan').pipe(untilDestroyed(this)).subscribe((resilverJob) => {
       const scan = resilverJob.fields.scan;
@@ -301,7 +303,7 @@ export class TopbarComponent implements OnInit, OnDestroy {
       this.loader.open();
       this.ws.call('interface.checkin').pipe(untilDestroyed(this)).subscribe({
         next: () => {
-          this.core.emit({ name: 'NetworkInterfacesChanged', data: { commit: true, checkin: true }, sender: this });
+          this.store$.dispatch(adminNetworkInterfacesChanged({ commit: true, checkIn: true }));
           this.loader.close();
           this.snackbar.success(
             this.translate.instant(network_interfaces_helptext.checkin_complete_message),

src/app/pages/network/components/interface-form/interface-form.component.spec.ts

@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { createComponentFactory, Spectator, mockProvider } from '@ngneat/spectator/jest';
-import { StoreModule } from '@ngrx/store';
+import { Store, StoreModule } from '@ngrx/store';
 import { of } from 'rxjs';
 import { MockWebsocketService } from 'app/core/testing/classes/mock-websocket.service';
 import { mockCall, mockWebsocket } from 'app/core/testing/utils/mock-websocket.utils';
@@ -32,6 +32,7 @@ import { IxSlideInService } from 'app/services/ix-slide-in.service';
 import { NetworkService } from 'app/services/network.service';
 import { SystemGeneralService } from 'app/services/system-general.service';
 import { WebSocketService } from 'app/services/ws.service';
+import { adminNetworkInterfacesChanged } 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';
 
@@ -79,6 +80,12 @@ describe('InterfaceFormComponent', () => {
       DefaultGatewayDialogComponent,
     ],
     providers: [
+      {
+        provide: Store,
+        useValue: {
+          dispatch: jest.fn(),
+        },
+      },
       mockWebsocket([
         mockCall('interface.xmit_hash_policy_choices', {
           [XmitHashPolicy.Layer2]: XmitHashPolicy.Layer2,
@@ -169,11 +176,10 @@ describe('InterfaceFormComponent', () => {
         mtu: 1500,
       }]);
       expect(spectator.inject(IxSlideInRef).close).toHaveBeenCalled();
-      expect(spectator.inject(CoreService).emit).toHaveBeenCalledWith({
-        name: 'NetworkInterfacesChanged',
-        data: { commit: false, checkin: false },
-        sender: expect.any(InterfaceFormComponent),
-      });
+
+      const store$ = spectator.inject(Store);
+      expect(store$.dispatch).toHaveBeenCalledWith(adminNetworkInterfacesChanged({ commit: false, checkIn: false }));
+
       expect(ws.call).toHaveBeenCalledWith('interface.default_route_will_be_removed');
 
       expect(spectator.inject(MatDialog).open).toHaveBeenCalledWith(
@@ -218,11 +224,10 @@ describe('InterfaceFormComponent', () => {
         mtu: 1600,
         xmit_hash_policy: XmitHashPolicy.Layer2Plus3,
       }]);
-      expect(spectator.inject(CoreService).emit).toHaveBeenCalledWith({
-        name: 'NetworkInterfacesChanged',
-        data: { commit: false, checkin: false },
-        sender: expect.any(InterfaceFormComponent),
-      });
+
+      const store$ = spectator.inject(Store);
+      expect(store$.dispatch).toHaveBeenCalledWith(adminNetworkInterfacesChanged({ commit: false, checkIn: false }));
+
       expect(spectator.inject(IxSlideInRef).close).toHaveBeenCalled();
       expect(ws.call).toHaveBeenCalledWith('interface.default_route_will_be_removed');
 

src/app/pages/network/components/interface-form/interface-form.component.ts

@@ -5,6 +5,7 @@ import { Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { range } from 'lodash';
 import { forkJoin, of } from 'rxjs';
@@ -42,10 +43,11 @@ import {
   interfaceAliasesToFormAliases,
   NetworkInterfaceFormAlias,
 } from 'app/pages/network/components/interface-form/network-interface-alias-control.interface';
-import { CoreService } from 'app/services/core-service/core.service';
 import { NetworkService } from 'app/services/network.service';
 import { SystemGeneralService } from 'app/services/system-general.service';
 import { WebSocketService } from 'app/services/ws.service';
+import { AppState } from 'app/store';
+import { adminNetworkInterfacesChanged } from 'app/store/admin-panel/admin.actions';
 
 @UntilDestroy()
 @Component({
@@ -134,12 +136,12 @@ export class InterfaceFormComponent implements OnInit {
     private networkService: NetworkService,
     private errorHandler: FormErrorHandlerService,
     private snackbar: SnackbarService,
-    private core: CoreService,
     private validatorsService: IxValidatorsService,
     private interfaceFormValidator: InterfaceNameValidatorService,
     private matDialog: MatDialog,
     private systemGeneralService: SystemGeneralService,
     private slideInRef: IxSlideInRef<InterfaceFormComponent>,
+    private store$: Store<AppState>,
     @Inject(SLIDE_IN_DATA) private existingInterface: NetworkInterface,
   ) {}
 
@@ -232,7 +234,7 @@ export class InterfaceFormComponent implements OnInit {
       next: () => {
         this.isLoading = false;
         this.snackbar.success(this.translate.instant('Network interface updated'));
-        this.core.emit({ name: 'NetworkInterfacesChanged', data: { commit: false, checkin: false }, sender: this });
+        this.store$.dispatch(adminNetworkInterfacesChanged({ commit: false, checkIn: false }));
         this.slideInRef.close(true);
 
         this.ws.call('interface.default_route_will_be_removed').pipe(

src/app/pages/network/components/interfaces-card/interfaces-card.component.ts

@@ -8,6 +8,7 @@ import {
   Output,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { filter } from 'rxjs/operators';
 import { NetworkInterfaceType } from 'app/enums/network-interface.enum';
@@ -23,12 +24,13 @@ import {
   IpAddressesCellComponent,
 } from 'app/pages/network/components/interfaces-card/ip-addresses-cell/ip-addresses-cell.component';
 import { InterfacesStore } from 'app/pages/network/stores/interfaces.store';
-import { CoreService } from 'app/services/core-service/core.service';
 import { DialogService } from 'app/services/dialog.service';
 import { ErrorHandlerService } from 'app/services/error-handler.service';
 import { IxSlideInService } from 'app/services/ix-slide-in.service';
 import { NetworkService } from 'app/services/network.service';
 import { WebSocketService } from 'app/services/ws.service';
+import { AppState } from 'app/store';
+import { adminNetworkInterfacesChanged } from 'app/store/admin-panel/admin.actions';
 
 @UntilDestroy()
 @Component({
@@ -66,14 +68,14 @@ export class InterfacesCardComponent implements OnInit {
   readonly helptext = helptext;
 
   constructor(
-    private store: InterfacesStore,
+    private interfacesStore$: InterfacesStore,
+    private store$: Store<AppState>,
     private cdr: ChangeDetectorRef,
     private translate: TranslateService,
     private slideIn: IxSlideInService,
     private dialogService: DialogService,
     private ws: WebSocketService,
     private loader: AppLoaderService,
-    private core: CoreService,
     private errorHandler: ErrorHandlerService,
     private networkService: NetworkService,
   ) {}
@@ -83,9 +85,9 @@ export class InterfacesCardComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.store.loadInterfaces();
+    this.interfacesStore$.loadInterfaces();
     this.subscribeToUpdates();
-    this.store.state$.pipe(untilDestroyed(this)).subscribe((state) => {
+    this.interfacesStore$.state$.pipe(untilDestroyed(this)).subscribe((state) => {
       this.isLoading = state.isLoading;
       this.dataProvider.setRows(state.interfaces);
       this.cdr.markForCheck();
@@ -98,7 +100,7 @@ export class InterfacesCardComponent implements OnInit {
       .pipe(filter(Boolean), untilDestroyed(this))
       .subscribe(() => {
         this.interfacesUpdated.emit();
-        this.store.loadInterfaces();
+        this.interfacesStore$.loadInterfaces();
       });
   }
 
@@ -110,7 +112,7 @@ export class InterfacesCardComponent implements OnInit {
       .pipe(filter(Boolean), untilDestroyed(this))
       .subscribe(() => {
         this.interfacesUpdated.emit();
-        this.store.loadInterfaces();
+        this.interfacesStore$.loadInterfaces();
       });
   }
 
@@ -143,8 +145,8 @@ export class InterfacesCardComponent implements OnInit {
       )
       .subscribe(() => {
         this.interfacesUpdated.emit();
-        this.store.loadInterfaces();
-        this.core.emit({ name: 'NetworkInterfacesChanged', data: { commit: false, checkin: false }, sender: this });
+        this.interfacesStore$.loadInterfaces();
+        this.store$.dispatch(adminNetworkInterfacesChanged({ commit: false, checkIn: false }));
       });
   }
 

src/app/pages/network/components/network-configuration-card/network-configuration-card.component.ts

@@ -2,17 +2,18 @@ import {
   ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit,
 } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Actions, ofType } from '@ngrx/effects';
 import { TranslateService } from '@ngx-translate/core';
 import ipRegex from 'ip-regex';
-import { combineLatest, filter } from 'rxjs';
+import { combineLatest } from 'rxjs';
 import { NetworkActivityType } from 'app/enums/network-activity-type.enum';
 import { NetworkConfiguration } from 'app/interfaces/network-configuration.interface';
 import { NetworkSummary } from 'app/interfaces/network-summary.interface';
 import { Option } from 'app/interfaces/option.interface';
 import { NetworkConfigurationComponent } from 'app/pages/network/components/configuration/configuration.component';
-import { CoreService } from 'app/services/core-service/core.service';
 import { IxSlideInService } from 'app/services/ix-slide-in.service';
 import { WebSocketService } from 'app/services/ws.service';
+import { adminNetworkInterfacesChanged } from 'app/store/admin-panel/admin.actions';
 
 @UntilDestroy()
 @Component({
@@ -31,14 +32,14 @@ export class NetworkConfigurationCardComponent implements OnInit {
     private translate: TranslateService,
     private cdr: ChangeDetectorRef,
     private slideInService: IxSlideInService,
-    private core: CoreService,
+    private actions$: Actions,
   ) {}
 
   ngOnInit(): void {
     this.loadNetworkConfigAndSummary();
 
-    this.core.register({ observerClass: this, eventName: 'NetworkInterfacesChanged' })
-      .pipe(filter(Boolean), untilDestroyed(this)).subscribe(() => this.loadNetworkConfigAndSummary());
+    this.actions$.pipe(ofType(adminNetworkInterfacesChanged), untilDestroyed(this))
+      .subscribe(() => this.loadNetworkConfigAndSummary());
   }
 
   get serviceAnnouncement(): string {