This is an automated email from the ASF dual-hosted git repository. heneveld pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 9794b8454b560293a61a9a6d032941d842a6c08f Author: zan-mateusz <[email protected]> AuthorDate: Wed Jul 14 17:00:13 2021 +0100 improvements and fixes around the scope/vm asn UI design --- .../home/app/views/about/about.controller.js | 21 ++++++++------- .../about/node-management/node-management.less | 3 +-- .../node-management/node-management.template.html | 30 ++++++++++------------ 3 files changed, 26 insertions(+), 28 deletions(-) diff --git a/ui-modules/home/app/views/about/about.controller.js b/ui-modules/home/app/views/about/about.controller.js index 7d00881..c8ce631 100644 --- a/ui-modules/home/app/views/about/about.controller.js +++ b/ui-modules/home/app/views/about/about.controller.js @@ -118,21 +118,24 @@ export function aboutStateController($scope, $element, $q, $uibModal, brBrandInf function nodeManagementModalController($scope, $uibModalInstance, node) { + // newStatus and newPriority are required to belong to the instance of the modal + let vm = this; + vm.newPriority = node.priority; + vm.newStatus = node.status; + $scope.node = node; - $scope.newPriority = node.priority; - $scope.newStatus = node.status; $scope.statuses = ["MASTER", "STANDBY", "HOT_STANDBY", "HOT_BACKUP"]; $scope.now = Date.now(); $scope.showEditOptions = false; $scope.applyChangesAndQuit = function () { let promiseList = []; - if ($scope.node.priority !== $scope.newPriority) { - let result = serverApi.setHaPriority($scope.newPriority); + if ($scope.node.priority !== vm.newPriority) { + let result = serverApi.setHaPriority(vm.newPriority); promiseList.push(result); } - if ($scope.node.status !== $scope.newStatus) { - let result = serverApi.setHaStatus($scope.newStatus); + if ($scope.node.status !== vm.newStatus) { + let result = serverApi.setHaStatus(vm.newStatus); promiseList.push(result); } $uibModalInstance.close(promiseList); @@ -140,8 +143,8 @@ export function aboutStateController($scope, $element, $q, $uibModal, brBrandInf } $scope.cancelAndQuit = function () { - $scope.newPriority = $scope.node.priority; - $scope.newStatus = $scope.node.status; + vm.newPriority = $scope.node.priority; + vm.newStatus = $scope.node.status; $uibModalInstance.dismiss(); } @@ -166,7 +169,7 @@ export function aboutStateController($scope, $element, $q, $uibModal, brBrandInf let removeNodes = serverApi.removeHaTerminatedNodes(); removeNodes.then(data => { for (const node in $scope.states.nodes) { - if ($scope.states.nodes[node].status === "TERMINATED") $scope.expectedNodeCounter--; + if ($scope.states.nodes[node].status === "TERMINATED" || $scope.states.nodes[node].status === "FAILED") $scope.expectedNodeCounter--; } let event = new CustomEvent('update-states', {}); $scope.container.dispatchEvent(event); diff --git a/ui-modules/home/app/views/about/node-management/node-management.less b/ui-modules/home/app/views/about/node-management/node-management.less index 979fda8..9a48c63 100644 --- a/ui-modules/home/app/views/about/node-management/node-management.less +++ b/ui-modules/home/app/views/about/node-management/node-management.less @@ -35,8 +35,7 @@ } .property-change-box { - border-color: black; - border-width: 1px; + border: none; color: white; } diff --git a/ui-modules/home/app/views/about/node-management/node-management.template.html b/ui-modules/home/app/views/about/node-management/node-management.template.html index 1bb5bfc..253d1a6 100644 --- a/ui-modules/home/app/views/about/node-management/node-management.template.html +++ b/ui-modules/home/app/views/about/node-management/node-management.template.html @@ -33,40 +33,36 @@ <li class="list-group-item"> <span class="badge node-management-badge" - ng-style="(newStatus !== node.status) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}"> - <div ng-if="!showEditOptions">{{newStatus}}</div> + ng-style="(vm.newStatus !== node.status) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}"> + <div ng-if="!showEditOptions">{{vm.newStatus}}</div> <div ng-if="showEditOptions"> <select class="form-control property-change-box" - ng-style="(newStatus !== node.status) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}" - ng-options="status for status in statuses" ng-init="newStatus" - ng-model="newStatus"> + ng-style="(vm.newStatus !== node.status) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}" + ng-options="status for status in statuses" + ng-model="vm.newStatus"> </select> - <label style="font-size:small">Update status... (current: {{node.status}}) - </label> </div> </span> <h4 class="list-group-item-heading">Status</h4> <br ng-if="showEditOptions"> <br ng-if="showEditOptions"> - <p class="master-change-warning" ng-show="node.status === 'MASTER' && newStatus !== 'MASTER'">Warning! + <p class="master-change-warning" ng-show="node.status === 'MASTER' && vm.newStatus !== 'MASTER'">Warning! Applying changes will de-mote this node from being Master and a new Master will be elected from other management nodes.</p> - <p class="master-change-warning" ng-show="node.status !== 'MASTER' && newStatus === 'MASTER'">Warning! + <p class="master-change-warning" ng-show="node.status !== 'MASTER' && vm.newStatus === 'MASTER'">Warning! Applying changes will de-mote the current Master and this node will be forcibly made the new Master.</p> </li> <li class="list-group-item" ng-style="showEditOptions && {'min-height': '80px'}"> <span class="badge node-management-badge" - ng-style="(newPriority !== node.priority) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}"> - <div ng-if="!showEditOptions">{{newPriority}}</div> + ng-style="(vm.newPriority && vm.newPriority !== node.priority) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}"> + <div ng-if="!showEditOptions">{{vm.newPriority}}</div> <div ng-if="showEditOptions"> - <input class="form-control property-change-box" type="number" ng-model="newPriority" - ng-style="(newPriority !== node.priority) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}"> - <label style="font-size:small">Update priority... (current: {{node.priority}}) - </label> - </input> + <input class="form-control property-change-box" type="number" ng-model="vm.newPriority" + ng-style="(vm.newPriority && vm.newPriority !== node.priority) && {'background-color' : '#f0ad4e'} || {'background-color' : 'gray'}" + placeholder="(Can not be blank)"/> </div> </span> <h4 class="list-group-item-heading">Priority</h4> @@ -81,7 +77,7 @@ ng-click="doShowEditOptions()">Edit</button> <button class="btn btn-lg btn-success btn-default pull-right" style="margin-left: 1em" ng-if="showEditOptions" - ng-disabled="(newPriority === node.priority) && (newStatus === node.status)" + ng-disabled="!vm.newPriority || (vm.newPriority === node.priority && vm.newStatus === node.status)" ng-click="applyChangesAndQuit()">Apply</button> </div>
