feat: maintenance mode

k8s/lifemonitor-web/templates/configmap.yaml

@@ -12,6 +12,8 @@ data:
     {
         "apiBaseUrl": "https://{{ .Values.externalServerName }}/api",
         "appDomain": "{{ .Values.externalServerName }}",
-        "socketBaseUrl": "https://{{ .Values.externalServerName }}"{{ if .Values.backend.clientId }},{{ end }}
-        {{ if .Values.backend.clientId }}"clientId": "{{ .Values.backend.clientId }}"{{ end }}
+        "socketBaseUrl": "https://{{ .Values.externalServerName }}"
+        {{- if .Values.backend.clientId }}, "clientId": "{{ .Values.backend.clientId }}"{{ end }}
+        {{- if .Values.maintenanceMode.enabled }}, "maintenanceMode": "true"{{ end }}
+        {{- if .Values.maintenanceMode.message }}, "maintenanceMessage":"{{.Values.maintenanceMode.message}}"{{ end }}
     }

k8s/lifemonitor-web/values.yaml

@@ -14,6 +14,11 @@ fullnameOverride: ""
 
 externalServerName: "localhost"
 
+# Manage maintenance mode
+maintenanceMode:
+  enabled: false
+  # message: "The service is currently under maintenance. Please try again later."
+
 # Setting for the LifeMonitor Backend API
 backend:
   apiUrl: ""

k8s/values.yaml

@@ -14,6 +14,11 @@ fullnameOverride: ''
 
 externalServerName: 'localhost'
 
+# Manage maintenance mode
+maintenanceMode:
+  enabled: false
+  # message: "The service is currently under maintenance. Please try again later."
+
 # Setting for the LifeMonitor Backend API
 backend:
   apiUrl: 'https://api.lifemonitor.eu'

ngsw-config.json

@@ -40,8 +40,7 @@
         "/socket.io/**",
         "/github/**",
         "/integrations/**",
-        "/openapi.*",
-        "/metrics"
+        "/openapi.*"
       ],
       "cacheConfig": {
         "strategy": "freshness",

src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ import { InputDialogService } from './utils/services/input-dialog.service';
 import { DashboardComponent } from './views/dashboard/dashboard.component';
 import { SuiteComponent } from './views/suite/suite.component';
 import { WorkflowComponent } from './views/workflow/workflow.component';
+import { MaintenanceComponent } from './pages/maintenance/maintenance.component';
 
 const routes: Routes = [
   {
@@ -28,6 +29,11 @@ const routes: Routes = [
     // canActivate: [AuthGuard],
     // canActivateChild: [AuthGuard],
     children: [
+      {
+        path: 'maintenance',
+        component: MaintenanceComponent,
+        pathMatch: 'full',
+      },
       {
         path: 'dashboard',
         component: DashboardComponent,
@@ -51,7 +57,7 @@ const routes: Routes = [
   {
     path: 'logout',
     component: LogoutComponent,
-  },
+  },  
   // {
   //   path: 'register',
   //   component: RegisterComponent,
@@ -83,7 +89,7 @@ export class AppRoutingModule implements OnInit {
     private router: Router,
     private inputDialogService: InputDialogService,
     private toastr: ToastrService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.logger.debug('Initializing app routing module');
@@ -133,7 +139,7 @@ export class AppRoutingModule implements OnInit {
             cancelText: 'Close',
             iconClass: 'fas fa-exclamation-triangle',
             enableCancel: false,
-            onCancel: () => {},
+            onCancel: () => { },
           });
         }
       }

src/app/app.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
 
+import { Router } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { Logger, LoggerManager } from './utils/logging/index';
 import { CacheRefreshStatus } from './utils/services/cache/cache.model';
 import { CachedHttpClientService } from './utils/services/cache/cachedhttpclient.service';
+import { AppConfigService } from './utils/services/config.service';
 import { InputDialogService } from './utils/services/input-dialog.service';
 
 import {
@@ -42,7 +44,9 @@ export class AppComponent implements OnInit, OnDestroy {
     private inputDialog: InputDialogService,
     private swUpdate: SwUpdate,
     private cachedHttpClient: CachedHttpClientService,
-    private ccService: NgcCookieConsentService
+    private ccService: NgcCookieConsentService,
+    private config: AppConfigService,
+    private router: Router
   ) {
     this.refreshStatus$ = this.cachedHttpClient.refreshProgressStatus$;
   }
@@ -51,7 +55,20 @@ export class AppComponent implements OnInit, OnDestroy {
     return this.swUpdate.available;
   }
 
+  get maintenanceModeEnabled(): boolean {
+    return this.config.maintenanceMode;
+  }
+
   ngOnInit() {
+
+    if (this.maintenanceModeEnabled) {
+      console.log("Current route: " + this.router.url);
+      if (this.router.url !== '/maintenance'
+        && !this.router.url.startsWith('/static')) {
+        return this.router.navigateByUrl('/maintenance');
+      }
+    }
+
     if (this.swUpdate.isEnabled) {
       this.checkVersionSubscription = this.updateAvailable.subscribe(() => {
         this.inputDialog.show({
@@ -73,30 +90,30 @@ export class AppComponent implements OnInit, OnDestroy {
     }
 
     // subscribe to cookieconsent observables to react to main events
-    this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(() => {});
+    this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(() => { });
 
     this.popupCloseSubscription = this.ccService.popupClose$.subscribe(
-      () => {}
+      () => { }
     );
 
     this.initializeSubscription = this.ccService.initializing$.subscribe(
-      (event: NgcInitializingEvent) => {}
+      (event: NgcInitializingEvent) => { }
     );
 
     this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
-      (event: NgcStatusChangeEvent) => {}
+      (event: NgcStatusChangeEvent) => { }
     );
 
     this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(
-      () => {}
+      () => { }
     );
 
     this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(
-      (event: NgcNoCookieLawEvent) => {}
+      (event: NgcNoCookieLawEvent) => { }
     );
   }
 
-  ngAfterViewInit() {}
+  ngAfterViewInit() { }
 
   ngOnDestroy() {
     if (this.checkVersionSubscription) {

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { BlankComponent } from './views/blank/blank.component';
 import { DashboardComponent } from './views/dashboard/dashboard.component';
 import { SuiteComponent } from './views/suite/suite.component';
 import { WorkflowComponent } from './views/workflow/workflow.component';
+import { MaintenanceComponent } from './pages/maintenance/maintenance.component';
 
 // PrimeNG Modules
 // import { ChartModule } from 'primeng/chart';
@@ -156,6 +157,7 @@ export function initConfigService(
     LogoutComponent,
     ScrollComponent,
     BaseDataViewComponent,
+    MaintenanceComponent,
   ],
   imports: [
     // PrimeNg Modules

src/app/pages/main/header/header.component.html

@@ -35,7 +35,8 @@
     /> -->
   </a>
 
-  <a *ngIf="!isUserLogged" [routerLink]="['/login']" class="btn btn-primary btn-lg mr-4" role="button">
+  <a *ngIf="!isUserLogged && !maintenanceMode" [routerLink]="['/login']" class="btn btn-primary btn-lg mr-4"
+    role="button">
     <i class="fas fa-sign-in-alt mr-2"></i>Sign In
   </a>
 
@@ -58,4 +59,4 @@
       <app-user-dropdown-menu #userDropdownMenu></app-user-dropdown-menu>
     </ul>
   </nav>
-</nav>
+</nav>

src/app/pages/main/header/header.component.ts

@@ -10,6 +10,7 @@ import { AppService } from 'src/app/utils/services/app.service';
 
 import { UserDropdownMenuComponent } from './user-dropdown-menu/user-dropdown-menu.component';
 import { Router } from '@angular/router';
+import { AppConfigService } from 'src/app/utils/services/config.service';
 
 @Component({
   selector: 'app-header',
@@ -22,14 +23,20 @@ export class HeaderComponent implements OnInit {
 
   public searchForm: FormGroup;
 
-  constructor(private router: Router, private appService: AppService) {}
+  constructor(private router: Router,
+    private appService: AppService,
+    private appConfig: AppConfigService) { }
 
   ngOnInit() {
     this.searchForm = new FormGroup({
       search: new FormControl(null),
     });
   }
 
+  public get maintenanceMode(): boolean {
+    return this.appConfig.maintenanceMode;
+  }
+
   public get isUserLogged(): boolean {
     return this.appService.isUserLogged();
   }

src/app/pages/main/main.component.html

@@ -10,7 +10,7 @@
     (mainSidebarHeight)="mainSidebarHeight($event)"
   ></app-menu-sidebar>-->
 
-  <div #contentWrapper class="content-wrapper" >
+  <div #contentWrapper [ngClass]="{'content-wrapper': !maintenanceMode}">
     <router-outlet></router-outlet>
   </div>
 

src/app/pages/main/main.component.ts

@@ -7,6 +7,7 @@ import { User } from 'src/app/models/user.modes';
 import { Logger, LoggerManager } from 'src/app/utils/logging';
 import { ApiService } from 'src/app/utils/services/api.service';
 import { AppService } from './../../utils/services/app.service';
+import { AppConfigService } from 'src/app/utils/services/config.service';
 
 @Component({
   selector: 'app-main',
@@ -27,8 +28,9 @@ export class MainComponent implements OnInit {
     private router: Router,
     private renderer: Renderer2,
     private apiService: ApiService,
-    private appService: AppService
-  ) {}
+    private appService: AppService,
+    private appConfig: AppConfigService
+  ) { }
 
   ngOnInit() {
     this.renderer.removeClass(document.querySelector('app-root'), 'login-page');
@@ -79,6 +81,10 @@ export class MainComponent implements OnInit {
       });
   }
 
+  get maintenanceMode(): boolean {
+    return this.appConfig.maintenanceMode;
+  }
+
   mainSidebarHeight(height) {
     // this.renderer.setStyle(
     //   this.contentWrapper.nativeElement,

src/app/pages/maintenance/maintenance.component.html

@@ -0,0 +1,24 @@
+<div style="margin: 80px 0 100px;">
+    <h1 class="text-primary text-center py-5" style="font-size: 5rem; font-weight: 50;">
+        We'll be back soon!
+    </h1>
+    <div class="text-center pt-4 pb-1">
+        <img src="/assets/icons/maintenance.png" width="280px">
+    </div>
+
+    <!-- Set the generic maintenance message  -->
+    <h3 class="font-weight-light text-primary text-center mx-auto my-5">
+        We're busy updating the
+        <span
+            style="font-style: italic; font-family: Baskerville,Baskerville Old Face,Hoefler Text,Garamond,Times New Roman,serif;">Life</span><span
+            class="small" style="font-size: 75%; margin: 0 -1px 0 1px;">-</span><span
+            style="font-weight: bold; font-family: Gill Sans,Gill Sans MT,Calibri,sans-serif;">Monitor</span>
+        service for you. <br>Please check back soon!
+    </h3>
+
+    <!-- Set the detailed maintenance message  -->
+    <h4 *ngIf="maintenanceMessage" class="font-weight-light text-muted text-center mx-auto my-5">
+        {{ maintenanceMessage }}        
+    </h4>
+
+</div>

src/app/pages/maintenance/maintenance.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MaintenanceComponent } from './maintenance.component';
+
+describe('MaintenanceComponent', () => {
+  let component: MaintenanceComponent;
+  let fixture: ComponentFixture<MaintenanceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MaintenanceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaintenanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/maintenance/maintenance.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { AppConfigService } from 'src/app/utils/services/config.service';
+
+@Component({
+  selector: 'app-maintenance',
+  templateUrl: './maintenance.component.html',
+  styleUrls: ['./maintenance.component.scss']
+})
+export class MaintenanceComponent implements OnInit {
+
+  constructor(private appConfig: AppConfigService) { }
+
+  ngOnInit(): void {
+    if (!this.appConfig.maintenanceMode) {
+      window.location.href = '/';
+    }
+  }
+
+  public get maintenanceMessage(): string {
+    return this.appConfig.maintenanceMessage;
+  }
+
+}

src/app/utils/services/config.loader.ts

@@ -12,7 +12,7 @@ export class AppConfigLoader {
   // initialize logger
   private logger: Logger = LoggerManager.create('AppConfigService');
 
-  constructor() {}
+  constructor() { }
 
   public onLoad: Observable<boolean> = this.subject.asObservable();
 
@@ -72,6 +72,19 @@ export class AppConfigLoader {
     return !this.config['production'];
   }
 
+  public get maintenanceMode(): boolean {
+    try {
+      return this.config['maintenanceMode'];
+    } catch (e) {
+      this.logger.error('Unable to load configuration from server', e);
+      return false;
+    }
+  }
+
+  public get maintenanceMessage(): string {
+    return this.config['maintenanceMessage'];
+  }
+
   public get apiBaseUrl(): string {
     return this.config['apiBaseUrl'];
   }