NAS-131829 / 25.04 / Adds error log for middleware and efficient calls (

#11253)

src/app/app.component.ts

@@ -6,10 +6,10 @@ import { Router, NavigationEnd, RouterOutlet } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, tap } from 'rxjs';
 import { WINDOW } from 'app/helpers/window.helper';
-import { AuthService } from 'app/modules/auth/auth.service';
 import { LayoutService } from 'app/modules/layout/layout.service';
 import { PingService } from 'app/modules/websocket/ping.service';
 import { DetectBrowserService } from 'app/services/detect-browser.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 @UntilDestroy()
 @Component({
@@ -24,13 +24,13 @@ export class AppComponent implements OnInit {
   constructor(
     public title: Title,
     private router: Router,
-    private authService: AuthService,
+    private wsStatus: WebSocketStatusService,
     private detectBrowser: DetectBrowserService,
     private layoutService: LayoutService,
     private pingService: PingService,
     @Inject(WINDOW) private window: Window,
   ) {
-    this.authService.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isAuthenticated) => {
+    this.wsStatus.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isAuthenticated) => {
       this.isAuthenticated = isAuthenticated;
     });
     this.title.setTitle('TrueNAS - ' + this.window.location.hostname);

src/app/core/testing/classes/mock-api.service.ts

@@ -22,6 +22,7 @@ import { Job } from 'app/interfaces/job.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SubscriptionManagerService } from 'app/modules/websocket/subscription-manager.service';
 import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 /**
  * Better than just expect.anything() because it allows null and undefined.
@@ -47,10 +48,11 @@ export class MockApiService extends ApiService {
 
   constructor(
     wsHandler: WebSocketHandlerService,
+    wsStatus: WebSocketStatusService,
     subscriptionManager: SubscriptionManagerService,
     translate: TranslateService,
   ) {
-    super(wsHandler, subscriptionManager, translate);
+    super(wsHandler, wsStatus, subscriptionManager, translate);
 
     this.call = jest.fn();
     this.job = jest.fn();

src/app/core/testing/mock-enclosure/mock-enclosure-api.service.ts

@@ -10,6 +10,7 @@ import { SystemInfo } from 'app/interfaces/system-info.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SubscriptionManagerService } from 'app/modules/websocket/subscription-manager.service';
 import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 @Injectable({
   providedIn: 'root',
@@ -20,10 +21,11 @@ export class MockEnclosureApiService extends ApiService {
 
   constructor(
     wsManager: WebSocketHandlerService,
+    wsStatus: WebSocketStatusService,
     subscriptionManager: SubscriptionManagerService,
     translate: TranslateService,
   ) {
-    super(wsManager, subscriptionManager, translate);
+    super(wsManager, wsStatus, subscriptionManager, translate);
 
     console.warn('MockEnclosureApiService is in effect. Some calls will be mocked');
   }

src/app/core/testing/utils/empty-auth.service.ts

@@ -3,7 +3,6 @@ import { AuthService } from 'app/modules/auth/auth.service';
 
 export class EmptyAuthService {
   readonly authToken$ = getMissingInjectionErrorObservable(AuthService.name);
-  readonly isAuthenticated$ = getMissingInjectionErrorObservable(AuthService.name);
   readonly user$ = getMissingInjectionErrorObservable(AuthService.name);
   readonly isSysAdmin$ = getMissingInjectionErrorObservable(AuthService.name);
   readonly userTwoFactorConfig$ = getMissingInjectionErrorObservable(AuthService.name);

src/app/core/testing/utils/mock-api.utils.ts

@@ -14,6 +14,7 @@ import { Job } from 'app/interfaces/job.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SubscriptionManagerService } from 'app/modules/websocket/subscription-manager.service';
 import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 /**
  * This is a sugar syntax for creating simple api mocks.
@@ -49,11 +50,12 @@ export function mockApi(
     {
       provide: ApiService,
       useFactory: (
+        wsStatus: WebSocketStatusService,
         wsHandler: WebSocketHandlerService,
         translate: TranslateService,
       ) => {
         const subscriptionManager = {} as SubscriptionManagerService;
-        const mockApiService = new MockApiService(wsHandler, subscriptionManager, translate);
+        const mockApiService = new MockApiService(wsHandler, wsStatus, subscriptionManager, translate);
         (mockResponses || []).forEach((mockResponse) => {
           if (mockResponse.type === MockApiResponseType.Call) {
             mockApiService.mockCall(mockResponse.method, mockResponse.response);
@@ -66,7 +68,11 @@ export function mockApi(
         });
         return mockApiService;
       },
-      deps: [WebSocketHandlerService, TranslateService],
+      deps: [WebSocketStatusService, WebSocketHandlerService, TranslateService],
+    },
+    {
+      provide: WebSocketStatusService,
+      useValue: ({} as WebSocketStatusService),
     },
     {
       provide: MockApiService,

src/app/core/testing/utils/mock-auth.utils.ts

@@ -11,8 +11,8 @@ import { Role } from 'app/enums/role.enum';
 import { LoggedInUser } from 'app/interfaces/ds-cache.interface';
 import { AuthService } from 'app/modules/auth/auth.service';
 import { ApiService } from 'app/modules/websocket/api.service';
-import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
 import { TokenLastUsedService } from 'app/services/token-last-used.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 export const dummyUser = {
   privilege: {
@@ -40,13 +40,14 @@ export function mockAuth(
       provide: AuthService,
       useFactory: () => {
         const mockService = new MockAuthService(
-          createSpyObject(WebSocketHandlerService, {
-            isConnected$: of(true),
-          }),
           createSpyObject(Store),
           createSpyObject(ApiService),
           createSpyObject(TokenLastUsedService),
           createSpyObject(Window),
+          createSpyObject(WebSocketStatusService, {
+            isConnected$: of(true),
+            isAuthenticated$: of(false),
+          }),
         );
 
         mockService.setUser(user as LoggedInUser);

src/app/modules/auth/auth-guard.service.spec.ts

@@ -6,7 +6,7 @@ import {
 } from '@ngneat/spectator/jest';
 import { BehaviorSubject } from 'rxjs';
 import { AuthGuardService } from 'app/modules/auth/auth-guard.service';
-import { AuthService } from 'app/modules/auth/auth.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 describe('AuthGuardService', () => {
   const redirectUrl = 'storage/disks';
@@ -17,7 +17,7 @@ describe('AuthGuardService', () => {
   let spectator: SpectatorService<AuthGuardService>;
   const createService = createServiceFactory({
     service: AuthGuardService,
-    providers: [mockProvider(AuthService, { isAuthenticated$ })],
+    providers: [mockProvider(WebSocketStatusService, { isAuthenticated$ })],
   });
 
   beforeEach(() => {

src/app/modules/auth/auth-guard.service.ts

@@ -2,7 +2,7 @@ import { Inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { WINDOW } from 'app/helpers/window.helper';
-import { AuthService } from 'app/modules/auth/auth.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 @UntilDestroy()
 @Injectable({
@@ -12,10 +12,10 @@ export class AuthGuardService {
   isAuthenticated = false;
   constructor(
     private router: Router,
-    private authService: AuthService,
+    private wsStatus: WebSocketStatusService,
     @Inject(WINDOW) private window: Window,
   ) {
-    this.authService.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isLoggedIn) => {
+    this.wsStatus.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isLoggedIn) => {
       this.isAuthenticated = isLoggedIn;
     });
   }

src/app/modules/auth/auth.service.spec.ts

@@ -7,7 +7,9 @@ import {
   StorageStrategyStub, withLocalStorage,
 } from 'ngx-webstorage';
 import * as rxjs from 'rxjs';
-import { firstValueFrom, of } from 'rxjs';
+import {
+  BehaviorSubject, firstValueFrom,
+} from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 import { MockApiService } from 'app/core/testing/classes/mock-api.service';
 import { mockCall, mockApi } from 'app/core/testing/utils/mock-api.utils';
@@ -21,7 +23,7 @@ import { LoggedInUser } from 'app/interfaces/ds-cache.interface';
 import { Preferences } from 'app/interfaces/preferences.interface';
 import { AuthService } from 'app/modules/auth/auth.service';
 import { ApiService } from 'app/modules/websocket/api.service';
-import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 const authMeUser = {
   pw_dir: 'dir',
@@ -40,9 +42,12 @@ const authMeUser = {
   },
 } as LoggedInUser;
 
+const mockWsStatus = new WebSocketStatusService();
+
 describe('AuthService', () => {
   let spectator: SpectatorService<AuthService>;
   let testScheduler: TestScheduler;
+  let timer$: BehaviorSubject<0>;
   const createService = createServiceFactory({
     service: AuthService,
     providers: [
@@ -59,9 +64,10 @@ describe('AuthService', () => {
           },
         } as LoginExResponse),
       ]),
-      mockProvider(WebSocketHandlerService, {
-        isConnected$: of(true),
-      }),
+      {
+        provide: WebSocketStatusService,
+        useValue: mockWsStatus,
+      },
       {
         provide: STORAGE_STRATEGIES,
         useFactory: () => new StorageStrategyStub(LocalStorageStrategy.strategyName),
@@ -78,11 +84,14 @@ describe('AuthService', () => {
     testScheduler = new TestScheduler((actual, expected) => {
       expect(actual).toEqual(expected);
     });
+    mockWsStatus.setConnectionStatus(true);
+    timer$ = new BehaviorSubject(0);
+    jest.spyOn(rxjs, 'timer').mockReturnValue(timer$.asObservable());
   });
 
   describe('Login', () => {
     it('initializes auth session with triggers and token with username/password login', () => {
-      jest.spyOn(rxjs, 'timer').mockReturnValueOnce(of(0));
+      timer$.next(0);
 
       const obs$ = spectator.service.login('dummy', 'dummy');
 
@@ -91,10 +100,6 @@ describe('AuthService', () => {
           '(a|)',
           { a: LoginResult.Success },
         );
-        expectObservable(spectator.service.isAuthenticated$).toBe(
-          'c',
-          { c: true },
-        );
         expectObservable(spectator.service.authToken$).toBe(
           'd',
           { d: 'DUMMY_TOKEN' },
@@ -109,7 +114,7 @@ describe('AuthService', () => {
     });
 
     it('initializes auth session with triggers and token with token login', () => {
-      jest.spyOn(rxjs, 'timer').mockReturnValueOnce(of(0));
+      timer$.next(0);
 
       const obs$ = spectator.service.loginWithToken();
 
@@ -118,10 +123,6 @@ describe('AuthService', () => {
           '(a|)',
           { a: LoginResult.Success },
         );
-        expectObservable(spectator.service.isAuthenticated$).toBe(
-          'c',
-          { c: true },
-        );
         expectObservable(spectator.service.authToken$).toBe(
           'd',
           { d: 'DUMMY_TOKEN' },
@@ -146,10 +147,6 @@ describe('AuthService', () => {
             a: undefined,
           },
         );
-        expectObservable(spectator.service.isAuthenticated$).toBe(
-          'c',
-          { c: false },
-        );
         expectObservable(spectator.service.authToken$).toBe(
           '|',
           {},

src/app/modules/auth/auth.service.ts

@@ -3,7 +3,6 @@ import { Store } from '@ngrx/store';
 import { LocalStorage } from 'ngx-webstorage';
 import {
   BehaviorSubject,
-  combineLatest,
   filter,
   map,
   Observable,
@@ -23,8 +22,8 @@ import { LoginExMechanism, LoginExResponse, LoginExResponseType } from 'app/inte
 import { LoggedInUser } from 'app/interfaces/ds-cache.interface';
 import { GlobalTwoFactorConfig } from 'app/interfaces/two-factor-config.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
-import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
 import { TokenLastUsedService } from 'app/services/token-last-used.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 import { AppState } from 'app/store';
 import { adminUiInitialized } from 'app/store/admin-panel/admin.actions';
 
@@ -51,19 +50,8 @@ export class AuthService {
     return Boolean(this.token) && this.token !== 'null';
   }
 
-  private isLoggedIn$ = new BehaviorSubject<boolean>(false);
-
   private generateTokenSubscription: Subscription | null;
 
-  readonly isAuthenticated$ = combineLatest([
-    this.wsManager.isConnected$,
-    this.isLoggedIn$.asObservable(),
-  ]).pipe(
-    switchMap(([isConnected, isLoggedIn]) => {
-      return of(isConnected && isLoggedIn);
-    }),
-  );
-
   readonly user$ = this.loggedInUser$.asObservable();
 
   /**
@@ -82,11 +70,11 @@ export class AuthService {
   private cachedGlobalTwoFactorConfig: GlobalTwoFactorConfig | null;
 
   constructor(
-    private wsManager: WebSocketHandlerService,
     private store$: Store<AppState>,
     private api: ApiService,
     private tokenLastUsedService: TokenLastUsedService,
     @Inject(WINDOW) private window: Window,
+    private wsStatus: WebSocketStatusService,
   ) {
     this.setupAuthenticationUpdate();
     this.setupWsConnectionUpdate();
@@ -183,7 +171,7 @@ export class AuthService {
       tap(() => {
         this.clearAuthToken();
         this.api.clearSubscriptions();
-        this.isLoggedIn$.next(false);
+        this.wsStatus.setLoginStatus(false);
       }),
     );
   }
@@ -202,18 +190,18 @@ export class AuthService {
           this.loggedInUser$.next(result.user_info);
 
           if (!result.user_info?.privilege?.webui_access) {
-            this.isLoggedIn$.next(false);
+            this.wsStatus.setLoginStatus(false);
             return of(LoginResult.NoAccess);
           }
 
-          this.isLoggedIn$.next(true);
+          this.wsStatus.setLoginStatus(true);
           this.window.sessionStorage.setItem('loginBannerDismissed', 'true');
           return this.authToken$.pipe(
             take(1),
             map(() => LoginResult.Success),
           );
         }
-        this.isLoggedIn$.next(false);
+        this.wsStatus.setLoginStatus(false);
 
         if (result.response_type === LoginExResponseType.OtpRequired) {
           return of(LoginResult.NoOtp);
@@ -226,8 +214,8 @@ export class AuthService {
   private setupPeriodicTokenGeneration(): void {
     if (!this.generateTokenSubscription || this.generateTokenSubscription.closed) {
       this.generateTokenSubscription = timer(0, this.tokenRegenerationTimeMillis).pipe(
-        switchMap(() => this.isAuthenticated$.pipe(take(1))),
-        filter((isAuthenticated) => isAuthenticated),
+        switchMap(() => this.wsStatus.isAuthenticated$.pipe(take(1))),
+        filter(Boolean),
         switchMap(() => this.api.call('auth.generate_token')),
         tap((token) => this.latestTokenGenerated$.next(token)),
       ).subscribe();
@@ -243,7 +231,7 @@ export class AuthService {
   }
 
   private setupAuthenticationUpdate(): void {
-    this.isAuthenticated$.subscribe({
+    this.wsStatus.isAuthenticated$.subscribe({
       next: (isAuthenticated) => {
         if (isAuthenticated) {
           this.store$.dispatch(adminUiInitialized());
@@ -260,8 +248,8 @@ export class AuthService {
   }
 
   private setupWsConnectionUpdate(): void {
-    this.wsManager.isConnected$.pipe(filter((isConnected) => !isConnected)).subscribe(() => {
-      this.isLoggedIn$.next(false);
+    this.wsStatus.isConnected$.pipe(filter((isConnected) => !isConnected)).subscribe(() => {
+      this.wsStatus.setLoginStatus(false);
     });
   }