Rework the UI

Rework the UI, fixing some bugs, update the method to get the CL image,
rework the URL used to communicate with backend, remove the save
CL/update/validationTest/resubmit menu.

Issue-ID: CLAMP-312, CLAMP-318
Change-Id: I3e167a5432b99f851382e36c1b56189c18e43476
Signed-off-by: xg353y <xg353y@intl.att.com>

9 files changed, 111 insertions, 159 deletions

diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/global_properties.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/global_properties.html
index febdb6b61..e7b4f383e 100644
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/global_properties.html
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/global_properties.html
@@ -46,31 +46,6 @@
 				</a> / <a href="javascript:void(0);" class="btn-link" id='paramsCancel'>Cancel</a>
 			</div>
 			<div>
-
-				<div class="form-group clearfix">
-					<label for="actionSet" class="col-sm-4 control-label">
-						Action Set</label>
-
-					<div class="col-sm-8">
-						<select class="form-control" id="actionSet" name="actionSet"
-							onchange="propChangeAlert(this);">
-						</select>
-
-					</div>
-				</div>
-
-				<div class="form-group clearfix">
-					<label for="location" class="col-sm-4 control-label">
-						Location</label>
-
-					<div class="col-sm-8">
-						<select class="form-control" id="location" name="location"
-							multiple size=2>
-
-						</select>
-
-					</div>
-				</div>
 				<div class="form-group clearfix">
 					<label for="deployParameters" class="col-sm-4 control-label">
 						Deploy Parameters</label>
@@ -99,38 +74,4 @@
 			class="btn btn-primary">Cancel</button>
 
 	</div>
-
-
-	<script>
-		//display message only if global was previously saved
-        asDiff = false;
-
-        function propChangeAlert(actionset) {
-	        //throw warnings only if options were previously chosen
-	        var globalProp = getGlobalProperty();
-	        if (globalProp) {
-		        loop1: for (var i = 0; i < globalProp.length; i++) {
-			        if (globalProp[i]["name"] == actionset.id) {
-				        //user did not change properties						
-				        if (globalProp[i]["value"][0] == actionset.value) {
-					        if (globalProp[i]["name"] == "actionSet") {
-						        asDiff = false;
-					        }
-					        if (!asDiff) {
-						        $(".propChangeWarn").hide();
-					        }
-					        ;
-					        //user changed properties
-				        } else {
-					        if (globalProp[i]["name"] == "actionSet") {
-						        asDiff = true;
-					        };
-					        $(".propChangeWarn").show();
-				        }
-				        break loop1;
-			        }
-		        }
-	        }
-        }
-	</script>
 </div>
diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/tosca_model_properties.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/tosca_model_properties.html
index ca627b354..271def436 100644
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/tosca_model_properties.html
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/tosca_model_properties.html
@@ -62,8 +62,9 @@
 			</div>
 		</div>
 	</div>
-</div>
-<div class="modal-footer">
+	<div class="modal-footer">
 	<button data-ng-click="saveToscaProps()" id="savePropsBtn" class="btn btn-primary">Done</button>
 	<button data-ng-click="close(true)" id="close_button" class="btn btn-primary">Cancel</button>
+    </div>
 </div>
+
diff --git a/src/main/resources/META-INF/resources/designer/scripts/CldsModelService.js b/src/main/resources/META-INF/resources/designer/scripts/CldsModelService.js
index c7ffdb3f4..8a6981cb8 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/CldsModelService.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/CldsModelService.js
@@ -104,10 +104,12 @@ app
 	    this.getModel = function(modelName) {
 		    var def = $q.defer();
 		    var sets = [];
-		    var svcUrl = "/restservices/clds/v1/clds/model/" + modelName;
+		    var svcUrl = "/restservices/clds/v2/loop/" + modelName;
+		    //var svcUrl = "/restservices/clds/v1/clds/model/" + modelName;
 		    $http.get(svcUrl).success(function(data) {
-		    	var clModel = '{"name": "ClosedLoopTest","lastComputedState":"DESIGN","svgRepresentation": "representation","globalPropertiesJson": [{"name":"service","value":["4cc5b45a-1f63-4194-8100-cd8e14248c92"]},{"name":"vf","value":["07e266fc-49ab-4cd7-8378-ca4676f1b9ec"]},{"name":"actionSet","value":["vnfRecipe"]},{"name":"location","value":["DC1"]},{"name":"deployParameters","value":{"location_id":"","service_id":"","policy_id":"AUTO_GENERATED_POLICY_ID_AT_SUBMIT"}}], "blueprint": "yaml","lastComputedState": "DESIGN","operationalPolicies": [ {"name": "OpPolicyTest", "configurationsJson": { "policy1": [{"name": "pname","value": "policy1"},{"name": "pid","value": "0"},{"name": "timeout","value": "345"},{"policyConfigurations": [[{"name": "recipe","value": ["restart"]},{"name": "maxRetries","value": ["3"]},{"name": "retryTimeLimit","value": ["180"]},{"name": "_id","value": ["6TtHGPq"]},{"name": "parentPolicy","value": [""]},{"name": "actor","value": ["APPC"]},{"name": "recipeInput","value": [""]},{"name": "recipeLevel","value": ["VM"]},{"name": "targetResourceId","value": ["07e266fc-49ab-4cd7-8378-ca4676f1b9ec"]},{"name": "targetResourceIdOther","value": [""]},{"name": "enableGuardPolicy","value": ["on"]},{"name": "guardPolicyType","value": ["GUARD_YAML"]},{"name": "guardTargets","value": [".*"]},{"name": "minGuard","value": ["1"]},{"name": "maxGuard","value": ["1"]},{"name": "limitGuard","value": ["1"]},{"name": "timeUnitsGuard","value": ["minute"]},{"name": "timeWindowGuard","value": ["10"]},{"name": "guardActiveStart","value": ["00:00:01-05:00"]},{"name": "guardActiveEnd","value": ["00:00:00-05:00"]}]]}]} }],"microServicePolicies": [{"name": "tca","properties": "", "shared": true,"policyTosca": "tosca","jsonRepresentation": {"schema":{"title":"DCAE TCA Config","type":"object","required":["name","eventName"],"properties":{"name":{"propertyOrder":101,"title":"Name","type":"string","default":"New_Set"},"eventName":{"propertyOrder":102,"title":"EventName","type":"string","enum":["event1","event2"]},"clSchemaType":{"propertyOrder":103,"title":"Control Loop Schema Type","type":"string","enum":["","type1","type2"]},"threshold":{"propertyOrder":104,"title":"Threshold","format":"tabs","type":"array","items":{"type":"object","title":"Threshold","required":["metric","operator"],"properties":{"metric":{"propertyOrder":1001,"title":"Metric","type":"string","enum":["metric1","metric2"]},"operator":{"propertyOrder":1003,"default":">","title":"Operator","type":"string","enum":[">","<","=","<=",">="]}, "clEventStatus":{"propertyOrder":1004,"title":"Closed Loop Event Status","type":"string","enum":["","ONSET","ABATED"]}}}}}}}}],"loopLogs": [{ } ] }';
-		    	cl_props = JSON.parse(clModel);
+		    	//var clModel = '{"name": "ClosedLoopTest","lastComputedState":"DESIGN","svgRepresentation": "representation","globalPropertiesJson": [{"name":"service","value":["4cc5b45a-1f63-4194-8100-cd8e14248c92"]},{"name":"vf","value":["07e266fc-49ab-4cd7-8378-ca4676f1b9ec"]},{"name":"actionSet","value":["vnfRecipe"]},{"name":"location","value":["DC1"]},{"name":"deployParameters","value":{"location_id":"","service_id":"","policy_id":"AUTO_GENERATED_POLICY_ID_AT_SUBMIT"}}], "blueprint": "yaml","lastComputedState": "DESIGN","operationalPolicies": [ {"name": "OpPolicyTest", "configurationsJson": { "policy1": [{"name": "pname","value": "policy1"},{"name": "pid","value": "0"},{"name": "timeout","value": "345"},{"policyConfigurations": [[{"name": "recipe","value": ["restart"]},{"name": "maxRetries","value": ["3"]},{"name": "retryTimeLimit","value": ["180"]},{"name": "_id","value": ["6TtHGPq"]},{"name": "parentPolicy","value": [""]},{"name": "actor","value": ["APPC"]},{"name": "recipeInput","value": [""]},{"name": "recipeLevel","value": ["VM"]},{"name": "targetResourceId","value": ["07e266fc-49ab-4cd7-8378-ca4676f1b9ec"]},{"name": "targetResourceIdOther","value": [""]},{"name": "enableGuardPolicy","value": ["on"]},{"name": "guardPolicyType","value": ["GUARD_YAML"]},{"name": "guardTargets","value": [".*"]},{"name": "minGuard","value": ["1"]},{"name": "maxGuard","value": ["1"]},{"name": "limitGuard","value": ["1"]},{"name": "timeUnitsGuard","value": ["minute"]},{"name": "timeWindowGuard","value": ["10"]},{"name": "guardActiveStart","value": ["00:00:01-05:00"]},{"name": "guardActiveEnd","value": ["00:00:00-05:00"]}]]}]} }],"microServicePolicies": [{"name": "tca","properties": "", "shared": true,"policyTosca": "tosca","jsonRepresentation": {"schema":{"title":"DCAE TCA Config","type":"object","required":["name","eventName"],"properties":{"name":{"propertyOrder":101,"title":"Name","type":"string","default":"New_Set"},"eventName":{"propertyOrder":102,"title":"EventName","type":"string","enum":["event1","event2"]},"clSchemaType":{"propertyOrder":103,"title":"Control Loop Schema Type","type":"string","enum":["","type1","type2"]},"threshold":{"propertyOrder":104,"title":"Threshold","format":"tabs","type":"array","items":{"type":"object","title":"Threshold","required":["metric","operator"],"properties":{"metric":{"propertyOrder":1001,"title":"Metric","type":"string","enum":["metric1","metric2"]},"operator":{"propertyOrder":1003,"default":">","title":"Operator","type":"string","enum":[">","<","=","<=",">="]}, "clEventStatus":{"propertyOrder":1004,"title":"Closed Loop Event Status","type":"string","enum":["","ONSET","ABATED"]}}}}}}}}],"loopLogs": [{ } ] }';
+		    	//cl_props = JSON.parse(clModel);
+		    	cl_props = data;
 			    def.resolve(data);
 		    }).error(function(data) {
 
@@ -119,7 +121,8 @@ app
 
 		    var def = $q.defer();
 		    var sets = [];
-		    var svcUrl = "/restservices/clds/v1/clds/model-names";
+		    //var svcUrl = "/restservices/clds/v1/clds/model-names";
+		    var svcUrl = "/restservices/clds/v2/loop/getAllNames";
 		    $http.get(svcUrl).success(function(data) {
 
 			    def.resolve(data);
@@ -201,12 +204,12 @@ app
 		    });
 		    return def.promise;
 	    };
-	    this.processActionResponse = function(modelName, pars) {
+	    this.processActionResponse = function(modelName) {
 
 		    // populate control name (prefix and uuid here)
 		    var headerText = "Closed Loop Modeler - " + modelName;
 		    setStatus();
-		    disableBPMNAddSVG(pars);
+		    manageCLImage(modelName);
 		    enableDisableMenuOptions();
 	    };
 	    this.processRefresh = function(pars) {
@@ -217,7 +220,7 @@ app
 		    }
 		    typeID = newPars.typeId;
 		    deploymentId = newPars.deploymentId;
-		    setStatus(newPars);
+		    setStatus();
 		    enableDisableMenuOptions();
 	    }
 	    function setStatus() {
@@ -254,37 +257,48 @@ app
 		    '<span id="status_clds" style="position: absolute;  left: 61%;top: 151px; font-size:20px;">Status: '
 		    + statusMsg + '</span>');
 	    }
-	    function disableBPMNAddSVG(pars) {
-
-		    var svg = pars.imageText.substring(pars.imageText.indexOf("<svg"))
-		    if ($("#svgContainer").length > 0)
-			    $("#svgContainer").remove();
-		    $("#js-canvas").append(
-		    "<span id=\"svgContainer\">" + svg + "</span>");
-		    /* added code for height width viewBox */
-		    $("#svgContainer svg").removeAttr("height");
-		    $("#svgContainer svg").removeAttr('viewBox');
-		    $("#svgContainer svg").removeAttr('width');
-		    $("#svgContainer svg").attr('width', '100%');
-		    $("#svgContainer svg").attr('height', '100%');
-		    $("#svgContainer").click(
-		    function(event) {
-
-			    // console.log($(event.target).parent().html())
-			    // console.log($($(event.target).parent()).attr("data-element-id"))
-			    var name = $($(event.target).parent()).attr("data-element-id")
-			    lastElementSelected = $($(event.target).parent()).attr(
-			    "data-element-id")
-			    checkIfElementType(name)
-		    });
+	    function manageCLImage(modelName) {
+	    	getModelImage(modelName).then(function(pars) {
+		    	//var svg=' <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" color-interpolation="auto" color-rendering="auto" fill="black" fill-opacity="1" font-family="Dialog" font-size="12px" font-style="normal" font-weight="normal" image-rendering="auto" shape-rendering="auto" stroke="black" stroke-dasharray="none" stroke-dashoffset="0" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="1" stroke-width="1" text-rendering="auto"><!--Generated by the Batik Graphics2D SVG Generator--> <defs id="genericDefs"/> <g> <g stroke-width="2"> <circle cx="20" cy="21" fill="none" r="10"/> <line fill="none" x1="30" x2="91" y1="21" y2="21"/> <polygon fill="none" points=" 89 19 89 23 93 21"/> <polygon points=" 89 19 89 23 93 21" stroke="none"/>  <g class="djs-group" xmlns="http://www.w3.org/2000/svg"> <g class="djs-element djs-shape" data-element-id="VesCollector_1g9cmz0" transform="matrix(1,0,0,1,207,140)" style="display: block;"> <rect fill="none" class="djs-outline" x="-6" y="-6" width="132" height="92"></rect> <g > <rect x="0" y="0" width="120" height="80" rx="0" ry="0" style="stroke-width: 2;" stroke="#000000" fill="#ffffff"></rect> <polyline points="120,80 120,20 " style="stroke-width: 2;" fill="none" stroke="#000000"></polyline> <polyline points="20,0 20,80 " style="stroke-width: 2;" fill="none" stroke="#000000"></polyline> <text style="font-family: Arial,sans-serif; font-size: 12px;" class=" djs-label"> <tspan x="25.5" y="43.5">VesCollector</tspan> </text> </g>  <rect x="0" y="0" width="120" height="80" style="stroke-opacity: 0; stroke-width: 15;" fill="none" stroke="#ffffff" class="djs-hit"></rect> </g> </g>  <line fill="none" x1="105" x2="105" y1="1" y2="44"/> <line fill="none" x1="160" x2="221" y1="21" y2="21"/> <polygon fill="none" points=" 219 19 219 23 223 21"/> <polygon points=" 219 19 219 23 223 21" stroke="none"/>  <g class="djs-element djs-shape" data-element-id="tca"> <rect fill="none" class="djs-outline"  height="90" width="132" x="225"  y="1"/> <rect x="230" y="6" width="120" height="80" rx="0" ry="0" style="stroke-width: 2;" stroke="#000000" fill="#ffffff"></rect> <text font-family="sans-serif" stroke="none" x="228" xml:space="preserve" y="22"  >third_app</text> <line fill="none" x1="225" x2="290" y1="33" y2="33"/> <rect x="230" y="6" width="120" height="80"	style="stroke-opacity: 0; stroke-width: 15;" fill="none" stroke="#ffffff" class="djs-hit"></rect> </g>  <line fill="none" x1="290" x2="351" y1="21" y2="21"/> <polygon fill="none" points=" 349 19 349 23 353 21"/> <polygon points=" 349 19 349 23 353 21" stroke="none"/> <rect fill="none" height="43" id="first_app" width="65" x="355" y="1"/> <text font-family="sans-serif" stroke="none" x="360" xml:space="preserve" y="22" data-element-id="tca">first_app</text> <line fill="none" x1="355" x2="420" y1="33" y2="33"/> <line fill="none" x1="420" x2="481" y1="21" y2="21"/> <polygon fill="none" points=" 479 19 479 23 483 21"/> <polygon points=" 479 19 479 23 483 21" stroke="none"/> <rect fill="none" height="43" id="second_app" width="65" x="485" y="1"/> <text font-family="sans-serif" stroke="none" x="479" xml:space="preserve" y="22" data-element-id="tca">second_app</text> <line fill="none" x1="485" x2="550" y1="33" y2="33"/> <line fill="none" x1="550" x2="611" y1="21" y2="21"/> <polygon fill="none" points=" 609 19 609 23 613 21"/> <polygon points=" 609 19 609 23 613 21" stroke="none"/> <rect fill="none" height="43" id="policy" width="65" x="615" y="1"/> <text font-family="sans-serif" stroke="none" x="630" xml:space="preserve" y="22" data-element-id="policyc">Policy</text> <line fill="none" x1="615" x2="647" y1="22" y2="1"/> <line fill="none" x1="680" x2="741" y1="21" y2="21"/> <polygon fill="none" points=" 739 19 739 23 743 21"/> <polygon points=" 739 19 739 23 743 21" stroke="none"/> <circle cx="755" cy="21" fill="none" r="10" stroke-width="4"/> </g> </g> </svg>';
+	    		var svg = pars;
+			    if ($("#svgContainer").length > 0)
+				    $("#svgContainer").remove();
+			    $("#js-canvas").append(
+			    "<span id=\"svgContainer\">" + svg + "</span>");
+			    /* added code for height width viewBox */
+			    $("#svgContainer svg").removeAttr("height");
+			    $("#svgContainer svg").removeAttr('viewBox');
+			    $("#svgContainer svg").removeAttr('width');
+			    $("#svgContainer svg").attr('width', '100%');
+			    $("#svgContainer svg").attr('height', '100%');
+			    $("#svgContainer").click(
+			    function(event) {
+				    console.log("svgContainer:" + $("#svgContainer svg"));
+				    // console.log($(event.target).parent().html())
+				    // console.log($($(event.target).parent()).attr("data-element-id"))
+				    var name = $($(event.target).parent()).attr("data-element-id")
+				    lastElementSelected = $($(event.target).parent()).attr(
+				    "data-element-id")
+				    checkIfElementType(name)
+			    });
+			}, function(data) {
+			});
 	    }
 	    enableDisableMenuOptions = function() {
-	    	//var status = getStatus();
-	    	var status = "DESIGN";
-		    // dropdown options - always true
-	    	enableDefaultMenu();
-		    // enable/disable menu options based on permittedActionCd
-		    // list
-	    	enableActionMenu(status);
+		    enableDefaultMenu();
+		    //var status = getStatus();
+	    	//enableActionMenu(status);
+	    	enableAllActionMenu();
 	    }
+	    getModelImage = function(modelName) {
+		    var def = $q.defer();
+		    var sets = [];
+		    var svcUrl = "/restservices/clds/v2/loop/svgRepresentation/" + modelName;
+		    $http.get(svcUrl).success(function(data) {
+			    def.resolve(data);
+		    }).error(function(data) {
+			    def.reject("Not able to get the model image");
+		    });
+		    return def.promise;
+	    };
     } ]);
diff --git a/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
index 825dd57d0..a1625a936 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
@@ -52,11 +52,9 @@ function($scope, $rootScope, $modalInstance, $window, $uibModalInstance, cldsMod
 	$scope.paramsRetry = function() {
 		// $("#paramsWarn").hide();
 		$("#ridinSpinners").css("display", "")
-		loadSharedPropertyByService(currentValue, true, callBack);
 		$("#ridinSpinners").css("display", "none")
 	};
 	$scope.paramsCancel = function() {
-		loadSharedPropertyByServiceProperties(callBack);
 		$("#paramsWarnrefresh").hide();
 	};
 	function completeClose() {
@@ -145,7 +143,7 @@ function($scope, $rootScope, $modalInstance, $window, $uibModalInstance, cldsMod
 		cldsModelService.getModel(modelName).then(function(pars) {
 			// deserialize model properties
 			selected_model = modelName;
-			cldsModelService.processActionResponse(modelName, pars);
+			cldsModelService.processActionResponse(modelName);
 			// set model bpmn and open diagram
 			$rootScope.isPalette = true;
 		}, function(data) {
diff --git a/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
index ffe17371c..2ac959b45 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
@@ -32,8 +32,6 @@ function($scope, $rootScope, $uibModalInstance, cldsModelService, $location,
          dialogs, cldsTemplateService) {
 	$scope.$watch('name', function(newValue, oldValue) {
 
-		setASDCFields()
-
 		var el = getGlobalProperty();
 		if (el !== undefined) {
 			for (var i = 0; i < el.length; i++) {
diff --git a/src/main/resources/META-INF/resources/designer/scripts/ToscaModelCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/ToscaModelCtrl.js
index c4f02acfe..09a1d0caa 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/ToscaModelCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/ToscaModelCtrl.js
@@ -30,6 +30,10 @@ app.controller('ToscaModelCtrl',
 	        		$('#editor').empty();
 
 		    		var toscaModel = getMsUI(selectedPolicy);
+		    		if (toscaModel == null) {
+		    			$modalInstance.close('closed');
+		    			return;
+		    		}
 		    		var editorData = getMsProperty(selectedPolicy);
 
 	  	        	JSONEditor.defaults.options.theme = 'bootstrap3';
diff --git a/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js b/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
index 6b5234805..347d74720 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
@@ -71,44 +71,6 @@ function setMultiSelect() {
   });
 }
 
-
-
-function setASDCFields() {
-    try {
-      var location_values = defaults_props['global']['location'];
-      if (location_values) {
-        for (key in location_values) {
-          if ($("#location").length > 0) {
-            $("#location").append("<option value=\"" + key + "\">" + location_values[key] + "</opton>")
-          }
-        }
-        $("#location").multiselect("rebuild");
-      }
-
-      var actionSet_values = defaults_props['global']['actionSet'];
-      if (actionSet_values) {
-        for (key in actionSet_values) {
-          if ($("#actionSet").length > 0) {
-            $("#actionSet").append("<option value=\"" + key + "\">" + actionSet_values[key] + "</opton>")
-          }
-        }
-        $("#actionSet").multiselect("rebuild");
-      }
-      if ($("#location").length > 0 && !location_values) {
-        showWarn();
-      }
-
-      function showWarn() {
-        $("#paramsWarn").show();
-        $('#servName').text($("#service option:selected").text());
-      }
-    } catch (e) {
-      console.log(e)
-    }
- 
-}
-
-
 function setPolicyOptions() {
 console.log("reset policy default options");
     try {
diff --git a/src/main/resources/META-INF/resources/designer/scripts/app.js b/src/main/resources/META-INF/resources/designer/scripts/app.js
index 1794cb769..9ae2697e6 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/app.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/app.js
@@ -232,7 +232,7 @@ function($scope, $rootScope, $timeout, dialogs) {
 	    });
 	    $scope.emptyMenuClick = function(value, name) {
 
-		    if ($rootScope.isNewClosed && name != "Save CL"
+		    if ($rootScope.isNewClosed
 		    && name != "Close Model" && name != "Properties CL") {
 			    saveConfirmationNotificationPopUp();
 		    } else {
@@ -243,9 +243,6 @@ function($scope, $rootScope, $timeout, dialogs) {
 			    $scope.saveConfirmationNotificationPopUp(function(data) {
 
 				    if (data) {
-					    if ($rootScope.isNewClosed) {
-						    isSaveCheck("Save CL");
-					    }
 					    $rootScope.isNewClosed = false;
 				    } else {
 					    return false;
@@ -266,9 +263,6 @@ function($scope, $rootScope, $timeout, dialogs) {
 				    $scope.cldsClose();
 			    } else if (name == "Open CL") {
 				    $scope.cldsOpenModel();
-			    } else if (name == "Save CL") {
-				    $rootScope.isNewClosed = false;
-				    $scope.cldsPerformAction("SAVE");
 			    } else if (name == "Submit") {
 				    $scope.cldsConfirmPerformAction("SUBMIT");
 			    } else if (name == "Update") {
@@ -302,9 +296,6 @@ function($scope, $rootScope, $timeout, dialogs) {
 	            link : "/cldsOpenModel",
 	            name : "Open CL"
 	        }, {
-	            link : "/cldsSaveModel",
-	            name : "Save CL"
-	        }, {
 	            link : "/cldsOpenModelProperties",
 	            name : "Properties CL"
 	        }, {
diff --git a/src/main/resources/META-INF/resources/designer/scripts/propertyController.js b/src/main/resources/META-INF/resources/designer/scripts/propertyController.js
index a637734a2..d47956507 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/propertyController.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/propertyController.js
@@ -21,19 +21,66 @@
  * 
  */
  function saveMsProperties(type, form) {
-    for (p in cl_props["microServicePolicies"]) {
-        if (cl_props["microServicePolicies"][p]["name"] == type) {
-        	cl_props["microServicePolicies"][p]["properties"] = form;
+	 var newMsProperties = cl_props["microServicePolicies"];
+	 
+    for (p in newMsProperties) {
+        if (newMsProperties[p]["name"] == type) {
+        	newMsProperties[p]["properties"] = form;
         }
     }
+
+	 var def = $q.defer();
+	 var sets = [];
+	 var svcUrl = "/restservices/clds/v2/loop/updateMicroservicePolicies/" + modelName;
+	 var svcRequest = {
+			 loopName : modelName,
+			 newMicroservicePolicies : newMsProperties
+	 };
+	 $http.post(svcUrl, svcRequest).success(function(data) {
+		 def.resolve(data);
+	 }).error(function(data) {
+		 def.reject("Save Model not successful");
+		 return def.promise;
+    };
+    cl_props["microServicePolicies"] = newMsProperties;
 }
 
 function saveGlobalProperties(form) {
+	 var def = $q.defer();
+	 var sets = [];
+	 var svcUrl = "/restservices/clds/v2/loop/globalProperties/" + modelName;
+	 var svcRequest = {
+			 loopName : modelName,
+			 newGlobalPolicies : form
+	 };
+	 $http.post(svcUrl, svcRequest).success(function(data) {
+		 def.resolve(data);
+	 }).error(function(data) {
+		 def.reject("Save Model not successful");
+		 return def.promise;
+    };
     cl_props["globalPropertiesJson"] = form;
 }
 
 function saveOpPolicyProperties(form) {
-        cl_props["operationalPolicies"]["0"]["configurationsJson"] = form;
+	var newOpProperties = cl_props["operationalPolicies"];
+	newOpProperties["0"]["configurationsJson"]= form;
+	
+	var def = $q.defer();
+	 var sets = [];
+	 var svcUrl = "/restservices/clds/v2/loop/updateOperationalPolicies/" + modelName;
+	 var svcRequest = {
+			 loopName : modelName,
+			 newGlobalPolicies : newOpProperties
+	 };
+	 $http.post(svcUrl, svcRequest).success(function(data) {
+		 def.resolve(data);
+	 }).error(function(data) {
+		 def.reject("Save Model not successful");
+		 return def.promise;
+   };
+	
+        cl_props["operationalPolicies"] = newOpProperties;
 }
 
 function getOperationalPolicyProperty() {
@@ -64,10 +111,6 @@ function getMsUI(type) {
     return null;
 }
 
-function loadSharedPropertyByService(onChangeUUID, refresh, callBack) {
-      setASDCFields()
-}
-
 function getStatus() {
     return cl_props["lastComputedState"];
 }