Make testing statuses available outside of Testing Tab

modules/ui/src/app/app.component.html

@@ -108,8 +108,7 @@ <h1 class="main-heading">Testrun</h1>
           (click)="openGeneralSettings(true)">
           <mat-icon>tune</mat-icon>
         </button>
-        <app-shutdown-app
-          [disable]="isTestrunInProgress(vm.systemStatus?.status)">
+        <app-shutdown-app [disable]="isTestrunInProgress(vm.systemStatus)">
         </app-shutdown-app>
       </mat-toolbar>
       <div class="app-content-main" role="main" id="main">
@@ -175,10 +174,8 @@ <h1 class="main-heading">Testrun</h1>
           *ngIf="
             vm.hasConnectionSettings === true &&
             vm.hasDevices &&
-            (!vm.systemStatus?.status ||
-              vm.systemStatus?.status === StatusOfTestrun.Idle) &&
-            vm.isStatusLoaded === true &&
-            vm.isTestrunStarted === false
+            (!vm.systemStatus || vm.systemStatus === StatusOfTestrun.Idle) &&
+            vm.isStatusLoaded === true
           ">
           Step 3: Once device is created, you are able to
           <a
@@ -205,7 +202,7 @@ <h1 class="main-heading">Testrun</h1>
     class="settings-drawer">
     <app-general-settings
       #settings
-      [settingsDisable]="isTestrunInProgress(vm.systemStatus?.status)"
+      [settingsDisable]="isTestrunInProgress(vm.systemStatus)"
       (closeSettingEvent)="closeSetting(vm.hasDevices)">
     </app-general-settings>
   </mat-drawer>

modules/ui/src/app/app.component.spec.ts

@@ -56,13 +56,21 @@ import {
   selectHasDevices,
   selectInterfaces,
   selectIsOpenStartTestrun,
-  selectIsTestrunStarted,
+  selectIsOpenWaitSnackBar,
   selectMenuOpened,
+  selectStatus,
   selectSystemStatus,
 } from './store/selectors';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { CertificatesComponent } from './pages/certificates/certificates.component';
 import { of } from 'rxjs';
+import { WINDOW } from './providers/window.provider';
+
+const windowMock = {
+  location: {
+    href: '',
+  },
+};
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -140,12 +148,13 @@ describe('AppComponent', () => {
             { selector: selectError, value: null },
             { selector: selectMenuOpened, value: false },
             { selector: selectHasDevices, value: false },
-            { selector: selectIsTestrunStarted, value: false },
-            { selector: selectSystemStatus, value: null },
+            { selector: selectStatus, value: null },
             { selector: selectIsOpenStartTestrun, value: false },
+            { selector: selectIsOpenWaitSnackBar, value: false },
           ],
         }),
         { provide: FocusManagerService, useValue: mockFocusManagerService },
+        { provide: WINDOW, useValue: windowMock },
       ],
       declarations: [
         AppComponent,
@@ -443,7 +452,6 @@ describe('AppComponent', () => {
         store.overrideSelector(selectHasConnectionSettings, true);
         store.overrideSelector(selectHasDevices, true);
         store.overrideSelector(selectSystemStatus, MOCK_PROGRESS_DATA_IDLE);
-        store.overrideSelector(selectIsTestrunStarted, false);
 
         fixture.detectChanges();
       });
@@ -518,7 +526,6 @@ describe('AppComponent', () => {
     describe('with devices setted but without systemStatus data', () => {
       beforeEach(() => {
         store.overrideSelector(selectHasDevices, true);
-        store.overrideSelector(selectIsTestrunStarted, false);
         component.appStore.updateIsStatusLoaded(true);
         store.overrideSelector(selectHasConnectionSettings, true);
         store.overrideSelector(selectSystemStatus, null);
@@ -562,7 +569,6 @@ describe('AppComponent', () => {
     describe('with devices setted, without systemStatus data, but run the tests ', () => {
       beforeEach(() => {
         store.overrideSelector(selectHasDevices, true);
-        store.overrideSelector(selectIsTestrunStarted, true);
         fixture.detectChanges();
       });
 

modules/ui/src/app/app.component.ts

@@ -167,7 +167,7 @@ export class AppComponent {
     this.appStore.setContent();
   }
 
-  isTestrunInProgress(status?: string) {
+  isTestrunInProgress(status?: string | null) {
     return this.testRunService.testrunInProgress(status);
   }
 }

modules/ui/src/app/app.module.ts

@@ -47,6 +47,7 @@ import { SettingsDropdownComponent } from './pages/settings/components/settings-
 import { ShutdownAppComponent } from './components/shutdown-app/shutdown-app.component';
 import { WindowProvider } from './providers/window.provider';
 import { CertificatesComponent } from './pages/certificates/certificates.component';
+import { LOADER_TIMEOUT_CONFIG_TOKEN } from './services/loaderConfig';
 
 @NgModule({
   declarations: [AppComponent, GeneralSettingsComponent],
@@ -89,6 +90,7 @@ import { CertificatesComponent } from './pages/certificates/certificates.compone
       useClass: LoadingInterceptor,
       multi: true,
     },
+    { provide: LOADER_TIMEOUT_CONFIG_TOKEN, useValue: 1000 },
   ],
   bootstrap: [AppComponent],
 })

modules/ui/src/app/app.store.spec.ts

@@ -23,15 +23,24 @@ import {
   selectHasConnectionSettings,
   selectHasDevices,
   selectInterfaces,
-  selectIsTestrunStarted,
   selectMenuOpened,
-  selectSystemStatus,
+  selectStatus,
 } from './store/selectors';
 import { TestRunService } from './services/test-run.service';
 import SpyObj = jasmine.SpyObj;
 import { device } from './mocks/device.mock';
-import { setDevices, setTestrunStatus } from './store/actions';
+import { fetchSystemStatus, setDevices } from './store/actions';
 import { MOCK_PROGRESS_DATA_IN_PROGRESS } from './mocks/progress.mock';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NotificationService } from './services/notification.service';
+import { WINDOW } from './providers/window.provider';
+import { Routes } from './model/routes';
+
+const windowMock = {
+  location: {
+    href: '',
+  },
+};
 
 const mock = (() => {
   let store: { [key: string]: string } = {};
@@ -55,16 +64,25 @@ describe('AppStore', () => {
   let appStore: AppStore;
   let store: MockStore<AppState>;
   let mockService: SpyObj<TestRunService>;
+  let mockNotificationService: SpyObj<NotificationService>;
 
   beforeEach(() => {
-    mockService = jasmine.createSpyObj(['fetchDevices', 'fetchSystemStatus']);
+    mockService = jasmine.createSpyObj('mockService', ['fetchDevices']);
+    mockNotificationService = jasmine.createSpyObj('mockNotificationService', [
+      'notify',
+    ]);
 
     TestBed.configureTestingModule({
       providers: [
         AppStore,
-        provideMockStore({}),
+        provideMockStore({
+          selectors: [{ selector: selectStatus, value: null }],
+        }),
         { provide: TestRunService, useValue: mockService },
+        { provide: NotificationService, useValue: mockNotificationService },
+        { provide: WINDOW, useValue: windowMock },
       ],
+      imports: [BrowserAnimationsModule],
     });
 
     store = TestBed.inject(MockStore);
@@ -75,8 +93,6 @@ describe('AppStore', () => {
     store.overrideSelector(selectMenuOpened, true);
     store.overrideSelector(selectInterfaces, {});
     store.overrideSelector(selectError, null);
-    store.overrideSelector(selectSystemStatus, MOCK_PROGRESS_DATA_IN_PROGRESS);
-    store.overrideSelector(selectIsTestrunStarted, false);
 
     spyOn(store, 'dispatch').and.callFake(() => {});
   });
@@ -115,9 +131,8 @@ describe('AppStore', () => {
         expect(store).toEqual({
           consentShown: false,
           hasDevices: true,
-          isTestrunStarted: false,
           isStatusLoaded: false,
-          systemStatus: MOCK_PROGRESS_DATA_IN_PROGRESS,
+          systemStatus: null,
           hasConnectionSettings: true,
           isMenuOpen: true,
           interfaces: {},
@@ -161,27 +176,47 @@ describe('AppStore', () => {
     });
 
     describe('getSystemStatus', () => {
-      const status = MOCK_PROGRESS_DATA_IN_PROGRESS;
-
-      beforeEach(() => {
-        mockService.fetchSystemStatus.and.returnValue(of(status));
-      });
-
-      it('should dispatch action setTestrunStatus', () => {
+      it('should dispatch fetchSystemStatus', () => {
         appStore.getSystemStatus();
 
-        expect(store.dispatch).toHaveBeenCalledWith(
-          setTestrunStatus({ systemStatus: status })
-        );
+        expect(store.dispatch).toHaveBeenCalledWith(fetchSystemStatus());
       });
+    });
 
+    describe('statusLoaded', () => {
       it('should update store', done => {
         appStore.viewModel$.pipe(skip(1), take(1)).subscribe(store => {
-          expect(store.systemStatus).toEqual(status);
+          expect(store.isStatusLoaded).toEqual(true);
           done();
         });
 
-        appStore.getSystemStatus();
+        store.overrideSelector(
+          selectStatus,
+          MOCK_PROGRESS_DATA_IN_PROGRESS.status
+        );
+        store.refreshState();
+      });
+
+      it('should notify when url is not "/testing"', () => {
+        windowMock.location.href = 'localhost:8080';
+        store.overrideSelector(
+          selectStatus,
+          MOCK_PROGRESS_DATA_IN_PROGRESS.status
+        );
+        store.refreshState();
+
+        expect(mockNotificationService.notify).toHaveBeenCalled();
+      });
+
+      it('should not notify when url is "/testing"', () => {
+        windowMock.location.href = 'localhost:8080/' + Routes.Testing;
+        store.overrideSelector(
+          selectStatus,
+          MOCK_PROGRESS_DATA_IN_PROGRESS.status
+        );
+        store.refreshState();
+
+        expect(mockNotificationService.notify).toHaveBeenCalledTimes(0);
       });
     });
   });

modules/ui/src/app/app.store.ts

@@ -14,36 +14,37 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { tap } from 'rxjs/operators';
 import {
   selectError,
   selectHasConnectionSettings,
   selectHasDevices,
   selectInterfaces,
-  selectIsTestrunStarted,
   selectMenuOpened,
-  selectSystemStatus,
+  selectStatus,
 } from './store/selectors';
 import { Store } from '@ngrx/store';
 import { AppState } from './store/state';
 import { TestRunService } from './services/test-run.service';
-import { exhaustMap, Observable } from 'rxjs';
+import { exhaustMap, Observable, skip } from 'rxjs';
 import { Device } from './model/device';
 import {
   setDevices,
-  setTestrunStatus,
   setIsOpenStartTestrun,
+  fetchSystemStatus,
 } from './store/actions';
 import { TestrunStatus } from './model/testrun-status';
 import { SettingMissedError, SystemInterfaces } from './model/setting';
+import { NotificationService } from './services/notification.service';
+import { Routes } from './model/routes';
+import { WINDOW } from './providers/window.provider';
 
 export const CONSENT_SHOWN_KEY = 'CONSENT_SHOWN';
 export interface AppComponentState {
   consentShown: boolean;
   isStatusLoaded: boolean;
-  isTestrunStarted: boolean;
   systemStatus: TestrunStatus | null;
 }
 @Injectable()
@@ -59,13 +60,11 @@ export class AppStore extends ComponentStore<AppComponentState> {
     this.store.select(selectInterfaces);
   private settingMissedError$: Observable<SettingMissedError | null> =
     this.store.select(selectError);
-  private systemStatus$ = this.store.select(selectSystemStatus);
-  private isTestrunStarted$ = this.store.select(selectIsTestrunStarted);
+  systemStatus$: Observable<string | null> = this.store.select(selectStatus);
 
   viewModel$ = this.select({
     consentShown: this.consentShown$,
     hasDevices: this.hasDevices$,
-    isTestrunStarted: this.isTestrunStarted$,
     isStatusLoaded: this.isStatusLoaded$,
     systemStatus: this.systemStatus$,
     hasConnectionSettings: this.hasConnectionSetting$,
@@ -105,15 +104,22 @@ export class AppStore extends ComponentStore<AppComponentState> {
     );
   });
 
+  statusLoaded = this.effect(() => {
+    return this.systemStatus$.pipe(
+      skip(1),
+      tap(status => {
+        this.updateIsStatusLoaded(true);
+        if (!this.window.location.href.includes(Routes.Testing)) {
+          this.notification.notify(`Test run is ${status}`);
+        }
+      })
+    );
+  });
+
   getSystemStatus = this.effect(trigger$ => {
     return trigger$.pipe(
-      exhaustMap(() => {
-        return this.testRunService.fetchSystemStatus().pipe(
-          tap((res: TestrunStatus) => {
-            this.updateIsStatusLoaded(true);
-            this.store.dispatch(setTestrunStatus({ systemStatus: res }));
-          })
-        );
+      tap(() => {
+        this.store.dispatch(fetchSystemStatus());
       })
     );
   });
@@ -130,12 +136,13 @@ export class AppStore extends ComponentStore<AppComponentState> {
 
   constructor(
     private store: Store<AppState>,
-    private testRunService: TestRunService
+    private testRunService: TestRunService,
+    private notification: NotificationService,
+    @Inject(WINDOW) private window: Window
   ) {
     super({
       consentShown: sessionStorage.getItem(CONSENT_SHOWN_KEY) !== null,
       isStatusLoaded: false,
-      isTestrunStarted: false,
       systemStatus: null,
     });
   }

modules/ui/src/app/interceptors/loading.interceptor.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import {
   HttpEvent,
   HttpHandler,
@@ -28,19 +28,26 @@ import { LoaderService } from '../services/loader.service';
 export class LoadingInterceptor implements HttpInterceptor {
   private totalRequests = 0;
 
-  constructor(private loadingService: LoaderService) {}
+  constructor(
+    private loadingService: LoaderService,
+    private zone: NgZone
+  ) {}
 
   intercept(
     request: HttpRequest<unknown>,
     next: HttpHandler
   ): Observable<HttpEvent<unknown>> {
     this.totalRequests++;
-    this.loadingService.setLoading(true);
+    this.zone.run(() => {
+      this.loadingService.setLoading(true);
+    });
     return next.handle(request).pipe(
       finalize(() => {
         this.totalRequests--;
         if (this.totalRequests === 0) {
-          this.loadingService.setLoading(false);
+          this.zone.run(() => {
+            this.loadingService.setLoading(false);
+          });
         }
       })
     );