From 8d36cfd7ccec9ea9a55894eeafba00da6037747d Mon Sep 17 00:00:00 2001
From: sebdet <sebastien.determe@intl.att.com>
Date: Tue, 26 Mar 2019 10:31:13 +0100
Subject: [PATCH] Draft operational policy rework

Operational policy Ui rework, removal of useless code and new json
format output sent to backend

Issue-ID: CLAMP-330
Change-Id: I2261f6bdcdb6b9864dddba26f5f7ec6c684ff018
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
---
 .../portfolios/operational_policy_window.html      | 410 +++++++++++-------
 .../designer/scripts/CldsOpenModelCtrl.js          |   3 +-
 .../designer/scripts/GlobalPropertiesCtrl.js       |   1 -
 .../designer/scripts/OperationalPolicyCtrl.js      | 482 +++++----------------
 .../META-INF/resources/designer/scripts/aOnBoot.js | 102 -----
 .../resources/designer/scripts/common_variables.js |   1 -
 6 files changed, 363 insertions(+), 636 deletions(-)

diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
index 320b86fe..cf9382bf 100644
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
@@ -100,39 +100,31 @@ label {
 
 	<div class="modal-body">
 		<div attribute-test="policywindowpropertiesb" class="modal-body row">
-			<div class="leftPolicyPanel" style="display: none;">
-				<div class="panel panel-default">
-					<div id="policyTableHolder">
-						<table id="policyTable"></table>
-					</div>
-				</div>
 
-				<div id="spaceError" class="idError">Error: Spaces are not
-					allowed in the ID.</div>
-			</div>
 			<div class="panel panel-default col-sm-9 policyPanel">
-				<form id="Timeoutform" class="form-horizontal">
+				<form id="operationalPolicyHeaderForm" class="form-horizontal">
 					<div>
 						<div class="form-group clearfix row">
-							<label class="col-sm-2">Name</label>
+							<label class="col-sm-2">Parent policy</label>
 							<div class="col-sm-3" style="padding: 0px;">
-								<input type="text" id="pname" name="pname" maxlength="48"
-									placeholder="Enter Unique Name" class="form-control">
-							</div>
-
-							<label class="col-sm-1">ID</label>
-							<div class="col-sm-1" style="padding: 0px;">
-								<input onkeydown="return false;" type="text" id="pid" name="pid"
-									class="form-control" readonly>
+								<select type="text" id="trigger_policy" name="trigger_policy"
+									class="form-control" ng-model="null_dump"
+									ng-init="initPolicySelect()"
+									ng-options="policy for policy in policy_ids track by policy"></select>
 							</div>
 
-							<label for="userID" class="col-sm-3"
+							<label for="timeout" class="col-sm-3"
 								style="padding-left: 5px; padding-right: 10px;">Overall
 								Time Limit</label>
 							<div class="col-sm-2" style="padding-left: 0px;">
-								<input type="text" maxlength="10"
-									ng-keypress="isNumberKey(event)" class="form-control"
-									id="timeout" name="timeout">
+								<input type="text" ng-pattern="/^[0-9]*$/" ng-model="number"
+									class="form-control" id="timeout" name="timeout">
+							</div>
+
+							<label for="abatement" class="col-sm-2">Abatement</label>
+							<div class="col-sm-3" style="padding: 0px;">
+								<input type="checkbox" id="abatement" name="abatement"
+									checked="true" class="form-control">
 							</div>
 						</div>
 					</div>
@@ -151,161 +143,253 @@ label {
 			</div>
 
 			<span id="formSpan" style="display: none">
-				<form class="saveProps" class="form-horizontal">
-					<div>
-						<div class="form-group clearfix">
-							<label class="col-sm-4 control-label" for="recipe">Recipe</label>
-							<div class="col-sm-8">
-								<select class="form-control" name="recipe" id="recipe"
-									enableFilter="true"></select>
-							</div>
+				<form class="policyProperties" class="form-horizontal"
+					style="border: 2px dotted gray;"
+					title="Operational Policy Properties">
+
+					<div class="form-group clearfix">
+						<label class="col-sm-4 control-label" for="id">ID</label>
+						<div class="col-sm-8">
+							<input type="text" class="form-control" name="id" id="id"
+								ng-keyup="updateTabLabel($event)" />
 						</div>
-						<div class="form-group clearfix">
-							<label for="maxRetries" class="col-sm-4 control-label">
-								Max Retries</label>
-							<div class="col-sm-8">
-								<input type="text" maxlength="5" class="form-control"
-									id="maxRetries" ng-keypress="isNumberKey(event)"
-									name="maxRetries"> </input>
-							</div>
+					</div>
+					<div class="form-group clearfix">
+						<label class="col-sm-4 control-label" for="recipe">Recipe</label>
+						<div class="col-sm-8">
+							<select class="form-control" name="recipe" id="recipe"
+								enableFilter="true" ng-click="updateGuardRecipe($event)">
+								<option value="Restart">Restart</option>
+								<option value="Rebuild">Rebuild</option>
+								<option value="Migrate">Migrate</option>
+								<option value="Health-Check">Health-Check</option>
+								<option value="ModifyConfig">ModifyConfig</option>
+								<option value="VF Module Create">VF Module Create</option>
+								<option value="VF Module Delete">VF Module Delete</option>
+								<option value="Reroute">Reroute</option>
+							</select>
 						</div>
-						<div class="form-group clearfix">
-							<label for="retryTimeLimit" class="col-sm-4 control-label">
-								Retry Time Limit</label>
-							<div class="col-sm-8">
-								<input type="text" maxlength="5" class="form-control"
-									id="retryTimeLimit" ng-keypress="isNumberKey(event)"
-									name="retryTimeLimit"></input>
-							</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="retry" class="col-sm-4 control-label"> Retry</label>
+						<div class="col-sm-8">
+							<input type="text" maxlength="5" class="form-control" id="retry"
+								ng-pattern="/^[0-9]*$/" ng-model="number" name="retry">
+							</input>
 						</div>
-						<div style="display: none;" class="form-group clearfix">
-							<label for="_id" class="col-sm-4 control-label"> PolicyID</label>
-							<div class="col-sm-8">
-								<input type="text" onkeydown="return false;"
-									class="form-control" id="_id" name="_id" value=""></input>
-							</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="timeout" class="col-sm-4 control-label">
+							Timeout</label>
+						<div class="col-sm-8">
+							<input type="text" maxlength="5" class="form-control"
+								id="timeout" ng-pattern="/^[0-9]*$/" ng-model="number"
+								name="timeout"></input>
 						</div>
-						<div class="form-group clearfix">
-							<label for="parentPolicy" class="col-sm-4 control-label">
-								Parent Policy</label>
-							<div class="col-sm-8">
-								<select class="form-control" id="parentPolicy"
-									name="parentPolicy" enableFilter="true"><option
-										value=""></option></select>
-							</div>
+					</div>
+
+					<div class="form-group clearfix">
+						<label for="actor" class="col-sm-4 control-label"> Actor</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="actor" name="actor">
+								<option value="APPC">APPC</option>
+								<option value="SO">SO</option>
+								<option value="VFC">VFC</option>
+								<option value="SDNC">SDNC</option>°
+								<option value="SDNR">SDNR</option>°
+							</select>
 						</div>
-						<div class="form-group clearfix">
-							<label for="parentPolicyConditions"
-								class="col-sm-4 control-label"> Parent Policy Conditions</label>
-							<div class="col-sm-8">
-								<select class="form-control" id="parentPolicyConditions"
-									name="parentPolicyConditions" multiple></select>
-							</div>
+
+						<label for="payload" class="col-sm-4 control-label">
+							Payload (YAML)</label>
+						<div class="col-sm-8">
+							<textarea class="form-control" id="payload" name="payload"></textarea>
 						</div>
-						<div class="form-group clearfix">
+					</div>
+					<div class="form-group clearfix">
+						<label for="success" class="col-sm-4 control-label">When
+							Success</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="success" name="success"
+								ng-model="null_dump"
+								ng-options="policy for policy in policy_ids track by policy"></select>
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="failure" class="col-sm-4 control-label">When
+							Failure</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="failure" name="failure"
+								ng-model="null_dump"
+								ng-options="policy for policy in policy_ids track by policy"></select>
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="failure_timeout" class="col-sm-4 control-label">When
+							Failure Timeout</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="failure_timeout"
+								name="failure_timeout" ng-model="null_dump"
+								ng-options="policy for policy in policy_ids track by policy"></select>
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="failure_retries" class="col-sm-4 control-label">When
+							Failure Retries</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="failure_retries"
+								name="failure_retries" ng-model="null_dump"
+								ng-options="policy for policy in policy_ids track by policy"></select>
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="failure_exception" class="col-sm-4 control-label">When
+							Failure Exception</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="failure_exception"
+								name="failure_exception" ng-model="null_dump"
+								ng-options="policy for policy in policy_ids track by policy"></select>
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="failure_guard" class="col-sm-4 control-label">When
+							Failure Guard</label>
+						<div class="col-sm-8">
+							<select class="form-control" id="failure_guard"
+								name="failure_guard" ng-model="null_dump"
+								ng-options="policy for policy in policy_ids track by policy"></select>
+						</div>
+					</div>
+				</form>
+				<form class="policyTarget" class="form-horizontal"
+					title="Operational Policy Target" style="border: 2px dotted gray;">
+					<div class="form-group clearfix">
+						<label for="type" class="col-sm-4 control-label"> Target
+							Type</label>
+						<div class="col-sm-8">
+							<select class="form-control" name="type" id="type">
+								<option value="VFC">VFC</option>
+								<option value="VM">VM</option>
+								<option value="VNF">VNF</option>
+							</select>
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="resourceId" class="col-sm-4 control-label">
+							Target ResourceId</label>
+						<div class="col-sm-8">
+							<select class="form-control" name="resourceId" id="resourceId"
+								enableFilter="true">
+							</select>
+						</div>
+					</div>
+				</form>
+				<div class="form-group clearfix">
+					<label for="enableGuardPolicy" class="col-sm-4 control-label">
+						Enable Guard Policy</label>
+					<div class="col-sm-8">
+						<input type="checkbox" class="form-control"
+							name="enableGuardPolicy" id="enableGuardPolicy">
+					</div>
 
-							<label for="actor" class="col-sm-4 control-label"> Actor</label>
-							<div class="col-sm-8">
-								<select class="form-control" id="actor" name="actor"></select>
-							</div>
+					<div class="col-sm-8">
+						<label for="guardPolicyType" class="col-sm-4 control-label">
+							Guard Policy Type</label> <select class="form-control"
+							name="guardPolicyType" id="guardPolicyType"
+							ng-change="changeGuardPolicyType()" ng-model="guardType">
+							<option value="GUARD_MIN_MAX">MinMax</option>
+							<option value="GUARD_YAML">FrequencyLimiter</option>
+						</select>
+					</div>
+				</div>
+				<form class="guardProperties" class="form-horizontal"
+					title="Guard policy associated" style="border: 2px dotted gray;">
 
-							<label for="payload" class="col-sm-4 control-label">
-								Payload (YAML)</label>
-							<div class="col-sm-8">
-								<textarea class="form-control" id="recipePayload" name=recipePayload></textarea>
-							</div>
+					<div class="form-group clearfix">
+						<label class="col-sm-4 control-label" for="id">ID</label>
+						<div class="col-sm-8">
+							<input type="text" class="form-control" name="id" id="id" />
 						</div>
-						<div class="form-group clearfix">
-							<label for="targetType" class="col-sm-4 control-label">
-								Target Type</label>
-							<div class="col-sm-8">
-								<select class="form-control" name="recipeLevel" id="recipeLevel">
-								</select>
-							</div>
+					</div>
+					<div class="form-group clearfix">
+						<label class="col-sm-4 control-label" for="recipe">Recipe</label>
+						<div class="col-sm-8">
+							<input type="text" class="form-control" name="recipe"
+								readonly="readonly" id="recipe" />
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label class="col-sm-4 control-label" for="clname">ControlLoopName</label>
+						<div class="col-sm-8">
+							<input type="text" class="form-control" name="clname"
+								readonly="readonly" id="clname" ng-model="clname"/>
+						</div>
+					</div>
+					
+					
+					<div class="form-group clearfix">
 
-							<label for="targetResourceId" class="col-sm-4 control-label">
-								Target ResourceId</label>
-							<div class="col-sm-8">
-								<select class="form-control" name="targetResourceId"
-									id="targetResourceId" enableFilter="true"
-									ng-change="changeTargetResourceIdOther()" ng-model="targetResource" >
-									<option value=""></option>
-									<option value="Other:">Other:</option>
-								</select>
-							</div>
-							<input type="text" style="display: none" class="form-control"
-								id="targetResourceIdOther" name="targetResourceIdOther" value=""></input>
+						<label for="guardTargets" class="col-sm-4 control-label">Guard
+							targets</label>
+						<div class="col-sm-8">
+							<input class="form-control" name="guardTargets" id="guardTargets" />
 						</div>
-						<div style="border: 2px dotted gray;">
-							<div class="form-group clearfix">
-								<label for="enableGuardPolicy" class="col-sm-4 control-label">
-									Enable Guard Policy</label>
-								<div class="col-sm-8">
-									<input type="checkbox" class="form-control"
-										name="enableGuardPolicy" id="enableGuardPolicy">
-								</div>
-								<div class="col-sm-8">
-									<label for="guardPolicyType" class="col-sm-4 control-label">
-										Guard Policy Type</label> <select class="form-control"
-										name="guardPolicyType" id="guardPolicyType"
-										ng-change="changeGuardPolicyType()" ng-model="guardType">
-										<option value="GUARD_MIN_MAX">MinMax</option>
-										<option value="GUARD_YAML">FrequencyLimiter</option>
-									</select>
-								</div>
-								<label for="guardTargets" class="col-sm-4 control-label">Guard
-									targets</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="guardTargets"
-										id="guardTargets" />
-								</div>
-							</div>
+					</div>
 
-							<div class="form-group clearfix" id="minMaxGuardPolicyDiv">
-								<label for="minGuard" class="col-sm-4 control-label">
-									Min Guard</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="minGuard" id="minGuard" />
-								</div>
-								<label for="maxGuard" class="col-sm-4 control-label">
-									Max Guard</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="maxGuard" id="maxGuard" />
-								</div>
-							</div>
-							<div class="form-group clearfix"
-								id="frequencyLimiterGuardPolicyDiv" style="display: none">
-								<label for="limitGuard" class="col-sm-4 control-label">Limit</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="limitGuard" id="limitGuard" />
-								</div>
-								<div class="col-sm-8">
-									<select class="form-control" name="timeUnitsGuard"
-										id="timeUnitsGuard" /> <label for="timeWindowGuard"
-										class="col-sm-4 control-label">Time Window</label>
-								</div>
-								<div class="col-sm-8">
-									<input class="form-control" name="timeWindowGuard"
-										id="timeWindowGuard" />
-								</div>
-							</div>
-							<div class="form-group clearfix">
-								<label for="guardActiveStart" class="col-sm-4 control-label">
-									Guard Active Start</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="guardActiveStart"
-										id="guardActiveStart" />
-								</div>
-								<label for="guardActiveEnd" class="col-sm-4 control-label">
-									Guard Active End</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="guardActiveEnd"
-										id="guardActiveEnd" />
-								</div>
-							</div>
+					<div class="form-group clearfix" id="minMaxGuardPolicyDiv">
+						<label for="minGuard" class="col-sm-4 control-label"> Min
+							Guard</label>
+						<div class="col-sm-8">
+							<input class="form-control" name="minGuard" id="minGuard" />
+						</div>
+						<label for="maxGuard" class="col-sm-4 control-label"> Max
+							Guard</label>
+						<div class="col-sm-8">
+							<input class="form-control" name="maxGuard" id="maxGuard" />
 						</div>
 					</div>
+					<div class="form-group clearfix"
+						id="frequencyLimiterGuardPolicyDiv" style="display: none">
+						<label for="limitGuard" class="col-sm-4 control-label">Limit</label>
+						<div class="col-sm-8">
+							<input class="form-control" name="limitGuard" id="limitGuard" />
+						</div>
+						<div class="col-sm-8">
+							<select class="form-control" name="timeUnitsGuard"
+								id="timeUnitsGuard">
+								<option value=""></option>
+								<option value="minute">minute</option>
+								<option value="hour">hour</option>
+								<option value="day">day</option>
+								<option value="week">week</option>
+								<option value="month">month</option>
+								<option value="year">year</option>
+
+							</select> <label for="timeWindowGuard" class="col-sm-4 control-label">Time
+								Window</label>
+						</div>
+						<div class="col-sm-8">
+							<input class="form-control" name="timeWindowGuard"
+								id="timeWindowGuard" />
+						</div>
+					</div>
+					<div class="form-group clearfix">
+						<label for="guardActiveStart" class="col-sm-4 control-label">
+							Guard Active Start</label>
+						<div class="col-sm-8">
+							<input class="form-control" name="guardActiveStart"
+								id="guardActiveStart" />
+						</div>
+						<label for="guardActiveEnd" class="col-sm-4 control-label">
+							Guard Active End</label>
+						<div class="col-sm-8">
+							<input class="form-control" name="guardActiveEnd"
+								id="guardActiveEnd" />
+						</div>
+					</div>
+
 				</form>
+
 			</span>
 		</div>
 	</div>
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 2d76dc3e..16b7d87f 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/CldsOpenModelCtrl.js
@@ -45,7 +45,6 @@ function($scope, $rootScope, $modalInstance, $window, $uibModalInstance, cldsMod
 			$scope.modelNamel.push(pars[i]);
 		}
 		setTimeout(function() {
-			setMultiSelect();
 		}, 100);
 	});
 	$scope.paramsRetry = function() {
@@ -140,5 +139,5 @@ function($scope, $rootScope, $modalInstance, $window, $uibModalInstance, cldsMod
 		});
 		$uibModalInstance.close("closed");
 	};
-	setMultiSelect();
+	//setMultiSelect();
 } ]);
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 f34267a2..d7985b5e 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/GlobalPropertiesCtrl.js
@@ -44,7 +44,6 @@ function($scope, $rootScope, $uibModalInstance, $http, $q, cldsModelService, $lo
 				}
 			}
 		}
-		setMultiSelect();
 		if (readMOnly) {
 			$("#savePropsBtn").attr("disabled", "");
 			$('select[multiple] option').each(function() {
diff --git a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
index d607a49d..5a1ac538 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
@@ -33,14 +33,11 @@ app
     function($scope, $rootScope, $uibModalInstance, data, operationalPolicyService, dialogs) {
 
 	    console.log("//////operationalPolicyCtrl");
-	    var parent_policy = {}
-	    var policy_ids = {}
-	    var loadingId = false;
+	    $scope.policy_ids = []
 	    var allPolicies = {};
-	    var allPolIds = [];
-	    
-	    $scope.guardType="GUARD_MIN_MAX";
-	    $scope.targetResource="";
+	    $scope.guardType = "GUARD_MIN_MAX";
+	    $scope.number = 0;
+	    $scope.clname="";
 	    function getAllFormId() {
 
 		    return Array.from(document.getElementsByClassName("formId"));
@@ -68,142 +65,13 @@ app
 			    });
 		    }
 	    }
-	    // load recipes for a chosen policy
-	    function disperseConfig(policyObj, id) {
-
-		    console.log("disperseConfig with id:" + id);
-		    parent_policy = {};
-		    // remove old gui forms
-		    for (var i = 1; i < ($(".formId").length + 1); i++) {
-			    $("#go_properties_tab" + i).parent().remove();
-		    }
-		    $(".formId").remove();
-		    if (policyObj !== undefined && policyObj[id] !== undefined) {
-			    var el = policyObj[id][3]['policyConfigurations']
-			    for (var i = 0; i < el.length; i++) {
-				    loadingId = true;
-				    var num = add_one_more();
-				    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);
-						    if (el[i][j].name === "_id") {
-							    console.log("formId num:" + num + "; value is:" + el[i][j].value);
-							    policy_ids["#formId" + num] = el[i][j].value
-						    }
-						    if (el[i][j].name === 'parentPolicy')
-							    parent_policy[num] = el[i][j].value
-						    if (el[i][j].name === 'recipe' && el[i][j].value.toString() !== '') {
-							    $("#go_properties_tab" + num).text(el[i][j].value)
-						    }
-						    if (el[i][j].name === "targetResourceIdOther" && el[i][j].value.toString() !== '') {
-							    // Add the entry and set it
-							    $("#formId" + num + " #targetResourceId").append(
-							    $('<option></option>').val($("#formId" + num + " #targetResourceIdOther").val()).html(
-							    $("#formId" + num + " #targetResourceIdOther").val()));
-							    $("#formId" + num + " #targetResourceId").val(
-							    $("#formId" + num + " #targetResourceIdOther").val());
-						    }
-						    $scope.changeGuardPolicyType();
-					    }
-				    }
-			    }
-			    // Adding all the ids for parent policy options
-			    for (var i = 1; i <= $(".formId").length; i++) {
-				    for (k in policy_ids) {
-					    if ($("#formId" + i + " #_id").val() !== policy_ids[k].toString()
-					    && $(k + " #recipe").val() !== undefined && $(k + " #recipe").val() !== "") {
-						    $("#formId" + i + " #parentPolicy").append(
-						    "<option value=\"" + policy_ids[k] + "\">" + $(k + " #recipe").val() + "</option>");
-					    }
-				    }
-			    }
-			    for (k in parent_policy) {
-				    $("#formId" + k + " #parentPolicy").val(parent_policy[k]);
-				    if ($("#formId" + k + " #parentPolicy").val() == "") {
-					    $("#formId" + k + " #parentPolicyConditions").multiselect("disable");
-				    } else {
-					    $("#formId" + k + " #parentPolicyConditions").multiselect("enable");
-				    }
-				    // force the change event
-				    $("#formId" + k + " #parentPolicy").change();
-			    }
-			    // Now load all component with the right value defined in
-			    // policyObj JSON
-			    for (headInd in policyObj[id]) {
-				    if (!(policyObj[id][headInd].hasOwnProperty("policyConfigurations"))) {
-					    $("#" + policyObj[id][headInd].name).val(policyObj[id][headInd].value);
-				    }
-			    }
-		    }
-		    setMultiSelect();
-		    if (readMOnly) {
-			    $('select[multiple] option').each(function() {
-
-				    var input = $('input[value="' + $(this).val() + '"]');
-				    input.prop('disabled', true);
-				    input.parent('li').addClass('disabled');
-			    });
-			    $('input[value="multiselect-all"]').prop('disabled', true).parent('li').addClass('disabled');
-		    }
-	    }
-	    function addSelectListen(count) {
-
-		    var onSelectChange = function() {
-
-			    var opselected = this.selectedOptions[0].text;
-			    if (this.id == "recipe") {
-				    if (opselected !== "") {
-					    var polCount = $(this).closest("[id^='formId']").attr("id").substring(6);
-					    $(this).closest(".policyPanel").find("#go_properties_tab" + polCount).text(opselected);
-				    } else {
-					    $(this).closest("[id^='go_properties_tab']").text("Policy");
-				    }
-			    }
-			    if (this.id == "parentPolicy") {
-				    var ppCond = $(this).closest("[id^='formId']").find("#parentPolicyConditions");
-				    if (opselected == "") {
-					    ppCond.multiselect("clearSelection");
-					    ppCond.multiselect("disable");
-				    } else {
-					    ppCond.multiselect("enable");
-				    }
-			    }
-		    };
-		    $("#formId" + count + " select").each(function() {
-
-			    this.change = onSelectChange;
-		    });
-	    }
-	    // This is ensure there are no repeated keys in the map
-	    function noRepeats(form) {
-
-		    // triggered per policy.
-		    var select = {};
-		    for (var i = 0; i < form.length; i++) {
-			    if (select[form[i].name] === undefined)
-				    select[form[i].name] = []
-			    select[form[i].name].push(form[i].value);
-		    }
-		    var arr = []
-		    for (s in select) {
-			    var f = {}
-			    f.name = s
-			    f.value = select[s]
-			    arr.push(f)
-		    }
-		    return arr
-	    }
 	    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
-		    var form = $($("#formSpan").children()[0]).clone()
+		    var form = $("#formSpan").clone(true, true)
 		    var count = 0;
 		    // Each new tab will have the formId class attached to it. This way
 		    // we can track how many forms we currently have out there and
@@ -222,50 +90,18 @@ app
 			    count++;
 			    $("#properties_tab").append('<span class="formId" id="formId1"></span>');
 		    }
-		    // $(form).find("#policyName").val("Recipe "+makid(2))
-		    // TODO change up how we auto assign policyName. There could be the
-		    // case where we do this and it will have repeats
-		    // alert($(form).find("#_id").val())
-		    // policyNameChangeListener(form)
 		    $("#add_one_more")
 		    .parent()
 		    .before(
 		    ' <li class="active"><a id="go_properties_tab'
 		    + count
-		    + '">Policy</a><button id="tab_close'
+		    + '">new</a><button id="tab_close'
 		    + count
 		    + '" type="button" class="close tab-close-popup" aria-hidden="true" style="margin-top: -30px;margin-right: 5px">&times;</button></li>');
-		    $("#formId" + count).append(form);
-		    $(".formId").not($("#formId" + count)).css("display", "none")
-		    addCustListen(count)
-		    addSelectListen(count);
-		    // This is for when the process is not loading from map but being
-		    // created
-		    if (!loadingId) {
-			    var l = makeid()
-			    $(form).find("#_id").val(l)
-			    policy_ids["#formId" + count] = l
-			    var answers = {}
-			    for (var i = 1; i <= greatestIdNum(); i++) {
-				    if ($("#formId" + i).length > 0) {
-					    answers["#formId" + i + " #parentPolicy"] = $("#formId" + i + " #parentPolicy").val();
-					    $("#formId" + i + " #parentPolicy").empty();
-					    for (k in policy_ids) {
-						    if (($("#formId" + i + " #_id").val() !== policy_ids[k].toString())
-						    && $(k + " #recipe").val() !== undefined && $(k + " #recipe").val() !== "") {
-							    $("#formId" + i + " #parentPolicy").append(
-							    "<option value='" + policy_ids[k] + "'>" + $(k + " #recipe").val() + "</option>")
-						    }
-					    }
-					    $("#formId" + i + " #parentPolicy").prepend("<option value=''></option>")
-				    }
-			    }
-			    $("#formId" + count + " #parentPolicyConditions").multiselect("disable");
-			    // re-populate parent policy with chosen options
-			    for (k in answers) {
-				    $(k).val(answers[k])
-			    }
-		    }
+		    $("#formId" + count).append(form.children());
+		    $(".formId").not($("#formId" + count)).css("display", "none");
+		    addCustListen(count);
+		    $("#formId" + count + " #id").val("new");
 		    return count;
 	    }
 	    function addCustListen(count) {
@@ -277,26 +113,10 @@ app
 			    $("#formId" + count).css("display", "")
 			    $(".formId").not($("#formId" + count)).css("display", "none")
 		    })
-		    $('#tab_close' + count).click(
-		    function(event) {
+		    $('#tab_close' + count).click(function(event) {
 
-			    if (document.getElementById("timeout").disabled) {
-				    return false;
-			    }
 			    $(this).parent().remove();
-			    for (var i = 1; i <= greatestIdNum(); i++) {
-				    if ($("#formId" + i).length > 0) {
-					    if (i !== count) {
-						    if ($("#formId" + i + " #parentPolicy").val() === $("#formId" + count + " #_id").val()
-						    .toString())
-							    $("#formId" + i + " #parentPolicy").val("")
-						    $(
-						    "#formId" + i + " #parentPolicy option[value='"
-						    + $("#formId" + count + " #_id").val().toString() + "']").remove();
-					    }
-				    }
-			    }
-			    delete policy_ids["#formId" + count + " #_id"]
+			    $scope.policy_ids.splice($scope.policy_ids.indexOf($("#formId" + count + " #id").val()), 1);
 			    $("#formId" + count).remove();
 		    })
 	    }
@@ -311,70 +131,43 @@ app
 		    }
 		    return greatest;
 	    }
-	    // Generate random id for each policy
-	    // Also made sure ids couldnt be repeated
-	    function makeid(num) {
-
-		    var text = "";
-		    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-		    if (num == null)
-			    num = 7;
-		    for (var i = 0; i < 7; i++)
-			    text += possible.charAt(Math.floor(Math.random() * possible.length));
-		    var hasValue = false;
-		    for (k in policy_ids) {
-			    if (text === policy_ids[k])
-				    hasValue = true
-		    }
-		    if (hasValue)
-			    return makeid(num);
-		    else
-			    return text
-	    }
-	    // var ParentPolicy = function(id, name) {
-	    //
-	    // this.id = id
-	    // this.name = name
-	    // }
-	    function saveLastPolicyLocally(lastPolicyId) {
-
-		    console.log("last policy id is:" + lastPolicyId);
-		    var polForm = []
-		    var properties = $(".saveProps").not("#formSpan .saveProps");
-		    var timeoutForm = $("#Timeoutform").serializeArray();
-		    for (var i = 0; i < timeoutForm.length; i++) {
-			    polForm.push(timeoutForm[i]);
-		    }
-		    var d = {}
-		    d["policyConfigurations"] = [];
-		    for (var i = 0; i < properties.length; i++) {
-			    var ser = $(properties[i]).serializeArray();
-			    var s = noRepeats(ser)
-			    d["policyConfigurations"].push(s);
-		    }
-		    polForm.push(d);
-		    for ( var x in allPolicies) {
-			    if (x !== lastPolicyId) {
-				    delete allPolicies[x];
-				    console.log("remove old policy" + x);
+	    function serializeElement(element) {
+
+		    var o = {};
+		    var a = element.serializeArray();
+		    $.each(a, function() {
+
+			    if (o[this.name]) {
+				    if (!o[this.name].push) {
+					    o[this.name] = [ o[this.name] ];
+				    }
+				    o[this.name].push(this.value || '');
+			    } else {
+				    o[this.name] = this.value || '';
 			    }
-		    }
-		    allPolicies[lastPolicyId] = polForm;
+		    });
+		    return o;
 	    }
-	    function startNextItem() {
-
-		    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());
-			    // lastItem.attr("id", $("#pname").val());
-			    lastItem.find("td").html($("#pname").val());
-		    }
+	    function savePolicyLocally() {
+
+		    var polForm = {}
+		    polForm = serializeElement($("#operationalPolicyHeaderForm"));
+		    var policiesArray = []
+		    allPolicies['guard_policies'] = [];
+		    $.each($(".formId"), function() {
+
+			    var policyProperties = serializeElement($("#" + this.id + " .policyProperties"));
+			    policyProperties["target"] = serializeElement($("#" + this.id + " .policyTarget"))
+			    policiesArray.push(policyProperties);
+			    // Now get the Guard
+			    if ($("#" + this.id + " #enableGuardPolicy").is(':checked')) {
+				    allPolicies['guard_policies'].push(serializeElement($("#" + this.id + " .guardProperties")));
+			    }
+		    });
+		    polForm['policies'] = policiesArray;
+		    allPolicies['operational_policy'] = polForm;
 	    }
-	    function add_new_policy(issueNewNames) {
+	    function add_new_policy() {
 
 		    console.log("add new policy");
 		    // remove old gui forms
@@ -382,22 +175,44 @@ app
 			    $("#go_properties_tab" + i).parent().remove();
 		    }
 		    $(".formId").remove();
-		    $("#pname").val("New_Policy");
-		    $("#timeout").val(getOperationalPolicyProperty().timeout);
 		    $("#add_one_more").click();
 	    }
-	    $scope.changeTargetResourceIdOther = function() {
+	    function configureComponents(allPolicies) {
 
-		    var formItemActive = searchActiveFormId();
-		    if (formItemActive === undefined)
-			    return;
-		    if ($("#" + formItemActive.id + " #targetResourceId").val() === "Other:") {
-			    $("#" + formItemActive.id + " #targetResourceIdOther").show();
-		    } else {
-			    $("#" + formItemActive.id + " #targetResourceIdOther").hide();
-			    $("#" + formItemActive.id + " #targetResourceIdOther").val("");
-		    }
+		    console.log("load properties to op policy");
+		    // Set the header
+		    $.each($('#operationalPolicyHeaderForm').find('.form-control'), function() {
+
+			    $(this).val(allPolicies['operational_policy'][this.id]);
+		    });
+		    // Set the sub-policies
+		    $.each(allPolicies['operational_policy']['policies'], function(opPolicyElemIndex, opPolicyElemValue) {
+
+			    var formNum = add_one_more();
+			    $.each($('.policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) {
+
+				    $("#formId"+formNum+" .policyProperties").find("#"+opPolicyPropValue.id).val(
+				    allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]);
+			    });
+			    // update the current tab label
+			    $("#go_properties_tab" + formNum).text(
+			    allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
+			    // Check if there is a guard set for it
+			    $.each(allPolicies['guard_policies'], function(guardElemIndex, guardElemValue) {
+
+				    if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
+					    // Found one, set all guard prop
+					    $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,guardPropElemValue) {
+					    	$("#formId"+formNum+" .guardProperties").find("#"+guardPropElemValue.id).val(
+						    allPolicies['guard_policies'][guardElemIndex][guardPropElemValue.id]);
+					    });
+					    // And finally enable the flag
+					    $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
+				    }
+			    });
+		    });
 	    }
+
 	    $scope.changeGuardPolicyType = function() {
 
 		    var formItemActive = searchActiveFormId();
@@ -411,131 +226,64 @@ app
 			    $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").show();
 		    }
 	    }
+	    $scope.initPolicySelect = function() {
+
+		    if (allPolicies['operational_policy'] === undefined || allPolicies['operational_policy'] === null) {
+			    allPolicies = getOperationalPolicyProperty();
+		    }
+		    // Provision all policies ID first
+		    if ($scope.policy_ids.length == 0 && allPolicies['operational_policy'] != undefined) {
+			    $.each(allPolicies['operational_policy']['policies'], function() {
+
+				    $scope.policy_ids.push(this['id']);
+			    });
+		    }
+	    }
 	    $scope.init = function() {
 
 		    $(function() {
-
+		    	$scope.clname=getLoopName();
 			    $("#add_one_more").click(function(event) {
 
 				    console.log("add one more");
 				    event.preventDefault();
-				    var num = add_one_more();
-				    setMultiSelect();
+				    $scope.policy_ids.push($("#formId" + add_one_more() + " #id").val());
 			    });
-			    var obj = getOperationalPolicyProperty();
-			    var loadPolicy;
-			    console.log("lastElementSelected :" + lastElementSelected);
-			    if (!($.isEmptyObject(obj))) {
-				    allPolicies = jQuery.extend({}, obj);
-				    for ( var x in allPolicies) {
-					    $("#policyTable").prepend("<tr><td>" + x + "</td></tr>");
-					    if (allPolicies[x][1]['value']) {
-						    allPolIds.push(parseInt(allPolicies[x][1]['value']));
-					    }
-					    console.log("policies found :" + x);
-					    loadPolicy = x;
-				    }
-			    }
-			    if (loadPolicy !== undefined && loadPolicy !== null) {
+			    if (allPolicies['operational_policy'] !== undefined && allPolicies['operational_policy'] !== null) {
 				    // load properties
 				    console.log("load properties");
-				    disperseConfig(allPolicies, loadPolicy);
+				    configureComponents(allPolicies);
 			    } else {
 				    console.log("create new policy");
 				    add_new_policy();
 			    }
-			    $("#savePropsBtn").click(
-			    function(event) {
+			    $("#savePropsBtn").click(function(event) {
 
 				    console.log("save properties triggered");
-				    if ($("#targetResourceIdOther").is(":visible")) {
-					    $('#targetResourceId').append(
-					    $('<option></option>').val($("#targetResourceIdOther").val()).html(
-					    $("#targetResourceIdOther").val()))
-					    $("#targetResourceId").val($("#targetResourceIdOther").val());
-				    }
-				    $(".idError").hide();
-				    console.log("save properties triggered2");
-				    startNextItem();
-				    console.log("get all policies");
-				    var finalSaveList = {};
-				    $("#policyTable td").each(function() {
-
-					    console.log("enter policy table each loop");
-					    var tableVal = $(this).text();
-					    if (tableVal in allPolicies) {
-						    finalSaveList[tableVal] = allPolicies[tableVal];
-					    }
-					    console.log("save properties; add tableVal to policies: " + tableVal);
-				    });
-				    var scope = angular.element(document.getElementById('formSpan')).scope();
-				    scope.submitForm(finalSaveList);
+				    savePolicyLocally();
+				    angular.element(document.getElementById('formSpan')).scope().submitForm(allPolicies);
 				    $("#close_button").click();
 			    });
-			    $('#policyTable').on('click', 'tr', function(event) {
-
-				    console.log("click on policyTable");
-				    $(".idError").hide();
-				    if (!(readMOnly)) {
-					    startNextItem();
-				    }
-				    $(this).addClass('highlight').siblings().removeClass('highlight');
-				    disperseConfig(allPolicies, $(this).find("td").html());
-			    });
-			    $('#pname').on('keypress', function(e) {
-
-				    /*
-					 * var newVal = $(this).val() +
-					 * String.fromCharCode(e.which); if ((newVal>99) ||
-					 * (($(this).val().length>2) && e.keyCode != 46 && e.keyCode
-					 * !=8)){ e.preventDefault(); }
-					 */
-				    if (e.keyCode == 32) {
-					    $("#spaceError").show();
-					    e.preventDefault();
-				    }
-			    });
-			    console.log("start next Item on 796");
-			    startNextItem();
-			    if (("#policyTable .highlight").length > 0) {
-				    $('#policyTable tr.highlight').removeClass('highlight');
-			    }
-			    $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
-			    $("#pid").val(0);
 			    initTargetResourceId();
-			    // load metrics dropdown
-			    if (elementMap["global"]) {
-				    for (var i = 0; i < (elementMap["global"].length); i++) {
-					    if ((elementMap["global"][i]["name"]) == "actionSet") {
-						    var asSel = elementMap["global"][i]["value"];
-						    if (asSel == "vnfRecipe" && vf_Services !== null && vf_Services !== undefined) {
-							    if (vf_Services["policy"][asSel]) {
-								    $.each((vf_Services["policy"][asSel]), function(val, text) {
-
-									    $('#recipe').append($('<option></option>').val(val).html(text));
-								    });
-							    }
-							    break;
-						    }
-					    }
-				    }
-			    }
 		    });
 	    }
 	    $scope.init();
-	    $scope.isNumberKey = function(event) {
+	    $scope.updateGuardRecipe = function(event) {
 
-		    var charCode = (event.which) ? event.which : event.keyCode
-		    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
-			    return false;
-		    }
-		    return true;
+		    var formNum = $(event.target).closest('.formId').attr('id').substring(6);
+		    // Get the second recipe (guard one) and update it
+		    $($("#formId" + formNum + " #recipe")[1]).val($(event.target).val());
+	    }
+	    // When we change the name of a policy
+	    $scope.updateTabLabel = function(event) {
+
+		    // update policy id structure
+		    var formNum = $(event.target).closest('.formId').attr('id').substring(6);
+		    $scope.policy_ids.splice($scope.policy_ids.indexOf($("#formId" + formNum + " #id").val()), 1);
+		    $scope.policy_ids.push($(event.target).val());
+		    // Update the tab now
+		    $("#go_properties_tab" + formNum).text($(event.target).val());
 	    }
-//	    setTimeout(function() {
-//
-//		    console.log("setTimeout");
-//		    setMultiSelect();
-//	    }, 100);
 	    $scope.close = function() {
 
 		    console.log("close");
@@ -543,7 +291,7 @@ app
 	    };
 	    $scope.submitForm = function(obj) {
 
-		    var operationalPolicies = JSON.parse(JSON.stringify(getOperationalPolicies()));
+		    var operationalPolicies = getOperationalPolicies();
 		    if (obj !== null) {
 			    operationalPolicies[0]["configurationsJson"] = obj;
 		    }
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 347d7472..e0e3be8e 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/aOnBoot.js
@@ -37,110 +37,8 @@ function newElementProcessor(id) {
   }
 }
 
-function setMultiSelect() {
-  $("select").each(function(index, mySelect) {
-
-    var mySelectObj = $(mySelect);
-    if (! mySelectObj.parents(".multiselect-native-select")) {
-      // keep native for this one
-      return;
-    }
-
-    if (mySelectObj.parents(".multiselect-native-select").length > 0) {
-      var selectDrop = mySelectObj.parent(".multiselect-native-select").find("select");
-      mySelectObj.parent(".multiselect-native-select").parent().html(selectDrop);
-    }
-
-    var options = {
-      numberDisplayed: 1,
-      maxHeight: 200
-    };
-
-    if (mySelectObj.attr("multiple")
-        && mySelectObj.attr("multiple") != 'false') {
-      options.includeSelectAllOption = true;
-    }
-    
-    if (mySelectObj.attr("enableFilter")
-        && mySelectObj.attr("enableFilter") != 'false') {
-      options.enableCaseInsensitiveFiltering = true;
-      options.enableFiltering = true;
-    }
-
-    mySelectObj.multiselect(options);
-  });
-}
-
-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;
 
 }
-
-$(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
-	  });
-})
-
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 36070de5..a49a4afd 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,7 +44,6 @@ var autoSaveRevision =-1;
 var commandStackList = [];
 
 var cl_props=null
-var defaults_props=null
 var elementMap={}
 var lastElementSelected=null
 var isTemplate=null;
-- 
2.16.6