From e3636b96e9938cb89bb90672cf70fff3ae790186 Mon Sep 17 00:00:00 2001
From: Muni Mohan Kunchi <munmohan@att.com>
Date: Thu, 6 Feb 2020 13:51:45 -0500
Subject: adding sdk changes

adding sdk changes

Issue-ID: PORTAL-830
Signed-off-by: Muni Mohan Kunchi <munmohan@att.com>
Change-Id: I0c99d3ab15fcf4c3b34d84658b64114dadbe2577
---
 .../layout/components/header/header.component.html |   4 +-
 .../components/header/header.component.spec.ts     |   7 -
 .../layout/components/header/header.component.ts   |  10 +-
 .../components/sidebar/sidebar.component.html      |  82 +++++----
 .../components/sidebar/sidebar.component.scss      |  10 +-
 .../layout/components/sidebar/sidebar.component.ts |  23 ++-
 .../layout/dashboard/dashboard.component.spec.ts   |   6 -
 .../ngapp/src/app/layout/layout.component.html     |   9 +-
 .../ngapp/src/app/layout/layout.component.ts       |  12 +-
 .../ngapp/src/app/pages/admin/admin.service.ts     |  28 +++-
 .../src/app/pages/admin/menus/menus.component.html | 150 ++++++-----------
 .../src/app/pages/admin/menus/menus.component.scss |  79 ++++++---
 .../app/pages/admin/menus/menus.component.spec.ts  |   5 -
 .../src/app/pages/admin/menus/menus.component.ts   | 180 +++++++++++++++-----
 .../src/app/pages/admin/menus/menus.module.ts      |  41 ++++-
 .../pages/admin/role-functions/role-function.ts    |  59 +++++--
 .../role-functions/role-functions.component.html   | 111 +++++--------
 .../role-functions/role-functions.component.scss   |  67 ++++++--
 .../role-functions.component.spec.ts               |  62 ++++---
 .../role-functions/role-functions.component.ts     | 151 ++++++++++-------
 .../src/app/pages/admin/roles/roles.component.html | 150 ++++++++++-------
 .../src/app/pages/admin/roles/roles.component.scss |  42 +++++
 .../app/pages/admin/roles/roles.component.spec.ts  |  38 +++++
 .../src/app/pages/admin/roles/roles.component.ts   | 185 +++++++++++++++------
 .../src/app/pages/admin/usage/usage.component.html |  96 +++++------
 .../src/app/pages/admin/usage/usage.component.scss |  38 +++++
 .../app/pages/admin/usage/usage.component.spec.ts  |  38 +++++
 .../src/app/pages/admin/usage/usage.component.ts   |  72 +++++++-
 .../src/app/pages/admin/usage/usage.module.ts      |  38 +++++
 .../form-fields/form-fields.component.spec.ts      |  49 +-----
 .../Report_List/Report/log/log.component.spec.ts   |   5 -
 .../run-report-form-fields.component.spec.ts       |  14 --
 .../run/run-report/run-report.component.spec.ts    |  29 ----
 .../webapp/ngapp/src/app/pages/pages.module.ts     |   4 +-
 .../app/shared/services/user/user.service.spec.ts  |  25 +--
 .../src/main/webapp/ngapp/src/styles/app.scss      | 119 ++++++++++++-
 36 files changed, 1339 insertions(+), 699 deletions(-)

(limited to 'ecomp-sdk/epsdk-app-overlay/src/main')

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
index 85644522..04701ca7 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
@@ -1,5 +1,5 @@
-<nav class="navbar navbar-expand-lg fixed-top">
-    <a class="navbar-brand" href="#">Ecomp Portal SDK</a>
+<nav class="navbar navbar-expand-lg fixed-top" *ngIf=showHeader>
+    <a class="navbar-brand" href="#">{{appName}}</a>
     <button class="navbar-toggler" type="button" (click)="toggleSidebar()">
         <i class="fa fa-bars" aria-hidden="true"></i>
     </button>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.spec.ts
index efe2de10..02cfd6b6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.spec.ts
@@ -4,8 +4,6 @@
  * ===================================================================
  * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
  * ===================================================================
- * Modification Copyright © 2020 IBM.
- * ===================================================================
  *
  * Unless otherwise specified, all software contained herein is licensed
  * under the Apache License, Version 2.0 (the "License");
@@ -76,9 +74,4 @@ describe('HeaderComponent', () => {
     document.getElementById("body").classList.add("push-right");
     expect(component.isToggled()).toBe(true);
   });
-
-  it('should test ngOnInit function', () => {   
-    component.ngOnInit();    
-  });
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts
index 10a9fc39..7956f66e 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.ts
@@ -40,6 +40,7 @@ import { Router, NavigationEnd } from '@angular/router';
 import { HeaderService } from '../../../shared/services/header/header.service';
 import { UserService } from 'src/app/shared/services/user/user.service';
 import { User } from 'src/app/shared/services/user/user';
+import { CookieService } from 'ngx-cookie-service';
 
 @Component({
     selector: 'app-header',
@@ -54,9 +55,11 @@ export class HeaderComponent implements OnInit {
     userId:string;
     response:any;
     userName;
+    appName:string;
+    showHeader:boolean = true;
 
 
-        constructor(public router: Router,public headerService: HeaderService) {
+        constructor(public router: Router,public headerService: HeaderService,public cookieService: CookieService) {
 
         this.router.events.subscribe(val => {
             if (
@@ -70,7 +73,12 @@ export class HeaderComponent implements OnInit {
     }
 
     ngOnInit() {
+        if(this.cookieService.get('show_app_header') == 'false'){
+            this.showHeader = false;
+        } 
+
         this.pushRightClass = 'push-right';
+        this.appName= 'Ecomp ENMT' ;
         let result = this.headerService.getTopMenuItems();
           result.subscribe(res => {
               this.response = res;
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 45fd256f..e640f84f 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,34 +1,48 @@
-<nav class="sidebar" [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;
-        </div>
-<div class="list-group" *ngFor="let menu of menuData ; index as item">
-    <a href="{{menu.href}}" *ngIf="!(menu.menuItems.length > 0)" class="list-group-item">
-        <i class="fa fa-dashboard"></i>&nbsp;
-        <span>{{menu.name}}</span>
-    </a>
-    <div class="nested-menu" *ngIf="menu.menuItems.length > 0">
-    <a href="javascript:void(0)" class="list-group-item"
-            (click)="addExpandClass(menu.name)">
-            <i class="fa fa-plus"></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}}" *ngIf="menuItems.href!==null else routerBlock">
-                        <i class="fa fa-monument"></i>&nbsp;
-                        <span>{{ menuItems.name }}</span>
-                    </a>
-                    <ng-template #routerBlock>
-                    <a  [routerLink]="[menuItems.router]">
-                        <i class="fa fa-monument"></i>&nbsp;
-                        <span>{{ menuItems.name }}</span>
-                    </a>
-                    </ng-template>
-                </li>
-            </ul>
-        </li>
-    </div>
-</div>
-</nav>
+<div class="sidebar" [ngClass]="{'siderbar-height': showHeader, 'siderbar-height-noHeader': !showHeader}" >
+    <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;
+		</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="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>
+			</div>
+		</div>
+    </nav>
+</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 788b4f0d..3917b896 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
@@ -36,11 +36,19 @@
  * 
  */
 $topnav-background-color: #f2f2f2;
+
+.siderbar-height-noHeader{
+    top: 0px;
+}
+
+.siderbar-height{
+    top: 56px;
+}
+
 .sidebar {
     border-radius: 0;
     position: fixed;
     z-index: 1000;
-    top: 56px;
     left: 235px;
     width: 235px;
     margin-left: -235px;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts
index 314245b1..6487d745 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/sidebar/sidebar.component.ts
@@ -38,6 +38,7 @@
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { SidebarService} from '../../../shared/services/index'
+import { CookieService } from 'ngx-cookie-service';
 
 @Component({
     selector: 'app-sidebar',
@@ -55,10 +56,11 @@ export class SidebarComponent implements OnInit {
     hash:string="#";  
     menuData:Array<object> = [];
     page;
+    showHeader:boolean = true;
 
     @Output() collapsedEvent = new EventEmitter<boolean>();
 
-    constructor(public router: Router, public sidebarService: SidebarService) {
+    constructor(public router: Router, public sidebarService: SidebarService,public cookieService: CookieService) {
         this.router.events.subscribe(val => {
             if (
                 val instanceof NavigationEnd &&
@@ -71,6 +73,9 @@ export class SidebarComponent implements OnInit {
     }
 
     ngOnInit() {
+        if(this.cookieService.get('show_app_header') == 'false'){
+            this.showHeader = false;
+        } 
         this.isActive = false;
         this.collapsed = false;
         this.showMenu = '';
@@ -81,21 +86,23 @@ export class SidebarComponent implements OnInit {
         this.result = data;
         this.leftParentData = JSON.parse(this.result.data);
         this.leftChildData = JSON.parse(this.result.data2);
-
+        
         for (let  i = 0; i < this.leftParentData.length; i++) {    
         let parentItem={
             name:null,
             imageSrc:null,
             href:null,
+            target : null,
             menuItems:[]
           };
     
-         console.log(this.leftParentData[i].label);
+         
           parentItem.name = this.leftParentData[i].label;
           parentItem.imageSrc = this.leftParentData[i].imageSrc;
           // Add link to items with no subitems
           if (this.leftChildData[i].length === 0){
             parentItem.href = this.leftParentData[i].action;
+            parentItem.target = this.leftParentData[i].target;
           }else{
              
           
@@ -104,6 +111,7 @@ export class SidebarComponent implements OnInit {
             let childItem={
               name:null,
               href:null,
+              target : null,
               router:null
             };
             if (this.leftChildData[i][j].label != null && this.leftChildData[i][j].label.length > 0) {
@@ -111,17 +119,18 @@ export class SidebarComponent implements OnInit {
               childItem.name = this.leftChildData[i][j].label;
               if(null!==this.leftChildData[i][j].action){
               if(this.leftChildData[i][j].action.match('v2/*'))
-            	  childItem.router = '/'+ this.leftChildData[i][j].action;
+                  childItem.router = '/'+ this.leftChildData[i][j].action;
               else childItem.href = this.leftChildData[i][j].action;
+              childItem.target = this.leftChildData[i][j].target;
               parentItem.menuItems.push(childItem)
               }
             }
           }
         }
+         
          this.menuData.push(parentItem);
-         console.log(this.menuData);
+         
         }
-    
     });
 
     }
@@ -155,4 +164,4 @@ export class SidebarComponent implements OnInit {
     onLoggedout() {
         localStorage.removeItem('isLoggedin');
     }
-}
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/dashboard/dashboard.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/dashboard/dashboard.component.spec.ts
index c28734a4..21423380 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/dashboard/dashboard.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/dashboard/dashboard.component.spec.ts
@@ -29,10 +29,4 @@ describe('DashboardComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should test the functions is called properly in constructor',() => {
-      expect(component.alerts.push).toHaveBeenCalled;
-      expect(component.sliders.push).toHaveBeenCalled;
-  });
-
 });
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 8fad35c8..446e8fc7 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
@@ -1,5 +1,10 @@
-<app-header></app-header>
+<div *ngIf=showHeader>
+	<section >
+		<app-header></app-header>
+	</section>
+</div>
+
 <app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
 <section class="main-container" [ngClass]="{collapsed: collapedSideBar}">
-    <router-outlet></router-outlet>
+	<router-outlet></router-outlet>
 </section>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.ts
index ad361164..12617548 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.component.ts
@@ -36,7 +36,8 @@
  * 
  */
 import { Component, OnInit } from '@angular/core';
-
+import { MatDialog, MatDialogConfig} from '@angular/material';
+import { CookieService } from 'ngx-cookie-service';
 @Component({
     selector: 'app-layout',
     templateUrl: './layout.component.html',
@@ -45,10 +46,15 @@ import { Component, OnInit } from '@angular/core';
 export class LayoutComponent implements OnInit {
 
     collapedSideBar: boolean;
+    showHeader:boolean = true;
 
-    constructor() {}
+    constructor(private dialog:MatDialog,public cookieService: CookieService) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        if(this.cookieService.get('show_app_header') == 'false'){
+            this.showHeader = false;
+        } 
+    }
 
     receiveCollapsed($event) {
         this.collapedSideBar = $event;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.ts
index 74d4b9b8..1240e981 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.ts
@@ -37,9 +37,10 @@
  */
 
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { JsonPipe } from '@angular/common';
 import { environment } from '../../../environments/environment';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -77,6 +78,21 @@ export class AdminService {
     return this.http.get(environment.getFnMenuItems,{ withCredentials: true });         
   }
 
+  updateFnMenuItem(menuObj: any): Observable<any> {
+    let  updateMenuURL = environment.updateFnMenuItem;
+    return this.http.post(updateMenuURL, menuObj, {withCredentials: true})
+  }
+
+  getFunctionCdList(): Observable<any>{ 
+    let getFunctionCdListURL  = environment.getFunctionCdList;
+    return this.http.get(getFunctionCdListURL , { withCredentials: true } );
+  }
+
+  getParentData(): Observable<any>{ 
+    let getParentDataURL  = environment.getParentList;
+    return this.http.get(getParentDataURL , { withCredentials: true } );
+  }
+
   deleteRole(roleData:any){
     return this.http.post(environment.deleteRole,JSON.stringify({role: roleData}),{ withCredentials: true });
   }
@@ -87,6 +103,16 @@ export class AdminService {
 
   }
 
+  removeRoleFunction(roleFunc:any, roleId:any){
+    let removeRoleFunctionURL = environment.removeRoleFunction+roleId;
+    return this.http.post(removeRoleFunctionURL,JSON.stringify({roleFunction:roleFunc}),{ withCredentials: true });
+  }
+
+  saveRole(roleObj:any, roleId:any){
+    let saveRoleURL = environment.saveRole+roleId;
+    return this.http.post(saveRoleURL,JSON.stringify(roleObj),{ withCredentials: true });
+  }
+
   deleteMenu(fnMenuItem:any){
     return this.http.post(environment.deleteMenu,JSON.stringify({fnMenuItem: fnMenuItem}),{ withCredentials: true });
   }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.html
index c98e476f..831e4c31 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.html
@@ -1,104 +1,48 @@
-<div id="page-content">
-  <div>
-    <h1 class="heading-page" id="AdminMenuItems">Admin Menu Items</h1>
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  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============================================
+   
+-->
+<div class="container">
+  <div id="page-content">
+    <div class="ecomp-main-view-title">
+      <h1 class="heading-page">Admin Menu Items</h1>
+    </div>
+    <div ng-show="showLoader" class="span loader-container">
+      <i class="icon-primary-spinner" role="img" aria-label="Please wait while we load your content"></i>
+    </div>
+    <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+    <rdp-data-table [data]="tableData" [settings]="settings"></rdp-data-table>
   </div>
-  <div>
-    <button type="submit" ng-click="addNewFnMenuItemModalPopup();" class="btn btn-alt btn-small"
-      style="position: initial;">Add Menu Item</button>
-  </div>
-
-  <h3 class="heading-small">
-    Existing menu items
-  </h3>
-
-  <div ng-show="showLoader" class="span loader-container">
-    <i class="icon-primary-spinner" role="img" aria-label="Please wait while we load your content"></i>
-  </div>
-
-
-    <table mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="menuId">
-        <th mat-header-cell *matHeaderCellDef  id="heading1"> Menu ID</th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.id}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="label">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading2"> Label </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.label}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="paretId">
-        <th mat-header-cell *matHeaderCellDef  id="heading3">ParentId </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.parentId}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef  id="heading4"> Action </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.sortOrder}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="functionCd">
-        <th mat-header-cell *matHeaderCellDef  id="heading6"> Function </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.functionCd}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="active">
-        <th mat-header-cell *matHeaderCellDef  id="heading7"> Active</th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.active ? 'Y' : 'N'}} </td>
-      </ng-container>
-      <ng-container matColumnDef="servlet">
-        <th mat-header-cell *matHeaderCellDef  id="heading8"> Servlet</th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.servlet}} </td>
-      </ng-container>
-      <ng-container matColumnDef="queryString">
-        <th mat-header-cell *matHeaderCellDef  id="heading9"> Query String</th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.queryString}} </td>
-      </ng-container>
-      <ng-container matColumnDef="externalUrl">
-        <th mat-header-cell *matHeaderCellDef  id="heading10">External	URL </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.externalUrl}} </td>
-      </ng-container>
-      <ng-container matColumnDef="target">
-        <th mat-header-cell *matHeaderCellDef  id="heading11"> Target </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.target}} </td>
-      </ng-container>
-      <ng-container matColumnDef="menuSetCode">
-        <th mat-header-cell *matHeaderCellDef  id="heading12"> Menu	Set Code </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.menuSetCode}} </td>
-      </ng-container>
-      <ng-container matColumnDef="separator">
-        <th mat-header-cell *matHeaderCellDef id="heading13"> Separator </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.separator ? 'Y' : 'N'}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="imageSrc">
-        <th mat-header-cell *matHeaderCellDef  id="heading14"> Image Source </th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.imageSrc}} </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Edit">
-        <th mat-header-cell *matHeaderCellDef id="heading15"> Edit</th>
-        <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-          <span class="icon-trash" id="{{i}}-button-role-edit"
-            (click)="editMenu(rowData)">
-            <i class="ion ion-md-create"></i>
-        </span>
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="Delete">
-        <th mat-header-cell *matHeaderCellDef id="heading16"> Delete </th>
-        <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-            <span class="icon-trash" id="{{i}}-button-role-remove"
-              (click)="removeMenuItem(rowData)">
-              <i class="icon ion-md-trash"></i>
-          </span>
-          </td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="menuHeaders"></tr>
-      <tr mat-row *matRowDef="let rowData; columns: menuHeaders;">
-
-    </table>
-    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
-  </div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.scss
index a9b6308f..0f868ab4 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.scss
@@ -1,31 +1,60 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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============================================
+ *
+ * 
+ */
+ 
 table {
-    width: 100%;
-  }
-  
-  .mat-form-field {
-    font-size: 14px;
-    width: 100%;
-  }
-  
-  td, th {
-    width: 25%;
-  }
-  .mat-form-field[_ngcontent-c4] {
-    font-size: 14px;
-    width: 20%;
-    float: right;
-  }
+  width: 100%;
+}
 
-  /*td.mat-cell, td.mat-footer-cell{
-    padding: 0;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-right-style: solid;
-    border-right-color: rgba(0,0,0,.12);
-    border-right-width: 1px;
-  }
-*/
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+  
+td, th {
+  width: 25%;
+}
 
 td[_ngcontent-c4], th[_ngcontent-c4] {
   width: 7%;
+}
+
+::ng-deep .mat-form-field[_ngcontent-c4][_ngcontent-c4] {
+  font-size: 14px;
+  width: 20%;
+  float: left;
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.spec.ts
index f7548eef..04a691b9 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.spec.ts
@@ -49,9 +49,4 @@ describe('MenusComponent', () => {
     expect(adminservice.getFnMenuItems).toHaveBeenCalled();
   }));
 
-  it('should test removeMenuItems function', () => {
-      component.removeMenuItem(item);
-      expect(component.removeMenuItem).toHaveBeenCalled();
-  })
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.ts
index 3575486d..c327c79a 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.ts
@@ -1,10 +1,52 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 { Component, OnInit, ViewChild } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { AdminService } from '../admin.service';
-import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { NewMenuComponent } from './new-menu/new-menu.component';
+import { Column, DataTableSettings, RdpCrudInterface , ColumnTypes} from 'portalsdk-tag-lib';
+import { element } from '@angular/core/src/render3';
+import { MenusService } from './menus.service';
 
 @Component({
   selector: 'app-menus',
@@ -13,63 +55,121 @@ import { InformationModalComponent } from 'src/app/modals/information-modal/info
 })
 export class MenusComponent implements OnInit {
 
-  constructor(public adminService: AdminService,private ngModal: NgbModal) { }
+  constructor(public adminService: AdminService, private ngModal: NgbModal, public menuService : MenusService) { }
 
-  menuHeaders = ["menuId","label","paretId","action","functionCd","active","servlet","queryString","externalUrl","target","menuSetCode","separator","imageSrc","Edit","Delete"];
+  // menuHeaders = ["menuId", "label", "paretId", "sortOrder", "action", "functionCd", "active", "servlet", "queryString", "externalUrl", "target", "menuSetCode", "separator", "imageSrc", "Edit", "Delete"];
 
   response: any;
   result: any;
-  functionalMenuRes:any;
+  functionalMenuRes: any;
   tableData;
   dataSource: MatTableDataSource<[]>;
   closeResult: string;
-  
-  
+  isEditMode: boolean;
+  showSpinner: boolean;
+
+  public settings;
+  public columns: any = [];
+
+  activeStatusOptions = [        
+    {index: 0, value: 'true', name: 'Y'},
+    {index: 1, value: 'false', name: 'N'}
+  ];
+  separatorStatusOptions = [        
+    {index: 0, value: 'true', name: 'Y'},
+    {index: 1, value: 'false', name: 'N'}
+  ];
+  functionCDselectData = [];
+  parentListSelectData = [];
+  parentList = [];
+
   @ViewChild(MatPaginator, {}) paginator: MatPaginator;
   @ViewChild(MatSort, {}) sort: MatSort;
 
   ngOnInit() {
+    this.showSpinner = false;
+    this.getParentData();
+    this.getFunctionCDselectData();
     this.getMenus();
   }
 
-  getMenus(){
-  let response;
-  this.response = this.adminService.getFnMenuItems();
-  this.response.subscribe(data => {
-  response = data;
-  this.functionalMenuRes =JSON.parse(response.data);
-  this.tableData =this.functionalMenuRes.fnMenuItems;   
-  this.dataSource = new MatTableDataSource(this.tableData);
-  this.dataSource.paginator = this.paginator;
-  this.dataSource.sort = this.sort;    
-  });
- }
-  removeMenuItem(item: any) {
-    const modalRef = this.ngModal.open(InformationModalComponent);
-    modalRef.componentInstance.title = 'Confirmation';
+  getMenus() {
+    console.log(">>>>>>>>>>>>>>> GetMenus calles >>>>>>>>>>>>>>")
+    this.showSpinner = true;
     let response;
-    modalRef.componentInstance.message = `Are you sure you want to delete ${item.label} ?`;
-    modalRef.result.then((result) => {
-      if (result === 'Ok') {
-        this.adminService.deleteMenu(item).subscribe(data => {
-          response = data;
-          this.getMenus();
-        })
-      }
-    }, (reason) => {
-      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    this.response = this.adminService.getFnMenuItems();
+    this.response.subscribe(data => {
+      response = data;
+
+      this.functionalMenuRes = JSON.parse(response.data);
+      this.tableData = this.functionalMenuRes.fnMenuItems;
+      this.tableData.forEach(element => {
+        if (element.active) { element.active = "Y"; }
+        else { element.active = "N"; }
+        if (element.separator) { element.separator = "Y"; }
+        else { element.separator = "N"; }
+      });
+
+      //rdp table data
+      this.columns.push(new Column("id", "Menu ID", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("label", "Label", ColumnTypes.TEXT, true, null));
+      this.columns.push(new Column("parentId", "ParentId", ColumnTypes.DROPDOWN, false, this.parentList));
+      this.columns.push(new Column("sortOrder", "Sort Order", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("action", "Action", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("functionCd", "Function", ColumnTypes.DROPDOWN, false, this.functionCDselectData));
+      this.columns.push(new Column("active", "Active", ColumnTypes.DROPDOWN, false, this.activeStatusOptions));
+      this.columns.push(new Column("servlet", "Servlet", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("queryString", "	Query String", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("externalUrl", "External URL", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("target", "Target", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("menuSetCode", "Menu Set Code", ColumnTypes.TEXT, false, null));
+      this.columns.push(new Column("separator", "Separator", ColumnTypes.DROPDOWN, false, this.separatorStatusOptions));
+      this.columns.push(new Column("imageSrc", "Image Source", ColumnTypes.TEXT, false, null));
+
+      this.settings = new DataTableSettings()
+      this.settings.columns = this.columns;
+      this.settings.isPaginationEnabled = true;
+      this.settings.paginationsSize = "5";
+      this.settings.isReadOnly = false;
+      this.settings.isTableSearchEnabled = false;
+      this.settings.applicationService = this.menuService;
+
+      this.showSpinner = false;
+
     });
   }
 
-  private getDismissReason(reason: any): string {
-    if (reason === ModalDismissReasons.ESC) {
-      return 'by pressing ESC';
-    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
-      return 'by clicking on a backdrop';
-    } else {
-      return `with: ${reason}`;
-    }
+  getFunctionCDselectData = function () {
+    this.adminService.getFunctionCdList()
+      .subscribe(_data => {
+        this.result = _data;
+        if (_data) {
 
-}
+          for(let i = 0; i< _data.length; i++){
+            this.functionCDselectData.push({id: i, name: _data[i]});
+          }
+        }
+      }, error => {
+        this.showSpinner = false;
+        console.log(error);
+        this.openConfirmationModal("", "Function Code Data not available !");
+      });
+  }
+
+  getParentData() {
+    this.adminService.getParentData()
+      .subscribe(_data => {
+        this.result = _data;
+        if (_data) {
+          for(let i = 0; i< _data.length; i++){
+            this.parentList.push({id: _data[i][0], name: _data[i][1]});
+          }
+          console.log("Actual parent list : ", this.parentList);
+        }
+      }, error => {
+        this.showSpinner = false;
+        console.log(error);
+      });
+  }
 
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.module.ts
index 729437c2..c6f39f6b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.module.ts
@@ -1,12 +1,51 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MenusComponent } from './menus.component';
 import { MaterialModule } from 'src/app/material-module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { NewMenuComponent } from './new-menu/new-menu.component';
 
 @NgModule({
-  declarations: [MenusComponent],
+  declarations: [MenusComponent, NewMenuComponent],
   imports: [
     CommonModule,FormsModule,ReactiveFormsModule,MatFormFieldModule
   ],
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-function.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-function.ts
index 9359561d..9a00995b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-function.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-function.ts
@@ -1,13 +1,52 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * 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============================================
+ *
+ * 
+ */
+
 export class RoleFunction {
-    public name:string;
-    public code:string;
-    public type:string;
-    public action:string;
+    type: string;
+    code: string;
+    action: string;
+    name: string;
 
-     constructor(roleFun:any){
-        this.name= roleFun.name;
-       this.code = roleFun.code;
-       this.type = roleFun.type;
-       this.action = roleFun.action;
-        }
+    //constructor 
+    constructor(type: string, code: string, action: string, name: string) {
+        this.type = type;
+        this.code = code;
+        this.action = action;
+        this.name = name;
+    }
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.html
index ea0503cb..4c113373 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.html
@@ -1,67 +1,48 @@
-
-
-<div id="page-content">
-    <h1 class="heading-page" id="roleFunction">Role Function</h1>
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  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============================================
+   
+  -->
+  
+
+<div class="container">
+  <div class="role-function-title">
+    <h1 class="heading-page" id="roleFunction"> Role Function </h1>
     <span class= "heading-small" *ngIf="isAppCentralized=='true'"><b>Please go to portal to Manage Role Function.</b></span>
-    
-    <div class="create" *ngIf="isAppCentralized=='false'" (click)="addRoleFuncPopUp(rowData);">
-        <button type="button" class="btn btn-primary">Create</button>
-
-      </div>
-        <mat-form-field>
-          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
-        </mat-form-field>
-     
-
-
-
-      <table mat-table [dataSource]="dataSource" matSort>
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading1"> Name</th>
-          <td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
-        </ng-container>
-    
-        <ng-container matColumnDef="code">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading2"> Code</th>
-          <td mat-cell *matCellDef="let rowData"> {{rowData.code}} </td>
-        </ng-container>
-    
-        <ng-container matColumnDef="type">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading3">Type </th>
-          <td mat-cell *matCellDef="let rowData"> {{rowData.type}}</td>
-        </ng-container>
-    
-        <ng-container matColumnDef="action">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading4"> Action</th>
-          <td mat-cell *matCellDef="let rowData" > {{rowData.action}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef  id="heading5"> {{roleFunctionHeaders[4]}} </th>
-           <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-          <span class="icon-trash" id="{{i}}-button-role-edit"
-            (click)="editRole(rowData)">
-            <i class="ion ion-md-create"></i>
-        </span>
-        </td>
-        </ng-container>
-
-        <ng-container matColumnDef="delete">
-          <th mat-header-cell *matHeaderCellDef  id="heading6"> {{roleFunctionHeaders[5]}} </th>
-          
-          <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-              <span class="icon-trash" id="{{i}}-button-role-remove"
-                (click)="delRoleFunction(rowData)">
-                <i class="icon ion-md-trash"></i>
-            </span>
-            </td>
-        </ng-container>
-     
-        <tr mat-header-row *matHeaderRowDef="roleFunctionHeaders"></tr>
-    <tr mat-row *matRowDef="let rowData; columns: roleFunctionHeaders;">
-
-      </table> 
-      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
-
-    </div>
+  </div>
+  <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+  
+  <rdp-data-table [data]="tableData" [settings]="settings"></rdp-data-table>
+</div>  
     
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.scss
index c9ab8db4..7379b988 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.scss
@@ -1,20 +1,57 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * 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============================================
+ *
+ * 
+ */
 table {
-    width: 100%;
-  }
+  width: 100%;
+}
   
-  .mat-form-field {
-    font-size: 14px;
-    width: 100%;
-  }
-  
-  td, th {
-    width: 25%;
-  }
-  .mat-form-field[_ngcontent-c4] {
-    font-size: 14px;
-    width: 20%;
-    float: right;
-  }
+td, th {
+  width: 25%;
+}
+
 td[_ngcontent-c4], th[_ngcontent-c4] {
   width: 15%;
+}
+
+.icon-trash{
+  cursor: pointer;
+}
+
+::ng-deep .mat-form-field-infix {
+  width: 250px;
+  margin-left: 10px;
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.spec.ts
index a19fd52a..b0dc3442 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.spec.ts
@@ -1,20 +1,51 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RoleFunctionsComponent } from './role-functions.component';
-import { AdminService } from '../admin.service';
-import { inject } from '@angular/core/testing';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 describe('RoleFunctionsComponent', () => {
   let component: RoleFunctionsComponent;
   let fixture: ComponentFixture<RoleFunctionsComponent>;
-  let modalService: any;
-  let item: any;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ RoleFunctionsComponent ],
-      imports: [NgbModal]
+      declarations: [ RoleFunctionsComponent ]
     })
     .compileComponents();
   }));
@@ -23,26 +54,9 @@ describe('RoleFunctionsComponent', () => {
     fixture = TestBed.createComponent(RoleFunctionsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    modalService = TestBed.get(NgbModal);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should test getDismissReason function', inject([AdminService],(adminservice) => {
-    component.getRoleFunctions();
-    expect(adminservice.getRoleFunctionsList).toHaveBeenCalled();
-  }));
-
-  it('should test getDismissReason function to call ngModal.open function', () => {
-    component.delRoleFunction({'label': 'abc'});
-    expect(modalService.open).toHaveBeenCalled();
-  });
-
-  it('should test delRoleFunction function', () => {
-    component.delRoleFunction(item);
-    expect(component.delRoleFunction).toHaveBeenCalled();
-})
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.ts
index c9893bf2..7170df50 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.ts
@@ -1,3 +1,41 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * 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 { Component, OnInit, Directive, Input, Output, EventEmitter, ViewChildren, QueryList, PipeTransform, ViewChild } from '@angular/core';
 import { AdminService } from '../admin.service';
 import {UserService} from '../../../shared/services/user/user.service'
@@ -9,6 +47,9 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+import { NewRoleFunctionComponent } from './new-role-function/new-role-function.component';
+import { Column, DataTableSettings, ColumnTypes } from 'portalsdk-tag-lib';
+import { RoleFunctionsService } from './role-functions.service';
 
 @Component({
   selector: 'app-role-functions',
@@ -18,86 +59,68 @@ import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
 export class RoleFunctionsComponent implements OnInit {
 
   tableData: Array<RoleFunction> = [];
-	response: any;
+  response: any;
   result: any;
-  function:RoleFunction;
-  
-  isAppCentralized:any;
+  function: RoleFunction;
+  isEditMode: boolean = false;
+  availableRoleFunctions: any;
+  showSpinner: boolean;
+
+  isAppCentralized: any;
   user: User;
   closeResult: string;
 
-  roleFunctionHeaders = ["name","code","type","action","edit","delete"];
+  roleFunctionHeaders = ["name", "code", "type", "action", "edit", "delete"];
   dataSource: MatTableDataSource<RoleFunction>;
 
-  constructor(public adminService: AdminService, public userService: UserService,private ngModal: NgbModal) { }
-  
+  constructor(public adminService: AdminService,
+    public userService: UserService,
+    private ngModal: NgbModal,
+    private roleFunctionService: RoleFunctionsService) { }
+
   @ViewChild(MatPaginator, {}) paginator: MatPaginator;
   @ViewChild(MatSort, {}) sort: MatSort;
 
-	ngOnInit() {
-   this.getRoleFunctions(); 
-      let result = this.userService.getFunctionalMenuStaticDetailSession();
-      let user;
-        result.subscribe(user => {
-        this.user = user;
-        this.isAppCentralized = this.user.isAppCentralized;
-      });
-    }
+  public settings;
+  public columns: any = [];
+  typeOptions: string[] = ['menu', 'url', 'other'];
 
-    getRoleFunctions(){
+  ngOnInit() {
+    this.showSpinner = false;
+    this.availableRoleFunctions = [];
+    this.getRoleFunctions();
+    let result = this.userService.getFunctionalMenuStaticDetailSession();
+    result.subscribe(user => {
+      this.user = user;
+      this.isAppCentralized = this.user.isAppCentralized;
+    });
+  }
 
-      let response;
-      this.response = this.adminService.getRoleFunctionList();
-      this.response.subscribe(data => {
+  getRoleFunctions() {
+    this.showSpinner = true;
+    let response;
+    this.response = this.adminService.getRoleFunctionList();
+    this.response.subscribe(data => {
       response = data;
       this.result = JSON.parse(response.data);
+      this.availableRoleFunctions = this.result.availableRoleFunctions;
       this.tableData = JSON.parse(this.result.availableRoleFunctions);
-      this.dataSource = new MatTableDataSource(this.tableData);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-     
-    });
+      console.log("Table data : ", this.tableData);
+      this.columns.push(new Column("name", "Name", ColumnTypes.TEXT, true, null));
+      this.columns.push(new Column("code", "Code", ColumnTypes.TEXT, true, null));
+      this.columns.push(new Column("type", "Type", ColumnTypes.RADIO, true, this.typeOptions));
+      this.columns.push(new Column("action", "Action", ColumnTypes.TEXT, true, null));
 
-    }
-
-    applyFilter(filterValue: string) {
-      this.dataSource.filter = filterValue.trim().toLowerCase();
-  
-      if (this.dataSource.paginator) {
-        this.dataSource.paginator.firstPage();
-      }
-    }
+      this.settings = new DataTableSettings()
+      this.settings.columns = this.columns;
+      this.settings.isPaginationEnabled = true;
+      this.settings.paginationsSize = "5";
+      this.settings.isReadOnly = false;
+      this.settings.isTableSearchEnabled = true;
+      this.settings.applicationService = this.roleFunctionService;
+      this.showSpinner = false;
 
+    });
 
-    delRoleFunction(item: any) {
-      const modalRef = this.ngModal.open(InformationModalComponent);
-      modalRef.componentInstance.title = 'Confirmation';
-      let response;
-      modalRef.componentInstance.message = `Are you sure you want to delete ${item.name} ?`;
-      modalRef.result.then((result) => {
-        if (result === 'Ok') {
-          this.adminService.deleteRoleFunction(item).subscribe(data => {
-            response = data;
-            if(response ='SUCCESS')
-            {
-              this.getRoleFunctions(); 
-            }       
-          })
-        }
-      }, (reason) => {
-        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
-      });
-    }
-  
-    private getDismissReason(reason: any): string {
-      if (reason === ModalDismissReasons.ESC) {
-        return 'by pressing ESC';
-      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
-        return 'by clicking on a backdrop';
-      } else {
-        return `with: ${reason}`;
-      }
-  
   }
-  
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html
index 36440ead..4d8fcec8 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html
@@ -1,60 +1,96 @@
-<div id="page-content">
-    <div>
-      <h1 class="heading-page" id="Roles">Roles</h1>
-      <span class= "heading-small" *ngIf="isAppCentralized=='true'"><b>Please go to portal to Manage Roles.</b></span>
-    </div>
-    <div>
-        <button type="button" (click)="window.location='admin#/role/0';" class="btn btn-primary" *ngIf="isAppCentralized=='false'">Add New Role</button>
-   </div>
-   <h2 class="heading-small"*ngIf="isAppCentralized=='false'">Click on a Role to view its details.</h2>        
-
-   <span class="ecomp-spinner" *ngIf="showSpinner"></span>
-   <table mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading1"> Name</th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
-      </ng-container>
-  
-      <ng-container matColumnDef="priority">
-        <th mat-header-cell *matHeaderCellDef   id="heading2"> Priority</th>
-        <td mat-cell *matCellDef="let rowData"> {{rowData.priority}} </td>
-      </ng-container>
-  
-      <ng-container matColumnDef="Edit">
-        <th mat-header-cell *matHeaderCellDef id="heading3">{{roleHeaders[2]}} </th>
-
-        <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-          <span class="icon-trash" id="{{i}}-button-role-edit"
-            (click)="editRole(rowData)">
-            <i class="ion ion-md-create"></i>
-        </span>
-        </td>
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  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============================================
+   
+  -->
 
-      </ng-container>
+<div class="container">
+  <div id="page-content">
+    <div class="ecomp-main-view-title">
+        <h1 class="heading-page">Roles</h1>
+        <span class= "heading-small" *ngIf="isAppCentralized=='true'"><b>Please go to portal to Manage Roles.</b></span>
+    </div>
+    <button type="button" *ngIf="isAppCentralized=='false'" style="float: right;" class="btn btn-primary" (click)="openAddNewRoleModal('')">
+        <i class="icon ion-md-person-add"></i>Add New Role
+    </button>
+    <span class="heading-small" *ngIf="isAppCentralized=='false'">Click on a Role to view its details.</span>        
+    <span class="ecomp-spinner" *ngIf="showSpinner"></span>
   
-      <ng-container matColumnDef="Active?">
-        <th mat-header-cell *matHeaderCellDef id="heading4"> {{roleHeaders[3]}} </th>
-        <td mat-cell *matCellDef="let rowData">
-          <mat-slide-toggle class="example-margin" [color]="color" [checked]="checked" [disabled]="disabled">
-        
-          </mat-slide-toggle>
-        </td>
-
-      </ng-container>
-
-      <ng-container matColumnDef="Delete?">
-        <th mat-header-cell *matHeaderCellDef  id="heading6"> {{roleHeaders[4]}} </th>
-        <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-          <span class="icon-trash" id="{{i}}-button-role-remove"
-            (click)="delRoleConfirmPopUp(rowData)">
-            <i class="icon ion-md-trash"></i>
-        </span>
-        </td>
-      </ng-container>
-   
-      <tr mat-header-row *matHeaderRowDef="roleHeaders"></tr>
-  <tr mat-row *matRowDef="let rowData; columns: roleHeaders;">
+    <table mat-table [dataSource]="dataSource" matSort>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading1"> Name</th>
+          <td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="priority">
+          <th mat-header-cell *matHeaderCellDef   id="heading2"> Priority</th>
+          <td mat-cell *matCellDef="let rowData"> {{rowData.priority}} </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Edit">
+          <th mat-header-cell *matHeaderCellDef id="heading3">{{roleHeaders[2]}} </th>
+          <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
+            <span class="icon-trash" id="{{i}}-button-role-edit"
+              (click)="openAddNewRoleModal(rowData)">
+              <i class="ion ion-md-create"></i>
+          </span>
+          </td>
+        </ng-container>
+    
+        <ng-container matColumnDef="Active?">
+          <th mat-header-cell *matHeaderCellDef id="heading4"> {{roleHeaders[3]}} </th>
+          <td mat-cell *matCellDef="let rowData">
+            <mat-slide-toggle [(ngModel)]="rowData.active" (change)="toggleRole(rowData)"></mat-slide-toggle>      
+          </td>
+        </ng-container>
 
-    </table> 
-    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
-  </div>
\ No newline at end of file
+        <ng-container matColumnDef="Delete?">
+          <th mat-header-cell *matHeaderCellDef  id="heading6"> {{roleHeaders[4]}} </th>
+          <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
+            <span class="icon-trash" id="{{i}}-button-role-remove"
+              (click)="delRoleConfirmPopUp(rowData)">
+              <i class="icon ion-md-trash"></i>
+          </span>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="roleHeaders"></tr>
+        <tr mat-row *matRowDef="let rowData; columns: roleHeaders;">
+      </table> 
+      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+      <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+      <div>
+        <a href="v2/admin/role_function_list">Manage Role Functions</a><br><br>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.scss
index 036634bf..ddbbf15d 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.scss
@@ -1,3 +1,41 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 table {
     width: 100%;
@@ -58,3 +96,7 @@ body {
   font-size: 8pt;
   float: right;
 }
+
+.icon-trash{
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.spec.ts
index 60280487..2a4b5c33 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.spec.ts
@@ -1,3 +1,41 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RolesComponent } from './roles.component';
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.ts
index 5c271b66..ada77e3d 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.ts
@@ -1,3 +1,40 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * 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 { Component, OnInit, ViewChild } from '@angular/core';
 import { AdminService } from '../admin.service';
 import { MatTableDataSource } from '@angular/material/table';
@@ -6,8 +43,8 @@ import { MatPaginator } from '@angular/material/paginator';
 import { User } from 'src/app/shared/services/user/user';
 import { UserService } from 'src/app/shared/services/user/user.service';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
-import { modelGroupProvider } from '@angular/forms/src/directives/ng_model_group';
 import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { NewRoleComponent } from './new-role/new-role.component';
 
 
 @Component({
@@ -18,20 +55,21 @@ import { InformationModalComponent } from 'src/app/modals/information-modal/info
 export class RolesComponent implements OnInit {
   tableData: Array<object> = [];
 	roleHeaders: Array<string> = [];
-  constructor(public adminService:AdminService,public userService: UserService,private ngModal: NgbModal) { }
-roleId;
-response:any;
-result:any;
-roleInfo:any;
-roleData:any;
-ociavailableRoleFunctions;
-availableRoleFunctions;
-availableRoles;
-dataSource: MatTableDataSource<[]>;
-user:User;
-isAppCentralized;
-closeResult: string;
-showSpinner = true;
+  constructor(public adminService:AdminService,public userService: UserService,private ngbModal: NgbModal) { }
+  roleId;
+  response:any;
+  result:any;
+  roleInfo:any;
+  roleData:any;
+  ociavailableRoleFunctions;
+  availableRoleFunctions;
+  availableRoles;
+  dataSource: MatTableDataSource<[]>;
+  user:User;
+  isAppCentralized;
+  closeResult: string;
+  isEditMode: boolean = false;
+  showSpinner:boolean;
   
   @ViewChild(MatPaginator, {}) paginator: MatPaginator;
   @ViewChild(MatSort, {}) sort: MatSort;
@@ -41,49 +79,44 @@ showSpinner = true;
     this.roleHeaders = ["name","priority","Edit","Active?","Delete?"];
     this.showSpinner = false;
     this.roleId=undefined;
-   this.getRole(this.roleId);
-   let result = this.userService.getFunctionalMenuStaticDetailSession();
-      let user;
-        result.subscribe(user => {
-        this.user = user;
-        this.isAppCentralized = this.user.isAppCentralized;
-      });
- 
-
-  }
+    this.getRole(this.roleId);
+    let result = this.userService.getFunctionalMenuStaticDetailSession();
+    let user;
+      result.subscribe(user => {
+      this.user = user;
+      this.isAppCentralized = this.user.isAppCentralized;
+    });
+   }
 
-  getRole(roleId:any)
-  {
-    this.response = this.adminService.getRole(this.roleId);
+  getRole(roleId:any){
+    this.showSpinner = true;
+    this.response = this.adminService.getRole(roleId);
     this.response.subscribe(data => {
-
       this.result = data;
-         this.roleInfo = JSON.parse(this.result.data);
-         this.roleData =JSON.parse(this.roleInfo.role);
-         
-       this.ociavailableRoleFunctions =JSON.parse(this.roleInfo.availableRoleFunctions);
-         this.availableRoleFunctions=[];
-         
-        for( let availableFun of this.ociavailableRoleFunctions){
-          let availableRoleFunction = availableFun;
-          availableRoleFunction.selected = false;
-          for( let availableFunc of this.roleData.roleFunctions){
-                 if(availableFun.code === availableFunc.code){
-                   availableRoleFunction.selected = true;
-                 }
+      this.roleInfo = JSON.parse(this.result.data);
+      this.roleData =JSON.parse(this.roleInfo.role);
+      this.ociavailableRoleFunctions =JSON.parse(this.roleInfo.availableRoleFunctions);
+      this.availableRoleFunctions=[];   
+      for( let availableFun of this.ociavailableRoleFunctions){
+        let availableRoleFunction = availableFun;
+        availableRoleFunction.selected = false;
+        for( let availableFunc of this.roleData.roleFunctions){
+          if(availableFun.code === availableFunc.code){
+            availableRoleFunction.selected = true;
           }
-          this.availableRoleFunctions.push(availableRoleFunction);
         }
-        this.availableRoles=JSON.parse(this.roleInfo.availableRoles);
-
+        this.availableRoleFunctions.push(availableRoleFunction);
+      }
+      this.availableRoles=JSON.parse(this.roleInfo.availableRoles);
       this.dataSource = new MatTableDataSource(this.availableRoles);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
+      this.showSpinner = false;
    });
   }
 
   delRoleConfirmPopUp(item: any) {
-    const modalRef = this.ngModal.open(InformationModalComponent);
+    const modalRef = this.ngbModal.open(InformationModalComponent);
     modalRef.componentInstance.title = 'Confirmation';
     let response;
     modalRef.componentInstance.message = `Are you sure you want to delete ${item.name} ?`;
@@ -96,6 +129,7 @@ showSpinner = true;
           this.dataSource = new MatTableDataSource(this.availableRoles);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
+          this.showSpinner = false;
         })
       }
     }, (reason) => {
@@ -112,5 +146,62 @@ showSpinner = true;
       return `with: ${reason}`;
     }
 
-}
+  }
+
+  /**
+   * openAddNewRoleModal
+   * @param rowData 
+   */
+  openAddNewRoleModal(rowData: any){
+    const modalRef = this.ngbModal.open(NewRoleComponent, { size: 'lg' });
+    modalRef.componentInstance.title = 'Role Details';
+    modalRef.componentInstance.availableRoles = this.availableRoles;
+    modalRef.componentInstance.ociavailableRoleFunctions = this.ociavailableRoleFunctions;
+    if(rowData != 'undefined' && rowData){
+      modalRef.componentInstance.role = rowData;
+      this.isEditMode = true;
+      modalRef.componentInstance.isEditMode = true;
+    }else{
+      modalRef.componentInstance.role  = {};
+      this.isEditMode = false;
+      modalRef.componentInstance.isEditMode = false;
+    }
+    modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+      if(receivedEntry){
+        this.availableRoles = [];
+        this.getRole(this.roleId);
+      }
+    });
+  }
+
+  toggleRole(_element) {
+    let activeOrInactive = (_element.active) ? 'activate' : 'inactivate';
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = 'Confirmation';
+    modalInfoRef.componentInstance.message = 'You are about to ' + activeOrInactive + ' the role ' + _element.name + '. Do you want to continue?';
+    modalInfoRef.result.then((_res) => {
+      if (_res === 'Ok') {
+        this.showSpinner = true;
+        let postData={
+          role: _element, 
+          childRoles: _element.childRoles, 
+          roleFunctions : _element.roleFunctions
+        };
+        this.adminService.saveRole(postData, _element.id)
+        .subscribe( _data => {
+          this.showSpinner = false;
+        }, (response) => {
+          _element.active = !_element.active;
+          const modalErrorRef = this.ngbModal.open(InformationModalComponent);
+          modalErrorRef.componentInstance.title = 'Error';
+          modalErrorRef.componentInstance.message = 'Error while saving. ' + response.restCallStatus;
+        });
+      } else {
+        _element.active = !_element.active;
+      }
+
+    }, (result) => {
+
+    })
+  }
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.html
index 9321c0d2..402d5e0a 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.html
@@ -1,53 +1,49 @@
-<div id="page-content">
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  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============================================
+   
+-->
+
+<div class="container">
+  <div id="page-content">
     <div>
       <h1 class="heading-page" id="Usage">Current Usage</h1>
     </div>
-      
-      <h3 class="heading-small">
-        The following table shows all current user sessions. Click the icon to end a user's session.
-      </h3>
-  
-          <table mat-table [dataSource]="users" matSort>
-            <ng-container matColumnDef="userId">
-              <th mat-header-cell *matHeaderCellDef  id="heading1"> User Id</th>
-              <td mat-cell *matCellDef="let rowData"> {{rowData.id}} </td>
-            </ng-container>
-        
-            <ng-container matColumnDef="userName">
-              <th mat-header-cell *matHeaderCellDef  id="heading2"> User Name </th>
-              <td mat-cell *matCellDef="let rowData"> {{rowData.lastName}} </td>
-            </ng-container>
-        
-            <ng-container matColumnDef="email">
-              <th mat-header-cell *matHeaderCellDef  id="heading3">Email</th>
-              <td mat-cell *matCellDef="let rowData"> {{rowData.email}}</td>
-            </ng-container>
-        
-            <ng-container matColumnDef="lastAccessTime">
-              <th mat-header-cell *matHeaderCellDef  id="heading4"> Last Access Time (minutes)</th>
-              <td mat-cell *matCellDef="let rowData" > {{rowData.lastAccess}} </td>
-            </ng-container>
-    
-            <ng-container matColumnDef="timeRemaining">
-              <th mat-header-cell *matHeaderCellDef  id="heading5"> Time Remaining (minutes) </th>
-              <td mat-cell *matCellDef="let rowData" > {{rowData.remaining}} </td>
-            </ng-container>
-    
-            <ng-container matColumnDef="userSession">
-              <th mat-header-cell *matHeaderCellDef  id="heading6"> Expire User Session? </th>
-              <td mat-cell *matCellDef="let rowData"> 
-                  <div>Current Session</div>
-                  <div (click)="removeSession(user.sessionId);" 
-                    style="font-size:20px;text-align:center">
-                    <a href="javascript:void(0)" *ngIf="rowData.delete=='yes'" class="icon-misc-trash" ></a>
-                  </div>
-              
-              </td>
-            </ng-container>
-         
-        <tr mat-header-row *matHeaderRowDef="usageHeaders"></tr>
-        <tr mat-row *matRowDef="let rowData; columns: usageHeaders;">
-    
-          </table> 
-  
-  </div>
\ No newline at end of file
+    <h4 class="heading-small">
+      The following table shows all current user sessions. Click the icon to end a user's session.
+    </h4>
+    <!-- RDP datatable -->
+    <rdp-data-table [data]="users" [settings]="settings"></rdp-data-table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.scss
index c9ab8db4..7dd0a4ec 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.scss
@@ -1,3 +1,41 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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============================================
+ *
+ * 
+ */
+
 table {
     width: 100%;
   }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.spec.ts
index 40b7df06..d6812789 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.spec.ts
@@ -1,3 +1,41 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UsageComponent } from './usage.component';
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.ts
index 705bf475..d5121909 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.ts
@@ -1,5 +1,44 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 { Component, OnInit } from '@angular/core';
 import { AdminService } from '../admin.service';
+import { Column, DataTableSettings, ColumnTypes } from 'portalsdk-tag-lib';
 
 @Component({
   selector: 'app-usage',
@@ -10,19 +49,34 @@ export class UsageComponent implements OnInit {
 
   response: any;
   result: any;
-  users:any;
-
-  usageHeaders = ["userId","userName","email","lastAccessTime","timeRemaining","userSession"];
+  users: any;
+  public settings;
+  public columns: any = [];
 
-	constructor(public adminService: AdminService) { }
+  constructor(public adminService: AdminService) { }
 
   ngOnInit() {
     this.adminService.getUsageList()
-    .subscribe(data => {
-      this.response = data;
-      this.users   = JSON.parse(this.response.data);
-     
-    });
+      .subscribe(data => {
+        this.response = data;
+        this.users = JSON.parse(this.response.data);
+        //adding Current Session property to each users
+        this.users.forEach(element => {
+          Object.assign(element, {"currentSession":"Current Session"});
+        });
+        this.columns.push(new Column("id", "User Id", ColumnTypes.TEXT, false, null));
+        this.columns.push(new Column("lastName", "User Name",ColumnTypes.TEXT, false, null));
+        this.columns.push(new Column("email", "Email", ColumnTypes.TEXT, false, null));
+        this.columns.push(new Column("lastAccess", "	Last Access Time (minutes)", ColumnTypes.TEXT, false, null));
+        this.columns.push(new Column("remaining", "Time Remaining (minutes)", ColumnTypes.TEXT, false, null));
+        this.columns.push(new Column("currentSession", "Expire User Session?", ColumnTypes.TEXT, false, null));
+
+        this.settings = new DataTableSettings()
+        this.settings.columns = this.columns;
+        this.settings.isPaginationEnabled = false;
+        this.settings.isReadOnly = true;
+        this.settings.isTableSearchEnabled = false;
+      });
   }
 
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.module.ts
index c2105323..3c1f1769 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.module.ts
@@ -1,3 +1,41 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 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 { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UsageComponent } from './usage.component';
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts
index f491f372..42544a72 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.spec.ts
@@ -3,11 +3,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormFieldsComponent } from './form-fields.component';
 
 describe('FormFieldsComponent', () => {
-  let component: FormFieldsComponent;    
+  let component: FormFieldsComponent;
   let fixture: ComponentFixture<FormFieldsComponent>;
-                                     
+
   beforeEach(async(() => {
-    TestBed.configureTestingModule({    
+    TestBed.configureTestingModule({
       declarations: [ FormFieldsComponent ]
     })
     .compileComponents();
@@ -17,50 +17,9 @@ describe('FormFieldsComponent', () => {
     fixture = TestBed.createComponent(FormFieldsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  }); 
+  });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should test ngOnInit function', () => {
-    component.ngOnInit();
-  });
-
-  it('should test isLast functions', () =>{
-    component.formFieldsListObj = [1,2,3,4,5];
-    let test: Boolean =  component.isLast(3);
-    expect(test).toEqual(false);
-  });
-
-  it('should test isFirst function', () => {
-    let test: Boolean = component.isFirst(0);
-    expect(test).toEqual(true);
-  });
-
-  it('should test ngDoCheck', () => {
-    component.sqlAsDefaultValue = true;
-    component.ngDoCheck();
-    expect(component.showDefaultSQLOption).toEqual(true);    
-  });
-
-  it('should test close function', () => {
-    component.close();
-    expect(component.closable).toEqual(false);
-  });
-
-  it('should test closeValidateModal', () => {
-    component.closeValidateModal();
-    expect(component.showSpinner).toEqual(false);
-  });
-
-  it('should test openDialog method', () => {
-    expect(component.openDialog).toHaveBeenCalled();
-  });
-
-  it('should test openSnackBar method', () => {
-    component.openSnackBar("Just", "for testing");
-    expect(component.openSnackBar).toHaveBeenCalled();
-  })
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/log/log.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/log/log.component.spec.ts
index a0d81915..250affed 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/log/log.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/log/log.component.spec.ts
@@ -22,9 +22,4 @@ describe('LogComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-	
-    it('should test ngOnInit method', () => {
-    expect(component.ngOnInit).toHaveBeenCalled;
-  })
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.spec.ts
index 55161812..a273f9e0 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.spec.ts
@@ -22,18 +22,4 @@ describe('RunReportFormFieldsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should test ngOnInit method', () =>{
-    component.ngOnInit();
-    expect(component.showSpinner).toEqual(true);
-    expect(component.navigateToRun).toEqual(false);
-  });
-
-  it('should test QueryString method', () =>{
-      component.directCallQueryParams == "test";
-      component.getQueryString();
-      expect(component.getQueryString).toEqual("test");
-  })
-
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
index b897f149..f1d53d9e 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
@@ -31,33 +31,4 @@ describe('RunReportFinalTableComponent', () => {
   it('should compile', () => {
     expect(component).toBeTruthy();
   });
-
- it('should  test ngOnInit method ', () => {
-      component.ngOnInit();
-      expect(component.initialProcesses()).toHaveBeenCalled();
-  });
-
-  it('should test initialProcess method', () => {
-    component.DashboardReportObj.length = 1;
-      component.initialProcesses();
-      expect(component.options.scrollSpeed).toEqual(20);
-  });
-
-  it('should test showError method', () => {
-       component.showError("abc");
-       expect(component.error).toEqual(true);
-       expect(component.showSpinner).toEqual(false);
-  });
-
-  it('should test afterViewInitialProcesses method ', () =>{
-       component.DashboardReportObj.length === 0;
-       component.reportMode === "Regular";
-       component.initCnt == 0;
-
-       component.afterViewInitialProcesses();
-       expect(component.showMoreVert).toEqual(false);
-       expect(component.NEWdisplayedColumns).toEqual(new Array());
-  });
-
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/pages.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/pages.module.ts
index adb31726..37231147 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/pages.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/pages.module.ts
@@ -70,7 +70,7 @@ import { RunDashboardReportComponent } from './analytics/Report_List/Report/run/
 
 
 
-
+import { RdpModule } from 'portalsdk-tag-lib';
 
 @NgModule({
   declarations: [
@@ -151,7 +151,7 @@ import { RunDashboardReportComponent } from './analytics/Report_List/Report/run/
     MatButtonModule,
     LayoutModule,
     GridsterModule,
-
+	RdpModule
     
   ],
   entryComponents:[DialogOverviewExampleDialog, InformationModalComponent,RolesComponent,SuccessModalComponent,ErrorModalComponent],
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.spec.ts
index e1af3d4c..d6d659b9 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.spec.ts
@@ -1,32 +1,15 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { HttpClientModule } from '@angular/common/http'; 
 
 import { UserService } from './user.service';
-import { User } from './user';
 
 describe('UserService', () => {
-
-  let service: UserService ;
-  let dummyUser: User;
-
-  beforeEach( () =>
-   TestBed.configureTestingModule({
-    imports:[HttpClientModule],
-    providers: [UserService],
-   }),
-  );
+  beforeEach(() => TestBed.configureTestingModule({
+    imports:[HttpClientModule]
+  }));
 
   it('should be created', () => {
     const service: UserService = TestBed.get(UserService);
     expect(service).toBeTruthy();
   });
-
-  it('should test getFunctionalMenuStaticDetailSession2', () =>{
-  
-      let response: Object = service.getFunctionalMenuStaticDetailSession2();
-      expect(response).toEqual(User);
-
-  });
-
-
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/app.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/app.scss
index 8e1bc797..ed545d73 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/app.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/app.scss
@@ -1,11 +1,122 @@
+/*-
+ * ============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============================================
+ *
+ *
+ */
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import "bootstrap/bootstrap";
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 @import "utils";
 @import "responsive";
+@import "spinner";
+
+body {
+  font-family: "Open Sans", Arial, sans-serif !important;
+}
+
+.cdk-global-overlay-wrapper, .cdk-overlay-container {
+  z-index: 99999 !important;
+}
+
+table {
+  width: 100%;
+}
+
+.modal-content {
+  border-radius: 0.6rem !important;
+}
+
+.modal-header {
+  border-bottom: none;
+}
+
+.modal-dialog {
+  max-width: 565px;
+}
+
+.btn{
+  border: 1px solid transparent;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: normal;
+  line-height: 1;
+  margin: 0 7px 10px 0;
+  max-width: 470px;
+  min-width: 70px;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.btn.btn-primary {
+  float: right;
+  border-color: #087ac2 transparent #0568ae;
+  background-color: #0568ae;
+  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+  color: #ffffff;
+  border: 1px solid transparent;
+  padding: 10px 19px 9px 18px;
+  border-radius: 8px;
+}
 
 @media print {
-    .breadcrumb {
-        display: none !important;
-    }
+  .breadcrumb {
+    display: none !important;
+  }
+}
+
+.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: #0878bf;
+}
+
+.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color: #f8f9fa;
+}
+
+.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: #0878bf;
 }
+
+.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
+  background-color: #0878bf;
+}
+
+.mat-grid-tile .mat-figure{top:87;left:0;right:0;bottom:0;position:absolute;display:flex;align-items:initial !important;justify-content:flex-start !important;height:100%;padding:0;margin:0}
+.mat-ink-bar{ height: 0px !important;}
+.mat-tab-label{font-weight: 1000;}
-- 
cgit 1.2.3-korg