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

awx/ui/client/src/instance-groups/add-edit/instance-list-policy.controller.js

@@ -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;

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;

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;

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 = {
+                const data = {
-                    "capacity_adjustment": state.capacity_adjustment
+                    "capacity_adjustment": `${state.capacity_adjustment}`
                 };
-                let req = {
+                const req = {
                     method: 'PUT',
                     url: state.url,
                     data

awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.partial.html

@@ -1,11 +1,13 @@
-<div class="at-InputSlider">
+<div class="CapacityAdjuster">
-    <p>{{min_capacity.label}} {{min_capacity.value}}</p>
+    <div class="at-InputSlider">
-        <input string-to-number
+        <p>{{min_capacity.label}} {{min_capacity.value}}</p>
-        type="range"
+            <input string-to-number
-        ng-model="state.capacity_adjustment"
+            type="range"
-        min="0"
+            ng-model="state.capacity_adjustment"
-        max="1"
+            min="0"
-        step="0.1"
+            max="1"
-        ng-change="vm.slide(state)"/>
+            step="0.1"
-    <p>{{max_capacity.label}} {{max_capacity.value}}</p>
+            ng-change="vm.slide(state)"/>
+        <p>{{max_capacity.label}} {{max_capacity.value}}</p>
+    </div>
 </div>

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;

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);
+        const all = associate.concat(disassociate);
-        let defers = all.map((data) => {
+        const defers = all.map((data) => {
-            let config = {
+            const config = {
                 url: `${vm.instanceGroupId}/instances/`,
                 data: data
             };

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

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 };

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;
 

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 InstanceListPolicy from './add-edit/instance-list-policy.directive.js';
-import InstanceListPolicyController from './add-edit/instance-list-policy.controller.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,
+                template: '<instance-list-policy></instance-list-policy>',
-                controller: InstanceListPolicyController,
-                controllerAs: 'vm'
             }
         },
         resolvedModels: InstanceGroupsResolve
@@ -195,9 +192,7 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) {
         },
         views: {
             "modal": {
-                templateUrl: InstanceListPolicyTemplate,
+                template: '<instance-list-policy></instance-list-policy>',
-                controller: InstanceListPolicyController,
-                controllerAs: 'vm'
             }
         },
         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)