[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8
Signed-off-by: st782s <statta@research.att.com>

6 files changed, 963 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
new file mode 100644
index 00000000..a8b20739
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
@@ -0,0 +1,205 @@
+<!--

+  ================================================================================

+  ECOMP Portal

+  ================================================================================

+  Copyright (C) 2017 AT&T Intellectual Property

+  ================================================================================

+  Licensed under the Apache License, Version 2.0 (the "License");

+  you may not use this file 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.

+  ================================================================================

+  -->

+<div class="microservice-add-details-model">

+	<div id="microservice-add-details-title" class="title">microservice Details</div>

+

+	<div id="microservices" class="microservice-scrolling-table">

+		<div class="microservice-properties-main"

+			scroll-top="microserviceAddDetails.scrollApi">

+			<form id="microservices-details-form" name="serviceForm" novalidate

+				autocomplete="off">

+				<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" ng-pattern="/^[\w -]*$/" maxlength="100"

+						ng-model="microserviceAddDetails.service.name"

+						ng-change="microserviceAddDetails.updateServiceName()"

+						ng-disabled="microserviceAddDetails.isEditMode" required />

+

+					<div class="error-container"

+						ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">

+						<div ng-messages="serviceForm.name.$error" class="error-container">

+							<small id="microservices-details-input-name-required"

+								class="err-message" ng-message="required">Microservice

+								Name is required</small> <small

+								id="microservices-details-input-name-pattern"

+								class="err-message" ng-message="pattern">Microservice

+								Name must be letters, numbers, or underscore</small>

+						</div>

+					</div>

+

+					<div class="error-container"

+						ng-show="microserviceAddDetails.isEditMode == false && microserviceAddDetails.dupliateName == true">

+						<small id="microservices-details-input-name-dupliated"

+							class="err-message">Name not available - choose different

+							name </small>

+					</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" ng-model="microserviceAddDetails.service.desc"

+						ng-change="microserviceAddDetails.updateDesc()"></textarea>

+					<div class="error-container"

+						ng-show="(microserviceAddDetails.emptyServiceDesc 

+					|| (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">

+						<small id="microservices-details-input-desc-required"

+							class="err-message">Microservice Description is required</small>

+					</div>

+				</div>

+

+

+

+				<div class="item"

+					ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">

+					<div class="item-label">Client Widgets</div>

+					<div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>

+				</div>

+

+				<div class="item required">

+					<div class="item-label">Application Name</div>

+					<div class="service-select">					

+						<div class="table-dropdown">

+							<select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">

+				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>

+				            </select>

+						</div>

+					</div>

+

+					<div class="error-container"

+						ng-show="(microserviceAddDetails.emptyServiceApp 

+					|| (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">

+						<small id="microservices-details-input-url-required"

+							class="err-message">Please select microservice

+							Application</small>

+					</div>

+				</div>

+

+				<div class="item required">

+					<div class="item-label">microservice Endpoint URL</div>

+					<input id="microservice-details-input-endpoint-url"

+						class="table-search-field" ng-model="microserviceAddDetails.service.url"

+						ng-change="microserviceAddDetails.updateURL()" type="text"

+						name="url" maxlength="200" />

+

+					<div class="error-container"

+						ng-show="(microserviceAddDetails.emptyServiceURL 

+					|| (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">

+						<small id="microservices-details-input-url-required"

+							class="err-message">Microservice Endpoint URL is required</small>

+					</div>

+				</div>

+

+				<div class="item required">

+					<div class="item-label">Security Type</div>

+					<div class="service-select">					

+						<div class="table-dropdown">

+							<select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">

+				            	<option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>				            	

+				            </select>

+						</div>

+					</div>				

+				</div>

+

+				<div class="item"

+					ng-show="microserviceAddDetails.service.security.id == 1">

+					<div class="item-label">Username</div>

+					<input id="microservice-details-input-username" class="table-search-field"

+						type="text" name="username" maxlength="100"

+						ng-model="microserviceAddDetails.service.username" />

+				</div>

+

+				<div class="item"

+					ng-show="microserviceAddDetails.service.security.id == 1">

+					<div class="item-label">Password</div>

+					<input id="microservice-details-input-password" class="table-search-field"

+						type="password" name="password" maxlength="100"

+						ng-model="microserviceAddDetails.service.password" />

+				</div>

+

+

+				<div class="item" ng-show="microserviceAddDetails.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"

+							ng-click="microserviceAddDetails.testServiceURL()">Test</div>

+					</div>

+				</div>

+

+				<div class="item" ng-show="microserviceAddDetails.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"

+						ng-click="microserviceAddDetails.addParameter()"></div>

+				</div>

+				<div class="item">

+					<div class="para-label-item-left"

+						ng-show="microserviceAddDetails.service.parameterList.length > 0">

+						Parameter Key</div>

+					<div class="para-label-item-right"

+						ng-show="microserviceAddDetails.service.parameterList.length > 0">

+						Parameter Default Value</div>

+

+					<div id="microservice-details-user-paramters"

+						ng-repeat="parameter in microserviceAddDetails.service.parameterList">

+

+						<div class="para-item-left">

+							<input id="microservice-details-input-user-parameter-key"

+								class="table-search-field" type="text" name="param-key" maxlength="200"

+								ng-model="parameter.para_key" />

+						</div>

+						<div class="para-item-middle">

+							<input id="microservice-details-input-user-parameter-value"

+								class="table-search-field" type="text" name="param-value"

+								maxlength="200" ng-model="parameter.para_value" />

+						</div>

+

+						<div class="icon-primary-accordion-minus para-item-right"

+							ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>

+					</div>

+

+					<div class="microservice-property">

+						<input id="microservices-checkbox-app-is-enabled" type="checkbox"

+							class="checkbox-field"

+							ng-model="microserviceAddDetails.service.active" />

+						<div class="property-label checkbox-label">Active</div>

+					</div>

+					

+				</div>

+					

+				<div id="microservice-scroll-end"></div>

+				<div class="dialog-control">

+					<button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>				

+					<button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="microserviceAddDetails.closeThisDialog()">Close</button>	

+				</div>

+			</form>

+		</div>

+

+

+	</div>

+</div>

diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
new file mode 100644
index 00000000..f6123349
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
@@ -0,0 +1,336 @@
+/*-

+ * ================================================================================

+ * ECOMP Portal

+ * ================================================================================

+ * Copyright (C) 2017 AT&T Intellectual Property

+ * ================================================================================

+ * Licensed under the Apache License, Version 2.0 (the "License");

+ * you may not use this file 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.

+ * ================================================================================

+ */

+'use strict';

+(function () {

+    class MicroserviceAddDetailsCtrl {

+        constructor($scope, $log, $interval, widgetsCatalogService, applicationsService, adminsService, microserviceService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {

+     	    

+          

+            let getAvailableApps = () => {       

+            	applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {

+            		this.availableApps=[];

+            		apps.unshift({

+                        id: 1,

+                        name: "ECOMP Portal"

+                    });

+            		for(var i = 0; i < apps.length; i++) {

+                        this.availableApps.push({

+                            id: apps[i].id,

+                            name: apps[i].name

+                        });

+                        if(this.isEditMode == true && this.service.appId == apps[i].id){

+                        	this.service.application = this.availableApps[i];

+                        }

+                    }

+            	}).catch(err => {

+                    $log.error(err);

+                });

+            };

+            

+            let getAvailableWidgets = () => {       

+            	microserviceService.getWidgetListByService(this.service.id).then(widgets =>{

+            		this.availableWidgets = [];

+            		for(var i = 0; i < widgets.length; i++){

+            			this.availableWidgets.push({

+            				name: widgets[i]

+            			})

+            		}

+            	}).catch(err => {

+                    $log.error(err);

+                });

+            };

+            

+            

+            let getAvailableSecurityTypes = () => {   

+            	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'

+            	});

+            }

+

+            let init = () => {

+            	$log.info('MicroserviceAddDetailsCtrl::init');

+                this.service = [];

+                this.service.parameterList = [];

+                this.service.active = true;

+                this.emptyServiceName = false;

+                this.emptyServiceDesc = false;

+                this.emptyServiceURL = false;

+                this.emptyServiceApp = false;

+                this.dupliateName = false;

+                this.serviceList = $scope.ngDialogData.list;

+                

+                if ($scope.ngDialogData && $scope.ngDialogData.service) {

+                	

+                    this.isEditMode = true;

+                    this.service = _.clone($scope.ngDialogData.service);

+                    

+                    console.log(this.service);

+                    if(this.service.active == 'Y')

+                    	this.service.active = true;

+                    else

+                    	this.service.active = false;

+                } else {

+                    this.isEditMode = false;

+                } 

+                getAvailableApps();

+                getAvailableSecurityTypes();

+                //getAvailableWidgets();

+                

+                /**

+				 * 0: Basic Authentication

+				 * 

+				 * TODO: change the structure

+				 */

+                if(this.service.securityType == "No Authentication"){

+                	this.service.security = this.availableSecurityTypes[0];

+                }else if(this.service.securityType == "Basic Authentication"){

+                	this.service.security = this.availableSecurityTypes[1];

+                }else if(this.service.securityType == "Cookie based Authentication"){

+                	this.service.security = this.availableSecurityTypes[2];

+                }

+            };

+             

+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;

+            this.conflictMessages = {};

+            this.scrollApi = {};

+

+            let resetConflict = fieldName => {

+                delete this.conflictMessages[fieldName];

+                if($scope.widgetForm[fieldName]){

+                    $scope.widgetForm[fieldName].$setValidity('conflict', true);

+                }

+            };

+

+            this.addParameter = () => {

+            	document.getElementById('microservice-scroll-end').scrollIntoView();

+            	this.service.parameterList.push({}); 

+            }

+            

+            this.closeThisDialog = () => {

+            	$scope.closeThisDialog(true);

+            }

+            

+            this.removeParamItem = (parameter) => {

+            	microserviceService.getUserParameterById(parameter.id).then((res) => {

+            		if(res.length > 0){

+            			var message = res.length + " users have their own widget parameters. Are you sure you want to delete?";

+            			confirmBoxService.editItem(message).then(isConfirmed => {

+            				if(isConfirmed){

+            					microserviceService.deleteUserParameterById(parameter.id).then((res) => {

+	            					for(var i = 0; i < this.service.parameterList.length; i++){

+	            	            		if(this.service.parameterList[i].para_key == parameter.para_key

+	            	            		&& this.service.parameterList[i].para_value == parameter.para_value){

+	            	            			this.service.parameterList.splice(i, 1);

+	            	            			return;

+	            	            		}

+	            	            	}

+            					});

+            				}

+            			});

+            		}

+            		else{

+            			for(var i = 0; i < this.service.parameterList.length; i++){

+    	            		if(this.service.parameterList[i].para_key == parameter.para_key

+    	            		&& this.service.parameterList[i].para_value == parameter.para_value){

+    	            			this.service.parameterList.splice(i, 1);

+    	            			return;

+    	            		}

+    	            	}

+            		}

+            	});

+            	

+            	

+            }

+            

+            this.updateServiceName = () => {

+            	this.dupliateName = false;

+            	for(var i = 0; i < this.serviceList.length; i++){

+            		if(this.serviceList[i].name == this.service.name){

+            			this.dupliateName = true;

+            			return;

+            		}

+            	}

+            }

+            

+            this.updateDesc = () => {

+            	this.emptyServiceDesc = false;

+            }

+            

+            this.updateURL = () => {

+            	this.emptyServiceURL  = false;

+            }

+            

+            this.updateApp = () => {

+            	this.emptyServiceApp = false;

+            }

+            

+          //This is a fix for dropdown selection, due to b2b dropdown only update value field

+    		$scope.$watch('microserviceAddDetails.service.application.name', (newVal, oldVal) => {

+    			for(var i=0;i<$scope.microserviceAddDetails.availableApps.length;i++){ 			

+    				if($scope.microserviceAddDetails.availableApps[i].name==newVal){

+    					$scope.microserviceAddDetails.service.application=angular.copy($scope.microserviceAddDetails.availableApps[i]);

+    				}

+    			}

+    		});

+    		$scope.$watch('microserviceAddDetails.service.security.name', (newVal, oldVal) => {

+    			for(var i=0;i<$scope.microserviceAddDetails.availableSecurityTypes.length;i++){ 			

+    				if($scope.microserviceAddDetails.availableSecurityTypes[i].name==newVal){

+    					$scope.microserviceAddDetails.service.security=angular.copy($scope.microserviceAddDetails.availableSecurityTypes[i]);

+    				}

+    			}

+    		});

+            

+            let emptyCookies = () => {

+                userProfileService.getUserProfile()

+                .then(profile=> {

+                    $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);

+                    $scope.attuid = profile.attuid;

+                    $log.info('user has the following attuid: ' + profile.attuid);

+                    if ($cookies.getObject($scope.attuid + '_widget') != undefined && $cookies.getObject($scope.attuid + '_widget') != null) {

+                        $cookies.remove($scope.attuid + '_widget');

+                    }

+                });

+            };

+            

+            this.testServiceURL = () =>{

+            	//console.log(this.service.id);

+            	widgetsCatalogService.getServiceJSON(this.service.id).then(res => {

+            		document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(res));

+				});

+            }

+            

+            this.saveChanges = () => {     

+            	/* TODO: add form validation */

+            	

+            	var isValid = true;

+            	this.updateServiceName();

+            	

+            	if(this.service.name == ''

+                || this.service.name == undefined){

+            		this.emptyServiceName = true;

+            		isValid = false;

+            	}

+            	

+            	if(this.dupliateName == true

+            	&& this.isEditMode == false){

+            		isValid = false;

+            	}

+            		

+            	

+            	if(this.service.desc == ''

+            	|| this.service.desc == undefined){

+            		this.emptyServiceDesc = true;

+            		isValid = false;

+            	}

+            	

+            	if(this.service.url == ''

+               	|| this.service.url == undefined){

+              		this.emptyServiceURL = true;

+               		isValid = false;

+               	}

+            		

+            	if(this.service.application == undefined

+             	|| this.service.application == null){

+            		this.emptyServiceApp = true;

+            		isValid = false;

+            	}

+            	

+            	if(!isValid)

+            		return;

+            	

+            	/*

+				 * Check the parameter list, delete those parameters that don't

+				 * have key

+				 */

+            	for(var i = 0; i < this.service.parameterList.length; i++){

+            		if(this.service.parameterList[i].para_key == undefined

+            		|| this.service.parameterList[i].para_key == null

+            		|| this.service.parameterList[i].para_key == ""){

+            			this.service.parameterList.splice(i, 1);

+            			i--;

+            		}

+            	}

+      

+            	var securityType;

+            	var username;

+            	var password;

+            	if(this.service.security == undefined ||

+            	this.service.security == null)

+            		securityType = "No Authentication";

+            	else{

+            		securityType = this.service.security.name;

+            		username = this.service.username;

+            		password = this.service.password;

+            	}

+            	

+            	var active = 'N';

+            	if(this.service.active == true)

+            		active = 'Y';

+            	

+            	var newService = {

+            			name: this.service.name,

+            			desc: this.service.desc,

+            			appId: this.service.application.id,

+            			url: this.service.url,

+            			securityType: securityType,

+            			username: username,

+            			password: password,

+            			active: active,

+            			parameterList: this.service.parameterList

+            	};

+            	

+            	if(this.isEditMode){

+            		// console.log(this.service.parameterList);

+            		var message = "Are you sure you want to change '" + this.service.name + "'?"

+            		confirmBoxService.editItem(message).then(isConfirmed => {

+	            		if(isConfirmed){

+		            		microserviceService.updateService(this.service.id, newService).then(() => {

+		            			// TODO: result validation check

+		            			this.closeThisDialog(); 

+		            		});

+            			}

+            		});

+            	}else{

+            		microserviceService.createService(newService).then(() => {

+            			// TODO: result validation check

+            			$scope.closeThisDialog(true);

+            		});

+            	}

+             	

+            };

+            init();

+            $scope.$on('$stateChangeStart', e => {

+                e.preventDefault();

+            });

+        }

+    }

+    MicroserviceAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'widgetsCatalogService', 'applicationsService', 'adminsService', 'microserviceService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];

+    angular.module('ecompApp').controller('MicroserviceAddDetailsCtrl', MicroserviceAddDetailsCtrl);

+})(); 

diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
new file mode 100644
index 00000000..fa607fee
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
@@ -0,0 +1,234 @@
+.microservice-add-details-model{
+	height: 550px;
+	overflow-y: auto;
+	.title {
+		.dGray18r;  //AT&T Dark Gray
+		border-bottom: @blue-active 3px solid;
+	}
+	.microservice-details-title {
+	    color: #191919;
+	    font-family: "Omnes-ECOMP-W02", Arial;;
+	    font-size: 24px;
+	    padding-bottom: 15px;
+	    padding-top:30px;
+	    margin-left: 25px;
+	}
+	.microservice-properties-main {
+	    padding-top: 20px;
+	    padding-left: 20px;
+	    padding-right: 20px;
+	    margin-bottom: 50px;
+	    
+	    height: 100%;
+	    width:100%;
+	    
+	    .microservice-property{
+	      margin-top: 10px;
+	      position: relative;
+	      .property-label{
+	        .dGray14r;
+	      }
+	      .checkbox-label{
+	        display: inline-block;
+	        padding-left: 3px;
+	      }
+	      .checkbox-field{
+	        padding: 0;
+	        margin: 0;
+	        vertical-align: middle;
+	        position: relative;
+	        top: -1px;
+	      } 
+	    }
+		.add-para-item{
+			position: relative;
+	        .add-label-left{
+	  	  	  line-height: 25px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	         
+	          margin-right: 10px;
+	          background: @portalWhite;
+			  .dGray14r;
+	  	   }
+	  	   .add-label-right{
+	  	   	  height: 14px;
+	  	   	  width: 14px;
+	          display:inline-block;
+	  	   }
+		}
+		.item{
+	      position: relative;
+	      margin-bottom: 15px;
+	      width:400px;
+	      .service-select{
+	 		  select{
+	 		  	cursor: pointer;
+			    position: relative;
+			    border: 1px solid #5a5a5a;
+			    white-space: nowrap;
+			    overflow: hidden;
+			    text-overflow: ellipsis;
+			    line-height: 15px;
+			    height: 32px;
+			    padding-left: 10px;
+			    padding-right: 10px;
+		      	border-radius: 0px;
+	 		  }
+	          display:inline-block;
+	          width: 100%;
+    	  }
+    	  .error-container{
+	        position: absolute;
+	        width: 280px;
+	        display: block;
+	        height: 12px;
+	        line-height: 12px;
+	
+	        .err-message{
+	          color: @funcRed;
+	          font-size: 9px;
+	        }
+	        .valid-message{
+	          color: @funcGreen;
+	          font-size: 9px;
+	        }
+	      }
+	      .auth-item-left{
+	          padding-top: 0;
+	          line-height: 30px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          width: 15%;
+	          //border-radius: 2px;
+	          //border: 1px solid @portalLGray;
+	          margin-right: 10px;
+	          background: @portalWhite;
+	          white-space: nowrap;
+			  .dGray14r;
+       	  }
+          .auth-item-right{
+	          display:inline-block;
+	          width: 45%;
+	          border-radius: 2px;
+	          border: 1px solid @portalLGray;
+	          background: @portalWhite;
+	          vertical-align: middle;
+          }
+          .para-label-item-left{
+	          line-height: 30px;
+	          height: 30px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          width: 45%;
+	          margin-right: 10px;
+	          background: @portalWhite;
+	          white-space: nowrap;
+			  .dGray14r;
+       	  }
+          .para-label-item-right{
+	          line-height: 30px;
+	          height: 30px;
+	          display:inline-block;
+	          width: 45%;
+	          background: @portalWhite;
+	          vertical-align: middle;
+	          white-space: nowrap;
+	          .dGray14r;
+          }
+           .para-item-left{
+	          line-height: 30px;
+	          height: 36px;
+	          margin:3px;
+	          vertical-align: middle;
+	          display:inline-block;
+	          width: 43%;
+	          border-radius: 2px;
+	          border: 1px solid @portalLGray;
+	          margin-right: 10px;
+	          background: @portalWhite;
+	          white-space: nowrap;
+			  .dGray14r;
+       	  }
+          .para-item-middle{
+	          line-height: 30px;
+	          height: 36px;
+	          margin:3px;
+	          display:inline-block;
+	          width: 43%;
+	          border-radius: 2px;
+	          border: 1px solid @portalLGray;
+	          background: @portalWhite;
+	          vertical-align: middle;
+	          white-space: nowrap;
+	          .dGray14r;
+          }
+          .json-field{
+		  	position: relative;
+	      	.custom-input-field;
+	      	height:80px;
+		  }
+           .left-test-item{
+	        display: inline-block;
+	        width: 85%;
+	        background: @portalWhite;
+	      }
+          
+          .right-test-item{
+	        position: relative;
+	        display: inline-block;
+	        width: 15%;
+	        float: right;
+	      }
+	      
+          .test-button {
+   			  .btn-blue;
+  	  	  }
+          .para-item-right{
+          	  margin-top: 10px;
+	          height: 14px;
+	          width: 14px;
+	          float: right;
+	          display:inline-block;
+          }
+	      .input-field{
+	        .custom-input-field;
+	        width: 100%; 
+	       }
+	       .textarea-field{
+	      	position: relative;
+	      	.custom-input-field;
+	      	height:50px;
+      	    }
+	       .submit-button {
+	       	 margin-top: 25px;
+	  	 	 position: relative;
+	  	 	 float: right;
+	  	 	 width: 20%;
+	   		.btn-blue;
+	  	  }
+	  	  
+	  	 
+	  	  
+	  	  .add-para-button{
+			height: 14px;
+	  	  	width: 14px;
+	  	  	float: right;
+	  	  }
+	  	  .item-label{
+        	.dGray14r;
+      	  }
+	    }
+	}
+}
+.microservice-scrolling-table{
+	width: 548px;
+    margin-left: 16px;
+    height: 430px;
+    overflow: auto;
+}
+#microservice-scroll-end{
+	height: 20px;
+} 
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
new file mode 100644
index 00000000..6e711b75
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
@@ -0,0 +1,87 @@
+'use strict';
+(function () {
+    class MicroserviceOnboardingCtrl {
+        constructor($log, applicationsService, microserviceService, ngDialog, confirmBoxService,
+                    userProfileService, $cookies, $scope) {
+        	
+        	
+            let getOnboardingServices = () => {
+            	microserviceService.getServiceList().then(res => {
+                     $scope.serviceList = res;
+                }).catch(err => {
+                    $log.error('MicroserviceOnboardingCtrl::getOnboardingServices caught error', err);
+                });
+            };
+            
+            
+            
+            let init = () => {
+                $scope.serviceList = [];
+                getOnboardingServices();
+                this.serviceTableHeaders = [
+                    {name: 'Microservice Name', value: 'name', isSortable: false},
+                    {name: 'Service Endpoint URL', value: 'url', isSortable: false},
+                    {name: 'Security Type', value: 'securityType', isSortable: false}
+                ];
+            };
+            
+            this.openAddNewMicroserviceModal = (selectedService) => {
+            	let data = null; 
+				if(selectedService){
+					if(!selectedService.id){
+						$log.error('MicroserviceOnboardingCtrl:openAddNewMicroserviceModal:service id not found');
+						return; 
+					} 
+					data = { 
+						service:selectedService,
+						list: $scope.serviceList
+					}
+				}else{
+					data = {
+						list: $scope.serviceList	
+					}
+				}
+				
+                ngDialog.open({
+                    templateUrl: 'app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html',
+                    controller: 'MicroserviceAddDetailsCtrl',
+                    controllerAs: 'microserviceAddDetails',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                	if(needUpdate.value === true){
+                		getOnboardingServices();
+                    }
+                });
+            };
+                        
+            this.deleteService = service => { 
+    		   confirmBoxService.deleteItem(service.name).then(isConfirmed => {   
+               	if(isConfirmed){
+               			if(!service || !service.id){
+                           $log.error('MicroserviceOnboardingCtrl::deleteService: No service or ID... cannot delete');
+                           return;
+                       }
+                       microserviceService.deleteService(service.id).then((res) => {                    	   
+                    	   if(res.status == "WARN"){
+                    		   confirmBoxService.showInformation("Failed: widgets " +  res.response + " are assoicated with this microservice!");
+                    	   }else{
+                    		   $scope.serviceList.splice($scope.serviceList.indexOf(service), 1);
+                    	   }
+                       }).catch(err => {
+                           $log.error('MicroserviceOnboardingCtrl::deleteService error:',err);
+                       });
+                   }
+               }).catch(err => {
+                   $log.error('MicroserviceOnboardingCtrl::deleteService error:',err);
+               });
+
+                
+            };
+            
+            init();
+        }
+    }
+    MicroserviceOnboardingCtrl.$inject = ['$log', 'applicationsService', 'microserviceService', 'ngDialog', 'confirmBoxService',
+        'userProfileService','$cookies', '$scope'];
+    angular.module('ecompApp').controller('MicroserviceOnboardingCtrl', MicroserviceOnboardingCtrl);
+})();
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
new file mode 100644
index 00000000..7565b432
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
@@ -0,0 +1,26 @@
+.microservice-onboarding{
+  //.bg_portalWhite;//white for 1702
+  .bg_portalGray;  // gray for 1610
+  position: @page-main-position;
+  top: @page-main-top;
+  left: @page-main-left;
+  right: @page-main-right;
+  bottom: @page-main-bottom;
+  padding-top: @padding-top;
+  overflow-y: @page-main-overflow-y;
+  padding-left: @padding-left-side;
+
+    .microservices-table {
+  	  width: @table-width;
+ 	  margin: 0 auto;
+ 	  
+ 	  .add-button{
+ 	  	width: 180px;
+ 	  }
+    }
+
+	.delete-microservice{
+      .ico_trash_default;
+    }
+
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
new file mode 100644
index 00000000..e3b3128a
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
@@ -0,0 +1,75 @@
+<!--

+  ================================================================================

+  ECOMP Portal

+  ================================================================================

+  Copyright (C) 2017 AT&T Intellectual Property

+  ================================================================================

+  Licensed under the Apache License, Version 2.0 (the "License");

+  you may not use this file 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.

+  ================================================================================

+  -->

+<div class="w-ecomp-main">

+	<div class="w-ecomp-main-container">

+		<div class="microservice-onboarding" id="page-content">

+			<div id="microservice-onboarding-title"

+				class="w-ecomp-main-view-title">Microservice Onboarding</div>

+			<div class="microservices-table">

+				<div class="table-control">

+	                <div class="table-control-buttons">

+						<button class="btn btn-alt btn-small"  id="microservice-onboarding-button-add" ng-click="microserviceOnboarding.openAddNewMicroserviceModal()">

+		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Microservice

+		                </button> 

+					</div>

+					<div>

+						<div class="c-ecomp-b2b-abs-table default">

+							<table b2b-table table-data="serviceList"

+								search-string="microserviceOnboarding.searchString"

+								view-per-page="microserviceOnboarding.viewPerPageIgnored"

+								current-page="microserviceOnboarding.currentPageIgnored"

+								total-page="microserviceOnboarding.totalPageIgnored">

+								<thead b2b-table-row type="header">

+									<tr>

+										<th id="microservice-catalog-th-header-name"

+											ng-repeat="header in microserviceOnboarding.serviceTableHeaders"

+											b2b-table-header key="{{header.value}}"

+											sortable="{{header.isSortable}}">{{header.name}}</th>

+										<th id="microservices-catalog-th-header-delete"

+											b2b-table-header sortable="false">Delete</th>

+									</tr>

+								</thead>

+								<tbody b2b-table-row type="body" class="table-body"

+									row-repeat="rowData in serviceList">

+

+									<tr>

+										<td b2b-table-body

+											ng-repeat="header in microserviceOnboarding.serviceTableHeaders"

+											ng-click="microserviceOnboarding.openAddNewMicroserviceModal(rowData)">

+											<div

+												id="microservices-catalog-microservice-name-{{rowData.id}}"

+												ng-bind="rowData[header.value]"></div>

+										</td>

+

+										<td b2b-table-body>

+											<div id="microservice-onboarding-div-delete-{{$index}}"

+												class="icon-misc-trash"

+												ng-click="microserviceOnboarding.deleteService(rowData)"></div>

+										</td>

+									</tr>

+								</tbody>

+							</table>

+						</div>

+					</div>

+				</div>

+			</div>

+		</div>

+	</div>

+</div>