Integrated UI lazy loading and Raptor update

Integrated UI lazy loading and Raptor update

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

22 files changed, 2010 insertions, 0 deletions

diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.html
new file mode 100644
index 00000000..26c5c21d
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.html
@@ -0,0 +1,39 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+   
+-->
+<div style="display: block; height: 250px; width: 400px;"> 
+  <canvas id="fixes-enhancements" style="display: block; height: 250px; width: 400px;"></canvas>
+</div>
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.scss b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.scss
new file mode 100644
index 00000000..8cacac55
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.scss
@@ -0,0 +1,37 @@
+/*
+ * ============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============================================
+ *
+ * 
+ */
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.spec.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.spec.ts
new file mode 100644
index 00000000..b7c66f0b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.spec.ts
@@ -0,0 +1,63 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarChartComponent } from './bar-chart.component';
+
+describe('BarChartComponent', () => {
+  let component: BarChartComponent;
+  let fixture: ComponentFixture<BarChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BarChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarChartComponent);
+    component = fixture.componentInstance;
+    //fixture.detectChanges();
+  });
+
+  //it('should create', () => {
+    //expect(component).toBeTruthy();
+  //});
+});
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts
new file mode 100644
index 00000000..4b7a7811
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/bar-chart/bar-chart.component.ts
@@ -0,0 +1,109 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'chart.js';
+
+@Component({
+  selector: 'app-bar-chart',
+  templateUrl: './bar-chart.component.html',
+  styleUrls: ['./bar-chart.component.scss']
+})
+export class BarChartComponent implements OnInit {
+  fixesEnhancementBarChart = [];
+    constructor() { }
+  
+    ngOnInit() {
+      this.getLineChart();
+    }
+  
+    getLineChart(){
+        this.fixesEnhancementBarChart = new Chart('fixes-enhancements',{
+          type:'bar',
+          data:{
+            labels:['Q1-2015','Q2-2015','Q3-2015','Q4-2015'],
+            datasets:[
+              {label:'SAMPLE 7',
+                data:[88.87,98.97,37.26,71.70],
+                backgroundColor:'#1f77b4',
+                borderColor:'#1f77b4',
+                fill:false
+              },
+              {label:'SAMPLE 6',
+              data:[11.13,15.17,19.21,75.76],
+                backgroundColor:'#ff7f0e',
+                borderColor:'#ff7f0e',
+                fill:false
+              },
+              {label:'SAMPLE 5',
+              data:[100.00,100.00,100.00,100.00,99.99],
+                backgroundColor:'#3a6657',
+                borderColor:'#3a6657',
+                fill:false
+              },
+              {label:'SAMPLE 4',
+              data:[11.88,12.44,44.76,76.67],
+                backgroundColor:'#ff2e0e',
+                borderColor:'#ff2e0e',
+                fill:false
+              },
+              {label:'SAMPLE 3',
+              data:[80.69,82.42,72.36,72.90],
+                backgroundColor:'#ff0eef',
+                borderColor:'#ff0eef',
+                fill:false
+              },
+              {label:'SAMPLE 2',
+              data:[11.74,22.31,33.15,44.16],
+                backgroundColor:'#ff0e5a',
+                borderColor:'#ff0e5a',
+                fill:false
+              },
+              {label:'SAMPLE 1',
+              data:[95.78,97.61,97.86,98.53],
+                backgroundColor:'#0edbff',
+                borderColor:'#0edbff',
+                fill:false
+              }, 
+            ]
+          }
+        }
+  
+        )
+    }
+}
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.css b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.css
new file mode 100644
index 00000000..5ca96efd
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.css
@@ -0,0 +1,77 @@
+/*
+ * ============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============================================
+ *
+ * 
+ */
+ 
+.note {
+    background-color: rgb(255, 240, 70);
+    position: relative;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); 
+    margin-bottom: 1em;
+    border-radius: 10px 10px 0px 0px;
+}
+
+.note_toolbar {
+    background: #7f6c04;
+    border-radius: 8px 8px 0px 0px;
+}
+
+.close {
+    top: 5px;
+    cursor:pointer;
+    color: white;
+    position: relative;
+}
+
+.content {
+    padding: 5px;
+    outline: none;
+    height: 150px;
+    border-radius: 8px;
+    overflow-y: auto;
+    font-size: large;
+}
+
+.footer{
+  text-align: center
+}
+button {
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    font-size: x-large;
+    outline: none;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.html
new file mode 100644
index 00000000..f842511f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.html
@@ -0,0 +1,47 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+   
+-->
+<div class="note">
+  <div class="note_toolbar">
+	  <span class="close material-icons" (click)="onDismiss($event)">close</span>
+  </div>
+	<div class="content" contenteditable="true" (blur)="onFocusOut($event)">
+		<ng-content></ng-content>
+	</div>
+  <div class="footer">
+	  <button class="material-icons" (click)="record($event)">settings_voice</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.spec.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.spec.ts
new file mode 100644
index 00000000..b512fc1f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.spec.ts
@@ -0,0 +1,76 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoteComponent } from './note.component';
+
+describe('NoteComponent', () => {
+  let component: NoteComponent;
+  let fixture: ComponentFixture<NoteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  // beforeEach(() => {
+  //   fixture = TestBed.createComponent(NoteComponent);
+  //   component = fixture.componentInstance;
+  //   fixture.detectChanges();
+  // });
+
+  // it('should create', () => {
+  //   expect(component).toBeTruthy();
+  // });
+
+  // it('should test onDismiss method',()=>{
+  //   component.onDismiss("onDismiss");
+  // })
+
+  // it('should test onFocusOut method',()=>{
+  //   component.onFocusOut("onFocusOut");
+  // })
+
+  //it('should test record method',()=>{
+    //component.record(4);
+ // })
+
+});
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.ts
new file mode 100644
index 00000000..d8935f7c
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/note/note.component.ts
@@ -0,0 +1,83 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import {Component, HostBinding, EventEmitter, Output, ElementRef} from '@angular/core'
+//declare var webkitSpeechRecognition:any;
+//declare var SpeechRecognition:any;
+@Component({
+  selector:'app-note',
+  templateUrl:'./note.component.html',
+  styleUrls:['./note.component.css']
+})
+
+export class NoteComponent {
+  //SpeechRecognition:any =webkitSpeechRecognition;
+  
+  recognition:any;
+
+  @Output() dismiss = new EventEmitter();
+  @Output() focusout = new EventEmitter();
+  constructor(private el:ElementRef) {
+   const {webkitSpeechRecognition} : IWindow = <IWindow>window;
+
+    // Commented below code as it works only for chrome browser.
+
+    // this.recognition = new webkitSpeechRecognition();
+    // this.recognition.onresult = (event)=> {
+    //   this.el.nativeElement.querySelector(".content").innerText += event.results[0][0].transcript
+    //   console.log(event.results[0][0].transcript) 
+    //   document.getElementById('toolbar').focus();
+    // };
+  }
+  
+  onDismiss(event){
+    this.dismiss.emit(event);
+  }
+  
+  onFocusOut(event){
+    this.focusout.emit(event)
+  }
+
+  record(event) {
+    this.recognition.start();
+  }
+
+}
+
+export interface IWindow extends Window {
+  webkitSpeechRecognition: any;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.html
new file mode 100644
index 00000000..8bc42862
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.html
@@ -0,0 +1,39 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+   
+-->
+<div  style="display: block; height: 250px; width: 428px;">
+    <canvas id="fb-root-causes" style="display: block; height: 250px; width: 428px;"></canvas>
+</div>
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.scss b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.scss
new file mode 100644
index 00000000..8cacac55
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.scss
@@ -0,0 +1,37 @@
+/*
+ * ============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============================================
+ *
+ * 
+ */
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.spec.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.spec.ts
new file mode 100644
index 00000000..4ec49f2c
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.spec.ts
@@ -0,0 +1,53 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PieChartComponent } from './pie-chart.component';
+
+describe('PieChartComponent', () => {
+  let component: PieChartComponent;
+  let fixture: ComponentFixture<PieChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PieChartComponent ]
+    })
+    .compileComponents();
+  }));
+});
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts
new file mode 100644
index 00000000..356c85a6
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/pie-chart/pie-chart.component.ts
@@ -0,0 +1,87 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'chart.js';
+
+@Component({
+  selector: 'app-pie-chart',
+  templateUrl: './pie-chart.component.html',
+  styleUrls: ['./pie-chart.component.scss']
+})
+export class PieChartComponent implements OnInit {
+
+  userFeedbackRootCausePieChart = [];
+  constructor() { }
+
+  ngOnInit() {
+    this.getPieChart();
+  }
+
+
+  getPieChart(){
+    this.userFeedbackRootCausePieChart = new Chart('fb-root-causes',{
+      type:'doughnut',
+      options:{
+        responsive:true,
+        title:{
+          display:false,
+          text:'ENMT USer Feedback Root Cause Analysis in 2019'
+        },
+        legend:{
+          position:'right'
+        }
+      },
+     
+      data:{
+        labels:['AGPS','OTDOA','CELL_ID',
+                 'ECID','UNKNOWN','RTT','DBH'],
+        datasets:[
+          {label:'Root Causes',
+            data:[17888,131,40,786,1404,1173,95],
+            backgroundColor:["red","orange","yellow","green","blue","#1f77b4","#77b41f"]
+            
+          }         
+        ]
+      }
+    }
+
+    )
+}
+
+}
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.css b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.css
new file mode 100644
index 00000000..50a2f690
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.css
@@ -0,0 +1,331 @@
+/*
+ * ============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============================================
+ *
+ * 
+ */
+ 
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.more-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}
+
+
+
+
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.more-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}
+
+.mat-card-header{
+ background: #eceeef
+}
+
+.line {fill:none; stroke:black;stroke-width: 1.5;}
+.line-0 {fill:none; stroke:#1f77b4;stroke-width: 1.5;stroke-dasharray:4,10;}
+.line-1 {fill:none; stroke:#ff7f0e;stroke-width: 1.5;stroke-dasharray:2,5.10;}
+.line-2 {fill:none; stroke:#2ca02c;stroke-width: 1.5;}
+.line-3 {fill:none; stroke:#d62728;stroke-width: 1.5;}
+.line-4 {fill:none; stroke:#9467bd;stroke-width: 1.5;}
+.line-5 {fill:none; stroke:#8c564b;stroke-width: 1.5;}
+.line-6 {fill:none; stroke:#e377c2;stroke-width: 1.5;}
+.line-7 {fill:none; stroke:#7f7f7f;stroke-width: 1.5;}
+.line-8 {fill:none; stroke:#bcbd22;stroke-width: 1.5;}
+.line-9 {fill:none; stroke:b#17becf;stroke-width: 1.5;}
+
+.bar { fill:#aaa; stroke:white;stroke-width: 1;}
+.bar-value { fill:black;font-size: 8pt;}
+.name { font-size: 10pt;text-anchor: middle}
+path {fill:white;stroke:black;stroke-width:0.5;}
+.axis text {
+    font-family: sans-serif;
+    font-size: 11px;
+}
+.axis path,
+.axis line {
+    fill: none;
+    stroke: black;
+}
+.axis_x line {
+    fill: none;
+    stroke: black;
+}
+.chart-title { fill:red;font-size: 18pt;text-anchor: middle;}
+.histogram-bar{fill:blue; stroke:white;stroke-width: 1;}
+.axis-x-text{ fill:blue;font-size: 12pt;}
+.treemap { stroke:black;fill:#777}		
+.treemap-label { font-size: 10pt;text-anchor: middle}
+.packlayout{ stroke:black;}
+.packlayout-label{ font-size: 10pt;text-anchor: middle}
+.pie-inner-title {font-size:9pt;text-anchor:middle;}
+.pieNum {font-size:10pt;text-anchor:middle;}
+.grid {stroke:gray;stroke-dasharray: 4,2;shape-rendering:crispEdges}
+
+.tree-node circle {
+    fill: #fff;
+    stroke: steelblue;
+    stroke-width: 3px;
+}
+.tree-node text { 
+    font: 12px sans-serif; 
+}
+.tree-node-internal text {
+    text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
+}
+.tree-node-link {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 2px;
+}
+.force-links line {
+stroke: #999;
+stroke-opacity: 0.6;
+}
+
+.force-nodes circle {
+stroke: #fff;
+stroke-width: 1.5px;
+}
+
+
+.example-handle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #ccc;
+  cursor: move;
+  width: 24px;
+  height: 24px;
+}
+
+.mat-card:not([class*=mat-elevation-z]) {
+  box-shadow: 0 2px 1px -1px rgba(0,0,0,1), 
+              0 1px 1px 0 rgba(0,0,0,1), 
+              0 1px 3px 0 rgba(0,0,0,1);
+}
+
+
+.mat-card-content, .mat-card-subtitle {
+  font-size: 10px;
+}
+
+.mat-card-imp-links{
+  font-size: 12px;
+  text-align:left; 
+}
+
+.mat-card-feedback-enh{
+  font-size: 18px;
+  font-weight: 480;
+  font-family: Roboto,"Helvetica Neue",sans-serif;
+}
+
+
+.app {
+  overflow: auto;
+  margin-bottom: 50px;
+}
+.toolbar {
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height:55px;
+  text-align: center;
+  position: fixed;
+  width: 100%;
+  background-color: gold;
+  border: 10px solid gray;
+  border-bottom: 0;
+  color: gray;
+  font-size: -webkit-xxx-large;
+  font-weight: bold;
+}
+
+button {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-size: xx-large;
+  outline: none;
+}
+.record {
+float: right;
+}
+
+
+
+/*
+gridster-item div.button-holder {
+  width: 100%;
+  height: 100%;
+ display: flex;
+   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+*/
+/*
+gridster-item .item-buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+}*/
+
+/*
+gridster-item .gridster-item-content {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.gridster-item-content {
+  background-color: yellow;
+  height: 100%;
+}
+
+:host {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.destroy-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 100;
+}*/
+
+/*
+.icon-content-gridguide{
+  cursor:move;
+  font-size: 14px; 
+  }
+  .form-row {
+    margin-top: -14px;
+}
+
+.appCatalogue-boarder{
+  background-color: #eee;
+  border: 1px dashed white;
+  
+  overflow-y: auto;
+  overflow-x: hidden;
+  }*/
+
+ /* .gridster {
+    height: calc(100vh - 600px); 
+    width: 100%;
+}*/
+.appCatalogue-boarder{
+  background-color: #eee;
+  border: 1px dashed white;  
+  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: rgba(245, 245, 245, 0.767);
+  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: medium;
+  font-family: "Omnes-ECOMP-W02", Arial;
+}
+.gridster-box-content {
+  padding: 59px;
+}
+/*
+.gridster-box:hover{
+  transform: scale(1.1);
+}*/
+.gridster-box-header-btns {
+  top: 15px;
+  right: 10px;
+  position: absolute;
+}
+
+td {
+  font-weight: normal;
+  font-family: "Omnes-ECOMP-W02", Arial;
+  border: 1px solid white;
+  color: #1f77b4;
+}
+a{
+  font-weight: normal;
+  color: #1f77b4;
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.html
new file mode 100644
index 00000000..a58d7e50
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.html
@@ -0,0 +1,200 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal SDK
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+   
+-->
+
+<gridster [options]="gridOptions" class="appCatalogue-boarder">
+  <div *ngFor="let item of dashboard">
+      <!--Bar Chart-->
+      <div *ngIf="item.id===2">
+        <gridster-item [item]="item" > 
+          <div class="gridster-box"> 
+            <div class="gridster-box-header">
+              <h3>Call Success Rate</h3>
+              <div class="gridster-box-content">
+                <app-bar-chart></app-bar-chart>
+              </div>      
+              <div  *ngIf="item.hasContent">
+                <button mat-icon-button mat-raised-button class="drag-handler">
+                  <mat-icon>open_with</mat-icon>
+                </button>
+                <button mat-icon-button mat-raised-button class="remove-button" (mousedown)="removeItem($event, item)"
+                        (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+              <label *ngIf="!item.hasContent">{{item.label}}</label>
+              <button mat-mini-fab *ngIf="!item.hasContent" (mousedown)="removeItem($event, item)"
+                      (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </gridster-item>
+      </div>
+
+      <!--  Pie Chart -->
+      <div *ngIf="item.id===3">
+        <gridster-item [item]="item" > 
+            <div class="gridster-box"> 
+              <div class="gridster-box-header">
+                <h3>Call Position Method Distribution on 10/14/2001</h3>
+                <div class="gridster-box-content">
+                  <app-pie-chart></app-pie-chart>
+                </div>      
+                <div  *ngIf="item.hasContent">
+                  <button mat-icon-button mat-raised-button class="drag-handler">
+                    <mat-icon>open_with</mat-icon>
+                  </button>
+                  <button mat-icon-button mat-raised-button class="remove-button" (mousedown)="removeItem($event, item)"
+                          (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <label *ngIf="!item.hasContent">{{item.label}}</label>
+                <button mat-mini-fab *ngIf="!item.hasContent" (mousedown)="removeItem($event, item)"
+                        (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+          </gridster-item>
+      </div>
+
+
+      <!--  important links -->
+      <div *ngIf="item.id===4">
+        <gridster-item [item]="item" > 
+          <div class="gridster-box"> 
+            <div class="gridster-box-header">
+                <h3>Important Links</h3>
+                <div class="gridster-box-content" style="height:390px">
+                  <div>
+                    <table>
+                      <thead>
+                        <th></th>
+                        <th></th>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>1. <td>
+                          <td><a href="#" target="_blank">Sample Network Simulator</a>
+                        </td>
+                        </tr>               
+                        <tr> 
+                          <td>2. <td>                 
+                          <td><a href="#" target="_blank">Work Space – Shared Folder</a></td>                
+                        </tr>
+                        <tr>
+                          <td>3. <td>
+                          <td><a href="#" target="_blank">Sample Help Documents</a></td>                            
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>      
+                <div  *ngIf="item.hasContent">
+                  <button mat-icon-button mat-raised-button class="drag-handler">
+                    <mat-icon>open_with</mat-icon>
+                  </button>
+                  <button mat-icon-button mat-raised-button class="remove-button" (mousedown)="removeItem($event, item)"
+                            (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                      <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <label *ngIf="!item.hasContent">{{item.label}}</label>
+                <button mat-mini-fab *ngIf="!item.hasContent" (mousedown)="removeItem($event, item)"
+                          (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+          </gridster-item>
+        </div>
+
+        <!--  Sticky Notes -->
+        <div *ngIf="item.id===5">
+          <gridster-item [item]="item" > 
+          <div class="gridster-box"> 
+            <div class="gridster-box-header">
+              <h3>Sticky Notes</h3>
+              <div class="gridster-box-content">
+                <mat-card>
+                  <mat-card-header>
+                      <mat-card-title>
+                        Sticky Notes
+                        <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
+                          <mat-icon>more_vert</mat-icon>
+                        </button>
+                        <mat-menu #menu="matMenu" xPosition="before">
+                          
+                        </mat-menu>
+                      
+                          <button class="add material-icons" (click)="addNote()" >
+                          note_add
+                          </button>
+                      
+                      </mat-card-title>
+                    </mat-card-header>
+                    <mat-card-content class="dashboard-card-content">
+                      
+                      
+                        <div class="app">
+                          <app-note *ngFor="let note of notes" (dismiss)="deleteNote($event)" (focusout)="saveNote($event)" id="{{note.id}}">{{note.content}}</app-note>
+                        </div>
+                        
+                    </mat-card-content>
+                  </mat-card>
+                </div>      
+                <div  *ngIf="item.hasContent">
+                  <button mat-icon-button mat-raised-button class="drag-handler">
+                    <mat-icon>open_with</mat-icon>
+                  </button>
+                  <button mat-icon-button mat-raised-button class="remove-button" (mousedown)="removeItem($event, item)"
+                      (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </div>
+                <label *ngIf="!item.hasContent">{{item.label}}</label>
+                <button mat-mini-fab *ngIf="!item.hasContent" (mousedown)="removeItem($event, item)"
+                    (touchstart)="removeItem($event, item)" matTooltip="Remove">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+          </gridster-item>
+        </div>
+    </div>
+</gridster>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.spec.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.spec.ts
new file mode 100644
index 00000000..20b07668
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.spec.ts
@@ -0,0 +1,74 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+*  Modification Copyright © 2020 IBM.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * 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 { LayoutModule } from '@angular/cdk/layout';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatGridListModule,
+  MatIconModule,
+  MatMenuModule,
+} from '@angular/material';
+
+import { WelcomeDashboardComponent } from './welcome-dashboard.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+
+describe('WelcomeDashboardComponent', () => {
+  let component: WelcomeDashboardComponent;
+  let fixture: ComponentFixture<WelcomeDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+      declarations: [WelcomeDashboardComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatCardModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+      ]
+    }).compileComponents();
+  }));
+});
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts
new file mode 100644
index 00000000..5a56c9aa
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-dashboard/welcome-dashboard.component.ts
@@ -0,0 +1,552 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, ElementRef, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import * as  ChartConst from 'ng6-o2-chart';
+import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
+import { GoogleChartComponent } from 'angular-google-charts';
+import {
+  CompactType,
+  DisplayGrid,
+  GridsterComponentInterface,
+  GridsterConfig,
+  GridsterItem,
+  GridsterItemComponentInterface,
+  GridType
+} from 'angular-gridster2';
+
+@Component({
+  selector: 'app-welcome-dashboard',
+  templateUrl: './welcome-dashboard.component.html',
+  styleUrls: ['./welcome-dashboard.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+
+
+export class WelcomeDashboardComponent {
+  /** Based on the screen size, switch from standard to one column per row */
+ 
+  private bar_chart:GridsterItem;
+  private pie_chart:GridsterItem;
+  private favorite_reports:GridsterItem;
+  private gauge_chart:GridsterItem;
+  private map_chart:GridsterItem;
+  private word_cloud:GridsterItem;
+  private sticky_notes:GridsterItem;
+  private candle_stick_chart:GridsterItem;
+
+
+  @ViewChild('googlechart')
+  googlechart: GoogleChartComponent;
+  chart = {
+    type: 'Gauge',
+    data: [
+      ['Central', 57],
+      ['NorthEast', 72],
+      ['West', 68],
+      ['SouthEast', 75],
+    ],
+    options: {
+      width: 400,
+      height: 200,
+      greenFrom: 0,
+      greenTo: 75,
+      redFrom: 90,
+      redTo: 100,
+      yellowFrom: 75,
+      yellowTo: 90,
+      minorTicks: 20,
+      minCols:1,
+      maxCols:1,
+      minItemCols:1,
+      maxItemRows:1
+    }
+  };
+
+  gridOptions: GridsterConfig;
+  dashboard: Array<GridsterItem>;
+  remove: boolean;
+
+
+  notes = [];
+  recognition:any;
+  
+  cards = [
+    { title: 'Card 1', cols: 2, rows: 1 },
+    { title: 'Card 2', cols: 1, rows: 1 },
+    { title: 'Card 3', cols: 1, rows: 2 },
+    { title: 'Card 4', cols: 1, rows: 1 }
+  ];
+
+  ngOnInit(){  
+    this.gridOptions = {
+      minCols: 4,
+      maxCols: 4,
+      minRows: 10,
+      maxRows: 10,
+      maxItemCols: 50,
+      minItemCols: 1,
+      maxItemRows: 50,
+      minItemRows: 1,
+      maxItemArea: 2500,
+      minItemArea: 1,
+      defaultItemCols: 1,
+      defaultItemRows: 1,
+      setGridSize: true,
+      fixedColWidth: 250,
+      fixedRowHeight: 250,
+      gridType: GridType.ScrollVertical,
+      swap: true,
+      dynamicColumns: true,
+      displayGrid: DisplayGrid.None,
+      draggable: {
+        enabled: true
+      },
+      pushItems: true,
+      resizable: {
+        enabled: true
+      }
+    };
+
+    this.dashboard = [
+      {id:1,cols: 2, rows: 2, y: 0, x: 0, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
+      {id:2,cols: 2, rows: 2, y: 0, x: 2, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
+      {id:3,cols: 2, rows: 2, y: 1, x: 3, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
+      {id:4,cols: 2, rows: 2, y: 1, x: 4, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
+      {id:5,cols: 2, rows: 2, y: 2, x: 1, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
+      {id:6,cols: 2, rows: 2, y: 2, x: 1, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
+      {id:7,cols: 1, rows: 2, y: 1, x: 5, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}
+    ];
+  }
+
+
+  removeItem($event, item) {
+    $event.preventDefault();
+    $event.stopPropagation();
+    this.dashboard.splice(this.dashboard.indexOf(item), 1);
+  }
+
+  // addItem() {
+  //   this.dashboard.push({});
+  // }
+  
+  getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
+  options: CloudOptions = {
+    // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value 
+    width: 20,
+    height: 20,
+    overflow: true
+  };
+       
+  data: CloudData[] = [
+     {"text":"PALM BEACH","weight":84, color : this.getRandomColor()}
+    ,{"text":"ATLANTA","weight":75, color : this.getRandomColor()}
+    ,{"text":"SCHAUMBURG","weight":70, color : this.getRandomColor()}
+    ,{"text":"RUSSIA","weight":62, color : this.getRandomColor()}
+    ,{"text":"REDMOND","weight":50, color : this.getRandomColor()}
+    ,{"text":"FRISCO","weight":49, color : this.getRandomColor()}
+    ,{"text":"FARMERS BRANCH","weight":44, color : this.getRandomColor()}
+    ,{"text":"RAMON","weight":35, color : this.getRandomColor()}
+    ,{"text":"ALPHARETTA","weight":32, color : this.getRandomColor()}
+    ,{"text":"HANOVER","weight":29, color : this.getRandomColor()}
+    ,{"text":"TUSTIN","weight":27, color : this.getRandomColor()}
+    ,{"text":"SAN ANTONIO","weight":26, color : this.getRandomColor()}
+  ];
+
+  chartType: string;
+  configData: any;
+  barDataJson: any;
+  geoMapDataJson: any;
+  geoOrthographicDataJson: any;
+  choroplethDataJson: any;
+  scatterPlotDataJson: any;
+  lineDataJson: any;
+  histogramDataJson: any;
+  pieDataJson: any;
+  packLayoutDataJson: any;
+  treeMapDataJson: any;
+  stackBarDataJson: any;
+  treeDataJson: any;
+  forceDataJson: any;
+  DataSetJson: string;
+
+  lineTypeName: string;
+  barTypeName: string;
+  pieTypeName: string;
+  scatterPlotTypeName: string;
+  histogramTypeName: string;
+  stackBarTypeName: string;
+  geoMapTypeName: string;
+  geoOrthographicTypeName: string;
+  treeMapTypeName: string;
+  packLayoutTypeName: string;
+  choroplethTypeName: string;
+  treeTypeName: string;
+  forceTypeName: string;
+  breakpointObserver: any;
+
+  constructor(private el:ElementRef) {
+    this.barTypeName       = ChartConst.LINE_CHART_TYPE_NAME;
+    this.lineTypeName     	= ChartConst.LINE_CHART_TYPE_NAME;
+    this.barTypeName     	= ChartConst.BAR_CHART_TYPE_NAME;
+    this.pieTypeName     	= ChartConst.PIE_CHART_TYPE_NAME;
+    this.scatterPlotTypeName 	= ChartConst.SCATTER_PLOT_CHART_TYPE_NAME;
+    this.histogramTypeName     = ChartConst.HISTOGRAM_CHART_TYPE_NAME;
+    this.stackBarTypeName     = ChartConst.STACK_BAR_CHART_TYPE_NAME;
+    this.geoMapTypeName     = ChartConst.GEO_MAP_CHART_TYPE_NAME;
+    this.geoOrthographicTypeName = ChartConst.GEO_ORTHOGRAPHIC_CHART_TYPE_NAME;
+    this.treeMapTypeName     = ChartConst.TREE_MAP_CHART_TYPE_NAME;
+    this.packLayoutTypeName 	= ChartConst.PACK_LAYOUT_CHART_TYPE_NAME;
+    this.choroplethTypeName 	= ChartConst.CHOROPLETH_CHART_TYPE_NAME;
+    this.treeTypeName     	= ChartConst.TREE_CHART_TYPE_NAME;
+    this.forceTypeName     	= ChartConst.FORCE_CHART_TYPE_NAME;
+
+    this.initilizeData();
+
+    this.notes = JSON.parse(localStorage.getItem('notes')) || [{ id: 0,content:'' }];
+    
+    // Commented below code as it works only for chrome browser.
+    // const {webkitSpeechRecognition} : IWindow = <IWindow>window;
+    // this.recognition = new webkitSpeechRecognition();
+    // this.recognition.onresult = (event)=> {
+    //   console.log(this.el.nativeElement.querySelectorAll(".content")[0]);
+    //   this.el.nativeElement.querySelectorAll(".content")[0].innerText = event.results[0][0].transcript
+      
+    // };
+  }
+
+  updateAllNotes() {
+    console.log(document.querySelectorAll('app-note'));
+    let notes = document.querySelectorAll('app-note');
+
+    notes.forEach((note, index)=>{
+         console.log(note.querySelector('.content').innerHTML)
+         this.notes[note.id].content = note.querySelector('.content').innerHTML;
+    });
+
+    localStorage.setItem('notes', JSON.stringify(this.notes));
+
+  }
+
+  addNote () {
+    this.notes.push({ id: this.notes.length + 1,content:'' });
+    // sort the array
+    this.notes= this.notes.sort((a,b)=>{ return b.id-a.id});
+    localStorage.setItem('notes', JSON.stringify(this.notes));
+  };
+  
+  saveNote(event){
+    const id = event.srcElement.parentElement.parentElement.getAttribute('id');
+    const content = event.target.innerText;
+    event.target.innerText = content;
+    const json = {
+      'id':id,
+      'content':content
+    }
+    this.updateNote(json);
+    localStorage.setItem('notes', JSON.stringify(this.notes));
+    console.log("********* updating note *********")
+  }
+  
+  updateNote(newValue){
+    this.notes.forEach((note, index)=>{
+      if(note.id== newValue.id) {
+        this.notes[index].content = newValue.content;
+      }
+    });
+  }
+  
+  deleteNote(event){
+     const id = event.srcElement.parentElement.parentElement.parentElement.getAttribute('id');
+     this.notes.forEach((note, index)=>{
+      if(note.id== id) {
+        this.notes.splice(index,1);
+        localStorage.setItem('notes', JSON.stringify(this.notes));
+        console.log("********* deleting note *********")
+        return;
+      }
+    });
+  }
+
+   record(event) {
+    this.recognition.start();
+    this.addNote();
+  }
+
+  private initilizeData() {
+    // ConfigData = this.httpClient.get('assets/json/ConfigData.json');
+    this.configData = {
+      // tslint:disable-next-line:quotemark
+      "className": {
+        'axis': 'axis',
+        'axisXBorder': 'axis_x',
+        'axisXText': 'axis-x-text',
+        'bar': 'bar',
+        'barValue': 'bar-value',
+        'line': 'line',
+        'multiLinePrefix': 'line-',
+        'grid': 'grid',
+        'pie': 'pie',
+        'pieInnerTitle': 'pie-inner-title',
+        'pieInnerRadius': 'total',
+        'histogram': 'histogram',
+        'histogramBar': 'histogram-bar',
+        'treemap': 'treemap',
+        'treemapLabel': 'treemap-label',
+        'packlayout': 'packlayout',
+        'packlayoutLabel': 'packlayout-label',
+      },
+      'label': {
+          'display': true,
+      },
+      'title': {
+        'display': false,
+        'name': 'Calls for Cities',
+        'className': 'chart-title',
+        'height': 30,
+        'leftMargin': -20,
+        'bottomMargin': 10
+      },
+      'maxValue': {
+        'auto': true,
+        'x': 100,
+        'y': 100,
+      },
+      'legend': {
+        'display': true,
+        'position':'right',
+        'totalWidth': 80,
+        'initXPos': 5,
+        'initYPos': 10,
+        'rectWidth': 10,
+        'rectHeight': 10,
+        'xSpacing': 2,
+        'ySpacing': 2
+      },
+      'color': {
+        'auto': true, //
+        'defaultColorNumber': 10,
+        'opacity': 1.0,
+        'userColors': [
+          'blue',
+          'red',
+          'green',
+          'yellow',
+          'PaleGoldenrod',
+          'Khaki',
+          'DarkKhaki',
+          'Gold',
+          'Cornsilk',
+          'BlanchedAlmond',
+          'Bisque',
+          'NavajoWhite',
+          'Wheat',
+          'BurlyWood',
+          'Tan',
+          'RosyBrown',
+          'SandyBrown',
+          'Goldenrod',
+          'DarkGoldenrod',
+          'Peru',
+          'Chocolate'
+        ],
+        'focusColor': 'red',
+      },
+      'pie': {
+        'innerRadius': {
+          'percent': 20,
+          'title': 'Total'
+        },
+        'value': {
+          'display': true,
+        },
+        'percent':{
+          'display': false,
+        }
+      },
+      'line': {
+        'legend': 'lineEnd',
+        'interpolate' : 'linear',
+      },
+      'grid': {
+        'x': {
+          'display': true,
+        },
+        'y': {
+          'display': true,
+        },
+      },
+      'margin': {
+        'top': 30,
+        'left': 30,
+        'right': 10,
+        'bottom': 20,
+        'between': 5
+      },
+      'axis': {
+        'rotation': 0,
+        'borderLineWidth': 1,
+        'xLabel': {
+          'leftMargin': 0,
+          'bottomMargin': 5
+        },
+        'yLabel':{
+          'leftMargin': 0,
+          'bottomMargin': 0
+        },
+      },
+      'animation': {
+        'enable': true,
+        'duration': 4000,
+      },
+    };
+
+
+    this.barDataJson =
+    {
+      'series': [
+        'Fixes',
+        'Enhancements'
+      ],
+      'data': [
+        {
+          'x': 'Jan',
+          'y': [44, 50],
+        },
+        {
+          'x': 'Feb',
+          'y': [36, 42],
+        },
+        {
+          'x': 'Mar',
+          'y': [56, 70],
+        },
+        {
+          'x': 'Apr',
+          'y': [60, 73],
+        },
+        {
+          'x': 'May',
+          'y': [47, 82],
+        },
+        {
+          'x': 'Jun',
+          'y': [53, 45],
+        },
+        {
+          'x': 'Jul',
+          'y': [54, 61],
+        },
+        {
+          'x': 'Aug',
+          'y': [53, 71],
+        },
+        {
+          'x': 'Sep',
+          'y': [55, 51],
+        },
+        {
+          'x': 'Oct',
+          'y': [18, 16],
+        },
+      ],
+    };
+    
+    this.histogramDataJson =
+    {
+    	'range':[0,100],
+    	'bins': [0,10,20,30,40,50,60,70,80,90,100],
+    	'data':[
+        11,95,60,44,60,50,35,20,10,22,
+        19,70,65,42,22,33,40,53,52,89,
+        90,55,50,55,65,72,45,35,15,45,
+        50,95,60,26,60,50,35,20,10,33,
+        56,70,65,42,22,33,40,53,52,89,
+        90,55,50,55,28,72,45,35,15,28,
+        50,95,60,44,60,37,35,20,10,22,
+        56,70,65,22,22,37,40,53,52,89,
+        90,55,50,55,65,72,45,35,15,45,
+    	],
+    };
+    
+
+    this.pieDataJson =
+    {
+    	'data':[
+        {
+          'name': 'Data source with Discrepancies',
+          'value':31
+        },
+        {
+          'name': 'Report not functioning',
+          'value':24
+        },
+        {
+          'name': 'Data missing from source',
+          'value':10
+        },
+        {
+          'name': 'Data source reloaded',
+          'value':65
+        },
+        {
+          'name': 'User error',
+          'value':17
+        },{
+          'name': 'NA',
+          'value':239
+        },
+    	],
+    };
+  }
+}
+
+export interface IWindow extends Window {
+  webkitSpeechRecognition: any;
+}
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.html b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.html
new file mode 100644
index 00000000..79be59ce
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.html
@@ -0,0 +1,2 @@
+
+<router-outlet></router-outlet>
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.scss b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.scss
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.spec.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.spec.ts
new file mode 100644
index 00000000..e18bc16a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.spec.ts
@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WelcomeModuleComponent } from './welcome-module.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('WelcomeModuleComponent', () => {
+  let component: WelcomeModuleComponent;
+  let fixture: ComponentFixture<WelcomeModuleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WelcomeModuleComponent ],
+      imports:[RouterTestingModule]
+    })
+    .compileComponents();
+  }));
+
+  // beforeEach(() => {
+  //   fixture = TestBed.createComponent(WelcomeModuleComponent);
+  //   component = fixture.componentInstance;
+  //   fixture.detectChanges();
+  // });
+
+  // it('should create', () => {
+  //   expect(component).toBeTruthy();
+  // });
+});
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.ts
new file mode 100644
index 00000000..97189c16
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome-module',
+  templateUrl: './welcome-module.component.html',
+  styleUrls: ['./welcome-module.component.scss']
+})
+export class WelcomeModuleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.ts
new file mode 100644
index 00000000..38409cbf
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import {CommonModule, DatePipe} from '@angular/common';
+import {BarChartComponent} from './welcome-dashboard/bar-chart/bar-chart.component';
+import {NoteComponent} from './welcome-dashboard/note/note.component';
+import {PieChartComponent} from './welcome-dashboard/pie-chart/pie-chart.component';
+import {WelcomeDashboardComponent} from './welcome-dashboard/welcome-dashboard.component';
+import {GridsterModule} from 'angular-gridster2';
+import {MatDatepickerModule, MatIconModule, MatListModule, MatTabsModule} from '@angular/material';
+import {PagesModule} from '../pages/pages.module';
+import {GoogleChartsModule} from 'angular-google-charts';
+import {WelcomeRoutingModule} from './welcome-routing.module';
+import {WelcomeModuleComponent} from './welcome-module.component';
+import {FormsModule} from '@angular/forms';
+import { MatGridListModule, MatCardModule, MatMenuModule, MatButtonModule} from '@angular/material';
+
+@NgModule({
+    declarations: [ WelcomeDashboardComponent, BarChartComponent,
+        NoteComponent,
+        PieChartComponent,
+        WelcomeModuleComponent
+    ],
+    imports: [
+        CommonModule,
+        GridsterModule,
+        MatIconModule,
+        GoogleChartsModule,
+        WelcomeRoutingModule,
+        MatTabsModule,
+        MatListModule,
+        MatGridListModule, 
+        MatCardModule, 
+        MatMenuModule, 
+        MatButtonModule,
+        FormsModule,
+        MatDatepickerModule,
+    ],
+})
+export class WelcomeModule { }
diff --git a/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-routing.module.ts b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-routing.module.ts
new file mode 100644
index 00000000..0245c4ba
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-os/ngappsrc/src/app/welcome-module/welcome-routing.module.ts
@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {WelcomeModuleComponent} from './welcome-module.component';
+import {WelcomeDashboardComponent} from './welcome-dashboard/welcome-dashboard.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: WelcomeModuleComponent,
+        children: [
+            {path: 'welcome', component :WelcomeDashboardComponent},
+            {path: '', redirectTo: 'welcome'}
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class WelcomeRoutingModule {
+
+}