From f9265ee3292fe2f265f74e8a7ebd42fc736b45ff Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 1 Feb 2018 11:22:09 -0500 Subject: [PATCH] Create an InstancePolicyList directive to replace the pre-existing modal implementation * Remove Instance-List-Policy controller * Replace let with const when values aren't being reassigned * Update CapacityAdjuster directive to use replace:true * Assign less values that are specific to element * Add more error handling --- .../instance-list-policy.controller.js | 54 ------------ .../instance-list-policy.directive.js | 84 +++++++++++++++++++ .../capacity-adjuster.block.less | 2 +- .../capacity-adjuster.directive.js | 9 +- .../capacity-adjuster.partial.html | 22 ++--- .../capacity-bar/capacity-bar.block.less | 2 +- .../instances/instance-modal.controller.js | 10 +-- .../instances/instances.controller.js | 6 +- .../instance-groups/jobs/jobs.controller.js | 2 +- .../list/instance-groups-list.controller.js | 2 +- awx/ui/client/src/instance-groups/main.js | 12 +-- 11 files changed, 117 insertions(+), 88 deletions(-) delete mode 100644 awx/ui/client/src/instance-groups/add-edit/instance-list-policy.controller.js create mode 100644 awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js diff --git a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.controller.js b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.controller.js deleted file mode 100644 index 5f63cea037..0000000000 --- a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.controller.js +++ /dev/null @@ -1,54 +0,0 @@ -function InstanceModalController ($scope, $state, models, strings) { - const { instance, instanceGroup } = models; - const vm = this || {}; - - vm.setInstances = () => { - vm.instances = instance.get('results').map(instance => { - instance.isSelected = false; - return instance; - }); - }; - - vm.setRelatedInstances = () => { - vm.instanceGroupName = instanceGroup.get('name'); - vm.relatedInstances = instanceGroup.get('policy_instance_list'); - - vm.instances = instance.get('results').map(instance => { - instance.isSelected = vm.relatedInstances.includes(instance.hostname); - return instance; - }); - }; - - init(); - - function init() { - vm.strings = strings; - vm.instanceGroupId = instanceGroup.get('id'); - vm.defaultParams = { page_size: '10', order_by: 'hostname' }; - - if (vm.instanceGroupId === undefined) { - vm.setInstances(); - } else { - vm.setRelatedInstances(); - } - } - - $scope.$watch('vm.instances', function() { - vm.selectedRows = _.filter(vm.instances, 'isSelected'); - vm.deselectedRows = _.filter(vm.instances, 'isSelected', false); - }, true); - - vm.submit = () => { - $scope.$parent.$parent.$parent.state.policy_instance_list._value = vm.selectedRows; - $state.go("^.^"); - }; -} - -InstanceModalController.$inject = [ - '$scope', - '$state', - 'resolvedModels', - 'InstanceGroupsStrings' -]; - -export default InstanceModalController; diff --git a/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js new file mode 100644 index 0000000000..412cf1cf26 --- /dev/null +++ b/awx/ui/client/src/instance-groups/add-edit/instance-list-policy.directive.js @@ -0,0 +1,84 @@ +const templateUrl = require('./instance-list-policy.partial.html'); + +function InstanceListPolicyLink (scope, el, attrs, controllers) { + const instancePolicyController = controllers[0]; + const formController = controllers[1]; + const models = scope.$resolve.resolvedModels; + + instancePolicyController.init(formController, models); +} + + +function InstanceListPolicyController ($scope, $state, strings) { + const vm = this || {}; + let form; + let instance; + let instanceGroup; + + vm.init = (_form_, _models_) => { + form = _form_; + ({ instance, instanceGroup} = _models_); + + vm.strings = strings; + vm.instanceGroupId = instanceGroup.get('id'); + vm.defaultParams = { page_size: '10', order_by: 'hostname' }; + + if (vm.instanceGroupId === undefined) { + vm.setInstances(); + } else { + vm.setRelatedInstances(); + } + }; + + vm.setInstances = () => { + vm.instances = instance.get('results').map(instance => { + instance.isSelected = false; + return instance; + }); + }; + + vm.setRelatedInstances = () => { + vm.instanceGroupName = instanceGroup.get('name'); + vm.relatedInstances = instanceGroup.get('policy_instance_list'); + + vm.instances = instance.get('results').map(instance => { + instance.isSelected = vm.relatedInstances.includes(instance.hostname); + return instance; + }); + }; + + $scope.$watch('vm.instances', function() { + vm.selectedRows = _.filter(vm.instances, 'isSelected'); + vm.deselectedRows = _.filter(vm.instances, 'isSelected', false); + }, true); + + vm.submit = () => { + form.components + .filter(component => component.category === 'input') + .filter(component => component.state.id === 'policy_instance_list') + .map(component => { + component.state._value = vm.selectedRows; + }); + + $state.go("^.^"); + }; +} + +InstanceListPolicyController.$inject = [ + '$scope', + '$state', + 'InstanceGroupsStrings' +]; + +function instanceListPolicy () { + return { + restrict: 'E', + link: InstanceListPolicyLink, + controller: InstanceListPolicyController, + controllerAs: 'vm', + require: ['instanceListPolicy', '^atForm'], + templateUrl + }; +} + +export default instanceListPolicy; diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less index 383beb1b15..251124f6d2 100644 --- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less +++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less @@ -1,4 +1,4 @@ -capacity-adjuster { +.CapacityAdjuster { .at-InputSlider { align-items: center; margin-right: @at-space-4x; diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js index 4f7a52ed9d..cc7d634b88 100644 --- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js +++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.directive.js @@ -5,8 +5,9 @@ function CapacityAdjuster (templateUrl) { }, templateUrl: templateUrl('instance-groups/capacity-adjuster/capacity-adjuster'), restrict: 'E', + replace: true, link: function(scope) { - let adjustment_values = [{ + const adjustment_values = [{ label: 'CPU', value: scope.state.cpu_capacity, },{ @@ -22,10 +23,10 @@ function CapacityAdjuster (templateUrl) { const vm = this || {}; vm.slide = (state) => { - let data = { - "capacity_adjustment": state.capacity_adjustment + const data = { + "capacity_adjustment": `${state.capacity_adjustment}` }; - let req = { + const req = { method: 'PUT', url: state.url, data diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html index d4532debc1..ebadbe8461 100644 --- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html +++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html @@ -1,11 +1,13 @@ -
-

{{min_capacity.label}} {{min_capacity.value}}

- -

{{max_capacity.label}} {{max_capacity.value}}

+
+
+

{{min_capacity.label}} {{min_capacity.value}}

+ +

{{max_capacity.label}} {{max_capacity.value}}

+
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less index 5668eef8ad..658f3eca02 100644 --- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less +++ b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less @@ -1,6 +1,6 @@ capacity-bar { align-items: center; - color: @at-gray-70; + color: @at-color-body-background-dark; display: flex; font-size: @at-font-size; min-width: 100px; diff --git a/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js b/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js index a121b677d5..09d80f47f7 100644 --- a/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js +++ b/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js @@ -39,14 +39,14 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors }, true); vm.submit = () => { - let associate = vm.selectedRows + const associate = vm.selectedRows .map(instance => ({id: instance.id})); - let disassociate = vm.deselectedRows + const disassociate = vm.deselectedRows .map(instance => ({id: instance.id, disassociate: true})); - let all = associate.concat(disassociate); - let defers = all.map((data) => { - let config = { + const all = associate.concat(disassociate); + const defers = all.map((data) => { + const config = { url: `${vm.instanceGroupId}/instances/`, data: data }; diff --git a/awx/ui/client/src/instance-groups/instances/instances.controller.js b/awx/ui/client/src/instance-groups/instances/instances.controller.js index 3aed865513..5fc70fee6a 100644 --- a/awx/ui/client/src/instance-groups/instances/instances.controller.js +++ b/awx/ui/client/src/instance-groups/instances/instances.controller.js @@ -38,14 +38,14 @@ function InstancesController ($scope, $state, $http, models, Instance, strings, }; vm.toggle = (toggled) => { - let instance = _.find(vm.instances, 'id', toggled.id); + const instance = _.find(vm.instances, 'id', toggled.id); instance.enabled = !instance.enabled; - let data = { + const data = { "enabled": instance.enabled }; - let req = { + const req = { method: 'PUT', url: instance.url, data diff --git a/awx/ui/client/src/instance-groups/jobs/jobs.controller.js b/awx/ui/client/src/instance-groups/jobs/jobs.controller.js index f142a82abd..b62d3e502c 100644 --- a/awx/ui/client/src/instance-groups/jobs/jobs.controller.js +++ b/awx/ui/client/src/instance-groups/jobs/jobs.controller.js @@ -6,7 +6,7 @@ function InstanceGroupJobsController ($scope, $filter, $state, model, strings, j init(); function init(){ - let instance_group_id = instanceGroup.get('id'); + const instance_group_id = instanceGroup.get('id'); vm.strings = strings; vm.jobStrings = jobStrings; vm.queryset = { page_size: '10', order_by: '-finished', instance_group_id: instance_group_id }; diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js b/awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js index 169c230c21..9a57a23a23 100644 --- a/awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js +++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js @@ -1,6 +1,6 @@ export default ['$scope', 'InstanceGroupList', 'resolvedModels', 'Dataset', '$state', 'ComponentsStrings', 'ProcessErrors', function($scope, InstanceGroupList, resolvedModels, Dataset, $state, strings, ProcessErrors) { - let list = InstanceGroupList; + const list = InstanceGroupList; const vm = this; const { instanceGroup } = resolvedModels; diff --git a/awx/ui/client/src/instance-groups/main.js b/awx/ui/client/src/instance-groups/main.js index 8d51ee6540..1578656bde 100644 --- a/awx/ui/client/src/instance-groups/main.js +++ b/awx/ui/client/src/instance-groups/main.js @@ -7,8 +7,7 @@ import instanceGroupsModal from '../shared/instance-groups-multiselect/instance- import AddEditTemplate from './add-edit/add-edit-instance-groups.view.html'; import AddInstanceGroupController from './add-edit/add-instance-group.controller'; import EditInstanceGroupController from './add-edit/edit-instance-group.controller'; -import InstanceListPolicyTemplate from './add-edit/instance-list-policy.partial.html'; -import InstanceListPolicyController from './add-edit/instance-list-policy.controller.js'; +import InstanceListPolicy from './add-edit/instance-list-policy.directive.js'; import InstanceGroupsTemplate from './list/instance-groups-list.partial.html'; import InstanceGroupsListController from './list/instance-groups-list.controller'; @@ -147,9 +146,7 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) { }, views: { "modal": { - templateUrl: InstanceListPolicyTemplate, - controller: InstanceListPolicyController, - controllerAs: 'vm' + template: '', } }, resolvedModels: InstanceGroupsResolve @@ -195,9 +192,7 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) { }, views: { "modal": { - templateUrl: InstanceListPolicyTemplate, - controller: InstanceListPolicyController, - controllerAs: 'vm' + template: '', } }, resolvedModels: InstanceGroupsResolve @@ -328,6 +323,7 @@ angular.module(MODULE_NAME, []) .controller('InstanceGroupJobsListController', InstanceGroupJobsListController) .controller('InstanceListController', InstanceListController) .controller('InstanceJobsListController', InstanceJobsListController) + .directive('instanceListPolicy', InstanceListPolicy) .directive('instanceGroupsMultiselect', instanceGroupsMultiselect) .directive('instanceGroupsModal', instanceGroupsModal) .directive('capacityAdjuster', CapacityAdjuster)