Rework the Op policy UI

Rework the op policy UI, fix some bugs while saving op policy
properties.

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

2 files changed, 74 insertions, 24 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 82b480393..a53ad73d5 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
@@ -110,7 +110,9 @@ label {
 								<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>
+									ng-options="policy for policy in policy_ids track by policy">
+									<option value="">-- choose an option --</option>
+									</select>
 							</div>
 
 							<label for="timeout" class="col-sm-3"
@@ -127,6 +129,13 @@ label {
 									checked="true" class="form-control">
 							</div>
 						</div>
+						<div class="form-group clearfix row">
+   						    <label class="col-sm-4 control-label" for="clname">ControlLoopName</label>
+						    <div class="col-sm-8">
+							    <input type="text" class="form-control" name="controlLoopName"
+								    readonly="readonly" id="clname" ng-model="clname"/>
+						    </div>
+						</div>
 					</div>
 				</form>
 				<div class="panel-heading" style="background-color: white;">
@@ -158,9 +167,8 @@ label {
 						<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);initTargetResourceId()"
-								ng-model="recipe">
+								enableFilter="true"  ng-model="recipe" ng-click="updateGuardRecipe($event)">
+								<option value="">-- choose an option --</option>
 								<option value="Restart">Restart</option>
 								<option value="Rebuild">Rebuild</option>
 								<option value="Migrate">Migrate</option>
@@ -193,7 +201,8 @@ label {
 					<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">
+							<select class="form-control" id="actor" name="actor" ng-click="updateGuardActor($event)" ng-model="actor">
+							    <option value="">-- choose an option --</option>
 								<option value="APPC">APPC</option>
 								<option value="SO">SO</option>
 								<option value="VFC">VFC</option>
@@ -214,7 +223,9 @@ 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>
+								ng-options="policy for policy in policy_ids track by policy">
+								<option value="">-- choose an option --</option>
+								</select>
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -223,7 +234,9 @@ 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>
+								ng-options="policy for policy in policy_ids track by policy">
+								<option value="">-- choose an option --</option>
+								</select>
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -232,7 +245,9 @@ 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>
+								ng-options="policy for policy in policy_ids track by policy">
+								<option value="">-- choose an option --</option>
+								</select>
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -241,7 +256,9 @@ 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>
+								ng-options="policy for policy in policy_ids track by policy">
+								<option value="">-- choose an option --</option>
+								</select>
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -250,7 +267,9 @@ 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>
+								ng-options="policy for policy in policy_ids track by policy">
+								<option value="">-- choose an option --</option>
+								</select>
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -259,7 +278,9 @@ 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>
+								ng-options="policy for policy in policy_ids track by policy">
+								<option value="">-- choose an option --</option>
+								</select>
 						</div>
 					</div>
 				</form>
@@ -354,7 +375,7 @@ label {
 					title="Guard policy associated" style="border: 2px dotted gray;">
 
 					<div class="form-group clearfix">
-						<label class="col-sm-4 control-label" for="id">ID</label>
+						<label class="col-sm-4 control-label" for="id">Guard Policy ID</label>
 						<div class="col-sm-8">
 							<input type="text" class="form-control" name="id" id="id" />
 						</div>
@@ -363,7 +384,7 @@ label {
 						<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" />
+								readonly="readonly" id="recipe"/>
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -373,8 +394,13 @@ label {
 								readonly="readonly" id="clname" ng-model="clname"/>
 						</div>
 					</div>
-					
-					
+					<div class="form-group clearfix">
+					    <label for="actor" class="col-sm-4 control-label">Actor</label>
+						<div class="col-sm-8">
+						    <input type="text" class="form-control" name="actor"
+								readonly="readonly" id="actor" />
+						</div>
+					</div>
 					<div class="form-group clearfix">
 
 						<label for="guardTargets" class="col-sm-4 control-label">Guard
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 e7c5d93b4..4e8855eb0 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
@@ -37,7 +37,8 @@ app
 	    var allPolicies = {};
 	    $scope.guardType = "GUARD_MIN_MAX";
 	    $scope.number = 0;
-	    $scope.clname="";
+	    $scope.clname = "";
+	    $scope.guard_ids = [];
 	    function getAllFormId() {
 
 		    return Array.from(document.getElementsByClassName("formId"));
@@ -92,6 +93,7 @@ app
 		    $(".formId").not($("#formId" + count)).css("display", "none");
 		    addCustListen(count);
 		    $("#formId" + count + " #id").val("new");
+		    $("#formId" + count + " #clname").val($scope.clname);
 		    return count;
 	    }
 	    function addCustListen(count) {
@@ -140,10 +142,11 @@ app
 	    }
 	    function savePolicyLocally() {
 
-		    var polForm = {}
-		    polForm = serializeElement($("#operationalPolicyHeaderForm"));
+		    var polForm = {};
+		    var clPolForm = {};
+		    clPolForm = serializeElement($("#operationalPolicyHeaderForm"));
+		    allPolicies['guard_policies'] = {};
 		    var policiesArray = []
-		    allPolicies['guard_policies'] = [];
 		    $.each($(".formId"), function() {
 
 			    var policyProperties = serializeElement($("#" + this.id + " .policyProperties"));
@@ -151,9 +154,15 @@ app
 			    policiesArray.push(policyProperties);
 			    // Now get the Guard
 			    if ($("#" + this.id + " #enableGuardPolicy").is(':checked')) {
-				    allPolicies['guard_policies'].push(serializeElement($("#" + this.id + " .guardProperties")));
+			    	var guardPolicyBody = serializeElement($("#" + this.id + " .guardProperties"));
+			    	var guardPolicyId = guardPolicyBody['id'];
+			    	delete guardPolicyBody['id'];
+
+				    allPolicies['guard_policies'][guardPolicyId] = guardPolicyBody;
+				    $scope.guard_ids.push(guardPolicyId);
 			    }
 		    });
+		    polForm['controlLoop'] = clPolForm;
 		    polForm['policies'] = policiesArray;
 		    allPolicies['operational_policy'] = polForm;
 	    }
@@ -173,7 +182,7 @@ app
 		    // Set the header
 		    $.each($('#operationalPolicyHeaderForm').find('.form-control'), function() {
 
-			    $(this).val(allPolicies['operational_policy'][this.id]);
+			    $(this).val(allPolicies['operational_policy']['controlLoop'][this.id]);
 		    });
 		    // Set the sub-policies
 		    $.each(allPolicies['operational_policy']['policies'], function(opPolicyElemIndex, opPolicyElemValue) {
@@ -188,13 +197,14 @@ app
 			    $("#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) {
+			    $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
 
 				    if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
 					    // Found one, set all guard prop
 					    $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,guardPropElemValue) {
+					    	guardElemValue['id'] = guardElemId;
 					    	$("#formId"+formNum+" .guardProperties").find("#"+guardPropElemValue.id).val(
-						    allPolicies['guard_policies'][guardElemIndex][guardPropElemValue.id]);
+						    guardElemValue[guardPropElemValue.id]);
 					    });
 					    // And finally enable the flag
 					    $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
@@ -349,9 +359,17 @@ app
 				    add_new_policy();
 			    }
 			    $("#savePropsBtn").click(function(event) {
-
 				    console.log("save properties triggered");
 				    savePolicyLocally();
+			    	for(var i = 0; i <= $scope.guard_ids.length; i++) {
+			            for(var j = i; j <= $scope.guard_ids.length; j++) {
+			                if(i != j && $scope.guard_ids[i] == $scope.guard_ids[j]) {
+			                    // duplacated guard policy id exist
+			                	alert("The guard policy ID should be unique.");
+			                	return;
+			                }
+			            }
+			        }
 				    angular.element(document.getElementById('formSpan')).scope().submitForm(allPolicies);
 				    $("#close_button").click();
 			    });
@@ -364,6 +382,12 @@ app
 		    // Get the second recipe (guard one) and update it
 		    $($("#formId" + formNum + " #recipe")[1]).val($(event.target).val());
 	    }
+	    $scope.updateGuardActor = function(event) {
+
+		    var formNum = $(event.target).closest('.formId').attr('id').substring(6);
+		    // Get the second actor (guard one) and update it
+		    $($("#formId" + formNum + " #actor")[1]).val($(event.target).val());
+	    }
 	    // When we change the name of a policy
 	    $scope.updateTabLabel = function(event) {