Added home dashboard component related files maste

Added home dashboard component related files maste

Issue-ID: PORTAL-809
Change-Id: Ibd17ccae20bacbe5cd4af6c88fe3d0e2f806e89b
Signed-off-by: jz385p <jegadeesh.babu@att.com>

12 files changed, 997 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.html b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.html
new file mode 100644
index 00000000..3169fa01
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.html
@@ -0,0 +1,87 @@
+<!--
+  ============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 style="height: 100%;">
+  <div class="simulateGridHeader">
+    <span class="simulateGridHeaderTitle">{{'Applications'}}<span class="dashboardSortHeader">{{'Sort by'}}:</span>
+      <div class="dashboard-dropdown" id="sort-by-dropdownid-{{selectedSortType.value}}">
+        <mat-form-field>
+          <mat-select [(ngModel)]="this.selectedSortType.value">
+            <mat-option *ngFor="let option of sortOptions" [value]="option.value"
+              (click)="sortTypeChanged(option.value)">{{option.title}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </span>
+
+  </div>
+
+  <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>
+
+
+            </div>
+            <div class="gridster-box-content" [ngStyle]="{'cursor':'pointer',
+                  'background-image': 'url('+(item.imageLink)+')',
+                  'order': item.order, 
+                  'background-color':'white',
+                  'background-repeat': 'no-repeat',
+                  'background-size': '168px 118px',
+                   'height': '80%'}" (click)="openAddRoleModal(item)">
+            </div>
+
+          </div>
+        </gridster-item>
+      </div>
+
+
+
+
+    </gridster>
+  </div>
+
+
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.scss b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.scss
new file mode 100644
index 00000000..2ab9d6b0
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.scss
@@ -0,0 +1,130 @@
+/*
+ * ============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============================================
+ *
+ * 
+ */
+.simulateGridHeader{
+	position: relative;
+    height: 50px !important;
+    border: 1px solid #d3d3d3;
+    border-bottom: 0;
+    background-color: #E5E5E5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+}
+
+.simulateGridHeaderTitle{
+	line-height: 44px;
+    margin-left: 26px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 18px; 
+    color: #444444;
+    float: left;
+}
+
+.simulateGridHeaderHandle{
+	cursor: move;
+    margin: 12px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+    vertical-align: middle;
+    -ms-interpolation-mode: bicubic;
+    display: block;
+}
+
+/* apps gridsters */
+ul {
+    list-style: none;
+}
+.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-header i {
+font-size: 22px; 
+}
+
+.gridster-box-content {
+    padding: 59px;
+}
+.gridster-box:hover{
+    transform: scale(1.1);
+}
+.gridster-box-header-btns {
+    top: 15px;
+    right: 10px;
+    position: absolute;
+}
+.dashboardSortHeader{
+    margin-top: -44px;
+ margin-left: 700px;
+ }
+ 
+ .dashboard-dropdown
+ {
+ position: absolute;
+ margin-top: -50px;
+ left: 82%;
+ top: 42px;
+ }
+ .appCatalogue-boarder{
+    background-color: #eee;
+    border: 1px dashed white;
+   height: 80%;
+    }
+
+    .icon-content-gridguide{
+        cursor:move;
+        font-size: 14px; 
+        }
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.spec.ts b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.spec.ts
new file mode 100644
index 00000000..48c91804
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.spec.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardApplicationCatalogComponent } from './dashboard-application-catalog.component';
+
+describe('DashboardApplicationCatalogComponent', () => {
+  let component: DashboardApplicationCatalogComponent;
+  let fixture: ComponentFixture<DashboardApplicationCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardApplicationCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardApplicationCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.ts b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.ts
new file mode 100644
index 00000000..baaa4c49
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-application-catalog/dashboard-application-catalog.component.ts
@@ -0,0 +1,205 @@
+/*-
+ * ============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 } from '@angular/core';
+import { GridsterConfig, GridsterItem } from 'angular-gridster2';
+import { ApplicationCatalogService } from '../../shared/services/application-catalog/application-catalog.service';
+import { IApplicationCatalog } from '../../shared/model/application-catalog.model';
+import { IWidgetCatalog } from '../../shared/model/widget-catalog.model';
+import { environment } from 'src/environments/environment';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { CatalogModalComponent } from '../catalog-modal/catalog-modal.component';
+import { ExternalRequestAccessService } from 'src/app/shared/services/external-request-access-service/external-request-access.service';
+import { UsersService } from 'src/app/shared/services/users/users.service';
+import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service';
+
+@Component({
+  selector: 'app-dashboard-application-catalog',
+  templateUrl: './dashboard-application-catalog.component.html',
+  styleUrls: ['./dashboard-application-catalog.component.scss']
+})
+export class DashboardApplicationCatalogComponent implements OnInit {
+
+  widgetCatalogData: IWidgetCatalog[];
+  appCatalogData: IApplicationCatalog[];
+  resultAccessValue: string;
+  orgUserId: string;
+  firstName: string;
+  lastName: string;
+  selectedSortType: any;
+  sortOptions: Array<any>;
+
+  get options(): GridsterConfig {
+    return this.applicationCatalogService.options;
+  } get layout(): GridsterItem[] {
+    return this.applicationCatalogService.layout;
+  } constructor(private applicationCatalogService: ApplicationCatalogService, private externalRequestAccessService: ExternalRequestAccessService, private userService: UsersService,private addTabFuntionService: AddTabFunctionService) {
+    this.sortOptions = [{
+      index: 0,
+      value: 'N',
+      title: 'Name'
+    },
+    {
+      index: 1,
+      value: 'L',
+      title: 'Last used'
+    },
+    {
+      index: 2,
+      value: 'F',
+      title: 'Most used'
+    },
+    {
+      index: 3,
+      value: 'M',
+      title: 'Manual'
+    }
+    ];
+    this.selectedSortType = {};
+   }
+
+  ngOnInit() {
+    this.applicationCatalogService.clearCatalog();
+    //this.selectedSortType = this.sortOptions[0];
+    this.getUserAppsSortTypePreference();
+    //
+    // //this.getUserAppsSortTypePreference();
+    //this.getAppCatalogService('N');
+  }
+
+  getUserAppsSortTypePreference() {
+    this.applicationCatalogService.getUserAppsSortTypePreference().subscribe(data => {
+      //console.log("getUserAppsSortTypePreference data"+data);
+      if (data) {
+        var resJson: any = {};
+        resJson.value = data;
+        if (resJson.value === "N" || resJson.value === "") {
+          resJson.index = 0;
+
+        } else if (resJson.value === "L") {
+          resJson.index = 1;
+
+        } else if (resJson.value === "F") {
+          resJson.index = 2;
+
+        } else {
+          resJson.index = 3;
+
+        }
+
+        this.selectedSortType = this.sortOptions[resJson.index];
+        //console.log(this.selectedSortType);
+        this.getAppCatalogService(data);
+      }
+    }, error => {
+      console.log('getUserAppsSortTypePreference Error Object' + error.message);
+    });
+
+  }
+
+  sortTypeChanged(userAppSortTypePref: string) {
+    //console.log("check whether get into the method");
+    if (!userAppSortTypePref) {
+      this.selectedSortType = this.sortOptions[0];
+    }
+    else {
+      this.sortOptions.forEach(obj => {
+        if (obj.value == userAppSortTypePref) {
+          this.selectedSortType = obj;
+        }
+      })
+
+    }
+
+    this.getAppCatalogService(userAppSortTypePref);
+    this.saveAppsSortTypePreference(this.selectedSortType);
+
+  }
+
+  getAppCatalogService(userAppSortTypePref: string) {
+    //console.log("getAppCatalogServices called");
+    this.applicationCatalogService.getAppsOrderBySortPref(userAppSortTypePref).subscribe(data => {
+      //console.log("Response data" + data);
+      this.appCatalogData = data;
+      if (data) {
+        this.applicationCatalogService.layout = [];
+        for (let entry of data) {
+          //console.log("Check the URL" + environment.api.appThumbnail);
+          var appCatalog = {
+            x: -1,
+            y: -1,
+            id: entry.id,
+            name: entry.name,
+            subHeaderText: entry.notes,
+            imageLink: environment.api.appThumbnail.replace(':appId', <string><any>entry.id),
+            restrictedApp: entry.restrictedApp,
+            select: entry.select,
+            access: entry.access,
+            pending: entry.pending,
+            order: entry.order,
+            url: entry.url,
+            appid: entry.id
+          };
+          this.applicationCatalogService.addItem(appCatalog);
+        }
+      }
+    }, error => {
+      console.log('getAppCatalogServices Error Object' + error);
+    });
+  };
+
+  saveAppsSortTypePreference(selectedSortType: any) {
+    this.applicationCatalogService.saveAppsSortTypePreference(selectedSortType).subscribe();
+
+  }
+
+  openAddRoleModal(item: any) {
+    //console.log("OpenModal check" + item.id+" "+item.url);
+    if (item.restrictedApp) {
+      // Link-based apps open in their own browser tab
+      window.open(item.url, '_blank');
+    } else{
+      var tabContent = {
+        id: new Date(),
+        title: item.name,
+        url: item.url,
+        appId: item.appid
+    };
+      this.addTabFuntionService.filter(tabContent);
+    }
+  }
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.html b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.html
new file mode 100644
index 00000000..9d3ffc7f
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.html
@@ -0,0 +1,77 @@
+<!--
+  ============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 style="height: 100%;">
+
+  <div class="simulateGridHeader">
+    <span class="simulateGridHeaderTitle">{{'Widgets'}}
+    </span>
+
+  </div>
+
+
+  <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>
+
+
+
+            </div>
+            <div class="gridster-box-content">
+              <app-dynamic-widget [widgetType]="item.name"></app-dynamic-widget>
+            </div>
+
+          </div>
+        </gridster-item>
+      </div>
+
+
+
+    </gridster>
+  </div>
+
+
+
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.scss b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.scss
new file mode 100644
index 00000000..553f8b56
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.scss
@@ -0,0 +1,139 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+
+
+ :host {  .toolbar {
+    height: 100px;
+    display: flex;
+  }  gridster {
+    display: flex;
+    height: calc(50vh - 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;
+}
+
+.simulateGridHeader{
+	position: relative;
+    height: 50px !important;
+    border: 1px solid #d3d3d3;
+    border-bottom: 0;
+    background-color: #E5E5E5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    z-index: 1;
+}
+
+.simulateGridHeaderTitle{
+	line-height: 44px;
+    margin-left: 26px;
+    font-family: "Omnes-ECOMP-W02", Arial;
+    font-size: 18px; 
+    color: #444444;
+    float: left;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.spec.ts b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.spec.ts
new file mode 100644
index 00000000..7ae5f770
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.spec.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardWidgetCatalogComponent } from './dashboard-widget-catalog.component';
+
+describe('DashboardWidgetCatalogComponent', () => {
+  let component: DashboardWidgetCatalogComponent;
+  let fixture: ComponentFixture<DashboardWidgetCatalogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardWidgetCatalogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardWidgetCatalogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.ts b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.ts
new file mode 100644
index 00000000..dbdd2928
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard-widget-catalog/dashboard-widget-catalog.component.ts
@@ -0,0 +1,126 @@
+/*-
+ * ============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 } 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-dashboard-widget-catalog',
+  templateUrl: './dashboard-widget-catalog.component.html',
+  styleUrls: ['./dashboard-widget-catalog.component.scss']
+})
+export class DashboardWidgetCatalogComponent 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') {
+              if(entry[4] === 'S' || entry[4] === null)
+              {
+              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 && widgetCatalogData.select) {
+      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);
+      });
+    }
+
+  }
+}
diff --git a/portal-FE-common/src/app/pages/dashboard/dashboard.component.html b/portal-FE-common/src/app/pages/dashboard/dashboard.component.html
new file mode 100644
index 00000000..c5c21efb
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard/dashboard.component.html
@@ -0,0 +1,62 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+
+              http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+
+              https://creativecommons.org/licenses/by/4.0/
+
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+  ============LICENSE_END============================================
+
+
+  -->
+<div>
+
+      <div style="height:calc(50vh );">
+            <app-dashboard-application-catalog></app-dashboard-application-catalog>
+      </div>
+      <div style="height: calc(50vh );">
+        <app-dashboard-widget-catalog></app-dashboard-widget-catalog>
+      </div>
+
+
+      <!--
+      <div class="gridster-container override_background" style="height: calc(30vh - 20px );">
+
+            <div id="dashboardAddWidgetPreference" [ngStyle]="{'cursor':'pointer'}"
+                  (click)="dashboard.goToWidgetCatLog()">
+                  <i class="icon-controls-add-maximize"></i>{{'Add Widget'}}
+            </div>
+            &nbsp;
+            <div id="dashboardDefaultPreference" [ngStyle]="{'cursor':'pointer'}" (click)="restoreSortSelected()">
+                  <i class="icon-arrows-replay-restart"></i> {{'Reset Widget Layout'}}
+            </div>
+      </div>
+      -->
+
+</div>
diff --git a/portal-FE-common/src/app/pages/dashboard/dashboard.component.scss b/portal-FE-common/src/app/pages/dashboard/dashboard.component.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard/dashboard.component.scss
diff --git a/portal-FE-common/src/app/pages/dashboard/dashboard.component.spec.ts b/portal-FE-common/src/app/pages/dashboard/dashboard.component.spec.ts
new file mode 100644
index 00000000..9c996c37
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/dashboard/dashboard.component.ts b/portal-FE-common/src/app/pages/dashboard/dashboard.component.ts
new file mode 100644
index 00000000..6f25e745
--- /dev/null
+++ b/portal-FE-common/src/app/pages/dashboard/dashboard.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { UserProfileService } from 'src/app/shared/services';
+import { PluginComponent} from 'src/app/shared/plugin/plugin.component';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+  
+
+  constructor(private userProfile: UserProfileService) { }
+
+  ngOnInit() {
+    // remove this after portal upgrade is done
+    this.userProfile.getFunctionalMenuStaticInfo();
+  }
+
+  
+
+}