Rework the Op policy UI 50/84350/1
authorxg353y <xg353y@intl.att.com>
Fri, 5 Apr 2019 13:47:37 +0000 (15:47 +0200)
committerxg353y <xg353y@intl.att.com>
Fri, 5 Apr 2019 13:47:37 +0000 (15:47 +0200)
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>
src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js

index 82b4803..a53ad73 100644 (file)
@@ -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
index e7c5d93..4e8855e 100644 (file)
@@ -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) {