From 46c63acfdb4bfa54c5f2a6eb42d80e5dd853488a Mon Sep 17 00:00:00 2001
From: jz385p <jegadeesh.babu@att.com>
Date: Thu, 30 Jan 2020 19:36:10 +0530
Subject: [PATCH] Angular upgrade - Dynamic widget,widget catalog

Angular upgrade

Issue-ID: PORTAL-815
Change-Id: If3db891f2d02efa1d86b71198de97a322ddd0cfa
Signed-off-by: jz385p <jegadeesh.babu@att.com>
---
 .../dynamic-widget/dynamic-widget.component.html   |  38 ++++
 .../dynamic-widget/dynamic-widget.component.scss   | 121 +++++++++++
 .../dynamic-widget.component.spec.ts               |  38 ++++
 .../dynamic-widget/dynamic-widget.component.ts     |  80 +++++++
 .../app/pages/get-access/get-access.component.html |  98 +++++++++
 .../app/pages/get-access/get-access.component.scss |   0
 .../pages/get-access/get-access.component.spec.ts  |  25 +++
 .../app/pages/get-access/get-access.component.ts   | 136 ++++++++++++
 .../web-analytics-details-dialog.component.html    | 117 ++++++++++
 .../web-analytics-details-dialog.component.scss    |  37 ++++
 .../web-analytics-details-dialog.component.spec.ts |  63 ++++++
 .../web-analytics-details-dialog.component.ts      | 156 ++++++++++++++
 .../web-analytics/web-analytics.component.html     |  91 ++++++++
 .../web-analytics/web-analytics.component.scss     |  51 +++++
 .../web-analytics/web-analytics.component.spec.ts  |  63 ++++++
 .../pages/web-analytics/web-analytics.component.ts | 240 +++++++++++++++++++++
 .../widget-catalog/widget-catalog.component.html   | 100 +++++++++
 .../widget-catalog/widget-catalog.component.scss   | 119 ++++++++++
 .../widget-catalog.component.spec.ts               |  25 +++
 .../widget-catalog/widget-catalog.component.ts     |  85 ++++++++
 20 files changed, 1683 insertions(+)
 create mode 100644 portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.html
 create mode 100644 portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.scss
 create mode 100644 portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.spec.ts
 create mode 100644 portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.ts
 create mode 100644 portal-FE-common/src/app/pages/get-access/get-access.component.html
 create mode 100644 portal-FE-common/src/app/pages/get-access/get-access.component.scss
 create mode 100644 portal-FE-common/src/app/pages/get-access/get-access.component.spec.ts
 create mode 100644 portal-FE-common/src/app/pages/get-access/get-access.component.ts
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.html
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.scss
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.spec.ts
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.ts
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics.component.html
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics.component.scss
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics.component.spec.ts
 create mode 100644 portal-FE-common/src/app/pages/web-analytics/web-analytics.component.ts
 create mode 100644 portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.html
 create mode 100644 portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.scss
 create mode 100644 portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.spec.ts
 create mode 100644 portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.ts

diff --git a/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.html b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.html
new file mode 100644
index 00000000..5ea72090
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.html
@@ -0,0 +1,38 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+<div #vc style="overflow-y: scroll;"></div>
diff --git a/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.scss b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.scss
new file mode 100644
index 00000000..570475d7
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.scss
@@ -0,0 +1,121 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+
+
+:host {  .toolbar {
+    height: 100px;
+    display: flex;
+  }  gridster {
+    display: flex;
+    height: calc(100vh - 115px);
+    flex-direction: column;
+  }}
+  .icon-content-gridguide{
+    cursor:move;
+    font-size: 22px; 
+    }
+    .form-row {
+      margin-top: -14px;
+  }
+  .griditem-header{
+    
+    
+      border-bottom: 1px;
+      border-bottom-color: solid gray;
+      
+    
+    
+  }
+ 
+.checkbox, .radio {
+  min-height: 10px; 
+  padding-left: 0px; 
+}
+
+.appCatalogue-boarder{
+  background-color: #eee;
+  border: 1px dashed white;
+  height: 100%;
+  
+  overflow-y: auto;
+  overflow-x: hidden;
+  }
+
+  .gridster-box {
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+ 	transition: transform 0.5s ease-out;
+}
+.gridster-box-header {
+    background-color: #fff;
+    padding: 0 0px 0 10px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+    height: 50px !important;
+}
+.gridster-box-header h3 {
+    margin-top: 15px;
+    display: inline-block;
+    font-size: 70%;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+.gridster-box-content {
+    //padding: 59px;
+    overflow-y: scroll;
+   height:  100%;
+   
+}
+.gridster-box-content:hover{
+    //transform: scale(1.1);
+}
+.gridster-box-header-btns {
+    top: 15px;
+    right: 10px;
+    position: absolute;
+}
+.checkbox input{
+ margin: 6px;
+    left: 112px;
+    top: -20px;
+    }
+.checkbox .skin {
+    left: 125px;
+    top: -18px;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.spec.ts b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.spec.ts
new file mode 100644
index 00000000..bae69386
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.spec.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
diff --git a/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.ts b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.ts
new file mode 100644
index 00000000..21aab3a7
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dynamic-widget/dynamic-widget.component.ts
@@ -0,0 +1,80 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Compiler, Component, Injector, NgModule, NgModuleRef, ViewChild, ViewContainerRef, OnInit, Input } from '@angular/core';
+import { PluginLoaderService } from 'src/app/shared/plugin/plugin-loader/plugin-loader.service';
+
+@Component({
+  selector: 'app-dynamic-widget',
+  templateUrl: './dynamic-widget.component.html',
+  styleUrls: ['./dynamic-widget.component.scss']
+})
+export class DynamicWidgetComponent implements OnInit {
+
+  @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;
+  @Input() widgetType:string;
+
+  constructor(private injector: Injector,
+    private pluginLoader: PluginLoaderService) {
+  }
+
+  ngOnInit() {
+    console.log('this.widgetType'+ this.widgetType);
+    this.loadPlugin(this.widgetType);
+  }
+
+
+  loadPlugin(pluginName: string) {
+
+    setTimeout(() => {
+      this.executePlugin(pluginName);
+      
+    }, 2000);
+ 
+  }
+
+  executePlugin(pluginName: string) {
+    this.pluginLoader.load(pluginName).then(moduleFactory => {
+      const moduleRef = moduleFactory.create(this.injector);
+      const entryComponent = (moduleFactory.moduleType as any).entry;
+      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
+        entryComponent
+      );
+      this._container.createComponent(compFactory);
+    });
+  }
+}
diff --git a/portal-FE-common/src/app/pages/get-access/get-access.component.html b/portal-FE-common/src/app/pages/get-access/get-access.component.html
new file mode 100644
index 00000000..8719ea41
--- /dev/null
+++ b/portal-FE-common/src/app/pages/get-access/get-access.component.html
@@ -0,0 +1,98 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+  <div class="container">
+    <div class="ecomp-main-view-title">
+      <h1 class="heading-page">Get Access</h1>
+      <br>
+      <span> Visit <a id="url-access" [href]="getAccessUrl" target="_new">{{getAccessName}}</a>
+        {{getAccessInfo}}
+      </span>
+    </div>
+    <mat-form-field>
+      <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+    </mat-form-field>
+    <span class="ecomp-spinner" *ngIf="showSpinner"></span>
+    <table mat-table [dataSource]="getAccessDataSource">
+      <!-- Function Column -->
+      <ng-container matColumnDef="function">
+        <th id="col1" mat-header-cell *matHeaderCellDef> Function </th>
+        <td id="rowheader_t1_{{i}}-function" mat-cell *matCellDef="let element; let i = index;">
+          <div id="access-page-function" *ngIf="element.ecomp_function !== 'Onap Function Not Available'">
+            {{element.ecomp_function}}</div>
+          <div id="access-page-function" *ngIf="element.ecomp_function === 'Onap Function Not Available'">
+            {{element.ecomp_function}}</div>
+        </td>
+      </ng-container>
+  
+      <!-- Application Name Column -->
+      <ng-container matColumnDef="applicationName">
+        <th id="col2" mat-header-cell *matHeaderCellDef> Application Name</th>
+        <td id="rowheader_t1_{{i}}-applicationName" mat-cell *matCellDef="let element; let i=index;"> {{element.app_name}}
+        </td>
+      </ng-container>
+  
+      <!-- Role Name Column -->
+      <ng-container matColumnDef="roleName">
+        <th id="col3" mat-header-cell *matHeaderCellDef> Role Name </th>
+        <td id="rowheader_t1_{{i}}-roleName" mat-cell *matCellDef="let element; let i=index;"> {{element.role_name}}
+        </td>
+      </ng-container>
+  
+      <!-- Current Role Column -->
+      <ng-container matColumnDef="currentRole">
+        <th id="col4" mat-header-cell *matHeaderCellDef> Current Role </th>
+        <td id="rowheader_t1_{{i}}-currentRole" mat-cell *matCellDef="let element; let i=index;">
+          <div id="access-page-currentRole" *ngIf="element.current_role === 'Y'">
+            <i class="icon ion-md-checkmark"></i>
+          </div>
+        </td>
+      </ng-container>
+  
+      <!-- Request Status Column -->
+      <ng-container matColumnDef="requestStatus">
+        <th id="col4" mat-header-cell *matHeaderCellDef> Request Status </th>
+        <td id="rowheader_t1_{{i}}-requestStatus" mat-cell *matCellDef="let element; let i=index;">
+          <div id="access-page-RequestAccess" *ngIf="element.request_type !== null">{{element.request_type}}</div>
+        </td>
+      </ng-container>
+  
+      <tr [hidden]="appTable.length === 0" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openExistingAdminModal(row)"></tr>
+    </table>
+    <mat-paginator [hidden]="appTable.length === 0" [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+  </div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/get-access/get-access.component.scss b/portal-FE-common/src/app/pages/get-access/get-access.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/portal-FE-common/src/app/pages/get-access/get-access.component.spec.ts b/portal-FE-common/src/app/pages/get-access/get-access.component.spec.ts
new file mode 100644
index 00000000..ae61740d
--- /dev/null
+++ b/portal-FE-common/src/app/pages/get-access/get-access.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GetAccessComponent } from './get-access.component';
+
+describe('GetAccessComponent', () => {
+  let component: GetAccessComponent;
+  let fixture: ComponentFixture<GetAccessComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GetAccessComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GetAccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/get-access/get-access.component.ts b/portal-FE-common/src/app/pages/get-access/get-access.component.ts
new file mode 100644
index 00000000..a7454894
--- /dev/null
+++ b/portal-FE-common/src/app/pages/get-access/get-access.component.ts
@@ -0,0 +1,136 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { GetAccessService } from 'src/app/shared/services/get-access/get-access.service';
+import { MatTableDataSource, MatPaginator } from '@angular/material';
+import { environment } from '../../../environments/environment';
+
+@Component({
+  selector: 'app-get-access',
+  templateUrl: './get-access.component.html',
+  styleUrls: ['./get-access.component.scss']
+})
+export class GetAccessComponent implements OnInit {
+
+  isLoadingTable: boolean;
+  appTable: any[];
+  displayedColumns: string[] = ['function', 'applicationName', 'roleName', 'currentRole', 'requestStatus'];
+  getAccessDataSource = new MatTableDataSource(this.appTable);
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  showSpinner: boolean;
+  getAccessUrl = environment.getAccessUrl;
+  getAccessName = environment.getAccessName;
+  getAccessInfo = environment.getAccessInfo;
+
+  constructor(private getAccessService: GetAccessService) { }
+
+  ngOnInit() {
+    this.appTable = [];
+    this.getAccessAppsList();
+  }
+
+  applyFilter(filterValue: string) {
+    this.getAccessDataSource.filter = filterValue.trim().toLowerCase();
+  }
+  
+  // Convert this code to typescript after mylogins feature is back again
+  // var resultAccessValue = null;
+       	
+  // $scope.openAppRoleModal = (itemData) => {    	
+  //   if(resultAccessValue){
+  //   let data = null;
+  //           data = {
+  //               dialogState: 2,
+  //               selectedUser:{
+  //                   orgUserId: $scope.orgUserId,
+  //                   firstName: $scope.firstName,
+  //                   lastName: $scope.lastName,
+  //                   headerText: itemData.app_name,
+  //               }
+  //           }
+  //       ngDialog.open({
+  //           templateUrl: 'app/views/catalog/request-access-catalog-dialogs/request-access-catalog.modal.html',
+  //           controller: 'ExternalRequestAccessCtrl',
+  //           controllerAs: 'userInfo',
+  //           data: data
+  //       });
+  //   }
+  //   }
+  
+  //   userProfileService.getUserProfile().then(
+  //     function(profile) {
+  //       $scope.orgUserId = profile.orgUserId;
+  //       $scope.firstName = profile.firstName;
+  //       $scope.lastName = profile.lastName;
+  //   });
+
+  getAccessAppsList() {
+    this.showSpinner = true;
+    this.getAccessService.getListOfApp().subscribe((_res: any) => {
+      var tableData = [];
+      // $log.info('GetAccessCtrl::updateAppsList: getting res');
+      var result = (typeof (_res) != "undefined" && _res != null) ? _res : null;
+      this.showSpinner = false;
+      // $log.info('GetAccessCtrl::updateAppsList: result',result);
+      // $log.info('GetAccessCtrl::updateAppsList: done');
+      var source = result;
+      // $log.info('GetAccessCtrl::updateAppsList source: ', source);
+      for (var i = 0; i < source.length; i++) {
+        var dataArr = source[i];
+        var checkEcompFuncAvail = 'Function Not Available';
+        var reqStatus = 'Pending';
+        dataArr.ecompFunction = (dataArr.ecompFunction === null) ? checkEcompFuncAvail : dataArr.ecompFunction;
+        dataArr.reqType = (dataArr.reqType === 'P') ? reqStatus : dataArr.reqType;
+        var dataTemp = {
+          ecomp_function: dataArr.ecompFunction,
+          app_name: dataArr.appName,
+          role_name: dataArr.roleName,
+          current_role: dataArr.roleActive,
+          request_type: dataArr.reqType
+        }
+        tableData.push(dataTemp);
+      }
+      this.appTable = tableData;
+      this.getAccessDataSource = new MatTableDataSource(this.appTable);
+      this.getAccessDataSource.paginator = this.paginator;
+    }, (_err) => {
+      this.isLoadingTable = false;
+    })
+  }
+}
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.html b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.html
new file mode 100644
index 00000000..01e27a99
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.html
@@ -0,0 +1,117 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+<div class="container">
+    <!--Modal Headers-->
+    <div class="modal-header">
+      <h4 class="modal-title">Web Analytics Report Details</h4>
+      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+          <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  
+    <!--Modal Body goes here-->
+		<div class="modal-body">
+				<div class="app-properties-main">
+            <div [hidden]="isEditMode" style="width: 75%;">
+              <!--<div id='ecomp-small-spinner' class="ecomp-small-spinner"  *ngIf="isAllApplications"></div>-->
+              <div *ngIf="isAllApplications">
+                <span runat="server" ID="required" style="color: Red;"
+                  visible="false">*</span>
+                <mat-form-field class="web-analytics-applications-select">
+                    <mat-label> Application Name </mat-label>
+                    <mat-select name="web-analytics-application-select" id="application" 
+                      name="applicationName" [(ngModel)]="userTableAppReport.appName" [(value)]="selected">
+                      <mat-option *ngFor="let d of allApplications" [value]="d" >{{d.appName}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+              </div>
+              <div id="web-analytics-message-required"
+                *ngIf="!userTableAppReport.appName && userTableAppReport.appName === ''">
+                <small class="mandatory-categories"
+                  style="color: Red; font-size: 11px;">Application Name is Required</small>
+              </div>
+            </div>
+
+            <div class="property-label" *ngIf="isEditMode">
+              <div class="property-label">
+                <span runat="server" ID="required" style="color: Red;" visible="false"> *</span>Application Name :
+              </div>
+              <input id="input-Application-name" type="text" ddh-reset
+                [(ngModel)]="userTableAppReport.appName" style="width: 75%;"
+                name="appId" [disabled]="isEditMode" />
+              <div id="web-analytics-message-required"
+                ng-show="(userTableAppReport.appName && (userTableAppReport.appName.length == 0 ||! userTableAppReport.appName))">
+                <small class="mandatory-categories" style="color: Red; font-size: 11px;">Application ID is  Required</small>
+              </div>
+            </div>
+           
+            <div class="property-label">
+              <div class="property-label">
+                <span runat="server" ID="required" style="color: Red;" visible="false"> *</span>Report Name :
+              </div>
+              <input id="input-report-name" type="text" ddh-reset  [(ngModel)]="userTableAppReport.reportName" style="width: 75%;" />
+              <div id="web-analytics-message-required"
+                [hidden]="(userTableAppReport.reportName && (userTableAppReport.reportName|| userTableAppReport.reportName.length == 0))">
+                <small class="mandatory-categories"
+                  style="color: Red; font-size: 11px;">Report Name is  Required</small>
+              </div>
+            </div>
+           
+            <div class="property-label">
+              <div class="property-label">
+                <span runat="server" ID="required" style="color: Red;"  visible="false"> *</span>Report URL :
+              </div>
+              <input id="input-report-url" type="text" ddh-reset  [(ngModel)]="userTableAppReport.reportSrc" style="width: 75%;" />
+              <div id="web-analytics-message-required"
+                [hidden]="(userTableAppReport.reportSrc && (userTableAppReport.reportSrc || userTableAppReport.reportSrc.length == 0))">
+                <small class="mandatory-categories" style="color: Red; font-size: 11px;">Report URL is Required</small>
+              </div>
+            </div>
+        </div>
+      </div>
+      
+      <!--Modal Footer goes Here-->
+			<div class="modal-footer">
+          <button type="submit" class="btn btn-primary" 
+              [disabled]="(userTableAppReport.appName && userTableAppReport.appName === '')||(userTableAppReport.reportName && (!userTableAppReport.reportName
+              ||userTableAppReport.reportName.length == 0))||(userTableAppReport.reportSrc && (userTableAppReport.reportSrc.length == 0 
+              || !userTableAppReport.reportSrc))"(click)="saveChanges()">Save</button> &nbsp;
+
+          <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+			</div>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.scss b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.scss
new file mode 100644
index 00000000..7a773398
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.scss
@@ -0,0 +1,37 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.spec.ts b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.spec.ts
new file mode 100644
index 00000000..4dc85724
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebAnalyticsDetailsDialogComponent } from './web-analytics-details-dialog.component';
+
+describe('WebAnalyticsDetailsDialogComponent', () => {
+  let component: WebAnalyticsDetailsDialogComponent;
+  let fixture: ComponentFixture<WebAnalyticsDetailsDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WebAnalyticsDetailsDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WebAnalyticsDetailsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.ts b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.ts
new file mode 100644
index 00000000..3b5a23ef
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component.ts
@@ -0,0 +1,156 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { WebAnalyticsService } from 'src/app/shared/services';
+
+@Component({
+  selector: 'app-web-analytics-details-dialog',
+  templateUrl: './web-analytics-details-dialog.component.html',
+  styleUrls: ['./web-analytics-details-dialog.component.scss']
+})
+export class WebAnalyticsDetailsDialogComponent implements OnInit {
+
+  result: any;
+  isEditMode: boolean = false;
+  isAllApplications: boolean = true;
+  emptyImg = null;
+  allApplications: any = [];
+  allApps: any = [];
+            
+  newAppModel = {
+    'appId': null,
+    'appName':null,
+    'reportName': null,
+    'reportSrc': null,
+    'resourceId': null
+  };
+
+  newApp={
+    'appId': '',
+    'appName':''	     		
+  }
+
+  constructor(public activeModal: NgbActiveModal, public ngbModal: NgbModal, 
+    public webAnalyticsService : WebAnalyticsService) { }
+
+  @Input() userTableAppReport: any;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+
+  ngOnInit() {
+    this.isAllApplications = true;
+    if(this.userTableAppReport.appName){
+      this.isEditMode = true;
+    }else{
+      this.isEditMode = false;
+    }
+    //console.log("IsEditMode in Web analytycs Dialog :: ",this.isEditMode)
+    this.getAllApplications();
+  }
+
+  getAllApplications(){
+    this.isAllApplications = true;
+    this.webAnalyticsService.getAllApplications()
+    .subscribe(_data => {
+        this.result = _data;
+        if (this.result == null || this.result == 'undefined') {
+             //console.log('WebAnalyticsService::getAllApplications Failed: Result or result.data is null');
+        }else {
+          for (let i = 0; i < this.result.length; i++) {
+            var application = {
+                appId : this.result[i].id,
+                appName: this.result[i].name,
+                enabled : this.result[i].enabled,
+                restrictedApp :this.result[i].restrictedApp,
+            };
+            this.allApps.push(application);  
+         }
+         for (let i = 0; i < this.allApps.length; i++) {
+          if((this.allApps[i].enabled == true && this.allApps[i].restrictedApp == false) || (this.allApps[i].appId == 1) ) {
+            var validApplication = {
+              appId : this.allApps[i].appId,
+              appName: this.allApps[i].appName,
+            };
+            this.allApplications.push(validApplication);
+          }
+        }
+      }
+    }, error =>{
+      this.isAllApplications = false;
+      console.log(error);
+    });
+  }
+
+  saveChanges(){
+    //console.log("Save Changes Called.");
+    let selectedApplication = this.userTableAppReport.appName;
+    this.newAppModel.appId = selectedApplication.appId;
+    this.newAppModel.appName = selectedApplication.appName;
+    this.newAppModel.reportName = this.userTableAppReport.reportName;
+    this.newAppModel.reportSrc =  this.userTableAppReport.reportSrc;
+    this.newAppModel.resourceId =  this.userTableAppReport.resourceId;
+
+    if (this.isEditMode) {
+      this.newAppModel.appId = this.userTableAppReport.appId;
+      //console.log("Update Analytics..newAppModel :: ",this.userTableAppReport);
+      this.webAnalyticsService.updateWebAnalyticsReport(this.newAppModel)
+      .subscribe(_data => {
+          this.result = _data;
+          //console.log("Update Analytics Response:: ",this.result);
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+      }, error =>{
+        this.isAllApplications = false;
+        console.log(error);
+      });
+    }else{
+      //console.log("Save Analytics.newAppModel :: ",this.userTableAppReport);
+      this.webAnalyticsService.save(this.newAppModel)
+      .subscribe(_data => {
+          this.result = _data;
+          //console.log("Save Analytics Response:: ",this.result);
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+      }, error =>{
+        this.isAllApplications = false;
+        console.log(error);
+      });
+    }
+  }
+}
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.html b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.html
new file mode 100644
index 00000000..4266718b
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.html
@@ -0,0 +1,91 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+  <div class="container">
+    <div class="ecomp-main-view-title">
+        <h1 class="heading-page">Web Analytics Onboarding</h1>
+    </div>
+
+    <mat-form-field>
+      <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+    </mat-form-field>
+
+    <button type="button" style="float: right;" class="btn btn-primary" (click)="openWebAnalyticsModal('')">
+        <i class="icon ion-md-person-add"></i>Add Web Analytics Report
+    </button>
+
+    <div class="webanalytics-table">
+        <table mat-table [dataSource]="dataSource" matSort>
+          <!-- Account Name Column -->
+          <ng-container matColumnDef="applicationName">
+            <th id="col1" mat-header-cell *matHeaderCellDef> Application Name  </th>
+            <td (click)="openWebAnalyticsModal(element)" id="rowheader_t1_{{i}}-applicationName" 
+              mat-cell *matCellDef="let element; let i = index;"> {{element.appName}}
+            </td>
+          </ng-container>
+      
+          <!-- Report Name Column -->
+          <ng-container matColumnDef="reportName">
+            <th id="col2" mat-header-cell *matHeaderCellDef> Report Name </th>
+            <td (click)="openWebAnalyticsModal(element)" id="rowheader_t1_{{i}}-reportName" 
+              mat-cell *matCellDef="let element; let i=index;"> {{element.reportName}} </td>
+          </ng-container>
+
+          <!-- Report URL Column -->
+          <ng-container matColumnDef="reportURL">
+            <th id="col2" mat-header-cell *matHeaderCellDef> Report URL </th>
+            <td (click)="openWebAnalyticsModal(element)" id="rowheader_t1_{{i}}-reportURL" 
+              mat-cell *matCellDef="let element; let i=index;"> {{element.reportSrc}} </td>
+          </ng-container>
+    
+          <!-- Delete Column -->
+          <ng-container matColumnDef="delete">
+            <th id="col4" mat-header-cell *matHeaderCellDef> Delete </th>
+            <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let element; let i=index;">
+              <span class="icon-trash" id="{{i}}-button-portal-admin-remove" (click)="deleteWebAnalyticsReport(element)">
+                <i class="icon ion-md-trash"></i>
+              </span>
+            </td>
+          </ng-container>
+      
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+  </div>
+</div>
+  
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.scss b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.scss
new file mode 100644
index 00000000..c72d11e5
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.scss
@@ -0,0 +1,51 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+.container{
+    overflow-y: auto;
+}
+
+.container .webanalytics-table th{
+    padding-bottom: 15px;
+    padding-right: 40px;
+    font-weight: bold;
+}
+
+.ion-md-trash{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.spec.ts b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.spec.ts
new file mode 100644
index 00000000..76d44cc0
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebAnalyticsComponent } from './web-analytics.component';
+
+describe('WebAnalyticsComponent', () => {
+  let component: WebAnalyticsComponent;
+  let fixture: ComponentFixture<WebAnalyticsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WebAnalyticsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WebAnalyticsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.ts b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.ts
new file mode 100644
index 00000000..eb260911
--- /dev/null
+++ b/portal-FE-common/src/app/pages/web-analytics/web-analytics.component.ts
@@ -0,0 +1,240 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Component, OnInit, ViewChild, Input} from '@angular/core';
+import { WebAnalyticsService } from '../../shared/services/index';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { MatTableDataSource } from '@angular/material';
+import { MatSort, MatPaginator } from '@angular/material';
+import { WebAnalyticsDetailsDialogComponent } from './web-analytics-details-dialog/web-analytics-details-dialog.component';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+
+@Component({
+  selector: 'app-web-analytics',
+  templateUrl: './web-analytics.component.html',
+  styleUrls: ['./web-analytics.component.scss']
+})
+export class WebAnalyticsComponent implements OnInit {
+
+  application: any;
+  isAppSelectDisabled: boolean;
+  selectApp: any;
+  sortedApps: any = [];
+  userAppReports: any = [];
+  userTableAppReports: any= [];
+  userJourneyAnalytics: any = [];
+  userApps: any = [];
+  result: any;
+  isEditMode: boolean = false;
+
+  displayedColumns: string[] = ['applicationName', 'reportName', 'reportURL','delete'];
+  dataSource = new MatTableDataSource(this.userTableAppReports);
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+
+  constructor(public webAnalyticsService: WebAnalyticsService, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+
+    this.application = null;	
+    this.isAppSelectDisabled = false;
+    this.selectApp = 'All Applications';
+    this.sortedApps = [{
+        index: 0,
+        appName: 'All Applications',
+        value: 'All Applications'
+    }];
+
+    this.getAllWebAnalyticsReport();
+    //this.getUserApps();
+
+  }
+
+  getAllWebAnalyticsReport(){
+    //console.log("getAllWebAnalyticsReport called");
+    this.webAnalyticsService.getAllWebAnalyticsReport()
+    .subscribe(_data => {
+        this.result = _data;
+        if (this.result == null || this.result == 'undefined') {
+             console.log('WebAnalyticsService::getAllWebAnalyticsReport Failed: Result or result.data is null');
+        }else {
+          //console.log('WebAnalyticsService::getAllWebAnalyticsReport', this.result);
+          for (let i = 0; i < this.result.length; i++) {
+            var userTableAppReport = {
+                reportName: this.result[i].reportName,
+                reportSrc: this.result[i].reportSrc,
+                appName: this.result[i].appName,
+                appId : this.result[i].appId,
+                resourceId : this.result[i].resourceId
+            };
+            this.userTableAppReports.push(userTableAppReport);
+          }
+          this.populateTableData(this.userTableAppReports);
+        }
+    }, error =>{
+      console.log(error);
+    });
+  }
+
+  deleteWebAnalyticsReport(deleteObj: any){
+    let confirmationMsg = 'You are about to delete this Web Analytics : ' + deleteObj.reportName+ '. Click OK to continue.';
+    this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
+      if (result === 'Ok') {
+        this.userTableAppReports.splice(this.userTableAppReports.indexOf(deleteObj), 1);
+        this.webAnalyticsService.deleteWebAnalyticsReport(deleteObj)
+        .subscribe(_data => {
+            this.userTableAppReports = [];
+            this.getAllWebAnalyticsReport();
+        }, error =>{
+          console.log(error);
+        });
+      }
+    }, (resut) => {
+      return;
+    })
+  }
+
+  getUserApps(){
+    //console.log("getUserApps called");
+    this.webAnalyticsService.getWebAnalyticsAppReports()
+    .subscribe(_data => {
+        this.result = _data;
+        if (this.result == null || this.result == 'undefined') {
+             console.log('WebAnalyticsService::getServiceList Failed: Result or result.data is null');
+         }else {
+          for (let i = 0; i < this.result.length; i++) {
+            var userAppReport = {
+                sizeX: 3,
+                sizeY: 2,
+                reportName: this.result[i].reportName,
+                reportSrc: this.result[i].reportSrc,
+                appName: this.result[i].appName,
+            };
+            
+            if(this.result[i].reportSrc.includes("appName")){
+                let appName = this.result[i].reportSrc.split("appName=").splice(-1)[0];
+                this.webAnalyticsService.getUserJourneyList(appName)
+                .subscribe(_data => {
+                  let userJourneyReports = {
+                    sizeX: 6,
+                    sizeY: 3,
+                      title: appName+" User journey",
+                      analyticsList: this.result
+                  };  
+                  this.userJourneyAnalytics.push(userJourneyReports);
+                }, error =>{
+                  console.log(error);
+                });
+
+            }                               
+            this.userAppReports.push(userAppReport);
+        }
+
+        for (var i = 0; i < this.result.length; i++) {
+            var userApp = {
+                appName: this.result[i].appName,
+            };
+
+            this.userApps.push(userApp);
+        }
+        /*angular.forEach($scope.userApps, function(value, key) {
+            var index = $scope.uniqueUserApps.indexOf(value.appName);
+
+            if (index === -1) {
+                $scope.uniqueUserApps.push(value.appName);
+            }
+        });
+
+
+        for (let i = 1; i <= $scope.uniqueUserApps.length; i++) {
+            this.sortedApps.push({
+                index: i,
+                appName: $scope.uniqueUserApps[i - 1],
+                value: $scope.uniqueUserApps[i - 1]
+            });
+        }*/
+      }
+    }, error =>{
+      //console.log(error);
+    });
+  }
+
+  openWebAnalyticsModal(rowData: any) {
+    const modalRef = this.ngbModal.open(WebAnalyticsDetailsDialogComponent, { size: 'lg' });
+    //console.log("selectedData in parent",rowData);
+    if(rowData != 'undefined' && rowData){
+      modalRef.componentInstance.userTableAppReport = rowData;
+      this.isEditMode = true;
+    }else{
+      modalRef.componentInstance.userTableAppReport  = {};
+      this.isEditMode = false;
+    }
+    modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+      if(receivedEntry.httpStatusCode && receivedEntry.httpStatusCode ==='200' ||
+      receivedEntry.status && receivedEntry.status === 'OK'){
+        this.userTableAppReports = [];
+        this.getAllWebAnalyticsReport();
+      } 
+    });
+  }
+
+
+  populateTableData(userTableAppReports: Array<Object>){
+    this.dataSource = new MatTableDataSource(userTableAppReports);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+  openInformationModal(_title: string, _message: string){
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+    return modalInfoRef;
+  }
+}
diff --git a/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.html b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.html
new file mode 100644
index 00000000..927e264c
--- /dev/null
+++ b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.html
@@ -0,0 +1,100 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+<div class="container">
+  <div id="page-content">
+    <div id="title">
+      <h1>{{'Widget Catalog'}}</h1>
+    </div>
+    <div>
+      <div>
+        <div id="widgets">
+          
+
+          <div style="height: 100%">
+            <gridster [options]="options" class="appCatalogue-boarder">
+
+
+              <div *ngFor="let item of layout">
+              <gridster-item [item]="item" >
+                <div class="gridster-box">
+                  <div class="gridster-box-header">
+
+                    <mat-icon class="icon-content-gridguide">drag_handle</mat-icon>
+                    <h3>{{ item.name | elipsis: 13}}</h3>
+                    <span style="position: absolute;right:1em">
+                      <label id="widget-checkbox-label" class="checkbox">
+
+                        <input type="checkbox" id="{{item.name.split(' ').join('-')}}-checkbox"
+                        [(ngModel)]="item.select" (ngModelChange)="storeSelection(item)" />
+
+
+                        <i class="skin"></i>
+                      </label>
+                    </span>
+
+
+                  </div>
+                  <div class="gridster-box-content" >
+                      <app-dynamic-widget [widgetType] = "item.name"></app-dynamic-widget>
+                  </div>
+
+                </div>
+              </gridster-item>
+            </div>
+
+
+
+            </gridster>
+          </div>
+        </div>
+      </div>
+      <div id="widgets-disclaimer" class="w-ecomp-main-disclaimer">
+        To request access to an application widget, please visit the <a>Get Access</a> page.
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div>
+
+  </div>
+  <div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.scss b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.scss
new file mode 100644
index 00000000..cbdfd12b
--- /dev/null
+++ b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.scss
@@ -0,0 +1,119 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+
+
+:host {  .toolbar {
+    height: 100px;
+    display: flex;
+  }  gridster {
+    display: flex;
+    height: calc(100vh - 115px);
+    flex-direction: column;
+  }}
+  .icon-content-gridguide{
+    cursor:move;
+    font-size: 22px; 
+    }
+    .form-row {
+      margin-top: -14px;
+  }
+  .griditem-header{
+    
+    
+      border-bottom: 1px;
+      border-bottom-color: solid gray;
+      
+    
+    
+  }
+ 
+.checkbox, .radio {
+  min-height: 10px; 
+  padding-left: 0px; 
+}
+
+.appCatalogue-boarder{
+  background-color: #eee;
+  border: 1px dashed white;
+  height: 100%;
+  
+  overflow-y: auto;
+  overflow-x: hidden;
+  }
+
+  .gridster-box {
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+ 	transition: transform 0.5s ease-out;
+}
+.gridster-box-header {
+    background-color: #fff;
+    padding: 0 0px 0 10px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+    height: 50px !important;
+}
+.gridster-box-header h3 {
+    margin-top: 15px;
+    display: inline-block;
+    font-size: 70%;
+    font-family: "Omnes-ECOMP-W02", Arial;
+}
+.gridster-box-content {
+    //padding: 59px;
+    overflow-y: scroll;
+   height:  100%;
+   
+}
+
+.gridster-box-header-btns {
+    top: 15px;
+    right: 10px;
+    position: absolute;
+}
+.checkbox input{
+ margin: 6px;
+    left: 112px;
+    top: -20px;
+    }
+.checkbox .skin {
+    left: 125px;
+    top: -18px;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.spec.ts b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.spec.ts
new file mode 100644
index 00000000..83de0040
--- /dev/null
+++ b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WidgetCatalogComponent } from './widget-catalog.component';
+
+describe('WidgetCatalogComponent', () => {
+  let component: WidgetCatalogComponent;
+  let fixture: ComponentFixture<WidgetCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WidgetCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WidgetCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.ts b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.ts
new file mode 100644
index 00000000..c36f9e11
--- /dev/null
+++ b/portal-FE-common/src/app/pages/widget-catalog/widget-catalog.component.ts
@@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import { GridsterConfig, GridsterItem } from 'angular-gridster2';
+import { WidgetCatalogService } from '../../shared/services/widget-catalog/widget-catalog.service';
+import { IWidgetCatalog } from '../../shared/model/widget-catalog.model';
+import { Observable } from 'rxjs';
+import { inflateRaw } from 'zlib';
+import { UsersService } from 'src/app/shared/services/users/users.service';
+
+
+@Component({
+  selector: 'app-widget-catalog',
+  templateUrl: './widget-catalog.component.html',
+  styleUrls: ['./widget-catalog.component.scss']
+})
+export class WidgetCatalogComponent implements OnInit {
+  widgetCatalogData: IWidgetCatalog[];
+  isCommonError: boolean = false;
+  isApiRunning: boolean = true;
+  userName: string;
+
+
+  get options(): GridsterConfig {
+    return this.widgetCatalogService.options;
+  } get layout(): GridsterItem[] {
+    return this.widgetCatalogService.layout;
+  } constructor(private widgetCatalogService: WidgetCatalogService, private userService: UsersService) {
+
+  }
+
+  ngOnInit() {
+    const widgetCatalogObservable = this.widgetCatalogService.getWidgetCatalog();
+    this.widgetCatalogService.layout = [];
+    this.getUserWidgets(this.userName);
+  }
+
+
+  getUserWidgets(loginName: string) {
+    const widgetCatalogUserObservable = this.userService.getUserProfile();
+    widgetCatalogUserObservable.subscribe((userProfile: any) => {
+      //console.log('UserProfile is ' + userProfile);
+      if (userProfile) {
+        const widgetCatalogObservable = this.widgetCatalogService.getUserWidgets(userProfile.orgUserId);
+        widgetCatalogObservable.subscribe(data => {
+          //console.log("What is coming from backend" + JSON.parse(data));
+          this.widgetCatalogData = data;
+          console.log(this.widgetCatalogData);
+          for (let entry of this.widgetCatalogData) {
+            if (entry[1] == 'Events' || entry[1] == 'News' || entry[1] == 'Resources') {
+              var appCatalog = {
+                id: entry[0],
+                name: entry[1],
+                headerName: entry[2],
+                select: (entry[4] == 'S' || entry[4] === null) ? true : false
+              };
+              this.widgetCatalogService.addItem(appCatalog);
+            }
+          }
+        });
+      }
+    });
+
+  }
+
+  getUserProfile(): Observable<any> {
+    const widgetCatalogObservable = this.userService.getUserProfile();
+    return widgetCatalogObservable;
+  }
+
+  storeSelection(widgetCatalogData: any) {
+    console.log("Store selection called " + widgetCatalogData.select);
+    if (widgetCatalogData) {
+      var appData = {
+        widgetId: widgetCatalogData.id,
+        select: widgetCatalogData.select,
+        pending:false
+      };
+      this.widgetCatalogService.updateWidgetCatalog(appData).subscribe(data => {
+        //console.log("Update App sort data" + data);
+      }, error => {
+        console.log('updateWidgetCatalog error' + error);
+      });
+    }
+
+  }
+}
\ No newline at end of file
-- 
2.16.6