Rework UI

Rework Clamp UI to cooperate with the internal data model changes.

Issue-ID: CLAMP-310
Change-Id: Ic3fdbdf5e405b57ef1537672a1d4528325b68a74
Signed-off-by: xg353y <xg353y@intl.att.com>

14 files changed, 196 insertions, 300 deletions

diff --git a/src/main/resources/META-INF/resources/designer/index.html b/src/main/resources/META-INF/resources/designer/index.html
index 5d1e5304..0d87e269 100644
--- a/src/main/resources/META-INF/resources/designer/index.html
+++ b/src/main/resources/META-INF/resources/designer/index.html
@@ -180,6 +180,6 @@
 
     <!--    dialog box ctl end -->
     <script src="scripts/aOnBoot.js"></script>
- 	 
+    <script src="scripts/propertyController.js"></script>
  	 
 </body>
diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html
index 182dab8d..0da01535 100644
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html
@@ -372,7 +372,6 @@ label {
 			var num = add_one_more();
 			setMultiSelect();
 		});
-		loadPropertyWindow("policy")
 		
 		// by default, parentPolicyConditions is disabled
 		//$("#parentPolicyConditions").prop('disabled', 'disabled');
@@ -383,7 +382,7 @@ label {
 		var allPolIds=[];
 		
 		//Grab saved values for dropdowns
-		var obj = elementMap[lastElementSelected];
+		var obj = getOperationalPolicyProperty();
 		var loadPolicy;
 		console.log("lastElementSelected :"+ lastElementSelected);
 		if (!($.isEmptyObject(obj))){
@@ -425,6 +424,7 @@ label {
 					console.log("number is=:" + num);
 					loadingId=false;
 					for (var j = 0; j < el[i].length; j++) {
+						console.log("attr:" + el[i][j].name + "; value is:" + el[i][j].value);
 						if(el[i][j].hasOwnProperty("name")){
 							$("#formId" + num + " #" + el[i][j].name).val(
 									el[i][j].value);
@@ -563,11 +563,13 @@ label {
 				console.log("save properties; add tableVal to policies: "+ tableVal);
 			});
 
-			saveProperties(finalSaveList);
+			saveOpPolicyProperties(finalSaveList);
 			$("#close_button").click();
 		})		
 
 		function add_one_more() {
+			console.log("add one more");
+			setPolicyOptions();
 			$("#nav_Tabs li").removeClass("active");
 			
 			//FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
@@ -767,9 +769,10 @@ label {
 		}
 
 		function startNextItem() {
-			console.log("start next Item");
+			console.log("start next Item, policyname is:" + $("#pname").val());
 			//save last item before transitioning
 			var lastItem = $("#policyTable .highlight");
+			console.log("start next Item, lastitem is:" + lastItem);
 			if (lastItem.length > 0) {
 				console.log("start next Item length > 0");
 				saveLastPolicyLocally($("#pname").val());
@@ -777,22 +780,20 @@ label {
 				lastItem.find("td").html($("#pname").val());
 			}
 		}
-		
+
 		function add_new_policy(issueNewNames) {	
+			console.log("add new policy");
 			//remove old gui forms
 			for (var i=1; i<($(".formId").length + 1); i++){
 				$("#go_properties_tab"+i).parent().remove();
 			}
 			$(".formId").remove();
-			
-			//Reset headers
-			//$("#pname").val("0");
 			$("#pname").val("New_Policy");
-			$("#timeout").val(defaults_props.policy.timeout);
-			
+			$("#timeout").val(getOperationalPolicyProperty().timeout);
+
 			$("#add_one_more").click();
 		}
-		
+		console.log("start next Item on 796");
 		startNextItem();
 
 		if (("#policyTable .highlight").length > 0){
@@ -804,7 +805,6 @@ label {
 
 		setASDCFields();
 		initTargetResourceId();
-		
 		//load metrics dropdown
 		if (elementMap["global"]) {
 			for (var i = 0; i < (elementMap["global"].length); i++){
diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/Template_model.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/Template_model.html
deleted file mode 100644
index 0ca4e7ca..00000000
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/Template_model.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
-  ============LICENSE_START=======================================================
-  ONAP CLAMP
-  ================================================================================
-  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 attribute-test="templatemodel" id="configure-widgets"  >
-    <div attribute-test="templatemodelh" class="modal-header">
-        <button type="button" class="close" ng-click="close(false)" aria-hidden="true" style="margin-top: -3px">&times;</button>
-        <h4>'Template'</h4>
-    </div>
-    <div class="modal-body" style="height: 280px">
-        <div style="height: 10px">
-        </div>
-        <form id="saveProps" name="t" class="form-horizontal">
-
-            <div>
-                <div class="form-group">
-                    <label for="schemaLocation" class="col-sm-4 control-label">ID</label>
-
-                    <div class="col-sm-8">
-                        <input class="form-control" type="text" focus="true" name="_id"  id="_id" readonly>
-                           <div hidden id="warnings_">Special Characters are not allowed in template id.</span> <!-- <span ng-show="nameinUse" style="color: red"> Model Name Already In Use</span> --></div>
-                        </input>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div>
-    <div attribute-test="templatemodelf" class="modal-footer">
-        <button  id="savePropsBtn" class="btn btn-primary" ng-disabled="t._id.$error.pattern" >Close</button>
-        <button ng-click="close(true)" id="close_button" class="btn btn-primary">Cancel</button>
-
-    </div>
-    <script>
-    loadPropertyWindow("template");
-    var el=elementMap[lastElementSelected];
-    //console.log(el)
-    //console.log(lastElementSelected)
-    //$("#id").val("lolololol")
-   // $('.modal-header > h4').html($('.djs-visual > text').val());
-    if(el!==undefined){
-    	
-        for(var i=0;i<el.length;i++){   
-        	console.log(el.length)
-        	console.log(el[i].name)
-        	console.log(el[i].value)
-            $("#"+el[i].name).val(el[i].value);
-        }
-    }
-     $("#_id").keyup(function(){
-        var pattern=/^\s*[\w\-]*\s*$/
-        if( !pattern.test($(this).val()) && !$(this).is("[disabled]")){
-            $("#savePropsBtn").attr("disabled","");
-            $("#warnings_").removeAttr("hidden")
-            console.log("remove hidden")
-        }
-        else{
-            //console.log($(this).is("[disabled]"))
-            console.log("add hidden ")
-            if($("#savePropsBtn").is("[disabled]")){
-                $("#savePropsBtn").removeAttr("disabled");
-                 $("#warnings_").attr("hidden", "");
-            console.log("add hidden if")
-            }
-           
-        }
-    })
-    
-    $("#saveProps").on('submit', function (event) {
-    	//console.log(lastElementSelected)
-        saveProperties($(this).serializeArray())
-        event.preventDefault();
-        $("#close_button").click();
-    })
-    
-    $("#savePropsBtn").click(function (event) {
-        $("#saveProps").submit();
-    })
-</script>
-</div>
-
-
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 c47e90a4..febdb6b6 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
@@ -107,12 +107,13 @@
 
         function propChangeAlert(actionset) {
 	        //throw warnings only if options were previously chosen
-	        if (elementMap["global"]) {
-		        loop1: for (var i = 0; i < elementMap["global"].length; i++) {
-			        if (elementMap["global"][i]["name"] == actionset.id) {
+	        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 (elementMap["global"][i]["value"][0] == actionset.value) {
-					        if (elementMap["global"][i]["name"] == "actionSet") {
+				        if (globalProp[i]["value"][0] == actionset.value) {
+					        if (globalProp[i]["name"] == "actionSet") {
 						        asDiff = false;
 					        }
 					        if (!asDiff) {
@@ -121,7 +122,7 @@
 					        ;
 					        //user changed properties
 				        } else {
-					        if (elementMap["global"][i]["name"] == "actionSet") {
+					        if (globalProp[i]["name"] == "actionSet") {
 						        asDiff = true;
 					        };
 					        $(".propChangeWarn").show();
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 b053b24e..ca627b35 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
@@ -48,18 +48,7 @@
 					href="javascript:void(0)" class="btn-link" id='paramsRetry'>Retry
 				</a> / <a href="javascript:void(0)" class="btn-link" id='paramsCancel'>Cancel</a>
 			</div>
-			<div class="form-group clearfix" data-ng-if="policytypes">
-				<label for="policytypes" class="col-sm-4 control-label">
-					Policy Types<span id="locationErr"
-					style="display: none; color: red;">&nbsp;*Required*</span>
-				</label>
 
-				<div class="col-sm-8">
-					 <select class="form-control" id="policytype" data-ng-change = "jsonByPolicyType(selectedHPPolicy, '{{selectedHPPolicy}}', '')" data-ng-model ="$parent.selectedHPPolicy">
-					 	<option data-ng-repeat="pt in policytypes" value="{{pt}}">{{pt}}</option>
-					 </select>
-				</div>
-			</div>
 		</form>
 		<div class="alert alert-warning propChangeWarn" style="display: none;">
 			<strong>Warning!</strong> Property changes will reset all associated
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 62ab5ab2..cdbca2fe 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/CldsModelService.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/CldsModelService.js
@@ -102,12 +102,12 @@ app
 		    return def.promise;
 	    };
 	    this.getModel = function(modelName) {
-
 		    var def = $q.defer();
 		    var sets = [];
 		    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);
 			    def.resolve(data);
 		    }).error(function(data) {
 
@@ -216,12 +216,9 @@ app
 		    var controlNamePrefix = pars.controlNamePrefix;
 		    var controlNameUuid = pars.controlNameUuid;
 		    deploymentId = pars.deploymentId;
-		    var modelEventService = pars.modelEventService;
 		    typeID = pars.typeId;
 		    var headerText = "Closed Loop Modeler - " + modelName;
 		    if (controlNameUuid != null) {
-			    var actionCd = pars.event.actionCd;
-			    var actionStateCd = pars.event.actionStateCd;
 			    headerText = headerText + " [" + controlNamePrefix
 			    + controlNameUuid + "]";
 		    }
@@ -241,11 +238,10 @@ app
 		    deploymentId = newPars.deploymentId;
 		    setStatus(newPars);
 		    this.enableDisableMenuOptions(newPars);
-		    elementMap = JSON.parse(newPars.propText);
 	    }
-	    function setStatus(pars) {
+	    function setStatus() {
 
-		    var status = pars.status;
+		    var status = getStatus();
 		    // apply color to status
 		    var statusColor = 'white';
 		    if (status.trim() === "DESIGN") {
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 111bb246..825dd57d 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
@@ -143,26 +143,7 @@ function($scope, $rootScope, $modalInstance, $window, $uibModalInstance, cldsMod
 		utmModels.type = 'Model';
 		$rootScope.utmModels = utmModels;
 		cldsModelService.getModel(modelName).then(function(pars) {
-			// process data returned
-			var propText = pars.propText;
-			var status = pars.status;
-			controlNamePrefix = pars.controlNamePrefix;
-			var authorizedToUp = pars.userAuthorizedToUpdate;
-			typeID = pars.typeId;
-			controlNameUuid = pars.controlNameUuid;
-			selected_template = pars.templateName;
-			modelEventService = pars.event;
-			actionStateCd = pars.event.actionStateCd;
-			deploymentId = pars.deploymentId;
-			if (readMOnly) {
-				pars.permittedActionCd = [ "" ];
-			}
-
 			// deserialize model properties
-			if (propText == null) {
-			} else {
-				elementMap = JSON.parse(propText);
-			}
 			selected_model = modelName;
 			cldsModelService.processActionResponse(modelName, pars);
 			// set model bpmn and open diagram
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 2916f396..ffe17371 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
@@ -34,7 +34,7 @@ function($scope, $rootScope, $uibModalInstance, cldsModelService, $location,
 
 		setASDCFields()
 
-		var el = elementMap["global"];
+		var el = getGlobalProperty();
 		if (el !== undefined) {
 			for (var i = 0; i < el.length; i++) {
 				if (el[i].name === 'deployParameters')
@@ -66,16 +66,7 @@ function($scope, $rootScope, $uibModalInstance, cldsModelService, $location,
 		console.log("close");
 		$uibModalInstance.close("closed");
 	};
-    $scope.convertDeployParametersJsonToString = function() {
-        var index = elementMap["global"].findIndex(function(e) {
-	        return (typeof e == "object" && !(e instanceof Array))
-	        && "deployParameters" == e["name"];
-        });
-        if (index != -1) {
-	        $('#deployParameters').val(JSON.stringify(elementMap["global"][index].value));
-        }
-    }
-    
+
     function noRepeats(form) {
         var select = {};
         for (var i = 0; i < form.length; i++) {
diff --git a/src/main/resources/META-INF/resources/designer/scripts/ImportSchemaCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/ImportSchemaCtrl.js
index 2fa401b3..7fb0f446 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/ImportSchemaCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/ImportSchemaCtrl.js
@@ -47,9 +47,8 @@ function($scope, $rootScope, $uibModalInstance, data, svnservice, fileUpload,
 	$rootScope.updateServiceInputPartInfo;
 	$rootScope.updateSchemElemant1;
 	// Below code is added to get the policyNames
-	for ( var polElement in elementMap) {
-		if (polElement.indexOf('Policy_') === 0) {
-			var obj = elementMap[polElement];
+	var policies = getOperationalPolicyProperty();
+	for ( var obj in policies) {
 			if (!($.isEmptyObject(obj))) {
 				allPolicies = jQuery.extend({}, obj);
 				$scope.policyNames = [];
@@ -57,8 +56,6 @@ function($scope, $rootScope, $uibModalInstance, data, svnservice, fileUpload,
 					$scope.policyNames.push(policy);
 				}
 			}
-			break;
-		}
 	}
 	setTimeout(function() {
 		console.log("setTimeout");
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 f78ad1e6..c4f02acf 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/ToscaModelCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/ToscaModelCtrl.js
@@ -24,15 +24,13 @@ app.controller('ToscaModelCtrl',
     ['$scope', '$rootScope', '$modalInstance', '$location', 'dialogs', 'toscaModelService',
     function($scope, $rootScope, $modalInstance, $location, dialogs, toscaModelService) {
 
-        $scope.jsonByPolicyType = function(selectedPolicy, oldSelectedPolicy, editorData){
+        $scope.jsonByPolicyType = function(selectedPolicy, oldSelectedPolicy){
         	if (selectedPolicy && selectedPolicy != '') {
-	        	toscaModelService.getHpModelJsonByPolicyType(selectedPolicy).then(function(response) {
+
 	        		$('#editor').empty();
 
-		    		var toscaModel = JSON.parse(response.toscaModelJson);
-		    		if($scope.policyList && toscaModel.schema.properties && toscaModel.schema.properties.policyList){
-		    			toscaModel.schema.properties.policyList.enum = $scope.policyList;
-		    		}
+		    		var toscaModel = getMsUI(selectedPolicy);
+		    		var editorData = getMsProperty(selectedPolicy);
 
 	  	        	JSONEditor.defaults.options.theme = 'bootstrap3';
 		    		JSONEditor.defaults.options.iconlib = 'bootstrap2';
@@ -51,22 +49,20 @@ app.controller('ToscaModelCtrl',
 
 		    		});
 		    		$('#form1').show();
-	        	});
+
         	} else {
 				$('#editor').empty();
 				$('#form1').hide();
 			}
         }
 
-        if($rootScope.selectedBoxName) {
-        	var policyType = $rootScope.selectedBoxName.split('_')[0].toLowerCase();
-	    	$scope.toscaModelName = policyType.toUpperCase() + " Microservice";
-	    	if(elementMap[lastElementSelected]) {
-	    		$scope.jsonByPolicyType(policyType, '', elementMap[lastElementSelected][policyType]);
-	    	}else{
-	    		$scope.jsonByPolicyType(policyType, '', '');
-	    	}
-	    }
+    	$scope.$watch('name', function() {
+            if($rootScope.selectedBoxName) {
+            	var policyType = $rootScope.selectedBoxName.split('_')[0].toLowerCase();
+    	    	$scope.toscaModelName = policyType.toUpperCase() + " Microservice";
+    	    	$scope.jsonByPolicyType(policyType, '', '');
+            }
+    	});
 
         $scope.getEditorData = function(){
         	if(!$scope.editor){
@@ -90,8 +86,7 @@ app.controller('ToscaModelCtrl',
         	var data = $scope.getEditorData();
 
             if(data !== null) {
-            	data = {[policyType]: data};
-        		saveProperties(data);
+            	saveMsProperties(policyType,data);
         		if($scope.editor) { $scope.editor.destroy(); $scope.editor = null; }
         		$modalInstance.close('closed');
         	}
@@ -109,7 +104,6 @@ app.controller('ToscaModelCtrl',
         };
 
         $scope.close = function(){
-        	angular.copy(elementMap[lastElementSelected], $scope.hpPolicyList);
 			$modalInstance.close('closed');
 			if($scope.editor) { $scope.editor.destroy(); $scope.editor = null; }
         }
diff --git a/src/main/resources/META-INF/resources/designer/scripts/ToscaModelService.js b/src/main/resources/META-INF/resources/designer/scripts/ToscaModelService.js
index c99a4556..261a69c6 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/ToscaModelService.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/ToscaModelService.js
@@ -35,4 +35,11 @@ app.service('toscaModelService', ['alertService','$http', '$q', '$rootScope', fu
 			return response.data;
 		});
 	};
+	this.getMsProperties = function(policyType) {
+		setTimeout(function(){ alert("Hello"); }, 3000);
+		return getMsUI(policyType);
+	};
+	
+	
+	
  }]);
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 2da505cf..6b523480 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
@@ -37,76 +37,6 @@ function newElementProcessor(id) {
   }
 }
 
-function saveProperties(form) {
-  elementMap[lastElementSelected] = form;
-  totalJsonProperties = JSON.stringify(elementMap);
-
-  //Take off the red border because the element has been edited
-  if ($('g[data-element-id="' + lastElementSelected + '"]').length > 0) {
-    var _idNode = $('g[data-element-id="' + lastElementSelected + '"]')
-    _idNode.children("rect").each(function() {
-      if ($(this).attr('class') === 'djs-outline-no-property-saved') {
-        $(this).attr('class', "djs-outline")
-        $(this).attr('fill', 'none')
-      }
-    });
-  }
-}
-
-function saveGlobalProperties(form) {
-  elementMap["global"] = form;
-}
-var isObject = function(a) {
-  return (!!a) && (a.constructor === Object);
-};
-
-function loadPropertyWindow(type) {
-  if (readMOnly) {
-    if ($("#add_one_more").length == 1) {
-      $("#add_one_more").off();
-      $("#add_one_more").click(function(event) {
-        event.preventDefault();
-      })
-    }
-    $("input,#savePropsBtn").attr("disabled", "");
-    $(".modal-body button").attr("disabled", "");
-    ($("select:not([multiple])")).multiselect("disable");
-  }
-
-  var props = defaults_props[type];
-
-  for (p in props) {
-    if (isObject(props[p])) {
-      var mySelect = $('#' + p);
-      if (p == "operator") {
-        $.each(props[p], function(val, text) {
-          mySelect.append(
-            $('<option></option>').val(val).html(val)
-          );
-        });
-      } else {
-        $.each(props[p], function(val, text) {
-          mySelect.append(
-            $('<option></option>').val(val).html(text)
-          );
-        });
-      }
-    } else {
-      if (p == "pname") {
-        var ms = new Date().getTime();
-        props[p] = "Policy" + ms;
-      }
-      $("#" + p).val(props[p])
-    }
-  }
-  setTimeout(function() {
-    setMultiSelect(type);
-  }, 100);
-
-
-
-}
-
 function setMultiSelect() {
   $("select").each(function(index, mySelect) {
 
@@ -141,32 +71,7 @@ function setMultiSelect() {
   });
 }
 
-function loadSharedPropertyByService(onChangeUUID, refresh, callBack) {
-      setASDCFields()
-}
-
-function loadSharedPropertyByServiceProperties(callBack) {
-  $.ajax({
-    async: false,
-    dataType: "json",
-    url: '/restservices/clds/v1/clds/properties/',
-    success: function(data) {
 
-      setASDCFields();
-      if (callBack && _.isFunction(callBack)) {
-        callBack(true);
-      }
-    },
-    error: function(s, a, err) {
-      $('#servName').text($("#service option:selected").text());
-      if (callBack && _.isFunction(callBack)) {
-        callBack(false);
-      }
-    },
-    timeout: 100000
-
-  });
-}
 
 function setASDCFields() {
     try {
@@ -203,6 +108,58 @@ function setASDCFields() {
  
 }
 
+
+function setPolicyOptions() {
+console.log("reset policy default options");
+    try {
+      var actor_values = defaults_props['policy']['actor'];
+      if (actor_values) {
+        for (key in actor_values) {
+          if ($("#actor").length > 0) {
+            $("#actor").append("<option value=\"" + key + "\">" + actor_values[key] + "</opton>")
+          }
+        }
+        $("#actor").multiselect("rebuild");
+      }
+
+      var recipe_values = defaults_props['policy']['vnfRecipe'];
+      if (recipe_values) {
+        for (key in recipe_values) {
+          if ($("#recipe").length > 0) {
+            $("#recipe").append("<option value=\"" + key + "\">" + recipe_values[key] + "</opton>")
+          }
+        }
+        $("#recipe").multiselect("rebuild");
+      }
+      var parentPolicyConditions_values = defaults_props['policy']['parentPolicyConditions'];
+      if (parentPolicyConditions_values) {
+        for (key in parentPolicyConditions_values) {
+          if ($("#parentPolicyConditions").length > 0) {
+            $("#parentPolicyConditions").append("<option value=\"" + key + "\">" + parentPolicyConditions_values[key] + "</opton>")
+          }
+        }
+        $("#parentPolicyConditions").multiselect("rebuild");
+      }
+      var timeUnitsGuard_values = defaults_props['policy']['timeUnitsGuard'];
+      if (timeUnitsGuard_values) {
+        for (key in timeUnitsGuard_values) {
+          if ($("#timeUnitsGuard").length > 0) {
+            $("#timeUnitsGuard").append("<option value=\"" + key + "\">" + timeUnitsGuard_values[key] + "</opton>")
+          }
+        }
+        $("#timeUnitsGuard").multiselect("rebuild");
+      }
+      function showWarn() {
+        $("#paramsWarn").show();
+        $('#servName').text($("#service option:selected").text());
+      }
+    } catch (e) {
+      console.log(e)
+    }
+ 
+}
+
+
 //Typically used when opening a new model/template
 function reloadDefaultVariables(isTemp) {
   isTemplate = isTemp;
@@ -210,17 +167,18 @@ function reloadDefaultVariables(isTemp) {
 }
 
 $(window).on('load',function() {
-  $.ajax({
-    dataType: "json",
-    url: '/restservices/clds/v1/clds/properties',
-    success: function(data) {
-      defaults_props = JSON.parse(data);
-    },
-    error: function(s, a, err) {
-      console.log(err)
-      console.log(s)
-      console.log(a)
-    },
-    timeout: 100000
-  });
+	  $.ajax({
+	    dataType: "json",
+	    url: '/restservices/clds/v1/clds/properties',
+	    success: function(data) {
+	      defaults_props = JSON.parse(data);
+	    },
+	    error: function(s, a, err) {
+	      console.log(err)
+	      console.log(s)
+	      console.log(a)
+	    },
+	    timeout: 100000
+	  });
 })
+
diff --git a/src/main/resources/META-INF/resources/designer/scripts/common_variables.js b/src/main/resources/META-INF/resources/designer/scripts/common_variables.js
index 02092d3f..826e1870 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/common_variables.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/common_variables.js
@@ -44,6 +44,7 @@ var isModelfrmClick = false;
 var autoSaveRevision =-1;
 var commandStackList = [];
 
+var cl_props=null
 var defaults_props=null
 var elementMap={}
 var lastElementSelected=null
diff --git a/src/main/resources/META-INF/resources/designer/scripts/propertyController.js b/src/main/resources/META-INF/resources/designer/scripts/propertyController.js
new file mode 100644
index 00000000..a637734a
--- /dev/null
+++ b/src/main/resources/META-INF/resources/designer/scripts/propertyController.js
@@ -0,0 +1,81 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 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============================================
+ * ===================================================================
+ * 
+ */
+ function saveMsProperties(type, form) {
+    for (p in cl_props["microServicePolicies"]) {
+        if (cl_props["microServicePolicies"][p]["name"] == type) {
+        	cl_props["microServicePolicies"][p]["properties"] = form;
+        }
+    }
+}
+
+function saveGlobalProperties(form) {
+    cl_props["globalPropertiesJson"] = form;
+}
+
+function saveOpPolicyProperties(form) {
+        cl_props["operationalPolicies"]["0"]["configurationsJson"] = form;
+}
+
+function getOperationalPolicyProperty() {
+    return cl_props["operationalPolicies"]["0"]["configurationsJson"];
+}
+
+function getGlobalProperty() {
+    return cl_props["globalPropertiesJson"];
+}
+
+function getMsProperty(type) {
+    var msProperties = cl_props["microServicePolicies"];
+    for (p in msProperties) {
+        if (msProperties[p]["name"] == type) {
+           return msProperties[p]["properties"];
+        }
+    }
+    return null;
+}
+
+function getMsUI(type) {
+    var msProperties = cl_props["microServicePolicies"];
+    for (p in msProperties) {
+        if (msProperties[p]["name"] == type) {
+           return msProperties[p]["jsonRepresentation"];
+        }
+    }
+    return null;
+}
+
+function loadSharedPropertyByService(onChangeUUID, refresh, callBack) {
+      setASDCFields()
+}
+
+function getStatus() {
+    return cl_props["lastComputedState"];
+}
+
+function getDeploymentID() {
+    return cl_props["dcaeDeploymentId"];
+}
+
+function getDeploymentStatusURL() {
+    return cl_props["dcaeDeploymentStatusUrl"];
+}