feat(api-checker): enhance API availability checks and improve loading indicators

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/app.component.ts

@@ -111,7 +111,9 @@ export class AppComponent implements OnInit {
       )
       .subscribe();
 
-    this.appLoading.style.display = 'none';
+    if (this.appLoading && this.appLoading.parentNode) {
+      this.appLoading.parentNode.removeChild(this.appLoading);
+    }
   }
 
   @HostListener('window', ['$event'])
@@ -141,10 +143,8 @@ export class AppComponent implements OnInit {
             break;
         }
       }
-        this.apiServiceCheckerService.setOnlineStatus(true);
     }, error => {
         this.offline = true;
-        this.apiServiceCheckerService.checkApiAvailability();
       });
   }
 

frontend/src/app/app.module.ts

@@ -36,17 +36,16 @@ import {AlertIncidentStatusChangeBehavior} from './shared/behaviors/alert-incide
 import {GettingStartedBehavior} from './shared/behaviors/getting-started.behavior';
 import {NavBehavior} from './shared/behaviors/nav.behavior';
 import {NewAlertBehavior} from './shared/behaviors/new-alert.behavior';
-import {AppVersionService} from './shared/services/version/app-version.service';
 import {TimezoneFormatService} from './shared/services/utm-timezone.service';
+import {AppVersionService} from './shared/services/version/app-version.service';
 import {UtmSharedModule} from './shared/utm-shared.module';
 
-export function initTimezoneFormat(
-  timezoneService: TimezoneFormatService,
-  apiChecker: ApiServiceCheckerService,
-  appVersionService: AppVersionService
-) {
-  return () =>
-    new Promise<void>((resolve, reject) => {
+export function initTimezoneFormat(apiChecker: ApiServiceCheckerService,
+                                   timezoneService: TimezoneFormatService,
+                                   appVersionService: AppVersionService) {
+  return () => {
+    apiChecker.init();
+    return new Promise<void>((resolve, reject) => {
       apiChecker.isOnlineApi$
         .pipe(first(val => val === true))
         .subscribe({
@@ -59,6 +58,8 @@ export function initTimezoneFormat(
           error: reject
         });
     });
+  };
+
 }
 
 @NgModule({
@@ -135,8 +136,8 @@ export function initTimezoneFormat(
       provide: APP_INITIALIZER,
       useFactory: initTimezoneFormat,
       deps: [
-        TimezoneFormatService,
         ApiServiceCheckerService,
+        TimezoneFormatService,
         AppVersionService
       ],
       multi: true

frontend/src/app/compliance/compliance-reports-view/components/compliance-print-view/compliance-print-view.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="!preparingPrint" class="report-loading"></div>
+<div *ngIf="!preparingPrint" class="report-loaded"></div>
 
 <h3 class="standard-prev text-center mb-4">
   <strong>Compliance Assessment</strong>

frontend/src/app/core/auth/api-checker-service.ts

@@ -1,7 +1,7 @@
-import {HttpClient} from '@angular/common/http';
+import {HttpClient, HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, interval, Observable, Subject} from 'rxjs';
-import {first, takeUntil} from 'rxjs/operators';
+import {BehaviorSubject, interval, Observable, of, Subject, Subscription} from 'rxjs';
+import {catchError, distinctUntilChanged, filter, first, map, takeUntil, tap} from 'rxjs/operators';
 import {SERVER_API_URL} from '../../app.constants';
 
 @Injectable({
@@ -10,37 +10,56 @@ import {SERVER_API_URL} from '../../app.constants';
 export class ApiServiceCheckerService {
 
   public resourceUrl = SERVER_API_URL + 'api/ping';
-  private retryInterval = 3000;
-  private isOnline: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);
-  public isOnlineApi$: Observable<boolean> = this.isOnline.asObservable();
-  private stopInterval$: Subject<boolean> = new Subject<boolean>();
+  private retryInterval = 5000;
 
-  constructor(private http: HttpClient) {
+  private isOnline = new BehaviorSubject<boolean>(false);
+  public isOnlineApi$ = this.isOnline.asObservable();
+
+  private stopInterval$ = new Subject<void>();
+  private intervalSub?: Subscription;
+
+  constructor(private http: HttpClient) { }
+
+  init() {
     this.checkApiAvailability();
+
+    this.isOnlineApi$
+      .pipe(distinctUntilChanged())
+      .subscribe(isOnline => {
+        if (!isOnline) {
+          this.startCheckApiIsOnline();
+        } else {
+          this.stopChecking();
+        }
+      });
   }
 
-  checkApiAvailability() {
-    interval(this.retryInterval)
+  private checkApiAvailability() {
+    this.checkApiStatus()
+      .subscribe(status => this.isOnline.next(status));
+  }
+
+  private checkApiStatus(): Observable<boolean> {
+    return this.http.get(this.resourceUrl, { observe: 'response' }).pipe(
+      map(res => res.status === 200),
+      catchError(() => of(false))
+    );
+  }
+
+  private startCheckApiIsOnline() {
+    if (this.intervalSub) { return; }
+
+    this.intervalSub = interval(this.retryInterval)
       .pipe(takeUntil(this.stopInterval$))
       .subscribe(() => {
-      this.http
-        .get(this.resourceUrl, { observe: 'response' })
-        .pipe(first())
-        .subscribe(
-          resp => {
-            if (resp.status === 200) {
-              this.isOnline.next(true);
-              this.stopInterval$.next(true);
-            } else {
-              this.isOnline.next(false);
-            }
-          },
-          err => this.isOnline.next(false)
-        );
-    });
+        this.checkApiStatus().
+        subscribe(status => this.isOnline.next(status));
+      });
   }
 
-  setOnlineStatus(status: boolean) {
-    this.isOnline.next(status);
+  private stopChecking() {
+    this.stopInterval$.next();
+    this.intervalSub.unsubscribe();
+    this.intervalSub = undefined;
   }
 }

frontend/src/app/dashboard/dashboard-export-pdf/dashboard-export-pdf.component.html

@@ -13,7 +13,7 @@
     </button>
   </div>
 </div>
-<div *ngIf="!preparingPrint" class="report-loading"></div>
+<div *ngIf="!preparingPrint" class="report-loaded"></div>
 <div class="d-flex justify-content-center align-items-start w-100 m-0 d-print-block">
   <div class="compliance-front-page">
     <div *ngIf="account" class="prepared print-front-align">

frontend/src/app/dashboard/dashboard-export-pdf/dashboard-export-pdf.component.ts

@@ -143,8 +143,9 @@ export class DashboardExportPdfComponent implements OnInit, AfterViewInit {
   }
 
   onVisualizationLoaded() {
-    this.preparingPrint = false;
-    console.log('onVisualizationLoaded');
+    setTimeout(() => {
+      this.preparingPrint = false;
+    });
   }
 
   getTimeFilterValue() {

frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.html

@@ -13,11 +13,11 @@ <h5 class="card-title label-header mb-0 text-uppercase label-header">Overview</h
       </button>
     </div>
   </div>
-  <div *ngIf="!preparingPrint" class="report-loading"></div>
+  <div *ngIf="!preparingPrint" class="report-loaded"></div>
   <app-utm-report-header *ngIf="pdfExport" [reportName]="'UTMSTACK Overview'"></app-utm-report-header>
-  <div class="h-100 overflow-hidden pb-3" [ngClass]="{'mt-3':pdfExport}" id="utmDashboardAlert">
+  <div class="h-100 overflow-hidden pb-3 d-print-block" [ngClass]="{'mt-3':pdfExport}" id="utmDashboardAlert">
 
-    <div class="d-flex overflow-auto flex-column h-100 m-h-0 px-1">
+    <div class="d-flex overflow-auto flex-column h-100 m-h-0 px-1 d-print-block">
 
       <div class="w-100 border-bottom-grey-100 border-bottom-1 mb-3 pb-2">
         <label class="font-weight-bold text-uppercase">Alerts</label>

frontend/src/app/dashboard/dashboard-overview/dashboard-overview.component.scss

@@ -16,3 +16,10 @@
 .card-header-chart {
   padding-right: 0 !important;
 }
+
+@media print {
+  .d-print-block {
+    display: block !important;
+    overflow: visible !important;
+  }
+}

frontend/src/app/dashboard/shared/render-visualization-print/render-visualization-print.component.ts

@@ -38,9 +38,7 @@ export class RenderVisualizationPrintComponent implements OnInit {
     this.runList += 1;
     if (this.runList === this.visualizationRender.length) {
       this.loadingVisualizations = true;
-      console.log('All the visualizations data has loaded, waiting for rendering');
-      setTimeout(() => this.visualizationLoaded.emit(true), 3000);
-      console.log('All the visualizations now has rendered');
+      this.visualizationLoaded.emit(true);
     }
   }
 }