Made Header and Footer generic

Changes made to make header and footer generic by taking required values from
environment.ts

Issue-ID: PORTAL-795
Change-Id: I03303e10ef763767d12d16d2ee6454f81a250562
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

5 files changed, 44 insertions, 6 deletions

diff --git a/portal-FE-common/src/app/layout/components/footer/footer.component.html b/portal-FE-common/src/app/layout/components/footer/footer.component.html
index 6edddb6f..6caf2dd8 100644
--- a/portal-FE-common/src/app/layout/components/footer/footer.component.html
+++ b/portal-FE-common/src/app/layout/components/footer/footer.component.html
@@ -37,6 +37,10 @@
   -->
 <footer>
       <div id="footer-text"  class="footerText">
-         Portal Version: {{buildVersion}}
+          <p class="copyright-text">
+            <a class="footer-link" href="{{footerLink}}" target="_blank">
+            {{footerLinkText}}</a> {{footerMessage}}
+            {{brandName}} Version: {{buildVersion}}
+      <h2 style="color:white; text-align: center;" class="logo-title"> <img src="{{footerLogoImagePath}}"> {{footerLogoText}}</h2>
       </div>	
 </footer>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/layout/components/footer/footer.component.ts b/portal-FE-common/src/app/layout/components/footer/footer.component.ts
index 2561a26a..9d7559ea 100644
--- a/portal-FE-common/src/app/layout/components/footer/footer.component.ts
+++ b/portal-FE-common/src/app/layout/components/footer/footer.component.ts
@@ -38,7 +38,7 @@
  
 import { Component, OnInit } from '@angular/core';
 import { ManifestService } from 'src/app/shared/services';
-
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-footer',
@@ -48,11 +48,32 @@ import { ManifestService } from 'src/app/shared/services';
 export class FooterComponent implements OnInit {
 
   buildVersion: string;
+  api = environment.api;
+  brandName: string;
+  footerLink: string;
+  footerLinkText: string;
+  footerMessage: string;
+  footerLogoImagePath: string;
+  footerLogoText: string;
+
   constructor(private manifest: ManifestService) { }
 
   ngOnInit() {
     this.buildVersion =  '';
     this.manifestDetails();
+
+    this.brandName = "ONAP Portal";
+    if(this.api.brandName != ''){
+        this.brandName = this.api.brandName;
+    }
+    this.footerLink = this.api.footerLink;
+    this.footerLinkText = this.api.footerLinkText;
+    this.footerMessage= this.api.footerMessage;
+    this.footerLogoImagePath = "assets/images/global.logo"
+    if(this.api.footerLogoImagePath !=''){
+      this.footerLogoImagePath= this.api.footerLogoImagePath;
+    }
+    this.footerLogoText= this.api.footerLogoText;
   }
 
   manifestDetails() {
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.html b/portal-FE-common/src/app/layout/components/header/header.component.html
index 45b4e9f9..f3b3a5f7 100644
--- a/portal-FE-common/src/app/layout/components/header/header.component.html
+++ b/portal-FE-common/src/app/layout/components/header/header.component.html
@@ -38,7 +38,7 @@
 
 <div style="bottom: tabBottom; display: flex; height: 100%; overflow: hidden">
     <nav class="navbar navbar-expand-lg fixed-top">
-        <a class="navbar-brand" href=""> <img src="assets/images/global.logo" style="width:14%"/> &nbsp; ONAP Portal</a>
+        <a class="navbar-brand" href=""> <img src="{{brandLogoImagePath}}" style="width:14%"/> &nbsp; {{brandName}}</a>
         <div class="header-menu-display">
             <app-header-menu></app-header-menu>
         </div>
@@ -104,7 +104,7 @@
     <a (click)="getUserApplicationRoles()" href="javascript:void(0);"><span><i class="icon ion-md-add-circle-outline"
                 [ngClass]="{true: 'icon ion-md-add-circle-outline', false: 'icon ion-md-remove-circle-outline'}[ !displayUserAppRoles]"></i>
             {{ 'Applications and Roles' }} </span></a>
-    <span class="onap-spinner" *ngIf="isLoading"></span>
+    <span class="ecomp-spinner" *ngIf="isLoading"></span>
 </li> <br>
 <div class="custom-display-item approles" [hidden]="!displayUserAppRoles">
     <div *ngFor="let ua of userapproles ; index as i">
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.ts b/portal-FE-common/src/app/layout/components/header/header.component.ts
index cb6bdd31..09dd4c1a 100644
--- a/portal-FE-common/src/app/layout/components/header/header.component.ts
+++ b/portal-FE-common/src/app/layout/components/header/header.component.ts
@@ -39,6 +39,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { UserProfileService, MenusService } from 'src/app/shared/services';
 import { CookieService } from 'ngx-cookie-service';
+import { environment } from 'src/environments/environment';
 
 @Component({
     selector: 'app-header',
@@ -55,6 +56,9 @@ export class HeaderComponent implements OnInit {
     userapproles: any[];
     displayUserAppRoles: any;
     isLoading: boolean;
+    api = environment.api;
+    brandName: string;
+    brandLogoImagePath: string;
 
     constructor(public router: Router, private userProfileService: UserProfileService, private menusService: MenusService, private cookieService: CookieService) {
 
@@ -72,6 +76,16 @@ export class HeaderComponent implements OnInit {
     ngOnInit() {
         this.pushRightClass = 'push-right';
         this.getUserInformation();
+        
+        this.brandName = "ONAP Portal";
+        if(this.api.brandName != ''){
+            this.brandName = this.api.brandName;
+         }
+
+        this.brandLogoImagePath = "assets/images/global.logo";
+        if(this.api.brandLogoImagePath != ''){
+           this.brandLogoImagePath = this.api.brandLogoImagePath;
+        }
     }
 
     getUserInformation() {
diff --git a/portal-FE-os/src/app/app.module.ts b/portal-FE-os/src/app/app.module.ts
index a7b267fb..a99c2da6 100644
--- a/portal-FE-os/src/app/app.module.ts
+++ b/portal-FE-os/src/app/app.module.ts
@@ -45,7 +45,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderInterceptor } from './shared/interceptors/header-interceptor';
 import { CookieService } from 'ngx-cookie-service';
-import { FooterComponent } from './footer/footer.component';
 
 
 @NgModule({
@@ -56,7 +55,7 @@ import { FooterComponent } from './footer/footer.component';
         HttpClientModule,
         AppRoutingModule
     ],
-    declarations: [AppComponent, FooterComponent],
+    declarations: [AppComponent],
     providers: [CookieService,{
         provide: HTTP_INTERCEPTORS,
         useClass: HeaderInterceptor,