Merge pull request #572 from sam-warren/EMBCDFA-1066-Environment-Banner

EMBCDFA-1066: Environment Banners

dfa/src/UI/embc-dfa/src/app/app.component.html

@@ -4,10 +4,9 @@
     (closeEvent)="closeOutageBanner($event)"
   ></app-outage-banner>
 
-  <!--<app-environment-banner
-    [environment]="environment"
-    *ngIf="environment !== null && environment !== undefined"
-  ></app-environment-banner>-->
+  @if (environment !== null && environment !== undefined) {
+    <app-environment-banner [environment]="environment"></app-environment-banner>
+  }
 
   <app-header
     [ngStyle]="
@@ -30,9 +29,9 @@
     "
     [class.body-border]="environment !== null && environment !== undefined"
   >
-    <!--<div class="app-error">
+    <div class="app-error">
       <app-alert></app-alert>
-    </div>-->
+    </div>
 
     <div>
       <router-outlet *ngIf="!isLoading"></router-outlet>

dfa/src/UI/embc-dfa/src/app/app.component.ts

@@ -8,6 +8,7 @@ import { ConfigService } from './core/services/config.service';
 import { EnvironmentInformation } from './core/model/environment-information.model';
 import { OutageService } from './feature-components/outage/outage.service';
 import { ScriptService } from "./core/services/scriptServices";
+import { EnvironmentBannerService } from './core/layout/environment-banner/environment-banner.service';
 
 const SCRIPT_PATH = 'http://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.min.js?key=ea53-hg74-kb59-ym41';
 
@@ -23,6 +24,7 @@ export class AppComponent implements OnInit {
   public gapi: any;
 
   constructor(
+    public envBannerService: EnvironmentBannerService,
     public outageService: OutageService,
     private alertService: AlertService,
     private bootstrapService: BootstrapService,
@@ -34,8 +36,7 @@ export class AppComponent implements OnInit {
 
   public async ngOnInit(): Promise<void> {
     try {
-      //this.environment = await this.configService.loadEnvironmentBanner();
-      this.environment = null;
+      this.environment = await this.envBannerService.loadEnvironmentBanner();
       await this.bootstrapService.init();
       await this.loginService.tryLogin();
     } catch (error) {

dfa/src/UI/embc-dfa/src/app/core/components/alert/alert.component.html

@@ -1,5 +1,14 @@
-<div *ngFor="let alert of alerts">
-  <div class="alert alert-danger" role="alert">
-    {{ alert?.message }}
+@for (alert of alerts; track alert) {
+  <div>
+    @if (alert.type === 'danger') {
+      <div class="alert alert-danger" role="alert">
+        {{ alert?.message }}
+      </div>
+    }
+    @if (alert.type === 'warning') {
+      <div class="alert alert-warning" role="alert">
+        {{ alert?.message }}
+      </div>
+    }
   </div>
-</div>
+}

dfa/src/UI/embc-dfa/src/app/core/components/alert/alert.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { Alert } from '../../model/alert';
-import { AlertService } from '../../services/alert.service';
+import { Alert } from 'src/app/core/model/alert';
+import { AlertService } from 'src/app/core/services/alert.service';
 
 @Component({
   selector: 'app-alert',
   templateUrl: './alert.component.html',
-  styleUrls: ['./alert.component.scss']
+  styleUrls: ['./alert.component.scss'],
+  standalone: true,
+  imports: []
 })
 export class AlertComponent implements OnInit {
   type: string;

dfa/src/UI/embc-dfa/src/app/core/core.module.ts

@@ -43,6 +43,7 @@ import { SecondaryApplicantWarningDialogComponent } from './components/dialog-co
 
 @NgModule({
   imports: [
+    AlertComponent,
     CommonModule,
     FormsModule,
     MatCardModule,
@@ -63,7 +64,6 @@ import { SecondaryApplicantWarningDialogComponent } from './components/dialog-co
   ],
   declarations: [
     AppLoaderComponent,
-    AlertComponent,
     HeaderComponent,
     FooterComponent,
     DialogComponent,

dfa/src/UI/embc-dfa/src/app/core/layout/environment-banner/environment-banner.component.html

@@ -1,7 +1,4 @@
-<div
-  class="container main-style"
-  [ngStyle]="{ 'background-color': environment?.bannerColor }"
->
+<div class="container main-style" [ngStyle]="{ 'background-color': environment?.bannerColor }">
   <p>
     <markdown [data]="environment?.bannerTitle"></markdown>
   </p>

dfa/src/UI/embc-dfa/src/app/core/layout/environment-banner/environment-banner.component.scss

@@ -7,4 +7,4 @@
     p {
         margin: 0px;
     }
-}
+}

dfa/src/UI/embc-dfa/src/app/core/layout/environment-banner/environment-banner.component.ts

@@ -1,13 +1,20 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { EnvironmentInformation } from '../../model/environment-information.model';
+import { EnvironmentBannerService } from './environment-banner.service';
+import { MarkdownComponent } from 'ngx-markdown';
+import { NgStyle } from '@angular/common';
 
 @Component({
   selector: 'app-environment-banner',
   templateUrl: './environment-banner.component.html',
-  styleUrls: ['./environment-banner.component.scss']
+  styleUrls: ['./environment-banner.component.scss'],
 })
-export class EnvironmentBannerComponent {
-  @Input() environment?: EnvironmentInformation;
+export class EnvironmentBannerComponent implements OnInit {
+  environment: EnvironmentInformation;
 
-  constructor() {}
+  constructor(private envBannerService: EnvironmentBannerService) {}
+
+  ngOnInit(): void {
+    this.environment = this.envBannerService.getEnvironmentBanner();
+  }
 }

dfa/src/UI/embc-dfa/src/app/core/layout/environment-banner/environment-banner.service.ts

@@ -0,0 +1,81 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AlertService } from 'src/app/core/services/alert.service';
+import { EnvironmentInformation } from 'src/app/core/model/environment-information.model';
+import { CacheService } from 'src/app/core/services/cache.service';
+import * as globalConst from 'src/app/core/services/globalConstants';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EnvironmentBannerService {
+  public environmentBanner: EnvironmentInformation;
+  private configurationGetEnvironmentInfoPath = '/env/info.json';
+
+  constructor(
+    private http: HttpClient,
+    private cacheService: CacheService,
+    private alertService: AlertService
+  ) {}
+
+  public loadEnvironmentBanner(): Promise<EnvironmentInformation> {
+    return new Promise<EnvironmentInformation>((resolve, reject) => {
+      let environment: EnvironmentInformation = {};
+      this.getEnvironment().subscribe({
+        next: (env) => {
+          environment = env;
+          this.setEnvironmentBanner(env);
+          resolve(environment);
+        },
+        error: (error) => {
+          if (error.status === 400 || error.status === 404) {
+            this.environmentBanner = null;
+            resolve(environment);
+          } else {
+            this.alertService.clearAlert();
+            this.alertService.setAlert('danger', globalConst.systemError);
+            reject(error);
+          }
+        }
+      });
+    });
+  }
+
+  public getEnvironmentBanner(): EnvironmentInformation {
+    return this.environmentBanner
+      ? this.environmentBanner
+      : JSON.parse(this.cacheService.get('environment'))
+        ? JSON.parse(this.cacheService.get('environment'))
+        : this.getEnvironmentInfo();
+  }
+
+  public setEnvironmentBanner(environmentBanner: EnvironmentInformation): void {
+    this.cacheService.set('environment', environmentBanner);
+    this.environmentBanner = environmentBanner;
+  }
+
+  private getEnvironment(): Observable<EnvironmentInformation> {
+    const envUrl = this.configurationGetEnvironmentInfoPath;
+    return this.http.get(envUrl);
+  }
+
+  private getEnvironmentInfo(): EnvironmentInformation {
+    let environment: EnvironmentInformation = {};
+    this.getEnvironment().subscribe({
+      next: (env) => {
+        environment = env;
+        this.setEnvironmentBanner(env);
+      },
+      error: (error) => {
+        if (error.status === 400 || error.status === 404) {
+          this.environmentBanner = null;
+        } else {
+          this.alertService.clearAlert();
+          this.alertService.setAlert('danger', globalConst.systemError);
+        }
+      }
+    });
+    return environment;
+  }
+}

dfa/src/UI/embc-dfa/src/app/core/layout/header/header.component.ts

@@ -18,7 +18,6 @@ export class HeaderComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    console.log('header comp');
     this.loginService.isLoggedIn$.subscribe((val) => {
      this.showLoginMatMenu = val;
     });