Added portal-FE-common - angular upgrade code

Added Microservice-Onboarding Component

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

8 files changed, 1144 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html
new file mode 100644
index 00000000..4ec8ae3d
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html
@@ -0,0 +1,214 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+  
+<div class="container">
+  <form name="form" (ngSubmit)="f.form.valid && saveChanges()" #f="ngForm" novalidate autocomplete="off">
+
+    <!--Modal Headers-->
+    <div class="modal-header">
+      <h4 class="modal-title">Microservice Onboarding</h4>
+      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  
+    <!--Modal Body goes here-->
+    <div class="modal-body">
+      <div id="microservices" class="microservice-add-details-model">
+        <div class="microservice-properties-main">
+            <div class="item required">
+              <div class="item-label">Microservice Name</div>
+              <input id="microservice-details-input-name" class="table-search-field"
+                type="text" name="name" #name="ngModel" ng-pattern="/^[\w -]*$/" maxlength="100"
+                [(ngModel)]="ms.name"
+                ng-change="microserviceAddDetails.updateServiceName()"
+                [ngClass]="{'is-invalid': f.submitted && name.invalid}" required />
+
+                <div class="error-container" *ngIf="f.submitted && name.invalid">
+                    <div class="error-container">
+                      <small id="microservices-details-input-name-required" class="err-message">
+                        Microservice Name is required
+                      </small>
+                    </div>
+                </div>    
+            </div>
+
+            
+            <div class="item required">
+                <div class="item-label">Microservice Description</div>
+                  <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
+                    name="desc" [(ngModel)]="ms.desc" #desc="ngModel" class="microservice-desc"
+                    ng-change="microserviceAddDetails.updateDesc()"
+                    [ngClass]="{'is-invalid': f.submitted && desc.invalid}" required>
+                  </textarea>
+
+                  <div class="error-container" *ngIf="f.submitted && desc.invalid">
+                      <div class="error-container">
+                        <small id="microservices-details-input-desc-required" class="err-message">
+                          Microservice Description is required
+                        </small>
+                      </div>
+                  </div>    
+            </div>
+
+            <div class="item required">
+                <div class="service-select">					
+                  <mat-form-field>
+                    <mat-label>Applications Name</mat-label>
+                    <mat-select name="microservice-details-application-select"
+                       [(ngModel)]="ms.appId" #appId="ngModel" [(value)]="selected"
+                       [ngClass]="{'is-invalid': f.submitted && appId.invalid}" required>
+                      <mat-option *ngFor="let d of applicationList" [value]="d.value" >{{d.title}}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+
+                <div class="error-container" *ngIf="f.submitted && appId.invalid">
+                    <div class="error-container">
+                      <small id="microservices-details-input-appid-required" class="err-message">
+                          Please select microservice Application
+                      </small>
+                    </div>
+                </div>       
+            </div>
+
+            <div class="item required">
+              <div class="item-label">Microservice Endpoint URL</div>
+              <input id="microservice-details-input-endpoint-url"
+                [(ngModel)]="ms.url" #url="ngModel" ng-change="microserviceAddDetails.updateURL()" type="text"
+                name="url" maxlength="200" [ngClass]="{'is-invalid': f.submitted && url.invalid}" required />
+
+                <div class="error-container" *ngIf="f.submitted && url.invalid">
+                    <div class="error-container">
+                      <small id="microservices-details-input-url-required" class="err-message">
+                        Microservice Endpoint URL is required
+                      </small>
+                    </div>
+                </div>    
+            </div>
+
+            <div class="item">
+              <div class="service-select">					
+                  <mat-form-field>
+                    <mat-label>Security Type</mat-label>
+                    <mat-select name="microservice-details-input-security-type" [(ngModel)]="ms.securityType" [(value)]="selected">
+                      <mat-option *ngFor="let d of availableSecurityTypes" [value]="d.name" >{{d.name}}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+              </div>			
+            </div>
+
+            <div class="item" *ngIf="ms.securityType == 'Basic Authentication'">
+              <div class="item-label">Username</div>
+              <input id="microservice-details-input-username" class="table-search-field"
+                type="text" name="username" maxlength="100"
+                [(ngModel)]="ms.username" />
+            </div>
+
+            <div class="item" *ngIf="ms.securityType == 'Basic Authentication'">
+              <div class="item-label">Password</div>
+              <input id="microservice-details-input-password" class="table-search-field"
+                type="password" name="password" maxlength="100"
+                [(ngModel)]="ms.password" />
+            </div>
+
+            <div class="item" *ngIf="isEditMode">
+                <div class="left-test-item">
+                  <div class="item-label">Test Microservice</div>
+                </div>
+                <div class="right-test-item">
+                  <div id="microservice-details-test-button" class="test-button"
+                    (click)="testServiceURL()">Test</div>
+                </div>
+            </div>
+                    
+            <div class="item" *ngIf="isEditMode">
+                <div class="item-label">JSON output</div>
+                <textarea id="microservice-details-input-json" class="json-field"
+                  name="json"></textarea>
+            </div>
+
+            <div class="add-para-item">
+                <div class="item-label add-label-left">Add User Parameter</div>
+                <div class="icon-primary-accordion-plus" (click)="addParameter()">
+                    <i class="icon ion-ios-add-circle-outline"></i>
+                </div>
+            </div>
+
+            <div class="item">
+              <div class="param-label-item-left"
+                *ngIf="ms.parameterList.length > 0">
+                Parameter Key
+              </div>
+              <div class="para-label-item-right"
+                *ngIf="ms.parameterList.length > 0">
+                Parameter Default Value
+              </div>
+
+              <div id="microservice-details-user-paramters" *ngFor="let parameter of ms.parameterList; let i=index">
+                <div class="param-item-left">
+                        <input id="microservice-details-input-user-parameter-key"
+                          class="table-search-field" type="text" name="param-key" maxlength="200"
+                          [(ngModel)]="parameter.para_key" />
+                        <input id="microservice-details-input-user-parameter-value"
+                          class="table-search-fields" type="text" name="param-value"
+                          maxlength="200" [(ngModel)]="parameter.para_value" />
+                </div>
+
+                <div (click)="removeParamItem(parameter)">
+                    <i class="icon ion-ios-remove-circle-outline"></i>
+                </div>
+              </div>
+
+              <div class="microservice-property">	
+                  <mat-checkbox  name="active" type="checkbox" [(ngModel)]="ms.active"
+                    id="microservices-checkbox-app-is-enabled" [checked]="ms.active">
+                    Active
+                  </mat-checkbox>
+              </div>
+            </div>
+          </div>
+      </div> 
+    </div>
+    <!--Modal Footer goes Here-->
+    <div class="modal-footer">
+      <button type="submit" class="btn btn-primary">Save</button> &nbsp;
+      <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss
new file mode 100644
index 00000000..1ea39095
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss
@@ -0,0 +1,211 @@
+/*-
+ * ============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============================================
+ *
+ * 
+ */
+
+::ng-deep .modal-dialog { 
+    max-width: 600px;
+    width: 600px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+::ng-deep .modal-body {
+   padding: -1rem;
+}
+
+::ng-deep .mat-form-field-infix {
+    width: 400px;
+}
+
+.microservice-add-details-model .microservice-properties-main {
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 50px;
+    height: 430px;
+    width: 100%;
+    overflow-x: auto;
+}
+
+.microservice-add-details-model .microservice-properties-main .item {
+    position: relative;
+    margin-bottom: 15px;
+    width: 400px;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .error-container {
+    position: absolute;
+    width: 280px;
+    display: block;
+    height: 12px;
+    line-height: 12px;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .error-container .err-message {
+    color: #cf2a2a;
+    font-size: 10px;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .item-label {
+    color: #5a5a5a;
+    font-family: Omnes-ECOMP-W02,Arial;
+    font-size: 14px;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .left-test-item {
+    display: inline-block;
+    width: 85%;
+    background: #fff;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .right-test-item {
+    position: relative;
+    display: inline-block;
+    width: 15%;
+    float: right;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .test-button {
+    color: #fff;
+    font-family: Omnes-ECOMP-W02-Medium,Arial;
+    font-size: 14px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 6px;
+    box-shadow: 0 1px 0.99px 0.01px rgba(2,60,89,.004);
+    height: 29px;
+    line-height: 29px;
+    cursor: pointer;
+    text-align: center;
+    background: #067ab4;
+}
+
+.microservice-add-details-model .microservice-properties-main .item {
+    position: relative;
+    margin-bottom: 15px;
+    width: 400px;
+}
+
+.microservice-add-details-model .microservice-properties-main .add-para-item {
+    position: relative;
+    display: inline-flex;
+}
+
+.microservice-add-details-model .microservice-properties-main .add-para-item .add-label-left {
+    line-height: 25px;
+    height: 30px;
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 10px;
+    background: #fff;
+    color: #5a5a5a;
+    font-family: Omnes-ECOMP-W02,Arial;
+    font-size: 14px;
+}
+
+.microservice-add-details-model .microservice-properties-main .microservice-property {
+    margin-top: 10px;
+    position: relative;
+}
+
+.icon-primary-accordion-minus, .icon-primary-expanded, .icon-primary-accordion-plus, .icon-primary-collapsed {
+    font-size: 20px !important;
+}
+
+#microservice-details-input-name{
+    width: 16em;
+}
+
+#widgets-details-input-desc{
+    width: 25em;
+}
+
+.microservice-desc {
+    overflow: auto;
+    resize: vertical;
+    width: 29em;
+}
+
+.json-field {
+    overflow: auto;
+    resize: vertical;
+    width: 25em;
+}
+
+#microservice-details-input-app{
+    width: 25em;
+    height: 32px;
+}
+
+#microservice-details-input-endpoint-url{
+    width: 25em;
+}
+
+#microservice-details-input-security-type{
+    width: 25em;
+    height: 32px;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .para-label-item-right {
+    margin-left: 201px!important;
+    position: absolute!important;
+    margin-top: -19px!important;
+    width: 50%!important;
+}
+
+.microservice-add-details-model .microservice-properties-main .item .para-item-right {
+    margin-top: -27px;
+    position: absolute;
+    margin-left: 500px;
+}
+
+.table-search-field {
+    width: 48% !important;
+    margin-bottom: 5px;
+}
+
+#microservice-details-user-paramters{
+    display: inline-flex;
+}
+
+.required:before {
+    color: #cf2a2a;
+    margin-right: 2px;
+    content: "* ";
+    position: absolute;
+    top: 28px;
+    left: -10px;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts
new file mode 100644
index 00000000..5589854c
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.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 { MicroserviceAddDetailsComponent } from './microservice-add-details.component';
+
+describe('MicroserviceAddDetailsComponent', () => {
+  let component: MicroserviceAddDetailsComponent;
+  let fixture: ComponentFixture<MicroserviceAddDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MicroserviceAddDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MicroserviceAddDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts
new file mode 100644
index 00000000..5e359dd4
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts
@@ -0,0 +1,303 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { IMircroservies } from 'src/app/shared/model/microservice-onboarding/microservices';
+import { MicroserviceService, WidgetOnboardingService } from '../../../shared/services/index';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-microservice-add-details',
+  templateUrl: './microservice-add-details.component.html',
+  styleUrls: ['./microservice-add-details.component.scss']
+})
+export class MicroserviceAddDetailsComponent implements OnInit {
+
+  @Input() public ms: IMircroservies;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  result: any;
+  selected: any;
+  isEditMode: any;
+  originalName: string;
+  dupliateName = false;
+  emptyServiceName = false;
+  emptyServiceDesc = false;
+  emptyServiceURL = false;
+  emptyServiceApp = false;
+  availableSecurityTypes = [];
+  availableWidgets = [];
+  applicationList: Array<Object> = [];
+
+  constructor(public microservice: MicroserviceService, public widgetOnboardingService: WidgetOnboardingService, 
+    public activeModal: NgbActiveModal, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    if(this.ms.name){
+      this.isEditMode = true;
+    }else{
+      this.isEditMode = false;
+    }
+    this.ms.parameterList = [];
+    this.ms.active = true;
+    this.populateAvailableApps();
+    this.getAvailableSecurityTypes();
+  }
+
+  getAvailableWidgets(serviceId){
+    console.log("getAvailableWidgets called");
+    this.microservice.getWidgetListByService(serviceId)
+    .subscribe(data => {
+        this.result = data;
+        if (this.result == null || this.result) {
+              console.log('MicroserviceService::getServiceList Failed: Result or result.data is null');
+          }else {
+            this.availableWidgets = [];
+            for(var i = 0; i < data.length; i++){
+              this.availableWidgets.push({
+                name: data[i]
+              })
+            }
+          }
+    }, error =>{
+      console.log(error);
+    });
+  };
+  
+  getAvailableSecurityTypes(): Array<String> {
+    this.availableSecurityTypes = [];
+    this.availableSecurityTypes.push({
+      id: 0,
+      name: 'No Authentication'
+    });
+    this.availableSecurityTypes.push({
+      id: 1,
+      name: 'Basic Authentication'
+    });
+    this.availableSecurityTypes.push({
+      id: 2,
+      name: 'Cookie based Authentication'
+    });
+
+    return this.availableSecurityTypes;
+  };
+  
+  populateAvailableApps(){
+    this.widgetOnboardingService.populateAvailableApps()
+      .subscribe( _data => {
+        let allPortalsFilterObject = {index: 0, title: 'Select Application', value: ''};
+        this.applicationList = [allPortalsFilterObject];
+        var realAppIndex = 1;
+        for (let i = 1; i <= _data.length; i++) {
+            if (!_data[i-1].restrictedApp) {
+                this.applicationList.push({
+                    index: realAppIndex,
+                    title: _data[i - 1].name,
+                    value: _data[i - 1].id
+                })
+                realAppIndex = realAppIndex + 1;
+            }
+        }
+      }, error => {
+        console.log(error);
+    }); 
+  };
+
+  addParameter() {
+    this.ms.parameterList.push({}); 
+  }
+
+  testServiceURL(){
+    console.log("testServiceURL called  id is :: ",this.ms.id)
+    this.microservice.getServiceJSON(this.ms.id)
+      .subscribe( _data => {
+        this.result = _data;
+        console.log("testServiceURL response :: ",this.result);
+        document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(this.result));
+      }, error => {
+        document.getElementById("microservice-details-input-json").innerHTML = "Something went wrong. Please go back to the previous page or try again later.";
+        console.log(error);
+    });
+  }
+
+  removeParamItem(parameter: any){
+    console.log("removeParamItem called", parameter);
+    this.ms.parameterList.splice(parameter.para_key, 1);
+    this.microservice.getUserParameterById(parameter)
+    .subscribe(data => {
+        this.result = data;
+        if (this.result == null || this.result) {
+              console.log('MicroserviceService::removeParamItem Failed: Result or result.data is null');
+        }else if(this.result && this.result.length > 0) {
+          this.microservice.deleteUserParameterById(parameter.id)
+          .subscribe(__data => {
+            for(var i = 0; i < this.ms.parameterList.length; i++){
+              if(this.ms.parameterList[i].para_key == parameter.para_key
+              && this.ms.parameterList[i].para_value == parameter.para_value){
+                this.ms.parameterList.splice(i, 1);
+                return;
+              }
+            }
+              
+          }, error =>{
+            console.log(error);
+          });
+        }else{
+          for(var i = 0; i < this.ms.parameterList.length; i++){
+            if(this.ms.parameterList[i].para_key == parameter.para_key
+            && this.ms.parameterList[i].para_value == parameter.para_value){
+              this.ms.parameterList.splice(i, 1);
+              return;
+            }
+          }
+        }
+    }, error =>{
+      console.log(error);
+    });
+  }
+
+  //Add Or Update Microservices.
+  saveChanges(){
+    console.log("saveChanges..",this.ms);
+    if(this.ms && this.ms.id && this.ms.id !='undefined'){
+      this.isEditMode = true;
+    }
+    var isValid = true;
+    
+    if(this.ms.name == ''
+      || this.ms.name == undefined){
+      this.emptyServiceName = true;
+      isValid = false;
+    }
+    console.log("a >",isValid);
+    if(this.dupliateName == true){
+      isValid = false;
+    }
+    console.log("b> ",isValid);  
+    if(this.ms.desc == ''
+    || this.ms.desc == undefined){
+      this.emptyServiceDesc = true;
+      isValid = false;
+    }
+    console.log("c> ",isValid); 
+    
+    if(this.ms.url == ''
+      || this.ms.url == undefined){
+        this.emptyServiceURL = true;
+        isValid = false;
+    }
+    console.log("d> ",isValid); 
+      
+    if(this.ms.appId == undefined
+    || this.ms.appId == null){
+      this.emptyServiceApp = true;
+      isValid = false;
+    }
+    
+    console.log("IsValid flag add/update microservices ",isValid ) 
+
+    if(!isValid)
+      return;
+    /*
+    * Check the parameter list, delete those parameters that don't
+    * have key
+    */
+    if(this.ms && this.ms.parameterList){
+      for(var i = 0; i < this.ms.parameterList.length; i++){
+        if(this.ms.parameterList[i].para_key == undefined
+        || this.ms.parameterList[i].para_key == null
+        || this.ms.parameterList[i].para_key == ""){
+          this.ms.parameterList.splice(i, 1);
+          i--;
+        }
+      }
+    }
+    if(this.ms.securityType == undefined ||
+    this.ms.securityType == null)
+      this.ms.securityType = "No Authentication";
+    else{
+      this.ms.securityType = this.ms.securityType;
+      this.ms.username = this.ms.username;
+      this.ms.password = this.ms.password;
+    }
+    
+    var active = 'N';
+    if(this.ms.active == true)
+      active = 'Y';
+    
+    let paramList = [];
+    if(this.ms.parameterList && this.ms.parameterList.length >0){
+      paramList = this.ms.parameterList;
+    }  
+    var newService = {
+      name: this.ms.name,
+      desc: this.ms.desc,
+      appId: this.ms.appId,
+      url: this.ms.url,
+      securityType: this.ms.securityType,
+      username: this.ms.username,
+      password: this.ms.password,
+      active: active,
+      parameterList: paramList
+    };
+
+    if(this.isEditMode){
+      console.log("Edit microservice mode called");
+      this.microservice.updateService(this.ms.id , newService)
+        .subscribe( data => {
+          this.result = data;
+          console.log("update microservice response :: ",this.result);
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+        }, error => {
+          console.log(error);
+          this.ngbModal.dismissAll();
+       }); 
+    }else{  
+      console.log("Add microservice mode called")
+      this.microservice.createService(newService)
+        .subscribe( data => {
+          this.result = data;
+          console.log("add microservice response :: ",this.result);
+          this.passEntry.emit(this.result);
+          this.ngbModal.dismissAll();
+        }, error => {
+          this.ngbModal.dismissAll();
+          console.log(error);
+      }); 
+    }
+  }
+}
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html
new file mode 100644
index 00000000..45a68650
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html
@@ -0,0 +1,89 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+  ===================================================================
+ 
+  Unless otherwise specified, all software contained herein is licensed
+  under the Apache License, Version 2.0 (the "License");
+  you may not use this software except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+ 
+  
+  -->
+
+<div class="container"> 
+  <div id="microservice-onboarding-title" class="w-ecomp-main-view-title">
+      <h1 class="heading-page"> Microservice Onboarding</h1>
+  </div>
+
+  <mat-form-field>
+    <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+  </mat-form-field>
+
+  <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddNewMicroserviceModal('')">
+    <i class="icon ion-md-person-add"></i>Add Microservice
+  </button>
+
+  <table mat-table [dataSource]="dataSource" matSort>
+    <!-- Microservice Name Column -->
+    <ng-container matColumnDef="microserviceName">
+      <th id="col1" mat-header-cell *matHeaderCellDef mat-sort-header> Microservice Name  </th>
+      <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-microserviceName" 
+        mat-cell *matCellDef="let element; let i = index;"> {{element.name}}
+      </td>
+    </ng-container>
+
+    <!-- Microservice serviceEndPointURL Column -->
+    <ng-container matColumnDef="serviceEndPointURL">
+      <th id="col2" mat-header-cell *matHeaderCellDef> Service End Point URL </th>
+      <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-serviceEndPointURL" 
+        mat-cell *matCellDef="let element; let i=index;"> {{element.url}} </td>
+    </ng-container>
+
+    <!-- Microservice securityType Column -->
+    <ng-container matColumnDef="securityType">
+      <th id="col2" mat-header-cell *matHeaderCellDef> Security Type </th>
+      <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-securityType" 
+        mat-cell *matCellDef="let element; let i=index;"> {{element.securityType}} </td>
+    </ng-container>
+
+    <!-- Delete Column -->
+    <ng-container matColumnDef="delete">
+      <th id="col4" mat-header-cell *matHeaderCellDef> Delete </th>
+      <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let element; let i=index;">
+        <span class="icon-trash" id="{{i}}-button-portal-admin-remove" (click)="deleteService(element)">
+          <i class="icon ion-md-trash"></i>
+        </span>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+</div>
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss
new file mode 100644
index 00000000..135fbda2
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss
@@ -0,0 +1,46 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+.container th{
+    padding-bottom: 15px;
+    font-weight: bold;
+}
+
+.ion-md-trash{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts
new file mode 100644
index 00000000..09d30a14
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MicroserviceOnboardingComponent } from './microservice-onboarding.component';
+
+describe('MicroserviceOnboardingComponent', () => {
+  let component: MicroserviceOnboardingComponent;
+  let fixture: ComponentFixture<MicroserviceOnboardingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MicroserviceOnboardingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MicroserviceOnboardingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts
new file mode 100644
index 00000000..d2d66974
--- /dev/null
+++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts
@@ -0,0 +1,156 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { MicroserviceService, WidgetOnboardingService } from '../../shared/services/index'
+import { IMircroservies } from 'src/app/shared/model/microservice-onboarding/microservices';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { MatTableDataSource } from '@angular/material';
+import { MatSort, MatPaginator } from '@angular/material';
+import { MicroserviceAddDetailsComponent } from './microservice-add-details/microservice-add-details.component';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+
+@Component({
+  selector: 'app-microservice-onboarding',
+  templateUrl: './microservice-onboarding.component.html',
+  styleUrls: ['./microservice-onboarding.component.scss']
+})
+export class MicroserviceOnboardingComponent implements OnInit {
+
+  showSpinner = true;
+  microServiceList: Array<IMircroservies> = [];
+  result: any;
+  isEditMode: boolean = false;
+  
+  displayedColumns: string[] = ['microserviceName', 'serviceEndPointURL', 'securityType','delete'];
+  dataSource = new MatTableDataSource(this.microServiceList);
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(public microservice: MicroserviceService, public ngbModal: NgbModal ) { }
+
+  ngOnInit() {
+    this.getOnboardingServices();
+  }
+
+  getOnboardingServices(){
+    //console.log("getOnboardingServices called");
+    this.microservice.getServiceList()
+    .subscribe(_data => {
+        this.result = _data;
+        if (this.result == null || this.result == 'undefined') {
+             console.log('MicroserviceService::getServiceList Failed: Result or result.data is null');
+         }else {
+          this.microServiceList = this.result;
+          this.populateTableData(this.microServiceList);
+         }
+    }, error =>{
+      console.log(error);
+    });
+  }
+
+  deleteService(microserviceObj: IMircroservies, isConfirmed: boolean): void {
+    let confirmationMsg = 'You are about to delete this Microservice : ' + microserviceObj.name+ '. Click OK to continue.';
+    this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
+      if (result === 'Ok') {
+        if(!microserviceObj || microserviceObj == null){
+          console.log('MicroserviceOnboardingCtrl::deleteService: No service or ID... cannot delete');
+          return;
+        }
+        //console.log("service id to delete", microserviceObj.id)
+        this.microServiceList.splice(this.microServiceList.indexOf(microserviceObj), 1);
+        this.populateTableData(this.microServiceList);
+        this.microservice.deleteService(microserviceObj.id)
+          .subscribe( data => {
+            this.result = data;
+            this.microServiceList = [];
+            this.getOnboardingServices();
+          }, error => {
+            console.log(error);
+        }); 
+      }
+    }, (resut) => {
+      return;
+    })
+  }
+
+ 
+  openAddNewMicroserviceModal(rowData: any){
+    //console.log("openAddNewMicroserviceModal getting called...");
+    const modalRef = this.ngbModal.open(MicroserviceAddDetailsComponent, { size: 'lg' });
+    modalRef.componentInstance.title = 'Microservice Onboarding';
+    if(rowData != 'undefined' && rowData){
+      modalRef.componentInstance.ms = rowData;
+      this.isEditMode = true;
+    }else{
+      modalRef.componentInstance.ms  = {};
+      this.isEditMode = false;
+    }
+    modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+      //console.log("receivedEntry >>> ",receivedEntry);
+      if(receivedEntry){
+        this.microServiceList = [];
+        this.getOnboardingServices();
+      }
+    });
+  }
+
+  populateTableData(microServiceList: Array<IMircroservies>){
+    this.dataSource = new MatTableDataSource(microServiceList);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+  openInformationModal(_title: string, _message: string){
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+    return modalInfoRef;
+  }
+}