Merge pull request #2336 from marshmalien/1723-ux-manual-instances

Remove instance policy list lookup from instance group form

awx/ui/client/src/instance-groups/add-edit/add-edit-instance-groups.view.html

@@ -18,9 +18,6 @@
 
             <at-input-slider col="4" tab="3" state="vm.form.policy_instance_percentage"></at-input-slider>
 
-            <at-input-lookup col="4" tab="4" state="vm.form.policy_instance_list"></at-input-lookup>
-            <div ui-view="modal"></div>
-
             <at-action-group col="12" pos="right">
                 <at-form-action type="cancel" to="instanceGroups"></at-form-action>
                 <at-form-action type="save"></at-form-action>

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

@@ -1,6 +1,6 @@
-function AddController ($scope, $state, models, strings) {
+function AddController ($state, models, strings) {
     const vm = this || {};
-    const { instanceGroup, instance } = models;
+    const { instanceGroup } = models;
 
     vm.mode = 'add';
     vm.strings = strings;
@@ -17,15 +17,7 @@ function AddController ($scope, $state, models, strings) {
     // Default policy instance percentage value is 0
     vm.form.policy_instance_percentage._value = 0;
 
-    vm.form.policy_instance_list._lookupTags = true;
-    vm.form.policy_instance_list._model = instance;
-    vm.form.policy_instance_list._placeholder = "Policy Instance List";
-    vm.form.policy_instance_list._resource = 'instances';
-    vm.form.policy_instance_list._route = 'instanceGroups.add.modal.instances';
-    vm.form.policy_instance_list._value = [];
-
     vm.form.save = data => {
-        data.policy_instance_list = data.policy_instance_list.map(instance => instance.hostname);
         return instanceGroup.request('post', { data });
     };
 
@@ -35,7 +27,6 @@ function AddController ($scope, $state, models, strings) {
 }
 
 AddController.$inject = [
-    '$scope',
     '$state',
     'resolvedModels',
     'InstanceGroupsStrings'

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

@@ -1,6 +1,6 @@
 function EditController ($rootScope, $state, models, strings) {
     const vm = this || {};
-    const { instanceGroup, instance } = models;
+    const { instanceGroup } = models;
 
     $rootScope.breadcrumb.instance_group_name = instanceGroup.get('name');
 
@@ -29,16 +29,8 @@ function EditController ($rootScope, $state, models, strings) {
     vm.form.disabled = !instanceGroup.has('options', 'actions.PUT');
 
     vm.form.name._disabled = instanceGroup.get('name') === 'tower';
-    vm.form.policy_instance_list._lookupTags = true;
-    vm.form.policy_instance_list._model = instance;
-    vm.form.policy_instance_list._placeholder = "Policy Instance List";
-    vm.form.policy_instance_list._resource = 'instances';
-    vm.form.policy_instance_list._route = 'instanceGroups.edit.modal.instances';
-    vm.form.policy_instance_list._value = instanceGroup.get('policy_instance_list');
 
     vm.form.save = data => {
-        instanceGroup.unset('policy_instance_list');
-        data.policy_instance_list = data.policy_instance_list.map(instance => instance.hostname || instance);
         return instanceGroup.request('put', { data });
     };
 

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

@@ -1,92 +0,0 @@
-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;
-    const Dataset = scope.$resolve.Dataset;
-
-    instancePolicyController.init(formController, models, Dataset);
-}
-
-function InstanceListPolicyController ($scope, $state, strings) {
-    const vm = this || {};
-    let form;
-    let instanceGroup;
-    vm.strings = strings;
-
-    vm.init = (_form_, _models_, Dataset) => {
-        form = _form_;
-        ({ instanceGroup } = _models_);
-
-        vm.instanceGroupId = instanceGroup.get('id');
-
-        $scope.list = {
-            name: 'instances',
-            iterator: 'instance'
-        };
-        $scope.instance_dataset = Dataset.data;
-        $scope.instances = Dataset.data.results;
-
-        if (vm.instanceGroupId === undefined) {
-            vm.setInstances();
-        } else {
-            vm.setRelatedInstances();
-        }
-    };
-
-    vm.setInstances = () => {
-        $scope.instances = $scope.instances.map(instance => {
-            instance.isSelected = false;
-            return instance;
-        });
-    };
-
-    vm.setRelatedInstances = () => {
-        vm.relatedInstances = instanceGroup.get('policy_instance_list');
-
-        $scope.instances = $scope.instances.map(instance => {
-            instance.isSelected = vm.relatedInstances.includes(instance.hostname);
-            return instance;
-        });
-    };
-
-    $scope.$watch('instances', function() {
-        vm.selectedRows = _.filter($scope.instances, 'isSelected');
-        vm.deselectedRows = _.filter($scope.instances, 'isSelected', false);
-     }, true);
-
-    vm.submit = () => {
-        form.components
-            .filter(component => component.category === 'input')
-            .filter(component => component.state.id === 'policy_instance_list')
-            .forEach(component => {
-                component.state._value = vm.selectedRows;
-            });
-
-        $state.go("^.^");
-    };
-
-    vm.dismiss = () => {
-        $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/add-edit/instance-list-policy.partial.html

@@ -1,61 +0,0 @@
-<div id="instance-modal" class="modal-dialog">
-    <div class="modal-content">
-        <div class="row at-Panel-headingRow">
-            <div class="col-xs-10">
-                <h3 class="at-Panel-headingTitle">{{:: vm.strings.get('instance.PANEL_TITLE') }}</h3>
-            </div>
-            <div class="col-xs-2">
-                <div class="at-Panel-dismiss">
-                    <i class="fa fa-times-circle fa-lg" ng-click="vm.dismiss()"></i>
-                </div>
-            </div>
-        </div>
-
-        <multi-select-preview selected-rows='vm.selectedRows' available-rows='instances'></multi-select-preview>
-        <at-panel-body>
-            <div class="at-List-toolbar">
-                <smart-search
-                    class="at-List-search"
-                    django-model="instances"
-                    base-path="instances"
-                    iterator="instance"
-                    list="list"
-                    dataset="instance_dataset"
-                    collection="collection"
-                    search-tags="searchTags"
-                    query-set="querySet">
-                </smart-search>
-            </div>
-            <at-list results='instances'>
-                <at-row ng-repeat="instance in instances"
-                    ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
-
-                    <input type="checkbox"
-                        class="at-Row-checkbox"
-                        ng-model="instance.isSelected"
-                        ng-checked="instance.isSelected"
-                        ng-attr-tabindex="{{ tab || undefined }}"
-                        ng-disabled="state._disabled" />
-
-                    <div class="at-Row-items" style="flex: 1">
-                        <at-row-item
-                            header-value="{{ instance.hostname }}">
-                        </at-row-item>
-                    </div>
-                </at-row>
-            </at-list>
-            <div class="at-ActionGroup">
-                <div class="pull-right">
-                    <button class="btn at-ButtonHollow--default"
-                        ng-click="$state.go('^.^')">
-                        {{:: vm.strings.get('CANCEL') }}
-                    </button>
-                    <button class="btn at-Button--success"
-                        ng-click="vm.submit()">
-                        {{:: vm.strings.get('SAVE') }}
-                    </button>
-                </div>
-            </div>
-        </at-panel-body>
-    </div>
-</div>

awx/ui/client/src/instance-groups/instance-groups.strings.js

@@ -12,6 +12,7 @@ function InstanceGroupsStrings (BaseString) {
     };
 
     ns.list = {
+        MANUAL: t.s('MANUAL'),
         PANEL_TITLE: t.s('INSTANCE GROUPS'),
         ROW_ITEM_LABEL_INSTANCES: t.s('Instances'),
         ROW_ITEM_LABEL_RUNNING_JOBS: t.s('Running Jobs'),

awx/ui/client/src/instance-groups/instances/instances-list.partial.html

@@ -59,7 +59,10 @@
                 </div>
 
                 <div class="at-Row-items at-Row-items--instances">
-                    <at-row-item header-value="{{ instance.hostname }}"></at-row-item>
+                    <at-row-item
+                        header-value="{{ instance.hostname }}"
+                        header-tag="{{ instance.is_manual ? vm.strings.get('list.MANUAL') : '' }}">
+                    </at-row-item>
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
                         label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}, job_search: {status__in: ['running,waiting']}})"

awx/ui/client/src/instance-groups/instances/instances.controller.js

@@ -1,12 +1,17 @@
-function InstancesController ($scope, $state, $http, models, Instance, strings, Dataset, ProcessErrors) {
+function InstancesController ($scope, $state, $http, models, strings, Dataset, ProcessErrors) {
     const { instanceGroup } = models;
     const vm = this || {};
     vm.strings = strings;
     vm.panelTitle = instanceGroup.get('name');
-    vm.instances = instanceGroup.get('related.instances.results');
     vm.instance_group_id = instanceGroup.get('id');
+    vm.policy_instance_list = instanceGroup.get('policy_instance_list');
     vm.isSuperuser = $scope.$root.user_is_superuser;
 
+    vm.instances = instanceGroup.get('related.instances.results').map(instance => {
+        instance.is_manual = vm.policy_instance_list.includes(instance.hostname);
+        return instance;
+    });
+
     init();
 
     function init() {
@@ -102,7 +107,6 @@ InstancesController.$inject = [
     '$state',
     '$http',
     'resolvedModels',
-    'InstanceModel',
     'InstanceGroupsStrings',
     'Dataset',
     'ProcessErrors'

awx/ui/client/src/instance-groups/main.js

@@ -7,7 +7,6 @@ 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 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';
@@ -138,32 +137,6 @@ function InstanceGroupsRun ($stateExtender, strings) {
         }
     });
 
-    $stateExtender.addState({
-        name: 'instanceGroups.add.modal',
-        abstract: true,
-        ncyBreadcrumb: {
-            skip: true,
-        },
-        views: {
-            "modal": {
-                template: `<div class="Modal-backdrop"></div>
-                <div class="Modal-holder" ui-view="modal" autoscroll="false"></div>`,
-            }
-        }
-    });
-
-    $stateExtender.addState({
-        name: 'instanceGroups.add.modal.instances',
-        ncyBreadcrumb: {
-            skip: true,
-        },
-        views: {
-            "modal": {
-                template: '<instance-list-policy></instance-list-policy>',
-            }
-        }
-    });
-
     $stateExtender.addState({
         name: 'instanceGroups.edit',
         route: '/:instance_group_id',
@@ -200,33 +173,6 @@ function InstanceGroupsRun ($stateExtender, strings) {
         }
     });
 
-
-    $stateExtender.addState({
-        name: 'instanceGroups.edit.modal',
-        abstract: true,
-        ncyBreadcrumb: {
-            skip: true,
-        },
-        views: {
-            "modal": {
-                template: `<div class="Modal-backdrop"></div>
-                <div class="Modal-holder" ui-view="modal" autoscroll="false"></div>`,
-            }
-        }
-    });
-
-    $stateExtender.addState({
-        name: 'instanceGroups.edit.modal.instances',
-        ncyBreadcrumb: {
-            skip: true,
-        },
-        views: {
-            "modal": {
-                template: '<instance-list-policy></instance-list-policy>',
-            }
-        }
-    });
-
     $stateExtender.addState({
         name: 'instanceGroups.instances',
         url: '/:instance_group_id/instances',
@@ -304,7 +250,6 @@ angular.module(MODULE_NAME, [])
     .factory('InstanceGroupList', list)
     .controller('InstanceGroupsListController', InstanceGroupsListController)
     .controller('InstanceListController', InstanceListController)
-    .directive('instanceListPolicy', InstanceListPolicy)
     .directive('instanceGroupsMultiselect', instanceGroupsMultiselect)
     .directive('instanceGroupsModal', instanceGroupsModal)
     .directive('capacityAdjuster', CapacityAdjuster)