So often we need to schedule maintenance on a system, and we need to be able to stop users from doing things during this time. To that end, here is a system I created. It uses a Spring backend, that is not presented here.

Created a method that would contact a backend server and request the next scheduled maintenance. However what if the server is down for some reason? How do we handle that scenario?

private checkMaintenance() {
        this.getNextScheduledMaintenance().subscribe(value => {
            let maintenanceLock = false;
            let notify = false;
            if (this._maintenanceWindow == null && value != null) {
                notify = true;
            }
            this._maintenanceWindow = value;
            if (this._maintenanceWindow != null) {
                this._maintenanceWindow.start = new Date(this._maintenanceWindow.start);
                this._maintenanceWindow.end = new Date(this._maintenanceWindow.end);
                let current = new Date();

                let diff = this._maintenanceWindow.start.getTime() - current.getTime();
                if (diff < this.fiveMinute) {
                    maintenanceLock = true;
                }

                if (diff < 0) {
                    diff = this._maintenanceWindow.end.getTime() - current.getTime();
                    if (diff > 0) {
                        maintenanceLock = true;
                    }
                }
            }
            this.maintenanceLock.next(maintenanceLock);
            if (notify) {
                this.openSnackBar();
            }
        }, error => {
            let current = new Date();
            if (this._maintenanceWindow == null) {

                this._maintenanceWindow = new ScheduledMaintenance();
                this._maintenanceWindow.description = "System undergoing Maintenance";
                this._maintenanceWindow.start = current;
                this._maintenanceWindow.end = new Date(current.getTime() + this.fiveMinute);
            } else if (this._maintenanceWindow.end.getTime() - current.getTime() < 0) {
                this._maintenanceWindow.end = new Date(current.getTime() + this.fiveMinute);
            }
            this.maintenanceLock.next(true);
        });
    }

Let’s break down this method. First we have our call to backend system to get the next scheduled maintenance. Then we check to see if we are aware of the scheduled maintenance, if we are not then we mark that we set the flag to notify.

Next we check if we are within 5 minutes of scheduled maintenance or in the time range, if we are then flag that we need to apply the maintenance lock.

Now this is important, we need to check to see if an error has occurred. If it has then we flag to apply the maintenance lock. Now how do we call this method?

private timer: Subscription;

We create a Subscription called timer, and then in the constructor we set it to run every 5 minutes.

this.timer = interval(this.fiveMinute).subscribe(() => {
            this.checkMaintenance()
        });

Now do not forget to call unsubscribe() on ngOnDestroy()

 ngOnDestroy(): void {
        this.timer.unsubscribe();
        this.maintenanceLock.complete();
    }

Now I use a MatSnackBar to display when a schedule maintenance is occurring. However I use the following component to display the application is in maintenance mode.

import {Component, Inject, OnInit} from '@angular/core';
import {ScheduledMaintenance} from "../../dto/maintenance/scheduled-maintenance";
import {MAT_SNACK_BAR_DATA} from "@angular/material/snack-bar";

@Component({
    selector: 'app-maintenance-notification',
    templateUrl: './maintenance-notification.component.html',
    styleUrls: ['./maintenance-notification.component.scss']
})
export class MaintenanceNotificationComponent {
    maintenanceWindow: ScheduledMaintenance = null;

    constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
        this.maintenanceWindow = data;

    }
}

With the following HTML.

<span class="maintenance-notification">
    <h2>Maintenance Schedule</h2>
    <h4>{{maintenanceWindow.description}}</h4>
    {{this.maintenanceWindow.start | date: 'medium'}} - {{this.maintenanceWindow.end | date: 'medium'}}
</span>

The following SCSS

.maintenance-notification {
  text-align: center;
}

When maintenance mode kicks in we