Fix deploy window

Add nice textboxes to edit the blueprint parameters

Issue-ID: CLAMP-171
Change-Id: I1675d04c5849b5820e6221dcf5fa28c69cb87f5d
Signed-off-by: Determe, Sebastien (sd378r) <sd378r@intl.att.com>

2 files changed, 23 insertions, 10 deletions

diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/deploy_parameters.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/deploy_parameters.html
index 5693a875b..3fc1b0301 100644
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/deploy_parameters.html
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/deploy_parameters.html
@@ -26,11 +26,11 @@
 		<button type="button" class="close" ng-click="close()" aria-hidden="true" style="margin-top: -3px">&times;</button>
 		<h4>Deployment parameters</h4>
 	</div>
-	<div class="modal-body" style="height: 150px">
-		  <div style="height: 30px">
-        Deployment parameters as JSON.
+	<div class="modal-body" style="display:block">
+		  <div style="height: 100%;clear: both;" id="deployPropertiesDiv" name="deployPropertiesDiv" ng-init="load_deploy_parameters()" >
+        Deployment parameters.
       </div>
-      <textarea class="form-control" focus="true" name="deployProperties" id="deployProperties" ng-init="load_deploy_parameters()"/>
+     
 	</div>
 	<div class="modal-footer">
       <button ng-click="deploy()"  class="btn btn-primary">Deploy</button>
diff --git a/src/main/resources/META-INF/resources/designer/scripts/DeploymentCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/DeploymentCtrl.js
index 950e59ca1..935091240 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/DeploymentCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/DeploymentCtrl.js
@@ -26,10 +26,18 @@ app.controller('DeploymentCtrl',
        function( $scope,  $rootScope,  $modalInstance,  data,  dialogs,   cldsModelService) {
 
            function validate_and_set_deploy_parameters () {
-        	   var parameters = $("#deployProperties").val();
+        	   var inputList = document.getElementsByClassName("deployFormId");
+        	   var jsonParameters="{";
+        	   $.each(inputList, function(key) {
+        		   if (jsonParameters !== "{") {
+        			   jsonParameters = jsonParameters+",";
+        		   }
+        		  jsonParameters = jsonParameters+'"'+inputList[key].id+'":'+'"'+inputList[key].value+'"'
+        	   });
+        	   jsonParameters = jsonParameters+"}";
                try {
-                   parameters = JSON.parse(parameters);
-                   set_deploy_parameters(parameters);
+                   //Try to validate the json
+                   set_deploy_parameters(JSON.parse(jsonParameters));
                } catch (e) {
                    console.error("Couldn't parse deploy parameters json");
                }
@@ -39,7 +47,6 @@ app.controller('DeploymentCtrl',
                if (!'global' in elementMap) {
                    elementMap["global"] = [];
                }
-
                var index = elementMap["global"].findIndex(function (e) { return (typeof e == "object" && !(e instanceof Array)) && "deployParameters" == e["name"]; }); 
                if (index == -1) { 
                    elementMap["global"].push({"name": "deployParameters", "value": parameters}); 
@@ -50,8 +57,14 @@ app.controller('DeploymentCtrl',
 
            $scope.load_deploy_parameters = function () {
         	   var index = elementMap["global"].findIndex(function (e) { return (typeof e == "object" && !(e instanceof Array)) && "deployParameters" == e["name"]; }); 
-               if (index != -1) { 
-            	   $('#deployProperties').val(JSON.stringify(elementMap["global"][index]["value"]))
+               if (index != -1) {
+            	   $('#deployPropertiesDiv').append($('<br/>'));
+            	   $.each(elementMap["global"][index].value, function(key) {
+            		   var propertyValue=elementMap["global"][index].value[key];
+            		   $('#deployPropertiesDiv').append($('<label class="control-label">'+key+'  </label>'));
+            		   $('#deployPropertiesDiv').append($('<input style="width: 100%; clear: both;" class="deployFormId" id="'+key+'"></input>').val(propertyValue).html(propertyValue));
+            		   $('#deployPropertiesDiv').append($('<br/>'));
+    	        });
                }
            }