Integrated UI lazy loading and Raptor update

Integrated UI lazy loading and Raptor update

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

70 files changed, 629 insertions, 506 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin-routing.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin-routing.module.ts
new file mode 100644
index 00000000..87d01fa2
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin-routing.module.ts
@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {RoleFunctionsComponent} from './role-functions/role-functions.component';
+import {UsageComponent} from './usage/usage.component';
+import {CacheAdminComponent} from './cache-admin/cache-admin.component';
+import {RolesComponent} from './roles/roles.component';
+import {MenusComponent} from './menus/menus.component';
+import {AdminComponent} from './admin.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: AdminComponent,
+        children: [
+            {path: 'role_function_list', component: RoleFunctionsComponent},
+            {path: 'usage_list', component: UsageComponent},
+            {path: 'cache_admin', component: CacheAdminComponent},
+            {path: 'admin', component: RolesComponent},
+            {path: 'admin_menu_edit', component: MenusComponent},
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AdminRouting {
+
+}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.html
new file mode 100644
index 00000000..0680b43f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.scss
index e69de29b..e69de29b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.scss
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.spec.ts
index 72e742ff..e93ac925 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.spec.ts
@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AdminComponent } from './admin.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('AdminComponent', () => {
   let component: AdminComponent;
@@ -8,7 +9,8 @@ describe('AdminComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminComponent ]
+      declarations: [ AdminComponent ],
+      imports: [ RouterTestingModule ]
     })
     .compileComponents();
   }));
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.ts
index ad5498c6..ad5498c6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.module.ts
new file mode 100644
index 00000000..ba546647
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AdminComponent } from './admin.component';
+import {CacheAdminComponent} from './cache-admin/cache-admin.component';
+import {MenusModule} from './menus/menus.module';
+import {UsageModule} from './usage/usage.module';
+import {FormsModule} from '@angular/forms';
+import {
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatPaginatorModule,
+    MatRadioModule,
+    MatSlideToggleModule,
+    MatTableModule,
+    MatInputModule
+} from '@angular/material';
+import {RdpModule} from 'portalsdk-tag-lib';
+import {AdminRouting} from './admin-routing.module';
+import {RoleFunctionsComponent} from './role-functions/role-functions.component';
+import {RolesComponent} from './roles/roles.component';
+import {NewRoleComponent} from './roles/new-role/new-role.component'
+import { UserService } from '../shared/services/user/user.service';
+
+@NgModule({
+  declarations: [AdminComponent, CacheAdminComponent, RoleFunctionsComponent, RolesComponent, NewRoleComponent],
+    imports: [
+        CommonModule,
+        MenusModule,
+        UsageModule,
+        FormsModule,
+        MatRadioModule,
+        RdpModule, 
+        AdminRouting, 
+        MatExpansionModule, 
+        MatFormFieldModule, 
+        MatTableModule, 
+        MatSlideToggleModule, 
+        MatPaginatorModule,
+        MatInputModule
+    ],
+    entryComponents: [NewRoleComponent],
+    exports: [
+    ],
+    providers: [UserService]
+})
+export class AdminModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.service.spec.ts
index d23489be..d23489be 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.service.spec.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.service.ts
index c42235be..2a7135ad 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.service.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/admin.service.ts
@@ -39,7 +39,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { JsonPipe } from '@angular/common';
-import { environment } from '../../../environments/environment';
+import { environment } from '../../environments/environment';
 import { Observable } from 'rxjs';
 
 @Injectable({
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.html
index 8aba64c9..8aba64c9 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.html
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.scss
new file mode 100644
index 00000000..39ba7164
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.scss
@@ -0,0 +1,68 @@
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td, th {
+  width: 25%;
+}
+
+
+.mat-accordion .mat-header-row {
+  padding-left: 1.5rem;
+  padding-right: 2rem;
+  border-bottom: none;
+}
+
+
+//copied from https://github.com/angular/material2/blob/master/src/lib/table/table.scss
+$mat-header-row-height: 56px;
+$mat-row-height: 48px;
+$mat-row-horizontal-padding: 24px;
+
+
+.mat-header-row {
+  min-height: $mat-header-row-height;
+}
+
+.mat-row {
+  min-height: $mat-row-height;
+}
+
+.mat-row, .mat-header-row {
+  display: flex;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  align-items: center;
+  padding: 0 $mat-row-horizontal-padding;
+  box-sizing: border-box;
+
+  // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
+  // element that will stretch the row the correct height. See:
+  // https://connect.microsoft.com/IE/feedback/details/802625
+  &::after {
+    display: inline-block;
+    min-height: inherit;
+    content: '';
+  }
+}
+
+:host::ng-deep .mat-cell, .mat-header-cell {
+  flex: 1;
+  overflow: hidden;
+  word-wrap: break-word;
+  font-weight: bold;
+  font-size: 14px;
+  color: #343a40;
+}
+
+.mat-expansion-panel {
+  margin: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: margin 225ms cubic-bezier(.4,0,.2,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.spec.ts
index 03d21797..01ec7a92 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.spec.ts
@@ -2,15 +2,14 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CacheAdminComponent } from './cache-admin.component';
 import { MatExpansionModule } from '@angular/material';
-import { HttpClientModule } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AdminService } from '../admin.service';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import { CookieService } from 'ngx-cookie-service';
-import { SuccessModalComponent } from 'src/app/modals/success-modal/success-modal.component';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { SuccessModalComponent } from '../../modals/success-modal/success-modal.component';
 
 
 describe('CacheAdminComponent', () => {
@@ -31,7 +30,6 @@ describe('CacheAdminComponent', () => {
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       imports:[
         MatExpansionModule,
-         HttpClientModule,
          HttpClientTestingModule,
          NgbModule.forRoot()
         ],
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.ts
index d9f5ca80..d9f5ca80 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/cache-admin/cache-admin.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.html
index 25ae9665..25ae9665 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.html
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.scss
index d5bf6ac0..4e88eeb8 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.scss
@@ -36,7 +36,7 @@
  * 
  */
  
-table {
+ table {
   width: 100%;
 }
 
@@ -61,4 +61,10 @@ td[_ngcontent-c4], th[_ngcontent-c4] {
 
 rdp-data-table{
   overflow-x : scroll;
+}
+
+:host::ng-deep .mat-header-cell{
+  font-weight: bold;
+  font-size: 14px;
+  color: #343a40;
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.spec.ts
index a32b2e3e..49fee828 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.spec.ts
@@ -2,13 +2,11 @@ import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing'
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
-import { HttpClientModule } from '@angular/common/http';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NgbModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { MenusComponent } from './menus.component';
-import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
 import { AdminService } from '../admin.service';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -18,6 +16,7 @@ import { MockBackend } from '@angular/http/testing';
 import { BaseRequestOptions, Http } from '@angular/http';
 import 'rxjs/add/observable/of';
 import { Observable } from 'rxjs/Observable';
+import { InformationModalComponent } from '../../modals/information-modal/information-modal.component';
 
 describe('MenusComponent', () => {
   let component: MenusComponent;
@@ -33,8 +32,7 @@ describe('MenusComponent', () => {
                       InformationModalComponent ],
       imports: [ MatTableModule, 
                  MatPaginatorModule,
-                 MatSortModule,
-                 HttpClientModule, 
+                 MatSortModule, 
                  HttpClientTestingModule,
                  NoopAnimationsModule,
                  NgbModule.forRoot() 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.ts
index c6fbc8c4..c6fbc8c4 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.module.ts
index c6f39f6b..99268e9f 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/menus/menus.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/menus/menus.module.ts
@@ -33,7 +33,7 @@
  *
  * ============LICENSE_END============================================
  *
- * 
+ *
  */
 
 import { NgModule } from '@angular/core';
@@ -43,12 +43,13 @@ import { MaterialModule } from 'src/app/material-module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NewMenuComponent } from './new-menu/new-menu.component';
+import {RdpModule} from 'portalsdk-tag-lib';
 
 @NgModule({
   declarations: [MenusComponent, NewMenuComponent],
-  imports: [
-    CommonModule,FormsModule,ReactiveFormsModule,MatFormFieldModule
-  ],
+    imports: [
+        CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, RdpModule
+    ],
   exports: [MenusComponent],
   bootstrap: [MenusComponent]
 })
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/admin/menus/menus.service.ts
index 912b65bb..912b65bb 100644
--- 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/admin/menus/menus.service.ts
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/admin/menus/new-menu/new-menu.component.html
index 6a5426a8..6a5426a8 100644
--- 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/admin/menus/new-menu/new-menu.component.html
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/admin/menus/new-menu/new-menu.component.scss
index a8b5f966..a8b5f966 100644
--- 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/admin/menus/new-menu/new-menu.component.scss
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/admin/menus/new-menu/new-menu.component.spec.ts
index 650f09a6..650f09a6 100644
--- 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/admin/menus/new-menu/new-menu.component.spec.ts
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/admin/menus/new-menu/new-menu.component.ts
index 6e5b0c1a..6e5b0c1a 100644
--- 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/admin/menus/new-menu/new-menu.component.ts
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/admin/role-functions/new-role-function/new-role-function.component.html
index 888deca8..888deca8 100644
--- 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/admin/role-functions/new-role-function/new-role-function.component.html
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/admin/role-functions/new-role-function/new-role-function.component.scss
index 56cb1aa3..56cb1aa3 100644
--- 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/admin/role-functions/new-role-function/new-role-function.component.scss
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/admin/role-functions/new-role-function/new-role-function.component.spec.ts
index ecc0947d..ecc0947d 100644
--- 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/admin/role-functions/new-role-function/new-role-function.component.spec.ts
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/admin/role-functions/new-role-function/new-role-function.component.ts
index d0be5145..d0be5145 100644
--- 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/admin/role-functions/new-role-function/new-role-function.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-function.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-function.ts
index 9a00995b..9a00995b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-function.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-function.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.html
index 460f69b3..460f69b3 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.html
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.scss
index 7379b988..ec7b2cac 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.scss
@@ -35,7 +35,7 @@
  *
  * 
  */
-table {
+ table {
   width: 100%;
 }
   
@@ -54,4 +54,10 @@ td[_ngcontent-c4], th[_ngcontent-c4] {
 ::ng-deep .mat-form-field-infix {
   width: 250px;
   margin-left: 10px;
+}
+
+:host::ng-deep .mat-header-cell{
+  font-weight: bold;
+  font-size: 14px;
+  color: #343a40;
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.spec.ts
index 9cb908dd..dab6af2b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.spec.ts
@@ -44,11 +44,11 @@ import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RdpModule } from 'portalsdk-tag-lib';
 import { FormsModule} from '@angular/forms';
-import { UserService } from 'src/app/shared/services/user/user.service';
 import { AdminService } from '../admin.service';
 import { MatSelectModule} from '@angular/material';
 import { Observable } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { UserService } from '../../shared/services/user/user.service';
 
 describe('RoleFunctionsComponent', () => {
   let component: RoleFunctionsComponent;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.ts
index 118225d2..3b97be51 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/role-functions/role-functions.component.ts
@@ -38,7 +38,7 @@
 
 import { Component, OnInit, Directive, Input, Output, EventEmitter, ViewChildren, QueryList, PipeTransform, ViewChild } from '@angular/core';
 import { AdminService } from '../admin.service';
-import {UserService} from '../../../shared/services/user/user.service'
+import {UserService} from '../../shared/services/user/user.service'
 import { User } from 'src/app/shared/services/user/user';
 import { of, Observable } from 'rxjs';
 import { RoleFunction } from './role-function';
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/admin/role-functions/role-functions.service.ts
index bd44a63d..bd44a63d 100644
--- 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/admin/role-functions/role-functions.service.ts
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/admin/roles/new-role/new-role.component.html
index f3a7f8ea..f3a7f8ea 100644
--- 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/admin/roles/new-role/new-role.component.html
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/admin/roles/new-role/new-role.component.scss
index 972094c7..972094c7 100644
--- 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/admin/roles/new-role/new-role.component.scss
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/admin/roles/new-role/new-role.component.spec.ts
index 4eca8263..4eca8263 100644
--- 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/admin/roles/new-role/new-role.component.spec.ts
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/admin/roles/new-role/new-role.component.ts
index 6b1470fa..6b1470fa 100644
--- 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/admin/roles/new-role/new-role.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.html
new file mode 100644
index 00000000..7d845fee
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.html
@@ -0,0 +1,104 @@
+<!--
+  ============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="main-container">
+    <div id="page-content">
+      <div class="ecomp-main-view-title">
+          <h3 class="heading-page">Roles</h3>
+          <span class= "heading-small" *ngIf="isAppCentralized=='true'"><b>Please go to portal to Manage Roles.</b></span>
+      </div>
+  
+      <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+  
+      <div class="table-search-div">
+        <mat-form-field>
+          <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+        </mat-form-field>
+  
+        <button type="button" *ngIf="isAppCentralized=='false'" class="btn btn-primary new-role-button" (click)="openAddNewRoleModal('')">
+          <i class="icon ion-md-person-add"></i>Add New Role
+        </button>
+      </div>
+  
+      <table mat-table [dataSource]="dataSource" matSort>
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading1"> Name</th>
+            <td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
+          </ng-container>
+  
+          <ng-container matColumnDef="priority">
+            <th mat-header-cell *matHeaderCellDef   id="heading2"> Priority</th>
+            <td mat-cell *matCellDef="let rowData"> {{rowData.priority}} </td>
+          </ng-container>
+  
+          <ng-container matColumnDef="Edit">
+            <th mat-header-cell *matHeaderCellDef id="heading3">{{roleHeaders[2]}} </th>
+            <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
+              <span class="icon-trash" id="{{i}}-button-role-edit"
+                (click)="openAddNewRoleModal(rowData)">
+                <i class="ion ion-md-create"></i>
+            </span>
+            </td>
+          </ng-container>
+  
+          <ng-container matColumnDef="Active?">
+            <th mat-header-cell *matHeaderCellDef id="heading4"> {{roleHeaders[3]}} </th>
+            <td mat-cell *matCellDef="let rowData">
+              <mat-slide-toggle [(ngModel)]="rowData.active" (change)="toggleRole(rowData)"></mat-slide-toggle>
+            </td>
+          </ng-container>
+  
+          <ng-container matColumnDef="Delete?">
+            <th mat-header-cell *matHeaderCellDef  id="heading6"> {{roleHeaders[4]}} </th>
+            <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
+              <span class="icon-trash" id="{{i}}-button-role-remove"
+                (click)="delRoleConfirmPopUp(rowData)">
+                <i class="icon ion-md-trash"></i>
+            </span>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="roleHeaders"></tr>
+          <tr mat-row *matRowDef="let rowData; columns: roleHeaders;">
+        </table>
+        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+        <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+        <div>
+          <a (click)="getFunctions()" id="functions-link">Manage Role Functions</a><br><br>
+        </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.scss
index a87fb896..1a4d76ae 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.scss
@@ -36,35 +36,25 @@
  * 
  */
 
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 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;
-  }
-*/
+     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[_ngcontent-c4], th[_ngcontent-c4] {
   width: 15%;
 }
@@ -107,4 +97,24 @@ body {
 }
 #functions-link{
   cursor: pointer; text-decoration: underline; color: #007bff;
+}
+
+:host::ng-deep .mat-form-field-wrapper{
+  width: 28%;
+  float: right;
+  padding-top: 14px;
+}
+
+.table-search-div{
+  display: flex;
+}
+
+.new-role-button{
+  height: 38px;
+}
+
+:host::ng-deep .mat-header-cell{
+  font-weight: bold;
+  font-size: 14px;
+  color: #343a40;
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.spec.ts
index 16c81cc5..ab27b353 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.spec.ts
@@ -45,12 +45,12 @@ import { RolesComponent } from './roles.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { MatTableModule } from '@angular/material';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { UserService } from 'src/app/shared/services/user/user.service';
 import { Observable } from 'rxjs';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { UserService } from '../../shared/services/user/user.service';
+import { InformationModalComponent } from '../../modals/information-modal/information-modal.component';
 
 describe('RolesComponent', () => {
   let component: RolesComponent;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.ts
index 8032aa18..8032aa18 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.module.ts
new file mode 100644
index 00000000..5986e863
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/roles/roles.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RolesComponent } from './roles.component';
+import {NewRoleComponent} from './new-role/new-role.component';
+import {MatFormFieldModule, MatPaginatorModule, MatSlideToggleModule, MatTableModule} from '@angular/material';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+  declarations: [RolesComponent, NewRoleComponent],
+    imports: [
+        CommonModule,
+        MatTableModule,
+        MatFormFieldModule,
+        MatSlideToggleModule,
+        MatPaginatorModule,
+        FormsModule
+    ]
+})
+export class RolesModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.html
index 402d5e0a..ac56a13f 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.html
@@ -35,14 +35,14 @@
    
 -->
 
-<div class="container">
+<div class="main-container">
   <div id="page-content">
     <div>
-      <h1 class="heading-page" id="Usage">Current Usage</h1>
+      <h3 class="heading-page" id="Usage">Current Usage</h3>
     </div>
-    <h4 class="heading-small">
+    <p class="heading-small">
       The following table shows all current user sessions. Click the icon to end a user's session.
-    </h4>
+    </p>
     <!-- RDP datatable -->
     <rdp-data-table [data]="users" [settings]="settings"></rdp-data-table>
   </div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.scss
index 7dd0a4ec..8712b3b2 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.scss
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.scss
@@ -36,23 +36,29 @@
  * 
  */
 
-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;
-  }
+ 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[_ngcontent-c4], th[_ngcontent-c4] {
-  width: 15%;
+width: 15%;
+}
+
+:host::ng-deep .mat-header-cell{
+  font-weight: bold;
+  font-size: 14px;
+  color: #343a40;
 }
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.spec.ts
index 01f31669..01f31669 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.spec.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.ts
index d5121909..d5121909 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.component.ts
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.module.ts
index 3c1f1769..6043d5df 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/usage/usage.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/admin/usage/usage.module.ts
@@ -39,11 +39,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UsageComponent } from './usage.component';
+import { RdpModule } from 'portalsdk-tag-lib';
 
 @NgModule({
   declarations: [UsageComponent],
   imports: [
-    CommonModule
+    CommonModule,
+    RdpModule
   ]
 })
 export class UsageModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
index 77ced1b1..90f1ca85 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/components/header/header.component.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg fixed-top" *ngIf=showHeader>
-    <a class="navbar-brand" href="#">{{appName}}</a>
+    <a class="navbar-brand" href="v2">{{appName}}</a>
     <button class="navbar-toggler" type="button" (click)="toggleSidebar()">
         <i class="fa fa-bars" aria-hidden="true"></i>
     </button>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts
index a6bc03f0..51af0be1 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/layout/layout.module.ts
@@ -33,7 +33,7 @@
  *
  * ============LICENSE_END============================================
  *
- * 
+ *
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -44,8 +44,18 @@ import { LayoutRoutingModule } from './layout-routing.module';
 import { LayoutComponent } from './layout.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { HeaderComponent } from './components/header/header.component';
-import { MatDialogModule } from '@angular/material/dialog';
-import { CookieService } from 'ngx-cookie-service';
+import {A11yModule} from '@angular/cdk/a11y';
+import {BidiModule} from '@angular/cdk/bidi';
+import {ObserversModule} from '@angular/cdk/observers';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {PlatformModule} from '@angular/cdk/platform';
+import {PortalModule} from '@angular/cdk/portal';
+import {ScrollDispatchModule} from '@angular/cdk/scrolling';
+import {CdkStepperModule} from '@angular/cdk/stepper';
+import {CdkTableModule} from '@angular/cdk/table';
+import { MaterialModule } from '../material-module';
+import {AdminComponent} from '../admin/admin.component';
+import {AdminModule} from '../admin/admin.module';
 
 @NgModule({
     imports: [
@@ -53,9 +63,17 @@ import { CookieService } from 'ngx-cookie-service';
         LayoutRoutingModule,
         TranslateModule,
         NgbDropdownModule,
-        MatDialogModule
+		 MaterialModule,
+        A11yModule,
+        BidiModule,
+        ObserversModule,
+        OverlayModule,
+        PlatformModule,
+        PortalModule,
+        ScrollDispatchModule,
+        CdkStepperModule,
+        CdkTableModule
     ],
-    declarations: [LayoutComponent, SidebarComponent, HeaderComponent],
-    providers:[CookieService]
+    declarations: [LayoutComponent, SidebarComponent, HeaderComponent]
 })
 export class LayoutModule {}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.html
deleted file mode 100644
index e69de29b..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.component.html
+++ /dev/null
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.module.ts
deleted file mode 100644
index e73e3c5a..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/admin.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AdminComponent } from './admin.component';
-
-
-@NgModule({
-  declarations: [AdminComponent],
-  imports: [
-    CommonModule
-  ]
-})
-export class AdminModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.scss b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.scss
deleted file mode 100644
index 34516bbf..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.component.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-table {
-    width: 100%;
-  }
-  
-  .mat-form-field {
-    font-size: 14px;
-    width: 100%;
-  }
-  
-  td, th {
-    width: 25%;
-  }
-
-
-  .mat-accordion .mat-header-row {
-    padding-left: 1.5rem;
-    padding-right: 2rem;
-    border-bottom: none;
-  }
-  
-  
-  //copied from https://github.com/angular/material2/blob/master/src/lib/table/table.scss
-  $mat-header-row-height: 56px;
-  $mat-row-height: 48px;
-  $mat-row-horizontal-padding: 24px;
-  
-  
-  .mat-header-row {
-    min-height: $mat-header-row-height;
-  }
-  
-  .mat-row {
-    min-height: $mat-row-height;
-  }
-  
-  .mat-row, .mat-header-row {
-    display: flex;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    align-items: center;
-    padding: 0 $mat-row-horizontal-padding;
-    box-sizing: border-box;
-  
-    // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
-    // element that will stretch the row the correct height. See:
-    // https://connect.microsoft.com/IE/feedback/details/802625
-    &::after {
-      display: inline-block;
-      min-height: inherit;
-      content: '';
-    }
-  }
-  
-  .mat-cell, .mat-header-cell {
-    flex: 1;
-    overflow: hidden;
-    word-wrap: break-word;
-  }
-  
-  .mat-expansion-panel {
-    margin: 0;
-    border-radius: 4px;
-    overflow: hidden;
-    transition: margin 225ms cubic-bezier(.4,0,.2,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
-  }
-  
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.module.ts
deleted file mode 100644
index 5974dd7b..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/cache-admin/cache-admin.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CacheAdminComponent } from './cache-admin.component';
-import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
-
-@NgModule({
-  declarations: [CacheAdminComponent],
-  imports: [
-    CommonModule,
-    MatFormFieldModule
-  ]
-})
-export class CacheAdminModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.module.ts
deleted file mode 100644
index 3406f5bd..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/role-functions/role-functions.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RoleFunctionsComponent } from './role-functions.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-@NgModule({
-  declarations: [RoleFunctionsComponent],
-  imports: [
-    CommonModule,FormsModule,ReactiveFormsModule,MatFormFieldModule,MatTooltipModule
-  ],
-  exports: [RoleFunctionsComponent],
-  bootstrap: [RoleFunctionsComponent]
-})
-export class RoleFunctionsModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html
deleted file mode 100644
index 6266ee72..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.component.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-  ============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="main-container">
-  <div id="page-content">
-    <div class="ecomp-main-view-title">
-        <h3 class="heading-page">Roles</h3>
-        <span class= "heading-small" *ngIf="isAppCentralized=='true'"><b>Please go to portal to Manage Roles.</b></span>
-    </div>
-
-    <button type="button" *ngIf="isAppCentralized=='false'" class="btn btn-primary new-role-button" (click)="openAddNewRoleModal('')">
-        <i class="icon ion-md-person-add"></i>Add New Role
-    </button>
-            
-    <span class="ecomp-spinner" *ngIf="showSpinner"></span>
-    
-    <div class="role-search">
-      <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="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header id="heading1"> Name</th>
-          <td mat-cell *matCellDef="let rowData"> {{rowData.name}} </td>
-        </ng-container>
-    
-        <ng-container matColumnDef="priority">
-          <th mat-header-cell *matHeaderCellDef   id="heading2"> Priority</th>
-          <td mat-cell *matCellDef="let rowData"> {{rowData.priority}} </td>
-        </ng-container>
-    
-        <ng-container matColumnDef="Edit">
-          <th mat-header-cell *matHeaderCellDef id="heading3">{{roleHeaders[2]}} </th>
-          <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-            <span class="icon-trash" id="{{i}}-button-role-edit"
-              (click)="openAddNewRoleModal(rowData)">
-              <i class="ion ion-md-create"></i>
-          </span>
-          </td>
-        </ng-container>
-    
-        <ng-container matColumnDef="Active?">
-          <th mat-header-cell *matHeaderCellDef id="heading4"> {{roleHeaders[3]}} </th>
-          <td mat-cell *matCellDef="let rowData">
-            <mat-slide-toggle [(ngModel)]="rowData.active" (change)="toggleRole(rowData)"></mat-slide-toggle>      
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="Delete?">
-          <th mat-header-cell *matHeaderCellDef  id="heading6"> {{roleHeaders[4]}} </th>
-          <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let rowData; let i=index;">
-            <span class="icon-trash" id="{{i}}-button-role-remove"
-              (click)="delRoleConfirmPopUp(rowData)">
-              <i class="icon ion-md-trash"></i>
-          </span>
-          </td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="roleHeaders"></tr>
-        <tr mat-row *matRowDef="let rowData; columns: roleHeaders;">
-      </table> 
-      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
-      <span class="ecomp-spinner" *ngIf="showSpinner"></span>
-      <div>
-        <a (click)="getFunctions()" id="functions-link">Manage Role Functions</a><br><br>
-      </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.module.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.module.ts
deleted file mode 100644
index cf3547a3..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/admin/roles/roles.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RolesComponent } from './roles.component';
-
-@NgModule({
-  declarations: [RolesComponent],
-  imports: [
-    CommonModule
-  ]
-})
-export class RolesModule { }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html
index 1c0dc5a2..bc6bf83e 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html
@@ -51,6 +51,7 @@
         <mat-form-field>
             <mat-label class="b2b-dro">Chart Type:</mat-label>
             <mat-select data-select-color="blue" [(ngModel)]="chartJson.chartType" aria-label="reportType" placeholder="Select chart Type">
+                <mat-option value="none">--select--</mat-option>
                 <mat-option  value="BarChart3D" (onSelectionChange)="setBarChartOptions()">Bar Chart</mat-option>
                 <mat-option value="TimeSeriesChart" (onSelectionChange)="setTimeSeriesChartOptions()">Time Series/Area Chart</mat-option>
                 <mat-option value="PieChart">Pie Chart</mat-option>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.spec.ts
index 762d780f..c5fe0a6c 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.spec.ts
@@ -59,6 +59,7 @@ describe('PilotPageComponent', () => {
   it('should test first if condition in saveDefinitionInfo method',()=>{
     component.IncomingReportId=-1;
     component.reportMode="Create";
+    component.reportTitle='Report';
     component.allowScheduler=true;
     component.sizedByContent = true;
     component.saveDefinitionInfo();
@@ -83,7 +84,7 @@ describe('PilotPageComponent', () => {
     expect(component.finalPostObj["dataContainerWidth"]).toEqual(component.widthContainer);
     expect(component.finalPostObj["runtimeColSortDisabled"]).toEqual(component.disableColumnSort);
     expect(component.finalPostObj["numFormCols"]).toEqual(component.runTimeFormNum);
-    expect(component.finalPostObj["reportTitle"]).toEqual(component.reportTitle);
+    expect(component.finalPostObj["reportTitle"]).toEqual('Report');
     expect(component.finalPostObj["reportSubTitle"]).toEqual(component.reportSubTitle);
     expect(component.finalPostObj["oneTimeRec"]).toEqual(component.oneTime);
     expect(component.finalPostObj["hourlyRec"]).toEqual(component.hourly);
@@ -103,6 +104,7 @@ describe('PilotPageComponent', () => {
     component.allowScheduler=true;
     component.sizedByContent = true;
     component.reportType="Dashboard";
+    component.reportTitle='Report';
     component.saveDefinitionInfo();
     
     expect(component.finalPostObj["tabName"]).toEqual("Definition");
@@ -123,6 +125,7 @@ describe('PilotPageComponent', () => {
     component.IncomingReportId=1;
     component.reportMode="Edit";
     component.reportType!="dashboard";
+    component.reportTitle='Report';
     component.saveDefinitionInfo();
     expect(component.finalPostObj["reportTypeList"]).toEqual(null);
     expect(component.finalPostObj["dbInfo"]).toEqual(component.dataSrc);
@@ -134,6 +137,7 @@ describe('PilotPageComponent', () => {
     component.IncomingReportId=1;
     component.reportMode="Edit";
     component.showDialog=true;
+    component.reportTitle='Report';
     let spy=spyOn(_definitionService,'portDefinitionPageDetails').and.returnValue(Observable.of(''))
     component.saveDefinitionInfo();
     expect(spy).toHaveBeenCalled()
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts
index ccd6dbcb..059c90b5 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/definition/definition.component.ts
@@ -385,7 +385,11 @@ export class DefinitionComponent implements OnInit, OnDestroy {
             ];
             this.finalPostObj['runtimeColSortDisabled'] = this.disableColumnSort;
             this.finalPostObj['numFormCols'] = this.runTimeFormNum;
-            this.finalPostObj['reportTitle'] = this.reportTitle;
+            if (this.reportTitle.length > 0) {
+                this.finalPostObj['reportTitle'] = this.reportTitle;
+            } else {
+                this.finalPostObj['reportTitle'] = this.reportName;
+            }
             this.finalPostObj['reportSubTitle'] = this.reportSubTitle;
             this.finalPostObj['oneTimeRec'] = this.oneTime;
             this.finalPostObj['hourlyRec'] = this.hourly;
@@ -397,6 +401,13 @@ export class DefinitionComponent implements OnInit, OnDestroy {
             this.finalPostObj['sizedByContent'] = (this.sizedByContent == true ? 'Y' : 'N');
             this.finalPostObj['repDefType'] = this.reportDefinition;
             if (this.reportType === 'Dashboard') {
+                this.dashboardObj = this.dashboardObj.sort(function (a, b) {
+                    if (a['x'] === b['x']) {
+                        return a['y'] - b['y'];
+                    } else {
+                        return a['x'] - b['x'];
+                    }
+                });
                 this.finalPostObj['dashboardLayoutJSON'] = JSON.stringify(this.dashboardObj);
                 this.finalPostObj['dashboardLayoutHTML'] = this.dashboardLayoutHTML;
             }
@@ -434,6 +445,13 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                 this.IncomingReportId = -1;
             }
             if (this.reportType === 'Dashboard') {
+                this.dashboardObj = this.dashboardObj.sort(function (a, b) {
+                    if (a['x'] === b['x']) {
+                        return a['y'] - b['y'];
+                    } else {
+                        return a['x'] - b['x'];
+                    }
+                });
                 this.finalPostObj['dashboardLayoutJSON'] = JSON.stringify(this.dashboardObj);
                 this.finalPostObj['dashboardLayoutHTML'] = this.dashboardLayoutHTML;
             } else {
@@ -496,7 +514,11 @@ export class DefinitionComponent implements OnInit, OnDestroy {
                 ];
                 this.finalPostObj['runtimeColSortDisabled'] = this.disableColumnSort;
                 this.finalPostObj['numFormCols'] = this.runTimeFormNum;
-                this.finalPostObj['reportTitle'] = this.reportTitle;
+                if ( this.reportTitle.length > 0) {
+                    this.finalPostObj['reportTitle'] = this.reportTitle;
+                } else {
+                    this.finalPostObj['reportTitle'] = this.reportName;;
+                }
                 this.finalPostObj['reportSubTitle'] = this.reportSubTitle;
                 this.finalPostObj['oneTimeRec'] = this.oneTime;
                 this.finalPostObj['hourlyRec'] = this.hourly;
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html
index 60eb927f..fcfcf4d4 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.html
@@ -21,12 +21,12 @@
         <div *ngIf="!showformFiledSpinner" class="stdForm">
             <div *ngIf="formFieldList" class="wrapper">
                 <div *ngFor="let item of formFieldList; let i = index;">
-                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE' && item.visible"
+                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'"
                          class="fieldWidth">
                         <label class="labelWidth">{{item.fieldDisplayName}} :</label> <textarea placement="right" ngbTooltip="comma seperated"
                                                                                                 [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"   [(ngModel)]="formFieldListValueArr[i]" class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_BOX' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <select  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                  class="browser-default custom-select defaultFontSize" required="required"
@@ -35,7 +35,7 @@
                                     class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option>
                         </select>
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field>
                             <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" multiple>
@@ -44,7 +44,7 @@
                             </mat-select>
                         </mat-form-field>
                     </div>
-                    <div *ngIf="item.validationType == 'DATE' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field><input  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                                 [matDatepicker]="picker"
@@ -71,11 +71,11 @@
 
             <div *ngIf="formFieldList" class="wrapper">
                 <div *ngFor="let item of toggleFormFieldRenderArr; let i = index;">
-                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'" class="fieldWidth">
                         <label class="labelWidth">{{item.fieldDisplayName}} :</label><textarea placement="right" ngbTooltip="comma seperated"
                                                                                                [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_BOX' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
                                 class="browser-default custom-select defaultFontSize" required="required"
@@ -85,7 +85,7 @@
                         </select>
 
                     </div>
-                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field>
                             <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
@@ -97,7 +97,7 @@
 
                         <br/>
                     </div>
-                    <div *ngIf="item.validationType == 'DATE' && item.visible" class="fieldWidth">
+                    <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
                         <mat-form-field><input [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" [matDatepicker]="picker"
                                                class="defaultFontSize"
@@ -146,7 +146,7 @@
     <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr"
                     [hitCnt]="hitCnt"
                     [queryString]="getQueryString()"
-                    [reportId]="reportId" [reportMode]="reportMode" [runAgain]="runReportAgain" [groupSelectValue]="groupSelectValue" ></app-run-report>
+                    [reportId]="reportId" [reportMode]="reportMode" [runAgain]="runReportAgain" [groupSelectValue]="groupSelectValue" [chartType]="chartType" ></app-run-report>
 </div>
 
 <div *ngIf="error == true">
@@ -156,4 +156,4 @@
     <h1>Stack Trace:</h1>
     <p>{{stackTrace}}</p>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.ts
index d4baba66..c0856b44 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report-form-fields/run-report-form-fields.component.ts
@@ -60,6 +60,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
     commonFormFields: any[];
     formFieldListValueMap: any;
     saveFormFieldListValueMap: any;
+    chartType = '';
 
     constructor(private _runService: RunService, private _route: ActivatedRoute, private _router: Router) {
         this.formFieldListValueArr = [];
@@ -79,6 +80,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         this.commonFormFields = [];
         this.formFieldListValueMap = new Map<any, any>();
         this.saveFormFieldListValueMap = new Map<any, any>();
+        this.chartType = '';
     }
 
     ngOnDestroy(): void {
@@ -126,6 +128,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         this.commonFormFields = [];
         this.formFieldListValueMap = new Map<any, any>();
         this.saveFormFieldListValueMap = new Map<any, any>();
+        this.chartType = '';
     }
 
     ngOnInit() {
@@ -165,6 +168,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
             .subscribe((responseDefPage) => {
                 this.reportName = responseDefPage['reportName'];
                 this.reportSubTitle = responseDefPage['reportSubTitle'];
+                this.chartType = responseDefPage['chartType'];
                 if (responseDefPage['reportType'] !== 'Dashboard') {
                     if (this.calledWithFormFields == false) {
                         this._runService.getReportData(this.reportId)
@@ -733,7 +737,7 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
     }
 
     editReport(reportId: string) {
-        this._router.navigate(['v2/reports', 'Edit', reportId]);
+        this._router.navigate(['v2/app/reports', 'Edit', reportId]);
     }
 
     showLabelFn() {
@@ -762,8 +766,8 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
         localStorage.clear();
         localStorage.setItem('id', myItem);
         if (this.formFieldGroupObjList != null) {
-            this._router.navigateByUrl('v2/refresh', {skipLocationChange: true}).then(() =>
-                this._router.navigate(['v2/run', this.reportId]));
+            this._router.navigateByUrl('v2/app/refresh', {skipLocationChange: true}).then(() =>
+                this._router.navigate(['v2/app/run', this.reportId]));
         } else {
             this.avoidDoCheck = true;
             this.formFieldListValueMap = new Map<any, any>();
@@ -785,7 +789,9 @@ export class RunReportFormFieldsComponent implements OnInit, OnDestroy {
                 for (let ffGrpValue = 0; ffGrpValue < formFieldGroupObjItem['formFieldList'].length; ffGrpValue++) {
                     this.finalQueryParamsObj[formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId']] = '-1';
                     this.formFieldListValueMap.delete(formFieldGroupObjItem['formFieldList'][ffGrpValue]['fieldId']);
+                    this.triggerFormFieldArr= [];
                 }
+
             }
         }
     }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
index 3a38eba4..ccf6212a 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
@@ -9,9 +9,6 @@ import { environment } from '../../../../../../../../environments/environment';
 import { DisplayHtml } from '../../../display-html';
 import { RunService } from '../../run.service';
 import {FormControl} from '@angular/forms';
-
-
-
 export interface PeriodicElement {
 
 }
@@ -118,8 +115,8 @@ saveResponseObj:any;
                 this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)));
                 localStorage.removeItem(this.inputReportId);
             } else {
-            this._dashboardReportService.getReportDataWithFormFields(this.queryString, this.inputReportId)
-                .subscribe((response) => {
+                this._dashboardReportService.getReportDataWithFormFields(this.queryString, this.inputReportId)
+                    .subscribe((response) => {
                         this.postFetchingReportDataFn(response);
                     });
             }
@@ -128,79 +125,79 @@ saveResponseObj:any;
 
     postFetchingReportDataFn(response: any){
         this.saveResponseObj = response;
-                    this.formFieldPresent = false;
-                    this.responseFormFieldListLength = 0;
-                    this.reportName = response['reportName'];
-                    let columnCntr = 0;
-                    while (response['reportDataColumns'][columnCntr]) {
-                        this.displayedColumnsArr.push(response['reportDataColumns'][columnCntr]['columnTitle'] + ','
-                            + response['reportDataColumns'][columnCntr]['colId']);
-                        columnCntr++;
-                    }
-                    let totalCnt = 0;
-                    while (response['reportTotalDataRows'][totalCnt]) {
-                        this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
-                        totalCnt++;
-                    }
-                    let rdr_cntr = 0;
-                    while (response['reportDataRows'][rdr_cntr]) {
-                        let dca_cntr = 0;
-                        const obj = {};
-                        const reportDataRows = response['reportDataRows'][rdr_cntr];
-                        while (this.displayedColumnsArr[dca_cntr]) {
-                            const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
-                            if (reportDataRows[rowColumnId]) {
-                                let drillDownHtml = '';
-                                let displayValue = '';
-                                drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
-                                displayValue = reportDataRows[rowColumnId]['displayValue'];
-                                if (drillDownHtml !== null &&
-                                    drillDownHtml.length > 0 &&
-                                    !displayValue.includes('linkToReport')) {
-                                    const value = this.convertToLinkToReport(drillDownHtml);
-                                    if (value.length > 0) {
-                                        this.replaceDisplayValue = value + ',' +
-                                            reportDataRows[rowColumnId]['displayValue'];
-                                    } else {
-                                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
-                                    }
-                                } else {
-                                    this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
-                                }
-                                let displayObj: DisplayHtml = new class implements DisplayHtml {
-                                    'background-color': string;
-                                    'font-family': string;
-                                    'font-size': string;
-                                    'font-style': string;
-                                    'font-weight': string;
-                                    'text-align': string;
-                                    'text-decoration': string;
-                                    color: string;
-                                };
-                                if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
-                                    displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
-                                }
-                                displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
-                                if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')) {
-                                    obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
-                                        + '|' + JSON.stringify(displayObj);
-                                } else {
-                                    obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
-                                        + '|' + JSON.stringify(displayObj);
-                                }
-                            }
-                            dca_cntr++;
+        this.formFieldPresent = false;
+        this.responseFormFieldListLength = 0;
+        this.reportName = response['reportName'];
+        let columnCntr = 0;
+        while (response['reportDataColumns'][columnCntr]) {
+            this.displayedColumnsArr.push(response['reportDataColumns'][columnCntr]['columnTitle'] + ','
+                + response['reportDataColumns'][columnCntr]['colId']);
+            columnCntr++;
+        }
+        let totalCnt = 0;
+        while (response['reportTotalDataRows'][totalCnt]) {
+            this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
+            totalCnt++;
+        }
+        let rdr_cntr = 0;
+        while (response['reportDataRows'][rdr_cntr]) {
+            let dca_cntr = 0;
+            const obj = {};
+            const reportDataRows = response['reportDataRows'][rdr_cntr];
+            while (this.displayedColumnsArr[dca_cntr]) {
+                const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
+                if (reportDataRows[rowColumnId]) {
+                    let drillDownHtml = '';
+                    let displayValue = '';
+                    drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
+                    displayValue = reportDataRows[rowColumnId]['displayValue'];
+                    if (drillDownHtml !== null &&
+                        drillDownHtml.length > 0 &&
+                        !displayValue.includes('linkToReport')) {
+                        const value = this.convertToLinkToReport(drillDownHtml);
+                        if (value.length > 0) {
+                            this.replaceDisplayValue = value + ',' +
+                                reportDataRows[rowColumnId]['displayValue'];
+                        } else {
+                            this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
                         }
-                        this.displayedRowObj.push(obj);
-                        rdr_cntr++;
+                    } else {
+                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
                     }
-                    for (let pushCounter = 0; pushCounter < this.displayedColumnsArr.length; pushCounter++) {
-                        this.displayedColumns.push(this.displayedColumnsArr[pushCounter].split(',')[1]);
+                    let displayObj: DisplayHtml = new class implements DisplayHtml {
+                        'background-color': string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'text-align': string;
+                        'text-decoration': string;
+                        color: string;
+                    };
+                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
+                        displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
                     }
-                    this.showSpinner = false;
-                    this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
-                    this.dataSource.sort = this.sort;
-                    this.dataSource.paginator = this.paginator;
+                    displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
+                    if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')) {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                            + '|' + JSON.stringify(displayObj);
+                    } else {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
+                            + '|' + JSON.stringify(displayObj);
+                    }
+                }
+                dca_cntr++;
+            }
+            this.displayedRowObj.push(obj);
+            rdr_cntr++;
+        }
+        for (let pushCounter = 0; pushCounter < this.displayedColumnsArr.length; pushCounter++) {
+            this.displayedColumns.push(this.displayedColumnsArr[pushCounter].split(',')[1]);
+        }
+        this.showSpinner = false;
+        this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
     }
 
     linkToReport(reportID: string, queryParameters: string) {
@@ -212,11 +209,11 @@ saveResponseObj:any;
             length++;
             sessionStorage.setItem(length.toString(), this.parentId + '|' + this.queryString);
         }
-        this._router.navigate(['v2/run', reportID, queryParameters]);
+        this._router.navigate(['v2/app/run', reportID, queryParameters]);
     }
 
     linkToFeedback(feedBackId: string, queryParameters: string) {
-        this._router.navigate(['v2/feedback', feedBackId]);
+        this._router.navigate(['v2/app/feedback', feedBackId]);
     }
 
     linkToMail(mailId: string) {
@@ -274,4 +271,5 @@ saveResponseObj:any;
         return outPut;
     }
 
+
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
index 69de20bf..16c15710 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
@@ -3,7 +3,7 @@
 <div *ngIf="showDashboardReport">
     <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
     Download:
-    <a [routerLink]=""><img class="downloadImg"  (click)="downloadReport('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')" 
+    <a [routerLink]=""><img class="downloadImg"  (click)="downloadReport('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')"
                             placement="top" ngbTooltip="Download Dashboard Report"
                             src="assets/images/xlsx.png"></a>&nbsp;
 
@@ -33,10 +33,10 @@
 </div>
 <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
 <div *ngIf="!showDashboardReport">
-    <div *ngIf="error == false && showChart" [hidden]="isChartAvailable == false" align="center">
+    <div *ngIf="error == false" [hidden]="isChartAvailable == false" align="center">
         <iframe #iframe height="500" style="border: none" width="70%"></iframe>
     </div>
-   
+
     <div>
         <div class="field-group">
 
@@ -65,19 +65,18 @@
                     <ng-container matColumnDef="{{keys}}">
                         <th *matHeaderCellDef align="center" mat-header-cell mat-sort-header>
                             {{displayedColumnsArr[i].split(",")[0]}}</th>
-                        <td *matCellDef="let row" mat-cell>
-                            <div *ngIf="row[keys].split('|')[0] == 'linkToReport'"
-                                 [ngStyle]="setStyle(row[keys].split('|')[4])">
+                        <td *matCellDef="let row" mat-cell [ngStyle]="setStyle(row[keys])">
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToReport'">
                                 <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
                                    [routerLink]="">{{row[keys].split('|')[3]}}</a>
                             </div>
                             <div *ngIf="row[keys].split('|')[0] == 'linkToFeedback'"
-                                 [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                 >
                                 <a (click)="linkToFeedback(row[keys].split('|')[1], row[keys].split('|')[2])"
                                    [routerLink]="">{{row[keys].split('|')[3]}}</a>
                             </div>
                             <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
-                                 [ngStyle]="setStyle(row[keys].split('|')[3])">
+                                 >
                                 <a (click)="linkToMail(row[keys].split('|')[1])"
                                    [routerLink]="">{{row[keys].split('|')[2]}}</a>
                             </div>
@@ -141,4 +140,3 @@
 }
 
 </style>
-
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
index da718262..e1476421 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
@@ -121,10 +121,6 @@ describe('RunReportComponent', () => {
         component.linkToReport("test", "abc");
   })
 
-  it('should test linkToFeedback', () => {
-    component.linkToFeedback("test", "abc");
-  })
-
   it('should test linkToMail', () => {
    component.linkToMail("test");
   })
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
index 7e0ac549..7f1e8331 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
@@ -1,28 +1,28 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
-    OnInit,
-    ViewChild,
+    ElementRef,
     Input,
-    SimpleChange,
+    OnInit,
     SimpleChanges,
-    ChangeDetectorRef,
-    Inject,
-    ElementRef
+    ViewChild
 } from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
-import {MatTable, MatTableDataSource} from '@angular/material/table';
-import {ActivatedRoute, Router} from '@angular/router';
-import {HttpClient} from '@angular/common/http';
-import {environment} from '../../../../../../../environments/environment';
-import {RunService} from '../run.service';
-import {GridsterConfig, GridsterItem, GridType} from 'angular-gridster2';
-import {Observable} from 'rxjs';
-import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
-import {displayGrids} from 'angular-gridster2/lib/gridsterConfig.interface';
-import {DisplayHtml} from '../../display-html';
-import {FormControl} from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../../../../../environments/environment';
+import { RunService } from '../run.service';
+import { GridsterConfig, GridsterItem, GridType } from 'angular-gridster2';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DisplayHtml } from '../../display-html';
+import { FormControl } from '@angular/forms';
+import { HeaderService } from 'src/app/shared/services/header/header.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
 
 export interface PeriodicElement {
 
@@ -33,7 +33,8 @@ const ELEMENT_DATA: PeriodicElement[] = [{}];
 @Component({
     selector: 'app-run-report',
     templateUrl: './run-report.component.html',
-    styleUrls: ['./run-report.component.css']
+    styleUrls: ['./run-report.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RunReportComponent implements OnInit, AfterViewInit {
     @Input('reportId') inputReportId: string;
@@ -44,9 +45,10 @@ export class RunReportComponent implements OnInit, AfterViewInit {
     @Input('hitCnt') hitCnt: number;
     @Input('runAgain') runAgain: string;
     @Input('groupSelectValue') groupSelectValue: string;
+    @Input('chartType') chartType: string;
     @ViewChild('iframe') iframe: ElementRef;
-    @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
-    @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+    @ViewChild(MatPaginator, { static: false } as any) paginator: MatPaginator;
+    @ViewChild(MatSort, { static: false } as any) sort: MatSort;
     dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
     displayedColumns: string[];
     IncomingReportId: string;
@@ -90,7 +92,6 @@ export class RunReportComponent implements OnInit, AfterViewInit {
     timeTaken = '...';
     saveResponseObj: any;
     showBackButton = false;
-    showChart: boolean = false;
 
     constructor(private _http: HttpClient,
         private _route: ActivatedRoute,
@@ -219,7 +220,7 @@ export class RunReportComponent implements OnInit, AfterViewInit {
                 pushItems: true,
                 disablePushOnDrag: false,
                 disablePushOnResize: false,
-                pushDirections: {north: true, east: true, south: true, west: true},
+                pushDirections: { north: true, east: true, south: true, west: true },
                 pushResizeItems: true,
                 disableWindowResize: true,
                 disableWarnings: false,
@@ -245,7 +246,6 @@ export class RunReportComponent implements OnInit, AfterViewInit {
         this.hitCnt = this.runButtonHitCnt;
         this.initialQueryString = this.queryString;
         this.initCounter++;
-
     }
 
     ngAfterViewInit() {
@@ -310,22 +310,22 @@ export class RunReportComponent implements OnInit, AfterViewInit {
                     this.showMoreVert = true;
                     localStorage.removeItem(this.inputReportId);
                 } else {
-                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId)
-                    .subscribe((response) => {
-                        if (response['errormessage']) {
-                            this.showError(response);
-                        } else {
-                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
-                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                    this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId)
+                        .subscribe((response) => {
+                            if (response['errormessage']) {
+                                this.showError(response);
+                            } else {
+                                this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                    this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
                                 this.saveResponseObj = response;
-                            this.postFetchingReportDataFn(response, false);
-                            const endDate: Date = new Date();
-                            const endTime = endDate.getTime();
-                            this.timeTaken = ((endTime - startTime) / 1000).toString();
-                            this.showMoreVert = true;
-                        }
-                    });
-            }
+                                this.postFetchingReportDataFn(response, false);
+                                const endDate: Date = new Date();
+                                const endTime = endDate.getTime();
+                                this.timeTaken = ((endTime - startTime) / 1000).toString();
+                                this.showMoreVert = true;
+                            }
+                        });
+                }
             }
         } else {
             this.showMoreVert = true;
@@ -360,11 +360,9 @@ export class RunReportComponent implements OnInit, AfterViewInit {
             rdc_cntr++;
         }
 
-        if (response['chartWizardAvailable'] === true) {
+        if (response['chartWizardAvailable'] === true && this.chartType !== 'none') {
             this.isChartAvailable = true;
-            if(this.iframe){
-                this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
-            }
+            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
         }
 
         let totalCnt = 0;
@@ -440,9 +438,6 @@ export class RunReportComponent implements OnInit, AfterViewInit {
         }
         this.dataSource.data = this.displayedRowObj;
         this.dataSource.sort = this.sort;
-        if(this.totalRecords >0){
-            this.showChart = true;
-        }
 
     }
 
@@ -455,13 +450,10 @@ export class RunReportComponent implements OnInit, AfterViewInit {
             length++;
             sessionStorage.setItem(length.toString(), this.inputReportId + '|' + this.queryString);
         }
-        this._router.navigate(['v2/run', reportID, queryParameters]);
+        this._router.navigate(['v2/app/run', reportID, queryParameters]);
     }
 
 
-    linkToFeedback(feedBackId: string, queryParameters: string) {
-        this._router.navigate(['v2/feedback', feedBackId]);
-    }
 
     linkToMail(mailId: string) {
         const email = 'mailto:' + mailId;
@@ -509,13 +501,19 @@ export class RunReportComponent implements OnInit, AfterViewInit {
     }
 
     downLoadFile(data: any, type: string, extension: string, reportType: string) {
-        const blob = new Blob([data], {type: type});
-        const dt = new Date();
-        const utcDate = dt.getTime();
-        let fileName = this.reportName + utcDate + '.' + extension;
+        const blob = new Blob([data], { type: type });
+        const date = new Date();
+        const dateStr =
+            ('00' + (date.getMonth() + 1)).slice(-2) +
+            ('00' + date.getDate()).slice(-2) +
+            date.getFullYear() +
+            ('00' + date.getHours()).slice(-2) +
+            ('00' + date.getMinutes()).slice(-2) +
+            ('00' + date.getMilliseconds());
+        let fileName = this.reportName + dateStr + '.' + extension;
         if (reportType === 'Dashboard') {
             fileName = '';
-            fileName = reportType + '-' + this.inputReportId + '.' + extension;
+            fileName = reportType + '_' + this.inputReportId + '_' + dateStr + '.' + extension;
         }
         if (window.navigator.msSaveOrOpenBlob) {
             window.navigator.msSaveBlob(blob, fileName);
@@ -539,7 +537,15 @@ export class RunReportComponent implements OnInit, AfterViewInit {
         }
     }
 
-    setStyle(styles: string) {
+    setStyle(rowData: string) {
+        let styles = '';
+        if (rowData.split('|')[0] === 'linkToReport') {
+            styles = rowData.split('|')[4];
+        } else if (rowData.split('|')[0] === 'linkToMail') {
+            styles = rowData.split('|')[3];
+        } else {
+            styles = rowData.split('|')[1];
+        }
         if (styles.includes('{')) {
             return JSON.parse(styles);
         } else {
@@ -547,6 +553,8 @@ export class RunReportComponent implements OnInit, AfterViewInit {
         }
     }
 
+    
+
     getDisplayTotal(keys: string) {
         if (this.displayTotal.length > 0) {
             return this.displayTotal[0][keys].displayValue;
@@ -633,7 +641,6 @@ export class RunReportComponent implements OnInit, AfterViewInit {
             }
         }
         const split = value.split('&');
-        // const spltFirst = split[0].split('=');
         if (split[1].length <= 0) {
             return outPut;
         }
@@ -651,10 +658,8 @@ export class RunReportComponent implements OnInit, AfterViewInit {
         return outPut;
     }
 
-
-
     takeToReport(queryString: string, reportID: string) {
-        this._router.navigate(['v2/run', reportID, queryString , this.groupSelectValue]);
+        this._router.navigate(['v2/app/run', reportID, queryString, this.groupSelectValue]);
     }
 
     goBack() {
@@ -675,8 +680,7 @@ export class RunReportComponent implements OnInit, AfterViewInit {
             sessionStorage.removeItem('1');
         }
         localStorage.removeItem(this.inputReportId);
-        this._router.navigate(['v2/run', repId, queryString]);
+        this._router.navigate(['v2/app/run', repId, queryString]);
     }
 
 }
-
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run.component.ts
index 46d7af7e..3d339b70 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run.component.ts
@@ -38,14 +38,14 @@ export class RunComponent implements OnInit {
   runReport()
   {
     this.toggle = true;
-   
+
     this._route.params.subscribe(params => {
-      
+
       this.IncomingReportId = params["reportId"];
       this.reportId1 = params["reportId"];
     });
 
-    this.router.navigate(['v2/run', this.reportId1]);
+    this.router.navigate(['v2/app/run', this.reportId1]);
 
   }
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/security/security.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/security/security.component.ts
index 6c994723..b7e14bc6 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/security/security.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/security/security.component.ts
@@ -71,7 +71,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseSecurityInfo) => {
       this.reportSecurityInfo = responseSecurityInfo;
 
-      //console.log(this.reportSecurityInfo);
+      console.log(this.reportSecurityInfo);
 
       this.reportOwnerId = this.reportSecurityInfo["ownerId"];
 
@@ -107,7 +107,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseUserList) => {
       this.reportUserList = responseUserList;
 
-      //console.log(this.reportUserList);
+      console.log(this.reportUserList);
 
       for(let ru=0; ru<this.reportUserList.length; ru++)
       {
@@ -132,7 +132,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseSecurityRoles) => {
       this.reportSecurityRoles = responseSecurityRoles;
 
-      //console.log(this.reportSecurityRoles);
+      console.log(this.reportSecurityRoles);
 
       for(let sr=0; sr<this.reportSecurityRoles.length; sr++)
       {
@@ -145,13 +145,13 @@ export class SecurityComponent implements OnInit {
           this.addRoleEditAccessArr[sr] = true;
         }
       }
-      //console.log(this.reportSecurityRoles);
+      console.log(this.reportSecurityRoles);
 
       this._securityService.getReportRoleList()
     .subscribe((responseRoleList) => {
       this.reportRoleList = responseRoleList;
 
-      //console.log(this.reportRoleList);
+      console.log(this.reportRoleList);
 
       for(let m=0; m<this.reportSecurityRoles.length; m++)
       {
@@ -194,7 +194,7 @@ export class SecurityComponent implements OnInit {
       }
     }
 
-    //console.log(reportUserId);
+    console.log(reportUserId);
 
     this._securityService.addReportUser(reportUserId)
     .subscribe((responseAddUser) => {
@@ -204,7 +204,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseUserList) => {
       this.reportUserList = responseUserList;
 
-      //console.log(this.reportUserList);
+      console.log(this.reportUserList);
 
       this.showUserListSpinner = false;
       });
@@ -227,7 +227,7 @@ export class SecurityComponent implements OnInit {
       }
     }
 
-    //console.log(reportUserId);
+    console.log(reportUserId);
 
     this._securityService.removeReportUser(reportUserId)
     .subscribe((responseRemoveUser) => {
@@ -237,7 +237,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseUserList) => {
       this.reportUserList = responseUserList;
 
-      //console.log(this.reportUserList);
+      console.log(this.reportUserList);
 
       this.showUserListSpinner = false;
       });
@@ -248,8 +248,8 @@ export class SecurityComponent implements OnInit {
 
   addUserEditAccess(reportUserId : string, reportUserIndex : number)
   {
-    //console.log(reportUserId, reportUserIndex);
-    //console.log(this.userEditAccessArr);
+    console.log(reportUserId, reportUserIndex);
+    console.log(this.userEditAccessArr);
     let readOnly="";
 
    if(this.userEditAccessArr[reportUserIndex] === true)
@@ -273,7 +273,7 @@ export class SecurityComponent implements OnInit {
     let roleId;
     this.showRoleListSpinner = true;
 
-    //console.log(this.reportRoleList);
+    console.log(this.reportRoleList);
 
     for(let ro=0; ro<this.reportRoleList.length; ro++)
     {
@@ -283,7 +283,7 @@ export class SecurityComponent implements OnInit {
       }
     }
 
-    //console.log(roleId);
+    console.log(roleId);
 
     this._securityService.addReportRole(roleId)
     .subscribe((addRoleResponse) => {
@@ -292,13 +292,13 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseSecurityRoles) => {
       this.reportSecurityRoles = responseSecurityRoles;
 
-      //console.log(this.reportSecurityRoles);
+      console.log(this.reportSecurityRoles);
 
       this._securityService.getReportRoleList()
     .subscribe((responseRoleList) => {
       this.reportRoleList = responseRoleList;
 
-      //console.log(this.reportRoleList);
+      console.log(this.reportRoleList);
 
       for(let m=0; m<this.reportSecurityRoles.length; m++)
       {
@@ -338,13 +338,13 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseSecurityRoles) => {
       this.reportSecurityRoles = responseSecurityRoles;
 
-      //console.log(this.reportSecurityRoles);
+      console.log(this.reportSecurityRoles);
 
       this._securityService.getReportRoleList()
     .subscribe((responseRoleList) => {
       this.reportRoleList = responseRoleList;
 
-      //console.log(this.reportRoleList);
+      console.log(this.reportRoleList);
 
       for(let m=0; m<this.reportSecurityRoles.length; m++)
       {
@@ -366,7 +366,7 @@ export class SecurityComponent implements OnInit {
 
   addRoleEditAccess(roleId : string, roleIndex : number)
   {
-    //console.log(this.addRoleEditAccessArr);
+    console.log(this.addRoleEditAccessArr);
     let readOnly = "";
 
     if(this.addRoleEditAccessArr[roleIndex] === true)
@@ -391,7 +391,7 @@ export class SecurityComponent implements OnInit {
     this.fetchCnt = 0;
     let finalPostObj = new Object();
 
-    // //console.log(this.reportOwnerList);
+    // console.log(this.reportOwnerList);
     for(let kl=0; kl<this.reportOwnerList.length; kl++)
     {
       if(this.reportOwnerList[kl]["name"] == this.reportOwner)
@@ -408,7 +408,7 @@ export class SecurityComponent implements OnInit {
     {
       finalPostObj["isPublic"] = "false";
     }
-     //console.log(finalPostObj);
+    // console.log(finalPostObj);
 
     this._securityService.saveSecurityTabInfo(finalPostObj)
     .subscribe((responseFinalPost) => {
@@ -420,13 +420,13 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseOwnerList) => {
       this.reportOwnerList = responseOwnerList;
 
-      //console.log(this.reportOwnerList);
+      console.log(this.reportOwnerList);
 
       this._securityService.getReportSecurityInfo()
     .subscribe((responseSecurityInfo) => {
       this.reportSecurityInfo = responseSecurityInfo;
 
-      //console.log(this.reportSecurityInfo);
+      console.log(this.reportSecurityInfo);
 
       this.reportOwnerId = this.reportSecurityInfo["ownerId"];
 
@@ -462,7 +462,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseUserList) => {
       this.reportUserList = responseUserList;
 
-      //console.log(this.reportUserList);
+      console.log(this.reportUserList);
 
       for(let ru=0; ru<this.reportUserList.length; ru++)
       {
@@ -487,7 +487,7 @@ export class SecurityComponent implements OnInit {
     .subscribe((responseSecurityRoles) => {
       this.reportSecurityRoles = responseSecurityRoles;
 
-      //console.log(this.reportSecurityRoles);
+      console.log(this.reportSecurityRoles);
 
       for(let sr=0; sr<this.reportSecurityRoles.length; sr++)
       {
@@ -500,13 +500,13 @@ export class SecurityComponent implements OnInit {
           this.addRoleEditAccessArr[sr] = true;
         }
       }
-      //console.log(this.reportSecurityRoles);
+      console.log(this.reportSecurityRoles);
 
       this._securityService.getReportRoleList()
     .subscribe((responseRoleList) => {
       this.reportRoleList = responseRoleList;
 
-      //console.log(this.reportRoleList);
+      console.log(this.reportRoleList);
 
       for(let m=0; m<this.reportSecurityRoles.length; m++)
       {
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts
index 897aa03e..c1559c75 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/sql/sql.component.ts
@@ -136,7 +136,7 @@ export class SQLComponent implements OnInit {
             } else {
                 this._http.get(environment.baseUrl + 'report/wizard/retrieve_def_tab_wise_data/InSession')
                     .subscribe((response) => {
-                       // console.log(response);
+                        console.log(response);
                         this._router.navigate(['v2/reports', 'Edit', response['reportId']]);
                     });
             }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.component.ts
index 1c2d443e..dfb485e1 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/report-list.component.ts
@@ -42,7 +42,7 @@ export class ReportListComponent implements AfterViewInit, OnInit {
         this.delete = false;
         this.initializeReportList();
     }
-    
+
     initializeReportList() {
         this.showSpinner = true;
         this.dataSource = new AllReportsDataSource();
@@ -148,12 +148,12 @@ export class ReportListComponent implements AfterViewInit, OnInit {
 
     displayReport( reportId: string ) {
         this.reportId = reportId;
-        this._router.navigate( ["v2/reports", "Edit", reportId] );
+        this._router.navigate( ["v2/app/reports", "Edit", reportId] );
     }
 
     runReport( reportId: string ) {
         this.reportId = reportId;
-        this._router.navigate( ['v2/run', reportId] );
+        this._router.navigate( ['v2/app/run', reportId] );
     }
 
     applyFilter( filterValue: string ) {
@@ -182,15 +182,15 @@ export class ReportListComponent implements AfterViewInit, OnInit {
         this.showDialog = !this.showDialog;
         this.closable = false;
     }
-    
+
     openReportSchedule( reportId: string ) {
-        this._router.navigate( ['v2/schedule_report', reportId] );
+        this._router.navigate( ['v2/app/schedule_report', reportId] );
     }
 
  copydisplayReport(reportId : string)
   {
     this.reportId = reportId;
-    this._router.navigate(["v2/reports", "Copy",reportId]);     
+    this._router.navigate(["v2/app/reports", "Copy",reportId]);
   }
 
 }
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
index ec84c3b0..30ba1ff9 100644
--- 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
@@ -36,7 +36,7 @@
  * 
  */
  
-table {
+ table {
   width: 100%;
 }
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.ts
index 44d9e5ef..4c4a01c3 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/shared/services/user/user.service.ts
@@ -20,7 +20,7 @@ data;
 observable;
 
 getFunctionalMenuStaticDetailSession2(){    
-  return this.http.get(environment.getTopMenu,{ withCredentials: true })
+  return this.http.get(environment.getFunctionalMenuStaticDetail,{ withCredentials: true })
    .subscribe((results: Object) => {
    this.user =  new User(results);
    });  
@@ -30,7 +30,7 @@ getFunctionalMenuStaticDetailSession2(){
 
 public getFunctionalMenuStaticDetailSession(): Observable<User> {
   return this.http
-  .get(environment.getTopMenu,{ withCredentials: true })
+  .get(environment.getFunctionalMenuStaticDetail,{ withCredentials: true })
   .map(response => {
   return new User(response);
   })
@@ -43,7 +43,7 @@ getFunctionalMenuStaticDetailSession1() {
   } else if (this.observable) { 
     return this.observable; 
   } else { 
-    this.observable = this.http.get(environment.getTopMenu, { 
+    this.observable = this.http.get(environment.getFunctionalMenuStaticDetail, { 
       withCredentials: true,
       observe: 'response'
     })