Merge "sdk footer changes"

17 files changed, 532 insertions, 255 deletions

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/global.logo b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/global.logo
new file mode 100644
index 00000000..bf85815a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/global.logo
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/pdf.png b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/pdf.png
new file mode 100644
index 00000000..ed96c5c1
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/pdf.png
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/spinner.gif b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/spinner.gif
new file mode 100644
index 00000000..c97ec6ea
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/spinner.gif
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/xlsx.png b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/xlsx.png
new file mode 100644
index 00000000..1ac37679
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/assets/images/xlsx.png
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.prod.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.prod.ts
index 125d0548..d4692c04 100644
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.prod.ts
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.prod.ts
@@ -31,5 +31,12 @@ export const environment = {
   saveRole:'role/saveRole.htm?role_id=',
   toggleProfileActive: 'profile/toggleProfileActive?profile_id=',
   isLogDisabled:'true',
-  brandName: "Portal SDK"
+  brandName: "Portal SDK",
+  getManifest: 'manifest',
+  brandLogoImagePath: '',
+  footerLink: '',
+  footerLinkText: '',
+  footerMessage: '',
+  footerLogoImagePath: '',
+  footerLogoText: ''
 };
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.ts
index 7d8f161c..003c89c8 100644
--- a/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.ts
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/environments/environment.ts
@@ -35,7 +35,14 @@ export const environment = {
   saveRole:'http://www.sdk.onap.org:8080/epsdk-app-os/role/saveRole.htm?role_id=',
   toggleProfileActive: 'http://www.sdk.onap.org:8080/epsdk-app-os/profile/toggleProfileActive?profile_id=',
   isLogDisabled:'false',
-  brandName: "Portal SDK"
+  brandName: "Portal SDK",
+  getManifest: 'http://www.sdk.onap.org:8080/epsdk-app-os/manifest',
+  brandLogoImagePath: '',
+  footerLink: '',
+  footerLinkText: '',
+  footerMessage: '',
+  footerLogoImagePath: '',
+  footerLogoText: ''
 };
 
 /*
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.html
new file mode 100644
index 00000000..f7663462
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.html
@@ -0,0 +1,11 @@
+  <footer class="footer">
+		<div id="footer-text"  class="footerText">
+			<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 class="footer-logo" *ngIf="(footerLogoImagePath !='')" src="{{footerLogoImagePath}}"> {{footerLogoText}}
+		</h2>
+		</div>	
+  </footer>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.scss
new file mode 100644
index 00000000..dbb5a100
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.scss
@@ -0,0 +1,38 @@
+$topnav-background-color: #222;
+
+.footerText {
+  background-color: $topnav-background-color;
+}
+
+.copyright-text {
+  background-color: $topnav-background-color;
+  color: #fff;
+  font-size: 11px;
+  margin-bottom: 0;
+  line-height: 3rem;
+  margin-top: 20px;
+  text-align: center;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  // background-color: $topnav-background-color;
+  width: 100%;
+  // height: 7.5em;
+  z-index: 1002;
+  // bottom: 0px;
+  // right: 0px;
+  // width: 84%;
+  margin-bottom: -.5rem;
+}
+
+.footer-logo {
+  width: 1.5rem;
+  margin-top: -10px;
+}
+
+.footerText h2 {
+  font-size: 1.5rem;
+  margin-top: -10px;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.spec.ts
new file mode 100644
index 00000000..8eda932f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.spec.ts
@@ -0,0 +1,56 @@
+// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+// import { FooterComponent } from './footer.component';
+
+// describe('FooterComponent', () => {
+//   let component: FooterComponent;
+//   let fixture: ComponentFixture<FooterComponent>;
+
+//   beforeEach(async(() => {
+//     TestBed.configureTestingModule({
+//       declarations: [ FooterComponent ]
+//     })
+//     .compileComponents();
+//   }));
+
+//   beforeEach(() => {
+//     fixture = TestBed.createComponent(FooterComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   });
+
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing'; 
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        HttpClientTestingModule 
+      ],
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.ts
new file mode 100644
index 00000000..7aae6d0b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/footer/footer.component.ts
@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { ManifestService } from 'src/app/shared/services';
+import { environment } from 'src/environments/environment';
+
+ 
+declare var runAnalytics: any
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+buildVersion: string;
+	api = environment;
+	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 SDK";
+		if(this.api.brandName != ''){
+			this.brandName = this.api.brandName;
+		}
+		this.footerLink = this.api.footerLink;
+		this.footerLinkText = this.api.footerLinkText;
+		this.footerMessage= this.api.footerMessage;
+		if(this.api.footerLogoImagePath !=''){
+		  this.footerLogoImagePath= this.api.footerLogoImagePath;
+		}
+		this.footerLogoText= this.api.footerLogoText;
+		this.portalHook();
+	  
+	} 
+	
+	manifestDetails() {
+		this.manifest.getManifest().subscribe((_res: any) => {
+		  this.buildVersion = _res['Build-Number'];
+		}, (_err) => {
+	
+		});
+	}
+  
+	portalHook() {
+		
+		let done = false;
+		let script = document.createElement('script');	
+		script.src = "api/v3/analytics"
+		script.async = true;			
+		script.onload = ()=> {
+			runAnalytics();
+		}
+
+		document.head.appendChild(script);
+
+	  }
+	}
+	
+     
+	
+
+
+ 
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
index 5f8a2ec5..c86a0693 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.html
@@ -1,52 +1,55 @@
-<div class="sidebar" [ngClass]="{'siderbar-height': showHeader, 'siderbar-height-noHeader': !showHeader, collapsed:collapsed}" >
-    <nav  [ngClass]="{sidebarPushRight: isActive, collapsed: collapsed}">
-        <div class="toggle-button" [ngClass]="{collapsed: collapsed}" (click)="toggleCollapsed()">
-			<!--<i class="fa fa-angle-double-{{collapsed?'right':'left'}}"></i>&nbsp;-->
-			<i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i> 
-			<i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i>&nbsp;
-			
-			
-		</div>
-		<div class="list-group" *ngFor="let menu of menuData ; index as item">
-       
-			<div class="nested-menu" *ngIf="!(menu.menuItems.length > 0)">
-				<a href="{{menu.href}}" target="{{menu.target}}" *ngIf="menu.target!==null else routerBlock" class="list-group-item">
-					<i class="icon ion-ios-home"></i>&nbsp;
-					<span>{{menu.name}}</span>
-				</a>
-
-				<ng-template #routerBlock>
-					<a [routerLink]="[menu.href]" class="list-group-item">
-						<i class="{{menu.imageSrc}}"></i>&nbsp;
-						<span>{{menu.name}}</span>
-					</a>
-				</ng-template>
-			</div>
+<div class="sidebar" [ngClass]="{'siderbar-height': showHeader, 'siderbar-height-noHeader': !showHeader}" >
+	<div class="sidebar-list" [ngClass]="{collapsed: collapsed}">
+ 
+	 <nav  [ngClass]="{sidebarPushRight: isActive, collapsed: collapsed}">
 		
-			<div class="nested-menu" *ngIf="menu.menuItems.length > 0">
-				<a href="javascript:void(0)" class="list-group-item"
-						(click)="addExpandClass(menu.name)">
-						<i class="{{menu.imageSrc}}"></i>&nbsp;
-						<i *ngIf = "!collapsed" style="float: right;" class="icon ion-ios-add-circle-outline"></i>&nbsp;
-						<span>{{menu.name}}</span>
-				</a>
-				<li class="nested" [class.expand]="showMenu === menu.name">
-					<ul class="submenu">
-						<li *ngFor="let menuItems of menu.menuItems">
-							<a href="{{menuItems.href}}" target="{{menuItems.target}}" *ngIf="menuItems.href!==null else routerBlock">
-								<i class="{{menuItems.imageSrc}}"></i>&nbsp;
-								<span>{{ menuItems.name }}</span>
-							</a>
-							<ng-template #routerBlock>
-							<a [routerLink]="[menuItems.router]">
-								<i class="{{menuItems.imageSrc}}"></i>&nbsp;
-								<span>{{ menuItems.name }}</span>
-							</a>
-							</ng-template>
-						</li>
-					</ul>
-				</li>
-			</div>
-		</div>
-    </nav>
-</div> 
\ No newline at end of file
+		 <div class="list-group" *ngFor="let menu of menuData ; index as item">
+		
+			 <div class="nested-menu" *ngIf="!(menu.menuItems.length > 0)">
+				 <a href="{{menu.href}}" target="{{menu.target}}" *ngIf="menu.target!==null else routerBlock" class="list-group-item">
+					 <i class="icon ion-ios-home"></i>&nbsp;
+					 <span>{{menu.name}}</span>
+				 </a>
+ 
+				 <ng-template #routerBlock>
+					 <a [routerLink]="[menu.href]" class="list-group-item">
+						 <i class="{{menu.imageSrc}}"></i>&nbsp;
+						 <span>{{menu.name}}</span>
+					 </a>
+				 </ng-template>
+			 </div>
+		 
+			 <div class="nested-menu" *ngIf="menu.menuItems.length > 0">
+				 <a href="javascript:void(0)" class="list-group-item"
+						 (click)="addExpandClass(menu.name)">
+						 <i class="{{menu.imageSrc}}"></i>&nbsp;
+						 <i style="float: right;" class="icon ion-ios-add-circle-outline"></i>&nbsp;
+						 <span>{{menu.name}}</span>
+				 </a>
+				 <li class="nested" [class.expand]="showMenu === menu.name">
+					 <ul class="submenu">
+						 <li *ngFor="let menuItems of menu.menuItems">
+							 <a href="{{menuItems.href}}" target="{{menuItems.target}}" *ngIf="menuItems.href!==null else routerBlock">
+								 <i class="{{menuItems.imageSrc}}"></i>&nbsp;
+								 <span>{{ menuItems.name }}</span>
+							 </a>
+							 <ng-template #routerBlock>
+							 <a [routerLink]="[menuItems.router]">
+								 <i class="{{menuItems.imageSrc}}"></i>&nbsp;
+								 <span>{{ menuItems.name }}</span>
+							 </a>
+							 </ng-template>
+						 </li>
+					 </ul>
+				 </li>
+				<!-- </br></br></br> -->
+			 </div>
+		 </div>
+	 </nav>
+ </div>
+	 <div class="toggle-button" [ngClass]="{collapsed: collapsed}" (click)="toggleCollapsed()">
+		 <!-- <i class="fa fa-angle-double-{{collapsed?'right':'left'}}"></i>&nbsp; -->
+		 <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i> 
+			 <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i>&nbsp;
+	 </div>
+ </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
index 3917b896..02c969cc 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.scss
@@ -35,203 +35,214 @@
  *
  * 
  */
-$topnav-background-color: #f2f2f2;
+ $topnav-background-color: #f2f2f2;
 
-.siderbar-height-noHeader{
-    top: 0px;
-}
-
-.siderbar-height{
-    top: 56px;
-}
-
-.sidebar {
-    border-radius: 0;
-    position: fixed;
-    z-index: 1000;
-    left: 235px;
-    width: 235px;
-    margin-left: -235px;
-    margin-bottom: 48px;
-    border: none;
-    border-radius: 0;
-    overflow-y: auto;
-    background-color: $topnav-background-color;
-    bottom: 0;
-    overflow-x: hidden;
-    padding-bottom: 40px;
-    white-space: nowrap;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -ms-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-    .list-group {
-        a.list-group-item {
-            background: $topnav-background-color;
-            border: 0;
-            border-top: 1px solid #999;
-            border-radius: 0;
-            color: #0568ae;
-            text-decoration: none;
-            .fa {
-                margin-right: 10px;
-                color: #000;
-            }
-        }
-        a:hover {
-            background: darken($topnav-background-color, 5%);
-            color: #fff;
-        }
-        a.router-link-active {
-            background: darken($topnav-background-color, 5%);
-            color: #fff;
-        }
-        .header-fields {
-            padding-top: 10px;
-
-            > .list-group-item:first-child {
-                border-top: 1px solid rgba(255, 255, 255, 0.2);
-            }
-        }
-    }
-    .sidebar-dropdown {
-        *:focus {
-            border-radius: none;
-            border: none;
-        }
-        .panel-title {
-            font-size: 1rem;
-            height: 50px;
-            margin-bottom: 0;
-            a {
-                color: #999;
-                text-decoration: none;
-                font-weight: 400;
-                background: $topnav-background-color;
-                span {
-                    position: relative;
-                    display: block;
-                    padding: 0.75rem 1.5rem;
-                    padding-top: 1rem;
-                }
-            }
-            a:hover,
-            a:focus {
-                color: #fff;
-                outline: none;
-                outline-offset: -2px;
-            }
-        }
-        .panel-title:hover {
-            background: darken($topnav-background-color, 5%);
-        }
-        .panel-collapse {
-            border-radious: 0;
-            border: none;
-            .panel-body {
-                .list-group-item {
-                    border-radius: 0;
-                    background-color: $topnav-background-color;
-                    border: 0 solid transparent;
-                    a {
-                        color: #999;
-                    }
-                    a:hover {
-                        color: #fff;
-                    }
-                }
-                .list-group-item:hover {
-                    background: darken($topnav-background-color, 5%);
-                }
-            }
-        }
-    }
-}
-
-.nested-menu {
-    .list-group-item {
-        cursor: pointer;
-    }
-    .nested {
-        list-style-type: none;
-    }
-    ul.submenu {
-        display: none;
-        height: 0;
-    }
-    & .expand {
-        ul.submenu {
-            display: block;
-            list-style-type: none;
-            height: auto;
-            li {
-                a {
-                    color: #0568ae;
-                    padding: 10px;
-                    display: block;
-                }
-            }
-        }
-    }
-}
-@media screen and (max-width: 992px) {
-    .sidebar {
-        top: 54px;
-        left: 0px;
-    }
-}
-@media print {
-    .sidebar {
-        display: none !important;
-    }
-}
-@media (min-width: 992px) {
-    .header-fields {
-        display: none;
-    }
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
-    border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
-}
-
-.toggle-button {
-    position: fixed;
-    width: 236px;
-    cursor: pointer;
-    padding: 12px;
-    bottom: 0;
-    color: #000;;
-    background: #f2f2f2;
-    i {
-        font-size: 23px;
-    }
-    &:hover {
-        background: darken($topnav-background-color, 5%);
-        color: #fff;
-    }
-    border-top: 1px solid #999;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -ms-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-}
-
-.collapsed {
-    width: 60px;
-    span {
-        display: none;
-    }
-}
+ .siderbar-height-noHeader{
+     top: 0px;
+ }
+ 
+ .siderbar-height{
+     top: 56px;
+ }
+ 
+ .sidebar-list {
+     border-radius: 0;
+     position: fixed;
+     z-index: 1000;
+     left: 235px;
+     width: 235px;
+     //height: 100%;
+     height: 76%;
+     margin-left: -235px;
+     //margin-bottom: 48px;
+     margin-bottom: 0px;
+     border: none;
+     border-radius: 0;
+     overflow-y: auto;
+     background-color: $topnav-background-color;
+     top: 7.2em;
+     //top: 0em;
+     overflow-x: hidden;
+     //padding-bottom: 40px;
+     padding-bottom: 5em;
+     white-space: nowrap;
+     -webkit-transition: all 0.2s ease-in-out;
+     -moz-transition: all 0.2s ease-in-out;
+     -ms-transition: all 0.2s ease-in-out;
+     -o-transition: all 0.2s ease-in-out;
+     transition: all 0.2s ease-in-out;
+     .list-group {
+         a.list-group-item {
+             background: $topnav-background-color;
+             border: 0;
+             border-top: 1px solid #999;
+             border-radius: 0;
+             color: #0568ae;
+             text-decoration: none;
+             .fa {
+                 margin-right: 10px;
+                 color: #000;
+             }
+         }
+         a:hover {
+             background: darken($topnav-background-color, 5%);
+             color: #fff;
+         }
+         a.router-link-active {
+             background: darken($topnav-background-color, 5%);
+             color: #fff;
+         }
+         .header-fields {
+             padding-top: 10px;
+ 
+             > .list-group-item:first-child {
+                 border-top: 1px solid rgba(255, 255, 255, 0.2);
+             }
+         }
+     }
+     .sidebar-dropdown {
+         *:focus {
+             border-radius: none;
+             border: none;
+         }
+         .panel-title {
+             font-size: 1rem;
+             height: 50px;
+             margin-bottom: 0;
+             a {
+                 color: #999;
+                 text-decoration: none;
+                 font-weight: 400;
+                 background: $topnav-background-color;
+                 span {
+                     position: relative;
+                     display: block;
+                     padding: 0.75rem 1.5rem;
+                     padding-top: 1rem;
+                 }
+             }
+             a:hover,
+             a:focus {
+                 color: #fff;
+                 outline: none;
+                 outline-offset: -2px;
+             }
+         }
+         .panel-title:hover {
+             background: darken($topnav-background-color, 5%);
+         }
+         .panel-collapse {
+             border-radious: 0;
+             border: none;
+             .panel-body {
+                 .list-group-item {
+                     border-radius: 0;
+                     background-color: $topnav-background-color;
+                     border: 0 solid transparent;
+                     a {
+                         color: #999;
+                     }
+                     a:hover {
+                         color: #fff;
+                     }
+                 }
+                 .list-group-item:hover {
+                     background: darken($topnav-background-color, 5%);
+                 }
+             }
+         }
+     }
+ }
+ 
+ .nested-menu {
+     .list-group-item {
+         cursor: pointer;
+     }
+     .nested {
+         list-style-type: none;
+     }
+     ul.submenu {
+         display: none;
+         height: 0;
+     }
+     & .expand {
+         ul.submenu {
+             display: block;
+             list-style-type: none;
+             height: auto;
+             li {
+                 a {
+                     color: #0568ae;
+                     padding: 10px;
+                     display: block;
+                 }
+             }
+         }
+     }
+ }
+ @media screen and (max-width: 992px) {
+     .sidebar {
+         top: 54px;
+         left: 0px;
+     }
+ }
+ @media print {
+     .sidebar {
+         display: none !important;
+     }
+ }
+ @media (min-width: 992px) {
+     .header-fields {
+         display: none;
+     }
+ }
+ 
+ ::-webkit-scrollbar {
+     width: 8px;
+ }
+ 
+ ::-webkit-scrollbar-track {
+     -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
+     border-radius: 3px;
+ }
+ 
+ ::-webkit-scrollbar-thumb {
+     border-radius: 3px;
+     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
+ }
+ .sidebar{
+     position: relative;
+ }
+ .toggle-button {
+     position: fixed;
+     width: 236px;
+     cursor: pointer;
+     padding: 12px;
+     // bottom: 5.5em;
+     top: 3.5em;
+     left: 0;
+     z-index: 1001;
+     color: #000;;
+     background: #f2f2f2;
+     i {
+         font-size: 23px;
+     }
+     &:hover {
+         background: darken($topnav-background-color, 5%);
+         color: #fff;
+     }
+     border-bottom: 1px solid #999;
+     -webkit-transition: all 0.2s ease-in-out;
+     -moz-transition: all 0.2s ease-in-out;
+     -ms-transition: all 0.2s ease-in-out;
+     -o-transition: all 0.2s ease-in-out;
+     transition: all 0.2s ease-in-out;
+ }
+ 
+ .collapsed {
+     width: 60px;
+     span {
+         display: none;
+     }
+ }
+ 
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html
index 446e8fc7..bf4507f6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.html
@@ -4,7 +4,12 @@
 	</section>
 </div>
 
-<app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
 <section class="main-container" [ngClass]="{collapsed: collapedSideBar}">
+	<app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
+
 	<router-outlet></router-outlet>
 </section>
+
+<section >
+	<app-footer></app-footer>
+</section>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts
index 51af0be1..07b8459c 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts
@@ -44,6 +44,7 @@ import { LayoutRoutingModule } from './layout-routing.module';
 import { LayoutComponent } from './layout.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component'
 import {A11yModule} from '@angular/cdk/a11y';
 import {BidiModule} from '@angular/cdk/bidi';
 import {ObserversModule} from '@angular/cdk/observers';
@@ -74,6 +75,6 @@ import {AdminModule} from '../admin/admin.module';
         CdkStepperModule,
         CdkTableModule
     ],
-    declarations: [LayoutComponent, SidebarComponent, HeaderComponent]
+    declarations: [LayoutComponent, SidebarComponent, HeaderComponent, FooterComponent]
 })
 export class LayoutModule {}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/index.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/index.ts
index c161be12..167a54b4 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/index.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/index.ts
@@ -35,4 +35,5 @@
  *
  * 
  */
-export * from './sidebar/sidebar.service';
\ No newline at end of file
+export * from './sidebar/sidebar.service';
+export * from './manifest/manifest.service';
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/manifest/manifest.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/manifest/manifest.service.spec.ts
new file mode 100644
index 00000000..85e6e294
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/manifest/manifest.service.spec.ts
@@ -0,0 +1,13 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ManifestService } from './manifest.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('ManifestService', () => {
+  beforeEach(() => TestBed.configureTestingModule({imports:[HttpClientTestingModule]}));
+
+  it('should be created', () => {
+    const service: ManifestService = TestBed.get(ManifestService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/manifest/manifest.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/manifest/manifest.service.ts
new file mode 100644
index 00000000..7553e38c
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/manifest/manifest.service.ts
@@ -0,0 +1,53 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ManifestService {
+
+  api = environment;
+  constructor(public httpClient: HttpClient) { }
+
+  getManifest() {
+    return this.httpClient.get(this.api.getManifest);
+  }
+}