[VID-15] fixes for various issues

Change-Id: I392a0427078d337a5d501a813dff73c1959481e2
Signed-off-by: jimmydot <jf2512@att.com>

6 files changed, 285 insertions, 171 deletions

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
index d2db094b..cc5b680d 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
@@ -50,7 +50,7 @@ appDS2.constant("COMPONENT", (function() {
 	TENANT_ID : "tenantID",
 	TENANT_NAME : "tenantName",
 	TRUE : "true",
-	

+	
 	VF_MODULE : "vfModule",
 	VNF : "vnf",
 	VNF_CODE : "vnfCode",
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js
index 291549d6..23ff56b3 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js
@@ -127,9 +127,8 @@ appDS2.factory("FIELD", [ "PARAMETER", function(PARAMETER) {
     };

 

     var KEY = {

-	LCP_REGION_TEXT : "LEGACYREGION"

     };

-

+   

     /*

      * NAME values are displayed on GUI pages.

      */

@@ -279,6 +278,7 @@ appDS2.factory("FIELD", [ "PARAMETER", function(PARAMETER) {
     		SELECT : "Please select a subscriber or enter a service instance", 

     		SERVICE_INST_DNE : "That service instance does not exist.  Please try again.",

     		SYSTEM_FAILURE : "System failure",

+    		INVALID_DATA_FORMAT : 'Invalid data format.Please check your file content whether it is not in json or not.',

     		

     }

 

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js
index 00c14148..496c06f1 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js
@@ -41,7 +41,7 @@ appDS2.controller("aaiSubscriberController", [ "COMPONENT", "FIELD", "PARAMETER"
 	$scope.defaultBaseUrl = "";

 	$scope.responseTimeoutMsec = 60000;

 

-	$scope.serviceTypes=[ FIELD.PROMPT.SELECT_SERVICE ];

+	$scope.serviceTypes=[ FIELD.PROMPT.SELECT_SERVICE];

 	$scope.defaultSubscriberName=[ FIELD.PROMPT.SELECT_SUB ];

 

 	var callbackFunction = function(response) {

@@ -142,6 +142,7 @@ appDS2.controller("aaiSubscriberController", [ "COMPONENT", "FIELD", "PARAMETER"
 		    for(var i=0; i<$scope.custSubList.length;i++){

 						if($scope.createSubscriberName === $scope.custSubList[i].subscriberName){

 							globalCustomerId = $scope.custSubList[i].globalCustomerId;

+							globalCustId = globalCustomerId;

 						}

 					};

 			

@@ -182,6 +183,7 @@ appDS2.controller("aaiSubscriberController", [ "COMPONENT", "FIELD", "PARAMETER"
 			

 			};

 			

+			var globalCustId;// This value will be assigned only on create new service instance screen-macro

 			$scope.createType = "a la carte";

 		$scope.deployService = function(service,hideServiceFields) {

 			hideServiceFields = hideServiceFields|| false;

@@ -208,6 +210,11 @@ appDS2.controller("aaiSubscriberController", [ "COMPONENT", "FIELD", "PARAMETER"
 						"createSubscriberName":serviceModel.service.createSubscriberName

 					});

 					DataService.setHideServiceFields(hideServiceFields);

+					if(hideServiceFields){

+						DataService.setServiceType($scope.serviceTypeName);

+						DataService.setGlobalCustomerId(globalCustId);

+					}

+

 					DataService.setALaCarte (true);

 					$scope.createType = "a la carte";

 					var broadcastType = "createComponent";

@@ -227,6 +234,7 @@ appDS2.controller("aaiSubscriberController", [ "COMPONENT", "FIELD", "PARAMETER"
 							"modelName": serviceModel.service.name,

 							"description": serviceModel.service.description,

 							"category":serviceModel.service.category,

+							"serviceEcompNaming": serviceModel.service.serviceEcompNaming,

 							"inputs": serviceModel.service.inputs,

 							"displayInputs": convertedAsdcModel.completeDisplayInputs,

 							"serviceTypeName":serviceModel.service.serviceTypeName,

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js
index eb170915..b400cc6e 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js
@@ -107,91 +107,210 @@ var creationDialogController = function( COMPONENT, FIELD, PARAMETER, $scope, $h
 			showError(FIELD.ERROR.MISSING_DATA, requiredFields);

 			return;

 		}

-	

+		

+		var isUploadAvailable = false;

+		var uploadIndex =0;

 		var paramList = $scope.userProvidedControl.getList();

-		var instanceName = "";

-

-		if ( DataService.getALaCarte() ) {

-			if ( paramList != null ) {

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

-					if (paramList[i].id === FIELD.ID.INSTANCE_NAME) {

-						instanceName = paramList[i].value;

-						break;

+		

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

+			if (paramList[i].id === FIELD.ID.SUPPLEMENTORY_DATA_FILE) {

+				isUploadAvailable = true;

+				uploadIndex=i;

+				break;

+			}

+		}

+		

+		if(isUploadAvailable){

+			var errorMsg = "";

+			var fileInput = document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE);

+			var file = fileInput.files[0];

+			var reader = new FileReader();

+			reader.onload = function(e) {

+				try{

+					paramList[uploadIndex].value = JSON.parse(reader.result);

+					FIELD.PARAMETER.SUPPLEMENTORY_DATA_FILE['value'] = JSON.stringify(paramList[uploadIndex].value);

+					$scope.userProvidedControl.updateList([ FIELD.PARAMETER.SUPPLEMENTORY_DATA_FILE ]);

+					

+					var instanceName = "";

+

+					if ( DataService.getALaCarte() ) {

+						if ( paramList != null ) {

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

+								if (paramList[i].id === FIELD.ID.INSTANCE_NAME) {

+									instanceName = paramList[i].value;

+									break;

+								}

+							}

+						}

+						var isValid = validateInstanceName (instanceName);

+						if ( isValid ) {

+							$scope.isErrorVisible = false;

+						} else {

+							showError(FIELD.ERROR.INVALID_INSTANCE_NAME + instanceName, 

+									FIELD.ERROR.INSTANCE_NAME_VALIDATE);

+							return;

+						}

 					}

-				}

+					var arbitraryParametersList = DataService.getArbitraryParameters();

+					var p = null;

+					if (UtilityService.hasContents (arbitraryParametersList)) {

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

+							p = arbitraryParametersList[i];

+							if (p.type === PARAMETER.MAP) {

+								//validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }

+								// need to find the value in paramList

+								for (var j = 0; j < paramList.length; j++) {

+									if (paramList[j].id === p.id) {

+										p.value = paramList[j].value;

+										var isValid = validateMap (p.value);

+										if ( isValid ) {

+											$scope.isErrorVisible = false;

+											break;

+										} 

+										else {

+											showError(FIELD.ERROR.INVALID_MAP + p.id, 

+													FIELD.ERROR.MAP_VALIDATE);

+											return;

+										}	

+									}

+								}

+							} else if (p.type === PARAMETER.LIST) {

+								//validate a list: { value or a list of comma separated values }

+								// need to find the value in paramList

+								for (var j = 0; j < paramList.length; j++) {

+									if (paramList[j].id === p.id) {

+										p.value = paramList[j].value;

+										var isValid = validateList (p.value);

+										if ( isValid ) {

+											$scope.isErrorVisible = false;

+											break;

+										} 

+										else {

+											showError(FIELD.ERROR.INVALID_LIST + p.id, 

+													FIELD.ERROR.LIST_VALIDATE);

+											return;

+										}	

+									}

+								}

+							}

+						}

+					}

+					var requestDetails = CreationService

+							.getMsoRequestDetails($scope.userProvidedControl.getList());

+

+					$scope.isDialogVisible = false;

+

+					$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {

+						url : CreationService.getMsoUrl(),

+						requestDetails : requestDetails,

+						componentId: componentId,

+						callbackFunction : function(response) {

+							if (response.isSuccessful) {

+								$scope.popup.isVisible = false;

+								runCallback(response);

+							} else {

+								$scope.isDialogVisible = false;

+								$scope.popup.isVisible = false;

+							}

+						}

+					});

+					

+				}catch(e){

+				errorMsg = errorMsg+ FIELD.ERROR.INVALID_DATA_FORMAT;

 			}

-			var isValid = validateInstanceName (instanceName);

-			if ( isValid ) {

-				$scope.isErrorVisible = false;

-			} else {

-				showError(FIELD.ERROR.INVALID_INSTANCE_NAME + instanceName, 

-						FIELD.ERROR.INSTANCE_NAME_VALIDATE);

+			if (errorMsg !== "") {

+				showError(FIELD.ERROR.SYSTEM_FAILURE, errorMsg);

 				return;

 			}

-		}

-		var arbitraryParametersList = DataService.getArbitraryParameters();

-		var p = null;

-		if (UtilityService.hasContents (arbitraryParametersList)) {

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

-				p = arbitraryParametersList[i];

-				if (p.type === PARAMETER.MAP) {

-					//validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }

-					// need to find the value in paramList

-					for (var j = 0; j < paramList.length; j++) {

-						if (paramList[j].id === p.id) {

-							p.value = paramList[j].value;

-							var isValid = validateMap (p.value);

-							if ( isValid ) {

-								$scope.isErrorVisible = false;

-								break;

-							} 

-							else {

-								showError(FIELD.ERROR.INVALID_MAP + p.id, 

-										FIELD.ERROR.MAP_VALIDATE);

-								return;

-							}	

+			}

+			reader.readAsText(file);

+		}else{

+	

+			var paramList = $scope.userProvidedControl.getList();

+			var instanceName = "";

+

+			if ( DataService.getALaCarte() ) {

+				if ( paramList != null ) {

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

+						if (paramList[i].id === FIELD.ID.INSTANCE_NAME) {

+							instanceName = paramList[i].value;

+							break;

 						}

 					}

-				} else if (p.type === PARAMETER.LIST) {

-					//validate a list: { value or a list of comma separated values }

-					// need to find the value in paramList

-					for (var j = 0; j < paramList.length; j++) {

-						if (paramList[j].id === p.id) {

-							p.value = paramList[j].value;

-							var isValid = validateList (p.value);

-							if ( isValid ) {

-								$scope.isErrorVisible = false;

-								break;

-							} 

-							else {

-								showError(FIELD.ERROR.INVALID_LIST + p.id, 

-										FIELD.ERROR.LIST_VALIDATE);

-								return;

-							}	

+				}

+				var isValid = validateInstanceName (instanceName);

+				if ( isValid ) {

+					$scope.isErrorVisible = false;

+				} else {

+					showError(FIELD.ERROR.INVALID_INSTANCE_NAME + instanceName, 

+							FIELD.ERROR.INSTANCE_NAME_VALIDATE);

+					return;

+				}

+			}

+			var arbitraryParametersList = DataService.getArbitraryParameters();

+			var p = null;

+			if (UtilityService.hasContents (arbitraryParametersList)) {

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

+					p = arbitraryParametersList[i];

+					if (p.type === PARAMETER.MAP) {

+						//validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }

+						// need to find the value in paramList

+						for (var j = 0; j < paramList.length; j++) {

+							if (paramList[j].id === p.id) {

+								p.value = paramList[j].value;

+								var isValid = validateMap (p.value);

+								if ( isValid ) {

+									$scope.isErrorVisible = false;

+									break;

+								} 

+								else {

+									showError(FIELD.ERROR.INVALID_MAP + p.id, 

+											FIELD.ERROR.MAP_VALIDATE);

+									return;

+								}	

+							}

+						}

+					} else if (p.type === PARAMETER.LIST) {

+						//validate a list: { value or a list of comma separated values }

+						// need to find the value in paramList

+						for (var j = 0; j < paramList.length; j++) {

+							if (paramList[j].id === p.id) {

+								p.value = paramList[j].value;

+								var isValid = validateList (p.value);

+								if ( isValid ) {

+									$scope.isErrorVisible = false;

+									break;

+								} 

+								else {

+									showError(FIELD.ERROR.INVALID_LIST + p.id, 

+											FIELD.ERROR.LIST_VALIDATE);

+									return;

+								}	

+							}

 						}

 					}

 				}

 			}

-		}

-		var requestDetails = CreationService

-				.getMsoRequestDetails($scope.userProvidedControl.getList());

+			var requestDetails = CreationService

+					.getMsoRequestDetails($scope.userProvidedControl.getList());

 

-		$scope.isDialogVisible = false;

+			$scope.isDialogVisible = false;

 

-		$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {

-			url : CreationService.getMsoUrl(),

-			requestDetails : requestDetails,

-			componentId: componentId,

-			callbackFunction : function(response) {

-				if (response.isSuccessful) {

-					$scope.popup.isVisible = false;

-					runCallback(response);

-				} else {

-					$scope.isDialogVisible = false;

-					$scope.popup.isVisible = false;

+			$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {

+				url : CreationService.getMsoUrl(),

+				requestDetails : requestDetails,

+				componentId: componentId,

+				callbackFunction : function(response) {

+					if (response.isSuccessful) {

+						$scope.popup.isVisible = false;

+						runCallback(response);

+					} else {

+						$scope.isDialogVisible = false;

+						$scope.popup.isVisible = false;

+					}

 				}

-			}

-		});

+			});

+		}

 	}

 

 	$scope.cancel = function() {

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js
index 28498129..11e61b3a 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js
@@ -187,32 +187,42 @@ var CreationService = function($log, AaiService, AsdcService, DataService,VIDCON
 	};

 

 	var getUserProvidedList = function() {

-		parameterList = [];

+		var parameterList = [];

 		var isUserProvidedNaming = false;

 		if ( (DataService.getModelInfo(_this.componentId).serviceEcompNaming != null) 

 				&& (DataService.getModelInfo(_this.componentId).serviceEcompNaming === "false") ) {

 			isUserProvidedNaming = true;

 		}

-		var parameterList;

-		var hsf = DataService.getHideServiceFields() || false;

-		if (_this.componentId === COMPONENT.SERVICE && !hsf) {	

+		

+		var isInTop = DataService.getHideServiceFields() || false;

+		if (_this.componentId === COMPONENT.SERVICE) {	

 			if ( DataService.getALaCarte() ) {

 				parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];

-				parameterList = parameterList.concat([ getSubscribersParameter(),

-				    FIELD.PARAMETER.SERVICE_TYPE_DISABLED ]);

+				if(!isInTop){

+					parameterList = parameterList.concat([ getSubscribersParameter(),

+						FIELD.PARAMETER.SERVICE_TYPE_DISABLED ]);

+				}

 			}

 			else {

 				// macro

-				if (isUserProvidedNaming) {

-					parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];

-					

+				

+				if(!isInTop){

+					if (isUserProvidedNaming) {

+						parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];

+						

+					}

+					parameterList = parameterList.concat([ getSubscribersParameter() ]);

+					parameterList = parameterList.concat([ getServiceId(),

+						FIELD.PARAMETER.SERVICE_TYPE,

+						FIELD.PARAMETER.LCP_REGION,

+						FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,

+						FIELD.PARAMETER.TENANT_DISABLED ]);

+				}else{

+					parameterList = parameterList.concat([ getServiceId(),

+						FIELD.PARAMETER.LCP_REGION,

+						FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,

+						FIELD.PARAMETER.TENANT_DISABLED ]);

 				}

-				parameterList = parameterList.concat([ getSubscribersParameter() ]);

-				parameterList = parameterList.concat([ getServiceId(),

-					FIELD.PARAMETER.SERVICE_TYPE,

-					FIELD.PARAMETER.LCP_REGION,

-					FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,

-					FIELD.PARAMETER.TENANT_DISABLED ]);

 			}

 		}

 		else {

@@ -312,6 +322,9 @@ var CreationService = function($log, AaiService, AsdcService, DataService,VIDCON
 						isRequired : inputs[key][PARAMETER.REQUIRED],

 						description : inputs[key][PARAMETER.DESCRIPTION]

 				};

+				if ( DataService.getALaCarte() ) {

+					parameter.name = ComponentService.getFieldDisplayName(inputs[key][PARAMETER.DISPLAY_NAME]);

+				}

 				switch (inputs[key][PARAMETER.TYPE]) {

 					case PARAMETER.INTEGER:

 						parameter.type = PARAMETER.NUMBER;

@@ -539,8 +552,13 @@ var CreationService = function($log, AaiService, AsdcService, DataService,VIDCON
 				globalSubscriberId : DataService.getGlobalCustomerId(),

 				subscriberName : DataService.getSubscriberName()

 			};

+			var isInTop = DataService.getHideServiceFields() || false;

+			if(isInTop){

+				requestDetails.requestParameters.subscriptionServiceType = DataService.getModelInfo(_this.componentId)["serviceTypeName"];

+			}else{

 			requestDetails.requestParameters.subscriptionServiceType = getValueFromList(

 					FIELD.ID.SERVICE_TYPE, parameterList);

+			}

 			requestDetails.requestParameters.aLaCarte = DataService.getALaCarte();

 			if ( !DataService.getALaCarte() ) {

 				requestDetails.requestInfo.productFamilyId = getValueFromList(

@@ -876,7 +894,13 @@ var CreationService = function($log, AaiService, AsdcService, DataService,VIDCON
 	};

 	var updateUserParameterList = function(updatedId, parameterListControl) {

 		console.log ("updateUserParameterList() updatedId=" + updatedId);

-		if (updatedId === FIELD.ID.SDN_C_PRELOAD) {

+		if (updatedId === FIELD.ID.PRODUCT_FAMILY && DataService.getHideServiceFields()) {

+			var cloudRegionTenantList = new Array();

+			AaiService.getLcpCloudRegionTenantList(DataService.getGlobalCustomerId(), DataService.getServiceType(), function(cloudRegionTenantList) {

+				DataService.setCloudRegionTenantList(cloudRegionTenantList);

+				parameterListControl.updateList([ getLcpRegion() ]);

+			});

+		}else if (updatedId === FIELD.ID.SDN_C_PRELOAD) {

 			var list = parameterListControl.getList(updatedId);

 			if($('input[parameter-id="'+updatedId+'"]').is(':checked')){

 				FIELD.PARAMETER.SDN_C_PRELOAD_CHECKED.value=true;

@@ -903,25 +927,9 @@ var CreationService = function($log, AaiService, AsdcService, DataService,VIDCON
 			var fileExt  = arr[arr.length-1];

 			if(fileExt!='' && fileExt.toLowerCase()!='json'){

 				 $('input[parameter-id="'+updatedId+'"]').val('');

-				showError("Invalid file format.", 'Please select *.json format file.');

+				alert("Invalid file format. Please select *.json format file.");

 				return false;

 			}

-			var fileJsonData={};

-			var fileInput = document.getElementById(updatedId);

-			var file = fileInput.files[0];

-			var reader = new FileReader();

-			reader.onload = function(e) {

-				try{

-					fileJsonData = JSON.parse(reader.result);

-					FIELD.PARAMETER.SUPPLEMENTORY_DATA_FILE['value']=(JSON.stringify(fileJsonData)).toString();

-					parameterListControl

-					.updateList([ FIELD.PARAMETER.SUPPLEMENTORY_DATA_FILE ]);

-				}catch(e){

-					alert('Invalid json format.');

-					showError("Invalid data format.", 'Please check your file content it is not in json format.');

-				}

-			}

-			reader.readAsText(file);

 		} else  if (updatedId === FIELD.ID.LCP_REGION) {

 			var list = parameterListControl.getList(updatedId);

 			if (list[0].selectedIndex >= 0) {

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
index 11dc1c39..ff79d707 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
@@ -1,64 +1,43 @@
-<!--
-  ============LICENSE_START=======================================================
-  VID
-  ================================================================================
-  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
-  ================================================================================
-  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.
-  ============LICENSE_END=========================================================
-  -->
-
-<div ng-controller="creationDialogController">
-
-	<div ng-show="isDialogVisible">
-		<div class="titleLine">
-			<img src="app/vid/images/spinner.gif"
-				ngx-visible="{{isSpinnerVisible}}"></img>
-			<h3>Create {{componentName}} -- {{createType}}</h3>
-		</div>
-
-		<div class="error" ng-show="isErrorVisible">
-			<img src="app/vid/images/error.png"></img>{{error}}
-		</div>
-
-		<div ngx-visible="{{isDataVisible}}">
-			<parameter-block control="summaryControl"></parameter-block>
-			<h4>
-				User Provided Data (<img class="requiredIndicator"
-					src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)
-			</h4>
-			<parameter-block control="userProvidedControl"
-				callback="userParameterChanged(id);" editable></parameter-block>
+<div ng-controller="creationDialogController">

 

-			<div class="prompt">
-				<p>
-					Enter Data and <span>Confirm</span> to<br />Create <span>{{componentName}}</span>
-				</p>
-				<p>
-					<span>Cancel</span> to Return to Previous Page.<br />Data entered
-					will be lost
-				</p>
-			</div>
-
-		</div>
-		<div class="buttonRow">
-			<button ngx-enabled="{{isConfirmEnabled}}" att-button size="small"
-				ng-click="confirm();">Confirm</button>
-			<button type="button" ng-click="cancel();" att-button
-				btn-type="primary" size="small">Cancel</button>
-		</div>
-	</div>
-
-	<div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>
-
-</div>
+	<div ng-show="isDialogVisible">

+		<div class="titleLine">

+			<img src="app/vid/images/spinner.gif"

+				ngx-visible="{{isSpinnerVisible}}"></img>

+			<h3>Create {{componentName}} -- {{createType}}</h3>

+		</div>

+

+		<div class="error" ng-show="isErrorVisible">

+			<img src="app/vid/images/error.png"></img>{{error}}

+		</div>

+

+		<div ngx-visible="{{isDataVisible}}">

+			<parameter-block control="summaryControl"></parameter-block>

+			<h4>

+				User Provided Data (<img class="requiredIndicator"

+					src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)

+			</h4>

+			<parameter-block control="userProvidedControl"

+				callback="userParameterChanged(id);" editable></parameter-block>

+			<div class="prompt">

+				<p>

+					Enter Data and <span>Confirm</span> to<br />Create <span>{{componentName}}</span>

+				</p>

+				<p>

+					<span>Cancel</span> to Return to Previous Page.<br />Data entered

+					will be lost

+				</p>

+			</div>

+

+		</div>

+		<div class="buttonRow">

+			<button ngx-enabled="{{isConfirmEnabled}}" att-button size="small"

+				ng-click="confirm();">Confirm</button>

+			<button type="button" ng-click="cancel();" att-button

+				btn-type="primary" size="small">Cancel</button>

+		</div>

+	</div>

+

+	<div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>

+

+</div>