From aa35d54be07a0fa89d967a54ade8db2c3b5b4dc7 Mon Sep 17 00:00:00 2001
From: xg353y <xg353y@intl.att.com>
Date: Fri, 5 Apr 2019 15:47:37 +0200
Subject: 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>
---
.../portfolios/operational_policy_window.html | 56 ++++++++++++++++------
.../designer/scripts/OperationalPolicyCtrl.js | 42 ++++++++++++----
2 files changed, 74 insertions(+), 24 deletions(-)
(limited to 'src/main')
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 82b48039..a53ad73d 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 e7c5d93b..4e8855eb 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) {
--
cgit