Merge pull request #2338 from mabashian/instance-modal-search

Updates to instance list and instance modal search

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

@@ -1,8 +1,11 @@
 function InstanceModalController ($scope, $state, models, strings, ProcessErrors, Wait) {
     const { instance, instanceGroup } = models;
     const vm = this || {};
+    let relatedInstanceIds = [];
 
     vm.setInstances = () => {
+        vm.relatedInstances = [];
+        vm.selectedRows = [];
         vm.instances = instance.get('results').map(instance => {
             instance.isSelected = false;
             return instance;
@@ -12,9 +15,10 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
     vm.setRelatedInstances = () => {
         vm.instanceGroupName = instanceGroup.get('name');
         vm.relatedInstances = instanceGroup.get('related.instances.results');
-        vm.relatedInstanceIds = vm.relatedInstances.map(instance => instance.id);
+        vm.selectedRows = _.cloneDeep(vm.relatedInstances);
+        relatedInstanceIds = vm.relatedInstances.map(instance => instance.id);
         vm.instances = instance.get('results').map(instance => {
-            instance.isSelected = vm.relatedInstanceIds.includes(instance.id);
+            instance.isSelected = relatedInstanceIds.includes(instance.id);
             return instance;
         });
     };
@@ -26,24 +30,38 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
         vm.panelTitle = strings.get('instance.PANEL_TITLE');
         vm.instanceGroupId = instanceGroup.get('id');
 
+        vm.dataset = instance.get();
+        vm.querySet = { order_by: 'hostname', page_size: '5' };
+
+        vm.list = {
+            name: 'instances',
+            iterator: 'instance',
+            basePath: `/api/v2/instances/`
+        };
+
         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);
+        $scope.$watch('vm.instances', function() {
+            angular.forEach(vm.instances, function(instance) {
+                instance.isSelected = _.filter(vm.selectedRows, 'id', instance.id).length > 0;
+            });
+        });
+    }
 
     vm.submit = () => {
         Wait('start');
-        const associate = vm.selectedRows
-            .map(instance => ({id: instance.id}));
-        const disassociate = vm.deselectedRows
-            .map(instance => ({id: instance.id, disassociate: true}));
+        const selectedRowIds = vm.selectedRows.map(instance => instance.id);
+
+        const associate = selectedRowIds.filter(instanceId => {
+            return !relatedInstanceIds.includes(instanceId);
+        }).map(id => ({id}));
+        const disassociate = relatedInstanceIds.filter(instanceId => {
+            return !selectedRowIds.includes(instanceId);
+        }).map(id => ({id, disassociate: true}));
 
         const all = associate.concat(disassociate);
         const defers = all.map((data) => {
@@ -74,6 +92,24 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
     vm.dismiss = () => {
         $state.go('instanceGroups.instances');
     };
+
+    vm.toggleRow = (row) => {
+        if (row.isSelected) {
+            let matchingIndex;
+            angular.forEach(vm.selectedRows, function(value, index) {
+                if(row.id === vm.selectedRows[index].id) {
+                    matchingIndex = index;
+                }
+            });
+
+            vm.selectedRows.splice(matchingIndex, 1);
+            row.isSelected = false;
+        } else {
+            row.isSelected = true;
+            vm.selectedRows.push(row);
+        }
+
+    };
 }
 
 InstanceModalController.$inject = [

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

@@ -17,12 +17,13 @@
                 <smart-search
                     class="at-List-search"
                     django-model="instances"
-                    base-path="instances"
+                    base-path="{{vm.list.basePath}}"
                     iterator="instance"
-                    list="list"
-                    dataset="vm.instances"
-                    collection="collection"
-                    search-tags="searchTags">
+                    list="vm.list"
+                    collection="vm.instances"
+                    dataset="vm.dataset"
+                    search-tags="vm.searchTags"
+                    query-set="vm.querySet">
                 </smart-search>
             </div>
             <at-list results='vm.instances'>
@@ -32,10 +33,10 @@
                     <input type="checkbox"
                         class="at-Row-checkbox"
                         ng-class="{ 'at-Input--rejected': state.rejected }"
-                        ng-model="instance.isSelected"
                         ng-checked="instance.isSelected"
                         ng-attr-tabindex="{{ tab || undefined }}"
-                        ng-disabled="state._disabled" />
+                        ng-disabled="state._disabled"
+                        ng-click="vm.toggleRow(instance)" />
 
                     <div class="at-Row-items" style="flex: 1">
                         <at-row-item
@@ -60,4 +61,4 @@
             </div>
         </at-panel-body>
     </div>
-</div>
+</div>

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

@@ -14,12 +14,12 @@
             <smart-search
                 class="at-List-search"
                 django-model="instances"
-                base-path="{{list.basePath}}"
+                base-path="{{vm.list.basePath}}"
                 iterator="instance"
-                list="list"
-                dataset="instance_dataset"
-                collection="collection"
-                search-tags="searchTags">
+                list="vm.list"
+                collection="vm.instances"
+                dataset="vm.dataset"
+                search-tags="vm.searchTags">
             </smart-search>
 
             <div class="at-List-toolbarAction">

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

@@ -15,26 +15,13 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
     init();
 
     function init() {
-        $scope.list = {
+        vm.list = {
             name: 'instances',
             iterator: 'instance',
             basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
         };
 
-        $scope.collection = {
-            iterator: 'instance',
-            basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
-        };
-
-        $scope[`${$scope.list.iterator}_dataset`] = Dataset.data;
-        $scope[$scope.list.name] = $scope[`${$scope.list.iterator}_dataset`].results;
-        $scope.instances = vm.instances;
-
-        $scope.$on('updateDataset', function(e, dataset) {
-            $scope[`${$scope.list.iterator}_dataset`] = dataset;
-            $scope[$scope.list.name] = dataset.results;
-            vm.instances = dataset.results;
-        });
+        vm.dataset = Dataset.data;
     }
 
     vm.tab = {