Adding missed sdk files

Adding missed sdk files

Issue-ID: PORTAL-830
Signed-off-by: Muni Mohan Kunchi <munmohan@att.com>
Change-Id: I784f49cb3cf724c4bacd3d4aaf5ae444fca5ba35

33 files changed, 3021 insertions, 0 deletions

diff --git a/ecomp-sdk/epsdk-app-os/src/main/webapp/assets/images/spinner.gif b/ecomp-sdk/epsdk-app-os/src/main/webapp/assets/images/spinner.gif
new file mode 100644
index 00000000..c97ec6ea
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/src/main/webapp/assets/images/spinner.gif
diff --git a/ecomp-sdk/epsdk-app-os/src/main/webapp/spinner.gif b/ecomp-sdk/epsdk-app-os/src/main/webapp/spinner.gif
new file mode 100644
index 00000000..c97ec6ea
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/src/main/webapp/spinner.gif
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.html
new file mode 100644
index 00000000..64b6bbd7
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.html
@@ -0,0 +1,52 @@
+<!--
+  ============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============================================
+ 
+  
+  -->
+
+<div class="container">
+    <div class="modal-header">
+        <h4 class="modal-title">{{title}}</h4>
+        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <p>{{message}}</p>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Close</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.scss
new file mode 100644
index 00000000..3c1a547b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.scss
@@ -0,0 +1,38 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+@import '../../pages/pages.component';
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.spec.ts
new file mode 100644
index 00000000..bc3516e8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.spec.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmationModalComponent } from './confirmation-modal.component';
+
+describe('ConfirmationModalComponent', () => {
+  let component: ConfirmationModalComponent;
+  let fixture: ComponentFixture<ConfirmationModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmationModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.ts
new file mode 100644
index 00000000..774cff23
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/modals/confirmation-modal/confirmation-modal.component.ts
@@ -0,0 +1,55 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Component, OnInit, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-confirmation-modal',
+    templateUrl: './confirmation-modal.component.html',
+    styleUrls: ['./confirmation-modal.component.scss']
+})
+export class ConfirmationModalComponent implements OnInit {
+
+    @Input() title: string;
+    @Input() message: string;
+    constructor(public activeModal: NgbActiveModal) { }
+
+    ngOnInit() {
+    }
+
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.service.ts
new file mode 100644
index 00000000..1b22cf28
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.service.ts
@@ -0,0 +1,139 @@
+
+/*
+ * ============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 { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { RdpCrudInterface } from 'portalsdk-tag-lib';
+import { environment } from 'src/environments/environment';
+import { AdminService } from '../admin.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenusService implements RdpCrudInterface {
+
+  parentDataList: any;
+  constructor(private http: HttpClient, private adminService: AdminService) {
+
+  }
+
+
+  menu = {
+    action: null,
+    active: false,
+    activeAsString: "false",
+    auditTrail: null,
+    auditUserId: null,
+    childMenus: [],
+    created: null,
+    createdId: null,
+    externalUrl: null,
+    functionCd: null,
+    id: null,
+    imageSrc: null,
+    label: null,
+    menuLevel: null,
+    menuSetCode: null,
+    modified: null,
+    modifiedId: null,
+    parentId: null,
+    parentIdAsString: null,
+    parentMenu: null,
+    queryString: null,
+    rowNum: null,
+    separator: false,
+    separatorAsString: false,
+    servlet: null,
+    sortOrder: null,
+    target: null
+  };
+
+  add(data: any) {
+    console.log("Add method is getting called from AppServie data:: ", data);
+  }
+
+
+  update(data: any) {
+    data.active = this.updateStatus(data.active);
+    data.separator = this.updateStatus(data.separator);
+    let keys = Object.keys(data);
+    keys.forEach(element => {
+      if (data[element] != null || data[element] != undefined) {
+        if (element == 'parentId') {
+          this.menu[element] = 1;
+        } else {
+          this.menu[element] = data[element];
+        }
+      }
+    });
+    let result = { availableFnMenuItem: this.menu };
+    let postData = JSON.stringify(result);
+    console.log("postData >>>>>>", postData);
+    this.adminService.updateFnMenuItem(postData)
+      .subscribe(_data => {
+        console.log("Response : ", _data);
+      }, error => {
+        console.log("Error : ", error);
+      });
+
+  }
+
+  delete(data: any) {
+    console.log("Delete method is getting called from AppServie data::>> " + JSON.stringify(data));
+    console.log(data.active);
+    data.active = this.updateStatus(data.active);
+    data.separator = this.updateStatus(data.separator);
+    let result = { availableFnMenuItem: data };
+    this.adminService.deleteMenu(result).subscribe(response => {
+      console.log("Response ", response);
+    })
+  }
+
+  private updateStatus(data) {
+    if (data == 'N') {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  get(data: any) {
+    console.log("get method is getting called from AppServie data:: ", data);
+  }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.html
new file mode 100644
index 00000000..6a5426a8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.html
@@ -0,0 +1,137 @@
+<!--
+  ============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">
+  <!--Modal Headers-->
+  <div class="modal-header">
+    <h4 class="modal-title">{{(isEditMode) ? 'Edit Menu Item' : 'Add New Menu Item'}}</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  
+  <!--Modal Body goes here-->
+  <div class="modal-body">
+    <div class="elementsContainer">
+      <div class="groupItem">
+        <label class="item-label">*Label:</label><br>
+        <input [(ngModel)]="menu.label" type="text" name="label" id="label">
+      </div>
+      <div class="groupItem">
+        <label class="item-label">*Parent:</label><br>
+        <!-- <input [(ngModel)]="menu.parentId" type="text" name="parentId"  id="parent"> -->
+        <select class="form-field" name="parentSelect" id="parentSelect" [(ngModel)]="menu.parentId">
+          <option>{{getParentLabel(menu.parentId, parentListSelectData)}}</option>
+          <option *ngFor="let option of parentListSelectData" value="{{option[0]}}">{{option[1]}}</option>
+        </select>
+      </div>
+      <div class="groupItem">
+        <label class="item-label">*Sort Order</label><br>
+        <input [(ngModel)]="menu.sortOrder" type="text" name="sortOrder"  id="sortOrder">
+      </div>
+      <div class="groupItem">
+        <label class="item-label">*Action</label><br>
+        <input [(ngModel)]="menu.action" type="text" name="action"  id="action">
+      </div>
+    </div>
+
+    <br>
+
+	  <div class="elementsContainer">
+      <div class="groupItem"> 
+        <label class="item-label"><b>*</b>Function:</label><br>
+        <select class="form-field" name="repeatSelect" id="repeatSelect" [(ngModel)]="menu.functionCd">
+          <option>{{menu.functionCd}}</option>
+          <option *ngFor="let item of functionCDselectData" value="{{item}}" >{{item}}</option>
+        </select> 
+      </div>
+      <div class="groupItem">
+        <label class="item-label"><b>*</b>Active:</label><br>
+        <select class="form-field" name="selectActive" ng-model="menu.active">
+          <option *ngFor="let active of activeStatusOptions" value="{{active.value}}">{{active.title}}</option>
+        </select>
+      </div>
+      <div class="groupItem">
+        <label class="item-label">Servlet:</label><br>
+        <input [(ngModel)]="menu.servlet" type="text" name="servlet"  id="servlet">
+      </div>
+      <div class="groupItem">
+        <label class="item-label">Query String:</label><br>
+        <input [(ngModel)]="menu.queryString" type="text" name="queryString"  id="queryString">
+      </div>
+    </div>
+
+    <br>
+
+	  <div class="elementsContainer">
+      <div class="groupItem">
+        <label class="item-label">External URL:</label><br>
+        <input [(ngModel)]="menu.externalUrl" type="text" name="externalURL"  id="externalURL">
+      </div>
+      <div class="groupItem">
+        <label class="item-label">Target:</label><br>
+        <input [(ngModel)]="menu.target" type="text" name="target"  id="target">
+      </div>
+      <div class="groupItem">
+        <label class="item-label"><b>*</b>Menu Set Code:</label><br>
+        <input [(ngModel)]="menu.menuSetCode" type="text" name="menuSetCode"  id="menuSetCode">
+      </div>
+      <div class="groupItem">
+        <label class="item-label"><b>*</b>Separator:</label><br>
+        <select class="form-field" name="select" ng-model="menu.separator">
+          <option *ngFor="let separator of separatorStatusOptions" value="{{separator.value}}">{{separator.title}}</option>
+        </select>
+      </div>
+    </div>
+
+    <br>
+
+	  <div class="elementsContainer">
+      <div class="groupItem">
+        <label class="item-label">Image Source:</label><br>
+        <input [(ngModel)]="menu.imageSrc" type="text" name="imageSource"  id="imageSource">
+      </div>
+	  </div>
+    
+  </div>
+  <!--Modal Footer goes Here-->
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" (click)="updateFnMenu()">Save</button> &nbsp;
+    <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+  </div>
+</div>
+  
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.scss
new file mode 100644
index 00000000..a8b5f966
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.scss
@@ -0,0 +1,71 @@
+/*
+ * ============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============================================
+ *
+ * 
+ */
+ 
+::ng-deep .modal-dialog { 
+    max-width: 1200px;
+    width: 883px;
+    overflow-x: auto;
+    overflow-y: auto;
+} 
+
+table {
+    width: 100%;
+}
+
+body { 
+    font-family: Roboto, Arial, sans-serif;
+    margin: 0;
+}
+
+.elementsContainer{
+    display: inline-flex;
+}
+
+.groupItem{
+    margin-right: 11px;
+    margin-bottom: 10px;
+}
+
+.form-field{
+    height: 30px;
+    width: 198px
+}
+
+.item-label{
+    margin-bottom: 1px;
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.spec.ts
new file mode 100644
index 00000000..860c0169
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.spec.ts
@@ -0,0 +1,63 @@
+/*
+ * ============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 { NewMenuComponent } from './new-menu.component';
+
+describe('NewMenuComponent', () => {
+  let component: NewMenuComponent;
+  let fixture: ComponentFixture<NewMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.ts
new file mode 100644
index 00000000..4acf2252
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/new-menu/new-menu.component.ts
@@ -0,0 +1,275 @@
+/*
+ * ============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, Input, Output, EventEmitter } from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AdminService } from '../../admin.service';
+import { SidebarComponent } from 'src/app/layout/components/sidebar/sidebar.component';
+import { Router } from '@angular/router';
+import { SidebarService } from 'src/app/shared/services';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { CookieService } from 'ngx-cookie-service';
+
+@Component({
+  selector: 'app-new-menu',
+  templateUrl: './new-menu.component.html',
+  styleUrls: ['./new-menu.component.scss']
+})
+export class NewMenuComponent implements OnInit {
+
+  menu = {
+    action: null,
+    active: false,
+    activeAsString: "false",
+    auditTrail: null,
+    auditUserId: null,
+    childMenus: [],
+    created: null,
+    createdId: null,
+    externalUrl: null,
+    functionCd: null,
+    id: null,
+    imageSrc: null,
+    label: null,
+    menuLevel: null,
+    menuSetCode: null,
+    modified: null,
+    modifiedId: null,
+    parentId: null,
+    parentIdAsString: null,
+    parentMenu: null,
+    queryString: null,
+    rowNum: null,
+    separator: false,
+    separatorAsString: false,
+    servlet: null,
+    sortOrder: null,
+    target: null
+  }
+  showSpinner: boolean;
+  result: any;
+  //menu: any;
+  @Input() selectedMenu: any;
+  @Input() isEditMode: boolean;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+
+  statusOptions = [        
+    {index: 0, value: 'true', title: 'Y'},
+    {index: 1, value: 'false', title: 'N'}
+  ];
+  selectedValue = this.statusOptions[0];
+  separator = {
+    availableOptions:[
+      {value: 'true',  name: 'Y'},
+      {value: 'false', name: 'N'}
+    ],       
+    selectedOption: {value: 'true', name: 'Y'}              
+  }
+
+  activeStatusOptions = [        
+    {index: 0, value: 'true', title: 'Y'},
+    {index: 1, value: 'false', title: 'N'}
+  ];
+  activeSelectedValue = this.activeStatusOptions[0];
+
+  separatorStatusOptions = [        
+    {index: 0, value: 'true', title: 'Y'},
+    {index: 1, value: 'false', title: 'N'}
+  ];
+  separatorSelectedValue = this.separatorStatusOptions[1];
+
+  active = {
+    availableOptions:[
+      {value: 'true',  name: 'Y'},
+      {value: 'false', name: 'N'}
+    ],
+    selectedOption: {value: 'true', name: 'Y'}           
+  };
+
+  functionCDselectData = [];
+  parentListSelectData = [];
+  childListSelectData = [];
+
+  constructor(public adminService: AdminService, public activeModal: NgbActiveModal, 
+    public ngmodel: NgbModal, public router: Router, public sidebarService: SidebarService,public cookieService:CookieService) { }
+
+  ngOnInit() {
+    if(this.selectedMenu){
+     this.menu = this.selectedMenu;
+    }else{
+      this.menu.menuSetCode='APP';
+    }
+    //console.log("selected menu >>>>",this.menu);
+    this.getFunctionCDselectData();
+    this.getParentData();
+  }
+
+  getParentData(){
+    this.showSpinner = true;
+    this.adminService.getParentData()
+    .subscribe( _data => {
+      //console.log("getParentData :: _data ",_data);
+      this.result = _data;
+      if(_data){
+        this.parentListSelectData= _data;		// data from server
+        let menuItems = this.parentListSelectData;
+        var heirarchicalMenuItems = [];
+        var children = [];
+        for ( var i=0; i<menuItems.length; i++){
+          for(var j=0; j<menuItems.length; j++){
+            if(menuItems[j][2]==menuItems[i][0]) 
+              children.push(
+                {
+                  menuId: menuItems[j][0],
+                  label:  menuItems[j][1]
+                }
+              );
+          }
+          if(children.length!=0){
+            heirarchicalMenuItems.push(
+                {
+                  menuId: menuItems[i][0],
+                  label:  menuItems[i][1],
+                  children: children.sort(this.sortItems("label"))
+                }
+            
+            );
+          }
+          children = [];
+        }
+        heirarchicalMenuItems.sort(this.sortItems("label"));
+        this.childListSelectData = heirarchicalMenuItems;
+        //console.log("childListSelectData ::: ",this.childListSelectData);
+        //console.log("heirarchicalMenuItems ::: ",heirarchicalMenuItems);
+        //console.log("parentListSelectData ::: ",this.parentListSelectData);
+      }
+    }, error => {
+      this.showSpinner = false;
+      console.log(error);
+    });
+  }
+
+  sortItems(prop){
+    return function(a, b) {  
+      if (a[prop] > b[prop]) {  
+          return 1;  
+      } else if (a[prop] < b[prop]) {  
+          return -1;  
+      }  
+      return 0;  
+    }        
+  }
+  
+  getParentLabel(parentId, parentListSelectData){
+    var element;
+    element = parentListSelectData[0];
+    for (var i=0; i<parentListSelectData.length; i++){
+      element = parentListSelectData[i];
+      if (element[0] == parentId)                    
+          return element[1];
+      else "---";
+    }
+  }
+
+  updateFnMenu(){
+    this.showSpinner = true;
+    //console.log("updateFnMenu Changes Called..",this.menu);
+    if( this.menu && this.menu.imageSrc == "" ) this.menu.imageSrc = "N/A";
+    if( this.menu && this.menu.target == "" ) this.menu.target = "N/A";
+    if( this.menu && this.menu.externalUrl == "" ) this.menu.externalUrl = "N/A";
+    if( this.menu && this.menu.queryString == "" ) this.menu.queryString = "N/A";
+    if( this.menu && this.menu.servlet == "" ) this.menu.servlet = "N/A";
+
+    let validationRule = /^\S{3,}$/;
+    let selectedFunction = this.menu.functionCd;
+    var selectedFunctionText = this.menu.functionCd; //selectedFunction.options[selectedFunction.selectedIndex].text;
+
+    if((this.menu.label == null || this.menu.label == "" || (this.menu.label && this.menu.label.trim().length == 0) ) ||
+      this.menu.parentId == null || this.menu.parentId == "" || this.menu.action == null || this.menu.action == "" ||
+      selectedFunctionText == null || selectedFunctionText == "" || this.menu.sortOrder == null || this.menu.sortOrder == "" ||
+      this.menu.menuSetCode == null ||this.menu.menuSetCode == ""){
+
+      this.openConfirmationModal('','Please provide all the mandatory (*) fields inputs !');
+      return;
+    }else{
+      this.menu.parentId=parseFloat(this.menu.parentId);
+      let data ={availableFnMenuItem: this.menu};
+      let postData = JSON.stringify(data);
+      //console.log("postData >>>>>>",postData);
+      this.adminService.updateFnMenuItem(postData)
+      .subscribe( _data => {
+        this.result = _data;
+        this.passEntry.emit(this.result);
+        this.ngmodel.dismissAll(); 
+      }, error => {
+        this.showSpinner = false;
+        console.log(error);
+        this.openConfirmationModal("Error",error);
+      });
+      this.getLeftMenuItems();
+    }
+
+  }
+
+  getLeftMenuItems(){
+    //console.log("getLeftMenuItems called after update menu");
+    let  sidebarComponent = new SidebarComponent(this.router, this.sidebarService,this.cookieService);
+    sidebarComponent.ngOnInit();
+  }
+
+  getFunctionCDselectData = function(){
+    this.adminService.getFunctionCdList()
+    .subscribe( _data => {
+      this.result = _data;
+      if(_data){
+        this.functionCDselectData = _data;
+      }
+    }, error => {
+      this.showSpinner = false;
+      console.log(error);
+      this.openConfirmationModal("","Function Code Data not available !");
+    });
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngmodel.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.html
new file mode 100644
index 00000000..888deca8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.html
@@ -0,0 +1,101 @@
+<!--
+  ============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="modal-header">
+        <h4 class="modal-title">{{title}}</h4>
+        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+          <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+        <form>
+          <fieldset class="form-group">
+            <div class="row">
+              <legend class="col-form-label col-sm-2 pt-0">Type</legend>
+              <div class="col-sm-10">
+                <div class="form-check">
+                  {{selectedType}}
+                  <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group"
+                    [(ngModel)]="selectedType" name="type">
+                    <mat-radio-button class="example-radio-button" [disabled]="editDisable" *ngFor="let type of typeOptions" [value]="type">
+                      {{type}} &nbsp;
+                    </mat-radio-button>
+                  </mat-radio-group>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+          <div *ngIf="selectedType === 'other'" class="form-group row">
+            <label for="inputOtherType" class="col-sm-2 col-form-label"></label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" [disabled]="editDisable" [(ngModel)]="otherTypeValue" name="type2" id="inputOtherType"
+                placeholder="Type">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="inputInstance" class="col-sm-2 col-form-label">Instance</label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" [disabled]="editDisable" [(ngModel)]="roleFunction.code" name="code" id="inputInstance"
+                placeholder="Instance">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="inputAction" class="col-sm-2 col-form-label">Action</label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" [disabled]="editDisable" [(ngModel)]="roleFunction.action" name="action" id="inputAction"
+                placeholder="Action">
+            </div>
+          </div>
+          <div class="form-group row">
+            <label for="inputName" class="col-sm-2 col-form-label">Name</label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" [(ngModel)]="roleFunction.name" name="name" id="inputName"
+                placeholder="Name">
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary"
+          [disabled]="(selectedType === 'other' && otherTypeValue.length === 0 ) || (roleFunction.code.length === 0 || roleFunction.action.length === 0 || roleFunction.name.length === 0)"
+          (click)="saveRoleFunction()">Save</button> &nbsp;
+        <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+      </div>
+    </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/new-role-function/new-role-function.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.scss
new file mode 100644
index 00000000..56cb1aa3
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.scss
@@ -0,0 +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============================================
+ *
+ * 
+ */
+ .ecomp-spinner{
+    z-index: 9999;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.spec.ts
new file mode 100644
index 00000000..8ea56afc
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.spec.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============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 { NewRoleFunctionComponent } from './new-role-function.component';
+
+describe('NewRoleFunctionComponent', () => {
+  let component: NewRoleFunctionComponent;
+  let fixture: ComponentFixture<NewRoleFunctionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewRoleFunctionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewRoleFunctionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.ts
new file mode 100644
index 00000000..82d353d1
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/new-role-function/new-role-function.component.ts
@@ -0,0 +1,174 @@
+/*-
+ * ============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, Input, Output, EventEmitter } from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { RoleFunction } from '../role-function';
+import { HttpClient } from '@angular/common/http';
+import { AdminService } from '../../admin.service';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+
+@Component({
+  selector: 'app-new-role-function',
+  templateUrl: './new-role-function.component.html',
+  styleUrls: ['./new-role-function.component.scss']
+})
+export class NewRoleFunctionComponent implements OnInit {
+
+  @Input() title: string;
+  @Input() appId: any;
+  @Input() dialogState: number;
+  @Input() currentRoleFunctions: any;
+  @Input() editRoleFunction: RoleFunction;
+  @Output() passBackRoleFunctionPopup: EventEmitter<any> = new EventEmitter();
+  roleFunction: RoleFunction;
+  otherTypeValue: string;
+  typeOptions: string[] = ['menu', 'url', 'other'];
+  api = '';
+  isEditing: any;
+  editDisable: boolean;
+  showSpinner: boolean;
+  selectedType: string;
+  createOrUpdate: string;
+  constructor(public adminService: AdminService, public activeModal: NgbActiveModal, public ngbModal: NgbModal, public http: HttpClient) { }
+
+  ngOnInit() {
+    this.createOrUpdate = 'create';
+    this.selectedType = 'menu';
+    this.roleFunction = new RoleFunction(this.selectedType, '', '*', '');
+    this.otherTypeValue = '';
+    if (this.editRoleFunction) {
+      this.createOrUpdate = 'update';
+      this.editDisable = true;
+      if (this.editRoleFunction.type !== 'menu' && this.editRoleFunction.type !== 'url') {
+        this.selectedType = 'other';
+        this.otherTypeValue = this.editRoleFunction.type;
+      }else{
+        this.selectedType = this.editRoleFunction.type;
+      }
+      this.roleFunction = new RoleFunction(this.editRoleFunction.type, this.editRoleFunction.code, this.editRoleFunction.action, this.editRoleFunction.name);
+    }
+  }
+
+  saveRoleFunction() {
+    if (/[^a-zA-Z0-9\-\.\_]/.test(this.roleFunction.type)) {
+      this.openConfirmationModal('Confirmation', 'Type can only contain alphanumeric characters, dots(.) and underscores(_)');
+      return;
+    }
+    if (this.roleFunction.action !== '*' && /[^a-zA-Z0-9\-\.\_]/.test(this.roleFunction.action)) {
+      this.openConfirmationModal('Confirmation', 'Action can only contain alphanumeric characters, hyphens(-), dots(.) and underscores(_) and single asterisk character(*)');
+      return;
+    }
+    if (/[^a-zA-Z0-9\-\:\_\./*]/.test(this.roleFunction.code)) {
+      this.openConfirmationModal('Confirmation', 'Instance can only contain alphanumeric characters, hyphens(-), dots(.), colons(:), forwardSlash(/) , asterisk(*) and underscores(_)');
+      return;
+    }
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = 'Confirmation';
+    modalInfoRef.componentInstance.message = 'You are about to ' + this.createOrUpdate + ' the role function ' + this.roleFunction.name + '. Do you want to continue?';
+    modalInfoRef.result.then((_res) => {
+      if (_res === 'Ok') {
+        this.showSpinner = true;        
+        var exists = false, x;
+        for (x in this.currentRoleFunctions) {
+          if (this.currentRoleFunctions[x].type == this.roleFunction.type
+            && this.currentRoleFunctions[x].code == this.roleFunction.code
+            && this.currentRoleFunctions[x].action == this.roleFunction.action
+            && this.currentRoleFunctions[x].name == this.roleFunction.name) {
+            this.openConfirmationModal('Confirmation', "Role Function already exist.");
+            exists = true;
+            this.showSpinner = false;
+            break;
+          }
+          if (!this.editDisable) {
+            if (this.currentRoleFunctions[x].type == this.roleFunction.type
+              && this.currentRoleFunctions[x].code == this.roleFunction.code
+              && this.currentRoleFunctions[x].action == this.roleFunction.action
+            ) {
+              this.openConfirmationModal('Confirmation', "Please make sure code, type and action is unique. Please create a role function with a different code or type or action to proceed.");
+              exists = true;
+              this.showSpinner = false;
+              break;
+            }
+          }
+        }
+
+        if (this.selectedType === 'other'){
+          this.roleFunction.type = this.otherTypeValue;
+        }else{
+          this.roleFunction.type = this.selectedType;
+        }
+        
+        if (!exists && this.roleFunction.name.trim() != '' && this.roleFunction.code.trim() != '') {
+          var postData = this.roleFunction;
+          console.log("saveRoleFunction post data :: ",postData);
+          this.adminService.saveRoleFunction(JSON.stringify(postData))
+          .subscribe(_data => {
+            this.showSpinner = false;
+            console.log("saveRoleFunction response",_data);
+            if (this.editRoleFunction) {
+              this.editRoleFunction.name = this.roleFunction.name;
+              this.passBackRoleFunctionPopup.emit(this.editRoleFunction);
+            } else{
+              this.passBackRoleFunctionPopup.emit(this.roleFunction);
+            }
+            if (this.editRoleFunction) {
+               this.openConfirmationModal('Success', "Role function updated successfully.");
+            }else{
+              this.openConfirmationModal('Success', "Role function created successfully.");
+            }  
+          }, error =>{
+            console.log(error);
+            this.showSpinner = false;
+            this.openConfirmationModal('Error', error.message);
+          });
+        }
+      }
+    }, (_dismiss) => {
+
+    })
+  }
+
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.service.ts
new file mode 100644
index 00000000..9d931d1d
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { RdpCrudInterface } from 'portalsdk-tag-lib';
+import { AdminService } from '../admin.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RoleFunctionsService implements RdpCrudInterface {
+
+  constructor(private adminService: AdminService) { }
+
+  add(data: any) {
+    console.log("Add method is getting called from AppServie data:: ", data);
+  }
+
+
+  update(data: any) {
+    console.log("Update method is getting called from MenusService data:: ", data);
+    this.adminService.saveRoleFunction(data).subscribe(response => {
+      console.log(response);
+    })
+  }
+
+  delete(data: any) {
+    console.log("Delete method is getting called from AppServie data::>> " + JSON.stringify(data));
+    this.adminService.deleteRoleFunction(data).subscribe(response => {
+      console.log("Repsonse : ",response);
+    })
+  }
+
+  get(data: any) {
+    console.log("get method is getting called from AppServie data:: ", data);
+  }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.html
new file mode 100644
index 00000000..f3a7f8ea
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.html
@@ -0,0 +1,106 @@
+<!--
+  ============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">
+  <!--Modal Headers-->
+  <div class="modal-header">
+    <h4 class="modal-title">Role</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <!--Modal Body goes here-->
+  <div class="modal-body">
+    <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+    <div class="role-properties-main">
+        <form id="role-details-form" name="roleDetails" novalidate  autocomplete="off" method="post"> 
+          <div class="elementsDiv">
+            <div class="item required role-name">         
+              <div class="item-label">Name :</div>
+              <input id="role-details-input-name" class="table-search-field"
+                  type="text" name="rolename"
+                  [(ngModel)]="role.name"
+                  ng-pattern="/^[\w -]*$/" maxlength="100" required />
+            </div>
+            <div>  
+              <div class="item-label">Priority :</div>
+              <input id="role-details-input-priority" class="table-search-field"
+                  type="text"
+                  ng-change="accountAddDetails.updateUsername()" name="priority"
+                  [(ngModel)]="role.priority"/>
+            </div>  
+          </div> 
+        </form>    
+      </div>
+
+      <!-- Role Functions List--> 
+      <div *ngIf="isEditMode" class="role-functions-title">Role Functions</div>
+      <div *ngIf="isEditMode" class="rolefunctionTable">
+        <table mat-table [dataSource]="roleFunctionDataSource">
+          <ng-container matColumnDef="roleFunctionName">
+            <th mat-header-cell *matHeaderCellDef id="heading1">Function Name</th>
+            <td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
+          </ng-container>
+      
+          <!--<ng-container matColumnDef="remove">
+            <th mat-header-cell *matHeaderCellDef  id="heading1">Remove</th>
+            <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
+              <span class="icon-trash" id="{{i}}-button-role-remove" (click)="delRoleFunctionConfirmPopUp(rowData,role.id)">
+                <i class="icon ion-md-trash"></i>
+              </span>
+            </td>
+          </ng-container>-->
+
+          <!-- Active Column -->
+          <ng-container matColumnDef="active">
+            <th id="col3" mat-header-cell *matHeaderCellDef>Active ?</th>
+            <td id="rowheader_t1_{{i}}-userId" mat-cell *matCellDef="let element; let i=index;">
+                <mat-slide-toggle [(ngModel)]="element.selected" (change)="toggleRoleFunction(element)"></mat-slide-toggle>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="roleFunctionTableHeaders"></tr>
+          <tr mat-row *matRowDef="let rowData; columns: roleFunctionTableHeaders;">
+        </table>
+      </div>
+   </div>
+   <!--Modal Footer goes Here-->
+   <div class="modal-footer">
+     <button type="button" class="btn btn-primary" (click)="saveChanges()">Save</button> &nbsp;
+     <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+   </div>
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.scss
new file mode 100644
index 00000000..972094c7
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.scss
@@ -0,0 +1,74 @@
+/*-
+ * ============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-deep .modal-dialog { 
+    max-width: 700px;
+    width: 700px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+::ng-deep .mat-column-roleFunctionName {
+    width: 38em !important;
+}
+
+
+.role-properties-main input[type="text"] {
+    width: 18em;
+}
+
+.role-properties-main .role-name{ 
+    margin-right: 35px;
+}
+
+.elementsDiv{ 
+    display: inline-flex; 
+}
+
+.role-functions-title{
+    margin-top: 2em;
+}
+
+.manageRoleFunction{
+    margin-top: 2em;
+}
+
+.rolefunctionTable{
+    overflow-y: auto;
+    height: 440px;
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.spec.ts
new file mode 100644
index 00000000..2049b859
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============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 { NewRoleComponent } from './new-role.component';
+
+describe('NewRoleComponent', () => {
+  let component: NewRoleComponent;
+  let fixture: ComponentFixture<NewRoleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewRoleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewRoleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.ts
new file mode 100644
index 00000000..6b1470fa
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/new-role/new-role.component.ts
@@ -0,0 +1,250 @@
+/*-
+ * ============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, Input, Output, EventEmitter, ViewChild  } from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AdminService } from '../../admin.service';
+import { UserService } from 'src/app/shared/services/user/user.service';
+import { MatSort } from '@angular/material/sort';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+
+
+@Component({
+  selector: 'app-new-role',
+  templateUrl: './new-role.component.html',
+  styleUrls: ['./new-role.component.scss']
+})
+export class NewRoleComponent implements OnInit {
+
+  showSpinner: boolean;
+  result: any;
+  @Input() role: any;
+  @Input() isEditMode: boolean;
+  @Input() availableRoles : any;
+  @Input() ociavailableRoleFunctions: any;
+  roleFunctionTableHeaders: Array<string> = [];
+  roleFunctions: Array<Object> = [];
+  roleFunctionsLenght: any;
+  finalSelectedRoleFunctions: any;
+  availableRoleFunctions: any;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @ViewChild(MatPaginator, {}) paginator: MatPaginator;
+  @ViewChild(MatSort, {}) sort: MatSort;
+  roleFunctionDataSource = new MatTableDataSource(this.roleFunctions);
+
+  constructor(public adminService:AdminService, public userService: UserService, public activeModal: NgbActiveModal, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    this.roleFunctionTableHeaders = ["roleFunctionName","active"];
+    this.finalSelectedRoleFunctions = [];
+    this.availableRoleFunctions = [];
+    if(this.isEditMode && this.ociavailableRoleFunctions && this.ociavailableRoleFunctions.length > 0){
+      this.availableRoleFunctions = this.setSelectedRoleFucntions(this.ociavailableRoleFunctions);
+      this.populateTableData(this.availableRoleFunctions)
+    }
+  }
+
+  setSelectedRoleFucntions(ociavailableRoleFunctions: any) {
+    for (var i = 0; i < this.ociavailableRoleFunctions.length; i++) {
+      var availableRoleFunction = this.ociavailableRoleFunctions[i];
+      availableRoleFunction['selected'] = false;
+      for (var j = 0; j < this.role.roleFunctions.length; j++) {
+        if (availableRoleFunction.code === this.role.roleFunctions[j].code
+          && availableRoleFunction.type === this.role.roleFunctions[j].type
+          && availableRoleFunction.action === this.role.roleFunctions[j].action) {
+          availableRoleFunction.selected = true;
+        }
+      }
+      this.availableRoleFunctions.push(availableRoleFunction);
+    }
+    return this.availableRoleFunctions;
+  }
+
+
+  toggleRoleFunction(_element) {
+    if (this.ociavailableRoleFunctions) {
+      for (var i = 0; i < this.ociavailableRoleFunctions.length; i++) {
+        var availableRoleFunction = this.ociavailableRoleFunctions[i];
+        if (availableRoleFunction.selected && !this.finalSelectedRoleFunctions.includes(availableRoleFunction)) {
+          this.finalSelectedRoleFunctions.push(availableRoleFunction);
+        }
+      }
+    }
+    if (!_element.selected) {
+      for (var i = 0; i < this.finalSelectedRoleFunctions.length; i++) {
+        var availableRoleFunction = this.finalSelectedRoleFunctions[i];
+        if (availableRoleFunction.code == _element.code
+          && availableRoleFunction.type == _element.type
+          && availableRoleFunction.action == _element.action) {
+          this.finalSelectedRoleFunctions.splice(i, 1);
+        }
+      }
+    }
+  }
+
+  delRoleFunctionConfirmPopUp(roleFunction: any, roleId: any){
+    const modalRef = this.ngbModal.open(InformationModalComponent);
+    modalRef.componentInstance.title = "Confirmation";
+    modalRef.componentInstance.message = 'You are about to delete this Role Function : ' + roleFunction.name+ '. Click OK to continue.';
+    modalRef.result.then((result) => {
+      if (result === 'Ok') {
+        let temproleFunctions = this.role.roleFunctions;
+        let index = 0;
+        for(let i=0; i<temproleFunctions.length; i++){
+          if(temproleFunctions[i].code == roleFunction.code){
+            break;
+          }
+          index = index + 1;
+        };
+        temproleFunctions.splice(index,1);
+        this.populateTableData(temproleFunctions);
+        this.adminService.removeRoleFunction(roleFunction , roleId)
+          .subscribe(_data => {
+              this.result = _data
+              this.passEntry.emit(this.result);
+          }, error =>{
+            this.openConfirmationModal('Error', error.message);
+          });
+      }
+    }, (resut) => {
+      this.openConfirmationModal('Error', resut);
+      return;
+    })
+  }
+
+  populateTableData(roleFunctionsList: any){
+    this.roleFunctionDataSource = new MatTableDataSource(roleFunctionsList);
+    this.roleFunctionDataSource.sort = this.sort;
+    this.roleFunctionDataSource.paginator = this.paginator;
+  }
+
+  //Add Or Update Account.
+  saveChanges(){
+    if(this.isEditMode){
+      if (this.role.priority && this.role.priority != '' && isNaN(parseInt(this.role.priority))) {
+        let errorMsg = 'Priority must be an integer.';
+        this.openConfirmationModal('Error', errorMsg);
+      }
+      //update the role object
+      this.showSpinner = true
+      this.role.roleFunctions = this.finalSelectedRoleFunctions;
+      let postData={
+        role: this.role, 
+        childRoles: this.role.childRoles, 
+        roleFunctions : this.role.roleFunctions
+      };
+      this.adminService.saveRole(postData, this.role.id)
+        .subscribe(_data => {
+          this.showSpinner = false;
+          this.result = _data
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+      }, error =>{
+        this.openConfirmationModal('Error', error.message);
+      });
+    }else{
+      //create new Role Object
+      if (this.role.priority && this.role.priority != '' && isNaN(parseInt(this.role.priority))) {
+        let errorMsg = 'Priority must be an integer.';
+        this.openConfirmationModal('Error', errorMsg);
+      }
+      let newRoleObj = {
+				'id':null,
+				'created':null,
+				'modified':null,
+				'createdId':null,
+				'modifiedId':null,
+				'rowNum':null,
+				'auditUserId':null,
+				'auditTrail':null,
+				'name':this.role.name,
+				'active':true,
+				'priority':this.role.priority,
+				'roleFunctions':null,
+				'childRoles':null,
+				'toggleActiveAltText':"Click to Activate Role ",
+				'toggleActiveImage':" / static fusion images inactive.png ",
+				'editUrl':" role.htm ? role_id = null",
+      };
+      if(this.isRoleAlreadyExist(this.role.name)){
+        //msg Role already exit
+        let errorMsg = "Role Name " + this.role.name  +" is already present."
+        this.openConfirmationModal('Error', errorMsg);
+      }else{
+        this.showSpinner = true
+        newRoleObj.childRoles = [];
+        newRoleObj.roleFunctions = [];
+        let postData={
+					role: newRoleObj, 
+					childRoles: newRoleObj.childRoles, 
+					roleFunctions : newRoleObj.roleFunctions
+        };
+        this.adminService.saveRole(postData, newRoleObj.id)
+          .subscribe(_data => {
+            this.showSpinner = false;
+            this.result = _data
+            this.passEntry.emit(this.result);
+            this.ngbModal.dismissAll();
+        }, error =>{
+          this.openConfirmationModal('Error', error.message);
+        });
+      }
+    }    
+  }
+
+  isRoleAlreadyExist(currentRoleName: any){
+    let roles = this.availableRoles;
+    if(roles && roles.length > 0){
+      for(let i=0; i<roles.length; i++){
+        if(roles[i].name === currentRoleName){
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.html
new file mode 100644
index 00000000..1b3b37be
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.html
@@ -0,0 +1,99 @@
+<!--
+  ============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">
+  <h1 class="heading-page" id="profileSearch">Profile Search</h1>
+  <div class="prifile-search-box">
+    <mat-form-field>
+      <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+    </mat-form-field>
+  </div>
+  <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="User ID">
+        <th mat-header-cell *matHeaderCellDef  id="heading1"> User ID</th>
+        <td mat-cell *matCellDef="let rowData"> {{rowData.id}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="Last Name">
+        <th mat-header-cell *matHeaderCellDef  id="heading2"> {{userHeaders[1]}} </th>
+        <td mat-cell *matCellDef="let rowData"> {{rowData.lastName}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="First Name">
+        <th mat-header-cell *matHeaderCellDef  id="heading3">{{userHeaders[2]}} </th>
+        <td mat-cell *matCellDef="let rowData"> {{rowData.firstName}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="Email">
+        <th mat-header-cell *matHeaderCellDef  id="heading4"> {{userHeaders[3]}} </th>
+        <td mat-cell *matCellDef="let rowData" > {{rowData.email}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="OrgUserId">
+        <th mat-header-cell *matHeaderCellDef  id="heading4"> {{userHeaders[4]}} </th>
+        <td mat-cell *matCellDef="let rowData" > {{rowData.orgUserId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Manager OrgUserId">
+        <th mat-header-cell *matHeaderCellDef  id="heading4"> {{userHeaders[5]}} </th>
+        <td mat-cell *matCellDef="let rowData" > {{rowData.orgManagerUserId}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Edit">
+        <th mat-header-cell *matHeaderCellDef  id="heading5"> {{userHeaders[6]}} </th>
+        <td mat-cell *matCellDef="let rowData" > 
+          <span class="icon-trash" id="{{i}}-button-role-edit">
+            <a href="/v2/userProfile/self_profile?profile_id={{rowData.id}}" class="icon-misc-pen"
+							style="font-size: 20px;"><i class="ion ion-md-create"></i></a>
+          </span>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="Active?">
+        <th mat-header-cell *matHeaderCellDef id="heading6"> {{userHeaders[7]}} </th>
+        <td mat-cell *matCellDef="let rowData">
+          <mat-slide-toggle [(ngModel)]="rowData.active" (change)="toggleUserActive(rowData)"></mat-slide-toggle>      
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="userHeaders"></tr>
+      <tr mat-row *matRowDef="let rowData; columns: userHeaders;">
+    </table>
+    <span class="ecomp-spinner" *ngIf="showSpinner"></span>   
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.scss
new file mode 100644
index 00000000..f35a92a7
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.scss
@@ -0,0 +1,69 @@
+/*
+ * ============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;
+  }
+
+  /*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;
+  }
+*/
+
+td[_ngcontent-c4], th[_ngcontent-c4] {
+  width: 15%;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.spec.ts
new file mode 100644
index 00000000..094e52b2
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.spec.ts
@@ -0,0 +1,63 @@
+/*
+ * ============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 { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.ts
new file mode 100644
index 00000000..7bebd04c
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.component.ts
@@ -0,0 +1,129 @@
+/*
+ * ============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 { ProfileService } from '../profile.service';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss']
+})
+export class SearchComponent implements OnInit {
+
+  showSpinner:boolean =false;
+  response: any;
+  result: any;
+  profileList:any;
+  userHeaders = ["User ID","Last Name","First Name","Email","ORG ID","Manager ORG ID","Edit","Active?"];
+  constructor(public profileservice:ProfileService, public ngbModal: NgbModal) { }
+  dataSource: MatTableDataSource<[]>;
+    
+  @ViewChild(MatPaginator, {}) paginator: MatPaginator;
+  @ViewChild(MatSort, {}) sort: MatSort;
+
+
+  ngOnInit() {
+    this.getUsers();
+  }
+
+  getUsers(){
+    this.showSpinner = true;
+    let response;
+    this.response = this.profileservice.getUserPagination();
+    this.response.subscribe(data => {
+      response = data;
+      this.result = JSON.parse(response.data);
+      this.profileList = JSON.parse(this.result.profileList);
+      this.dataSource = new MatTableDataSource(this.profileList);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort; 
+      this.showSpinner = false;
+    });
+  }
+
+  toggleUserActive(user){
+    let activeOrInactive = (user.active) ? 'activate' : 'inactivate';
+    let confirmationMsg = 'You are about to ' + activeOrInactive + ' the user ' + user.firstName +" "+user.lastName+ '. Do you want to continue?';
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = 'Confirmation';
+    modalInfoRef.componentInstance.message = confirmationMsg;
+    modalInfoRef.result.then((_res) => {
+      if (_res === 'Ok') {
+        this.showSpinner = true;
+        this.profileservice.toggleProfileActive(user.id)
+            .subscribe( _data => {
+              this.result = _data;
+              this.openConfirmationModal("Success",'Record updated successfully.');
+              this.showSpinner = false;
+            }, error => {
+              this.showSpinner = false;
+              console.log(error);
+              this.openConfirmationModal("Error",error);
+            });
+      } else {
+        user.active = !user.active;
+      }
+    }, (result) => {
+
+    })
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+  openInformationModal(_title: string, _message: string){
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+    return modalInfoRef;
+  }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.module.ts
new file mode 100644
index 00000000..1574e028
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/search/search.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchComponent } from './search.component';
+
+@NgModule({
+  declarations: [SearchComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class SearchModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.html
new file mode 100644
index 00000000..c0611493
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.html
@@ -0,0 +1,227 @@
+<!--
+  ============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">
+		<h1 class="heading-page" id="profileSearch">Self Profile Detail</h1>
+		<h3 class="heading-small" *ngIf="isAppCentralized=='true'" style="color:red;">Please use Portal for access
+			management</h3>
+		<h3 class="heading-small" *ngIf="isAppCentralized=='false'">Please edit the profile details below:</h3>
+		<br>
+		<div class="input-group-first">
+			<div class="form-row">
+				<label for="textinputID-2a">*Last Name</label><br>
+				<input [(ngModel)]="profile.lastName" type="text" name="lastName" class="form-control" id="lastName"
+					style="width: 100%;" [disabled]="isAppCentralized =='true'">
+				<div *ngIf="!profile.lastName||profile.lastName.length==0">
+					Last name is Required
+				</div>
+			</div>
+			<div class="form-row">
+				<label for="textinputID-3a">*First Name</label>
+				<input [(ngModel)]="profile.firstName" type="text" name="firstName" class="form-control" id="firstName"
+					style="width: 100%;">
+				<div *ngIf="!profile.lastName||profile.lastName.length==0">
+					First name is Required
+				</div>
+			</div>
+			<div class="form-row">
+				<label for="textinputID-3a">Organization User ID</label>&nbsp;
+
+				<input [(ngModel)]="profile.orgUserId" type="text" name="orgUserId" class="form-control" id="orgUserId"
+					style="width: 100%;" disabled="true">
+			</div>
+			<div class="form-row">
+				<label for="textinputID-3a">Organization Manager ID</label>
+				&nbsp;
+
+				<input [(ngModel)]="profile.orgManagerUserId" type="text" name="orgManagerUserId" class="form-control"
+					id="orgManagerUserId" style="
+						width: 59%;" disabled="true">
+			</div>
+		</div>
+		<br>
+		<div class="input-group">
+
+			<div class="form-row">
+				<label for="textinputID-2a">Login Id
+				</label>
+				<input [(ngModel)]="profile.loginId" type="text" name="loginId" class="form-control" id="loginId" style="
+						width: 100%;">
+
+
+			</div>
+
+			<div class="form-row">
+				<label for="textinputID-3a">Password</label>
+				<input [(ngModel)]="profile.loginPwd" type="text" name="loginPwd" class="form-control" id="loginPwd" style="
+						width: 100%;">
+
+
+			</div>
+
+			<div class="form-row">
+				<label for="textinputID-3a">*Phone
+				</label>
+				<input [(ngModel)]="profile.phone" type="text" name="phone" class="form-control" id="phone" style="
+						width: 100%;">
+			</div>
+
+
+			<div class="form-row">
+				<label for="textinputID-3a">Fax</label>
+				<input [(ngModel)]="profile.fax" type="text" name="fax" class="form-control" id="fax" style="width: 100%;">
+			</div>
+
+		</div>
+
+		<br>
+		<div class="input-group">
+
+			<div class="form-row">
+				<label for="textinputID-2a">Cellular</label>
+				<input [(ngModel)]="profile.cellular" type="text" name="cellular" class="form-control" id="cellular"
+					style="width: 100%;">
+			</div>
+
+			<div class="form-row">
+				<label for="textinputID-3a">*Email</label>
+				<input [(ngModel)]="profile.email" type="text" name="email" class="form-control" id="email"
+					style="width: 100%;">
+			</div>
+			<div class="form-row">
+				<label for="textinputID-3a">Address 1</label>
+				<input [(ngModel)]="profile.address1" type="text" name="address1" class="form-control" id="address1"
+					style="width: 100%;">
+			</div>
+
+			<div class="form-row">
+				<label for="textinputID-3a">Address 2</label>
+				<input [(ngModel)]="profile.address2" type="text" name="address2" class="form-control" id="address2"
+					style="width: 100%;">
+			</div>
+
+		</div>
+
+		<br>
+		<div class="input-group">
+
+			<div class="form-row">
+				<label for="textinputID-2a">City</label>
+				<input [(ngModel)]="profile.city" type="text" name="city" class="form-control" id="city"
+					style="width: 100%;">
+			</div>
+
+			<div class="form-row">
+				<mat-form-field>
+					<mat-label> States</mat-label>
+					<mat-select [(ngModel)]="profile.state">
+						<mat-option *ngFor="let state of stateList" [value]="state.value">{{state.label}}</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+
+			<div class="form-row">
+				<label for="textinputID-3a">Zip Code</label>
+				<input [(ngModel)]="profile.zipCode" type="text" name="zipCode" class="form-control" id="zipCode"
+					style="width: 100%;">
+			</div>
+
+			<div class="form-row">
+				<mat-form-field>
+					<mat-label> Country</mat-label>
+					<mat-select [(ngModel)]="profile.country">
+						<mat-option *ngFor="let country of ociCountries" [value]="country.value">{{country.label}}
+						</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</div>
+		<br>
+		<div class="input-group">
+			<div class="form-row">
+				<mat-form-field>
+					<mat-label> TimeZones</mat-label>
+					<mat-select [(ngModel)]="profile.timeZoneId">
+						<mat-option *ngFor="let timeZone of ociTimeZones" [value]="timeZone.value">{{timeZone.label}}
+						</mat-option>
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</div>
+		<div class="form-row">
+			<button class="btn btn-primary" (click)="saveProfile()" *ngIf="(isAppCentralized=='false')" [disabled]="(!profile.lastName||profile.lastName.length==0) || (!profile.firstName||profile.firstName.length==0) ||
+				(!profile.phone||profile.phone.length==0) || (!profile.email||profile.email.length==0)">Save</button>
+		</div>
+		<br>
+
+		<div class="assignedRoles" *ngIf="(isAppCentralized=='false' && isUserSystemAdmin)">
+			<label>Roles</label> 
+			<!--<a (click)="addNewRoleFunctionModalPopup(profile.roles);"
+				class="ion ion-md-add-circle-outline"></a>-->
+		</div>
+
+
+		<table mat-table [dataSource]="dataSource" matSort>
+			<ng-container matColumnDef="name">
+				<th mat-header-cell *matHeaderCellDef id="heading1"> Name</th>
+				<td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
+			</ng-container>
+
+			<!--<ng-container matColumnDef="delete">
+				<th mat-header-cell *matHeaderCellDef id="heading2"> 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)="removeRole(rowData)">
+						<i class="icon ion-md-trash"></i>
+					</span>
+				</td>
+			</ng-container>-->
+			
+			<!-- Active Column -->
+			<ng-container matColumnDef="active">
+			<th id="col3" mat-header-cell *matHeaderCellDef>Active ?</th>
+			<td id="rowheader_t1_{{i}}-userId" mat-cell *matCellDef="let element; let i=index;">
+				<mat-slide-toggle [(ngModel)]="element.selected" (change)="toggleRoles(element)"></mat-slide-toggle>
+			</td>
+			</ng-container>
+
+			<tr mat-header-row *matHeaderRowDef="userRolesHeader"></tr>
+			<tr mat-row *matRowDef="let rowData; columns: userRolesHeader;">
+
+		</table>
+		<span class="ecomp-spinner" *ngIf="showSpinner"></span> 
+	</div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.scss
new file mode 100644
index 00000000..31b56d72
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.scss
@@ -0,0 +1,78 @@
+/*
+ * ============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%;
+}
+
+.input-group-first {
+  position: relative;
+  display: flex;
+  /* flex-wrap: wrap; */
+  align-items: stretch;
+  width: 100%;
+}
+
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -5px;
+    margin-left: 20px;
+}
+
+.field-group {
+    position: relative;
+    display: block;
+}
+
+body { 
+  font-family: Roboto, Arial, sans-serif;
+  margin: 0;
+}
+
+.basic-container {
+  padding: 30px;
+}
+
+.version-info {
+  font-size: 8pt;
+  float: right;
+}
+.assignedRoles{
+  margin-left: 10px;
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.spec.ts
new file mode 100644
index 00000000..2e91c188
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.spec.ts
@@ -0,0 +1,63 @@
+/*
+ * ============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 { SelfComponent } from './self.component';
+
+describe('SelfComponent', () => {
+  let component: SelfComponent;
+  let fixture: ComponentFixture<SelfComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelfComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelfComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.ts
new file mode 100644
index 00000000..23a2bb07
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/ext/profile/self/self.component.ts
@@ -0,0 +1,306 @@
+/*
+ * ============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 { UserService } from 'src/app/shared/services/user/user.service';
+import { User } from 'src/app/shared/services/user/user';
+import { ProfileService } from '../profile.service';
+import { MatTableDataSource } from '@angular/material';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { ErrorModalComponent } from 'src/app/modals/error-modal/error-modal.component';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+
+@Component({
+  selector: 'app-self',
+  templateUrl: './self.component.html',
+  styleUrls: ['./self.component.scss']
+})
+export class SelfComponent implements OnInit {
+
+  constructor(public userService: UserService, public profileService: ProfileService, private ngModal: NgbModal) { }
+
+  user: User;
+  isAppCentralized;
+  response;
+  result;
+  postData: {
+    profile: any,
+    selectedCountry: any,
+    selectedState: any,
+    selectedTimeZone: any
+  } = { profile: "", selectedCountry: "", selectedState: "", selectedTimeZone: "" };
+
+  profile: {
+    lastName: any, firstName: any, orgUserId: any, orgManagerUserId: any, loginId: any,loginPwd: any,phone: any,fax: any,cellular: any,
+    email: any;address1: any,address2: any,city: any,state :any,zipCode: any,country: any,timeZoneId: any,id: any,roles: any
+  } = {
+    lastName: "", firstName: "", orgUserId: "", orgManagerUserId: "", loginId: "",loginPwd: "",phone: "",fax: "",
+      cellular: "", email: "",address1: "",address2: "",city: "",state:"" ,zipCode: "",country: "",timeZoneId: "",id: "",roles: ""
+  };
+
+  oriProfile;
+  profileId;
+  ociavailableRoles;
+  ociTimeZones;
+  ociCountries;
+  stateList;
+  isUserSystemAdmin;
+  availableRoles: Array<any> = [];
+  dataSource: MatTableDataSource<any>;
+  showSpinner:boolean;
+
+  userRolesHeader = ["name", "active"];
+  closeResult: string;
+  selectedCountry;
+  selectedState;
+  selectedTimeZone;
+  finalSelectedRoles: any;
+
+
+  ngOnInit() {
+    this.showSpinner = false;
+    this.finalSelectedRoles = [];
+    let result = this.userService.getFunctionalMenuStaticDetailSession();
+    let user;
+    result.subscribe(user => {
+      this.user = user;
+      this.isAppCentralized = this.user.isAppCentralized;
+    });
+    this.getSelfProfileDetail();
+  }
+
+  /**
+   * Get Self Profile Details
+   */
+  getSelfProfileDetail() {
+    this.showSpinner = true;
+    this.response = this.profileService.getSelfProfile();
+    this.response.subscribe(data => {
+      let res;
+      res = data;
+      this.result = JSON.parse(res.data);
+      this.profile = JSON.parse(this.result.profile);
+      this.oriProfile = JSON.parse(this.result.profile); /*original value*/
+
+      this.profileId = this.profile.id;
+      this.ociavailableRoles = JSON.parse(this.result.availableRoles);
+      this.ociTimeZones = JSON.parse(this.result.timeZones);
+      this.ociCountries = JSON.parse(this.result.countries);
+      this.stateList = JSON.parse(this.result.stateList);
+
+     for( let state of this.stateList)
+     {
+          if(state.value == this.profile.state){
+            this.profile.state= state.value;
+          }
+     }
+
+     for( let country of this.ociCountries)
+     {
+          if(country.value == this.profile.country){
+            this.profile.country= country.value;
+          }
+     }
+
+     for( let timeZone of this.ociTimeZones)
+     {
+          if(timeZone.value == this.profile.timeZoneId){
+            this.profile.timeZoneId= timeZone.value;
+          }
+     }
+
+      this.dataSource = new MatTableDataSource(this.ociavailableRoles);
+
+      if (this.ociavailableRoles != null) {
+        for (let role of this.ociavailableRoles) {
+          role.selected = false;
+          for (let profileRole of this.profile.roles) {
+            if (profileRole.id === role.id) {
+              role.selected = true;
+            }
+            if (role.id === 1) {
+              this.isUserSystemAdmin = true;
+            }
+          }
+          this.availableRoles.push(role);
+        }
+      }
+
+    });
+    this.showSpinner = false;
+  }
+
+  /**
+   * Remove Role
+   * @param role
+   */
+  removeRole(role: any) {
+    const modalRef = this.ngModal.open(InformationModalComponent);
+    modalRef.componentInstance.title = 'Confirmation';
+    modalRef.componentInstance.message = `Are you sure you want to remove ${role.name} ?`;
+    modalRef.result.then((result) => {
+      if (result === 'Ok') {
+        this.profileService.removeRole(role, this.profileId).subscribe(data => {
+          this.getSelfProfileDetail();
+        })
+      }
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  /**
+   * Add User Role
+   * @param role
+   */
+  addUserRole(role: any) {
+    const modalRef = this.ngModal.open(InformationModalComponent);
+    modalRef.componentInstance.title = 'Confirmation';
+    modalRef.componentInstance.message = `Are you sure you want to add ${role.name} ?`;
+    modalRef.result.then((result) => {
+      if (result === 'Ok') {
+        this.profileService.addUserRole(role, this.profileId).subscribe(data => {
+          this.getSelfProfileDetail();
+        })
+      }
+    }, (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}`;
+    }
+
+  }
+
+  /**
+   * Save User Profile
+   */
+  saveProfile() {
+
+    if (this.oriProfile.loginId != this.profile.loginId) {
+      const modalRef = this.ngModal.open(ErrorModalComponent);
+      modalRef.componentInstance.message = `Login ID cannot be changed?`;
+      return;
+    }
+    if (this.oriProfile.loginPwd != this.profile.loginPwd) {
+      const modalRef = this.ngModal.open(ErrorModalComponent);
+      modalRef.componentInstance.message = `Login pwd cannot be changed?`;
+      return;
+    }
+
+    this.postData.profile = this.profile;
+    this.postData.selectedCountry = this.profile.country != null ? this.profile.country : "";
+    this.postData.selectedState = this.profile.state != null ? this.profile.state : "";
+    this.postData.selectedTimeZone = this.profile.timeZoneId != null ? this.profile.timeZoneId : "";
+    
+
+    for( let state of this.stateList)
+    {
+         if(state.value == this.profile.state){
+          this.postData.selectedState = state.value;
+         }
+    }
+
+    for( let country of this.ociCountries)
+    {
+         if(country.value == this.profile.country){
+          this.postData.selectedCountry = country.value;
+         }
+    }
+    for( let timeZone of this.ociTimeZones)
+    {
+         if(timeZone.value == this.profile.timeZoneId){
+          this.postData.selectedTimeZone = timeZone.value;
+         }
+    }
+
+
+    this.response = this.profileService.saveProfile(this.postData, this.profileId);
+      this.response.subscribe(data => {
+        const modalRef = this.ngModal.open(ConfirmationModalComponent);
+        let response;
+        modalRef.componentInstance.message = `Profile got saved Successfully`;
+        modalRef.result.then((result) => {
+          if (result === 'Close') {
+            this.getSelfProfileDetail();
+          }
+        }, (reason) => {
+          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+        });
+     
+    });
+  }
+
+  /**
+   * toggleRoles
+   * @param _element 
+   */
+  toggleRoles(_element) {
+    if (this.ociavailableRoles) {
+      for (var i = 0; i < this.ociavailableRoles.length; i++) {
+        var availableRole = this.ociavailableRoles[i];
+        if (availableRole.selected && !this.finalSelectedRoles.includes(availableRole)) {
+          this.finalSelectedRoles.push(availableRole);
+        }
+      }
+    }
+    
+    if (!_element.selected) {
+      for (var i = 0; i < this.finalSelectedRoles.length; i++) {
+        var availableRole = this.finalSelectedRoles[i];
+        if (availableRole.id == _element.id
+          && availableRole.name == _element.name) {
+          this.finalSelectedRoles.splice(i, 1);
+        }
+      }
+    }
+    if(_element.selected){
+      this.addUserRole(_element);
+    }else{
+      this.removeRole(_element);
+    }
+  }
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/interceptors/header-interceptor.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/interceptors/header-interceptor.ts
new file mode 100644
index 00000000..5a5a41a8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/interceptors/header-interceptor.ts
@@ -0,0 +1,70 @@
+/*-
+ * ============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 {
+    HttpEvent,
+    HttpInterceptor,
+    HttpHandler,
+    HttpRequest,
+    HttpHeaders,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { v4 as uuid } from 'uuid';
+declare const getWebJunctionXSRFToken: any;
+export class HeaderInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        // Clone the request to add the new header
+        // HttpHeader object immutable - copy values
+        var XSRFToken = getWebJunctionXSRFToken();
+        console.log('XSRFToken:', XSRFToken);
+        const headerSettings: { [name: string]: string | string[]; } = {};
+        headerSettings['X-ECOMP-RequestID'] = uuid();
+        const requestType = req.params.get('requestType');
+        if (XSRFToken.name && XSRFToken.value)
+            headerSettings['X-XSRF-TOKEN'] = XSRFToken.value;
+        if(requestType!=null && requestType==='fileUpload'){
+          //headerSettings['Content-Type'] = 'multipart/form-data';
+        }else{
+            headerSettings['Content-Type'] = 'application/json';
+        }
+        const newHeader = new HttpHeaders(headerSettings);
+        const clonedRequest = req.clone({ headers: newHeader, withCredentials: true });
+        // Pass the cloned request instead of the original request to the next handle
+        return next.handle(clonedRequest);
+    }
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/utils/utils.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/utils/utils.js
new file mode 100644
index 00000000..3fe1c1ce
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/utils/utils.js
@@ -0,0 +1,43 @@
+
+function getWebJunctionXSRFToken() {	
+	var cookies = getCookies();
+	var XSRFToken = {
+			name:'',
+			value:''
+	};
+	var contextRoot = getContextRoot();
+	var hasXSRFToken = false;
+	for(var name in cookies) {
+		if(name.includes('XSRF-TOKEN')){
+			if(name.includes('AMWEBJCT') && name.includes(contextRoot)){
+				XSRFToken.name = name;
+				XSRFToken.value = cookies[name];
+			}else if(name=='XSRF-TOKEN'){
+				hasXSRFToken = true;
+			}
+		}
+	}
+	return (hasXSRFToken==true)?null:XSRFToken;
+}
+
+function getCookies() {
+    var cookies = { };
+    if (document.cookie && document.cookie != '') {
+        var split = document.cookie.split(';');
+        for (var i = 0; i < split.length; i++) {
+            var name_value = split[i].split("=");
+            name_value[0] = name_value[0].replace(/^ /, '');
+            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
+        }
+    }
+    return cookies;
+}
+
+function getContextRoot(){
+	var pathName = window.location.pathname;
+	var pathArray = pathName.split( '/' );
+	var contextRoot='';
+	if(pathArray.length!=0 && pathArray.length>=1)
+		contextRoot = pathArray[1];
+	return contextRoot;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/assets/images/spinner.gif b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/assets/images/spinner.gif
new file mode 100644
index 00000000..c97ec6ea
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/assets/images/spinner.gif
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/_spinner.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/_spinner.scss
new file mode 100644
index 00000000..406ca78a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/styles/_spinner.scss
@@ -0,0 +1,67 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+.ecomp-spinner {
+    background: url('../assets/images/spinner.gif') top left no-repeat;
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    top: 35%;
+    left: calc(50% - 32px/2);
+}
+.ecomp-save-spinner {
+    background: url('../assets/images/spinner.gif') top left no-repeat;
+    width: 25px;
+    height: 25px;
+    background-size: 25px;
+    position: absolute;
+    left: -50px;
+    top: 2px;
+}
+.ecomp-small-spinner {
+    background: url('../assets/images/spinner.gif') top left no-repeat;
+    width: 25px;
+    height: 25px;
+    background-size: 25px;
+    position: relative;
+    display: inline-block;
+    vertical-align: 2px;
+    cursor: pointer;
+    top: 6px;
+    color: transparent;
+    margin-left: 8px;
+}