Merge pull request #2707 from marshmalien/fix/instance-modal-pagination

Fix instance modal pagination and smart-search

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

@@ -1,27 +1,17 @@
-function InstanceModalController ($scope, $state, models, strings, ProcessErrors, Wait) {
+function InstanceModalController ($scope, $state, Dataset, models, strings, ProcessErrors, Wait) {
-    const { instance, instanceGroup } = models;
+    const { instanceGroup } = models;
     const vm = this || {};
     let relatedInstanceIds = [];
 
-    vm.setInstances = () => {
+    function setRelatedInstances () {
-        vm.relatedInstances = [];
-        vm.selectedRows = [];
-        vm.instances = instance.get('results').map(instance => {
-            instance.isSelected = false;
-            return instance;
-        });
-    };
-
-    vm.setRelatedInstances = () => {
-        vm.instanceGroupName = instanceGroup.get('name');
         vm.relatedInstances = instanceGroup.get('related.instances.results');
         vm.selectedRows = _.cloneDeep(vm.relatedInstances);
         relatedInstanceIds = vm.relatedInstances.map(instance => instance.id);
-        vm.instances = instance.get('results').map(instance => {
+        vm.instances = vm.instances.map(instance => {
             instance.isSelected = relatedInstanceIds.includes(instance.id);
             return instance;
         });
-    };
+    }
 
     init();
 
@@ -29,9 +19,9 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
         vm.strings = strings;
         vm.panelTitle = strings.get('instance.PANEL_TITLE');
         vm.instanceGroupId = instanceGroup.get('id');
+        vm.instanceGroupName = instanceGroup.get('name');
 
-        vm.dataset = instance.get();
+        vm.querySet = $state.params.instance_search;
-        vm.querySet = { order_by: 'hostname', page_size: '5' };
 
         vm.list = {
             name: 'instances',
@@ -39,11 +29,10 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
             basePath: `/api/v2/instances/`
         };
 
-        if (vm.instanceGroupId === undefined) {
+        vm.instances = Dataset.data.results;
-            vm.setInstances();
+        vm.instance_dataset = Dataset.data;
-        } else {
+
-            vm.setRelatedInstances();
+        setRelatedInstances();
-        }
 
         $scope.$watch('vm.instances', function() {
             angular.forEach(vm.instances, function(instance) {
@@ -115,6 +104,7 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
 InstanceModalController.$inject = [
     '$scope',
     '$state',
+    'Dataset',
     'resolvedModels',
     'InstanceGroupsStrings',
     'ProcessErrors',

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

@@ -21,8 +21,9 @@
                     iterator="instance"
                     list="vm.list"
                     collection="vm.instances"
-                    dataset="vm.dataset"
+                    dataset="vm.instance_dataset"
                     search-tags="vm.searchTags"
+                    default-params="vm.querySet"
                     query-set="vm.querySet"
                     search-bar-full-width="true">
                 </smart-search>
@@ -46,8 +47,14 @@
                         </at-row-item>
                     </div>
                 </at-row>
-
             </at-list>
+            <paginate
+                collection="vm.instances"
+                dataset="vm.instance_dataset"
+                iterator="instance"
+                base-path="{{vm.list.basePath}}"
+                query-set="vm.querySet">
+            </paginate>
             <div class="at-ActionGroup">
                 <div class="pull-right">
                     <button class="btn at-ButtonHollow--default"

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

@@ -59,7 +59,7 @@
                 <div class="at-Row-items at-Row-items--instances">
                     <at-row-item
                         header-value="{{ instance.hostname }}"
-                        header-tag="{{ instance.is_manual ? vm.strings.get('list.MANUAL') : '' }}">
+                        header-tag="{{ instance.managed_by_policy ? '' : vm.strings.get('list.MANUAL') }}">
                     </at-row-item>
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"

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

@@ -7,10 +7,6 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
     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 = instance.managed_by_policy === false;
-        return instance;
-    });
 
     init();
 
@@ -22,6 +18,7 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
         };
 
         vm.dataset = Dataset.data;
+        vm.instances = instanceGroup.get('related.instances.results');
     }
 
     vm.tab = {

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

@@ -46,8 +46,6 @@ function InstanceGroupsResolve ($q, $stateParams, InstanceGroup, Instance) {
     promises.instanceGroup = new InstanceGroup(['get', 'options'], [instanceGroupId, instanceGroupId])
             .then((instanceGroup) =>  instanceGroup.extend('get', 'jobs', {params: {page_size: "10", order_by: "-finished"}}))
             .then((instanceGroup) =>  instanceGroup.extend('get', 'instances'));
-    promises.instance = new Instance('get');
-
 
     return $q.all(promises)
         .then(models => models);
@@ -226,6 +224,15 @@ function InstanceGroupsRun ($stateExtender, strings) {
         ncyBreadcrumb: {
             skip: true,
         },
+        params: {
+            instance_search: {
+                value: {
+                    page_size: '10',
+                    order_by: 'hostname'
+                },
+                dynamic: true
+            }
+        },
         views: {
             "modal": {
                 templateUrl: InstanceModalTemplate,
@@ -233,7 +240,15 @@ function InstanceGroupsRun ($stateExtender, strings) {
                 controllerAs: 'vm'
             }
         },
-        resolvedModels: InstanceGroupsResolve
+        resolve: {
+            resolvedModels: InstanceGroupsResolve,
+            Dataset: ['GetBasePath', 'QuerySet', '$stateParams',
+                function(GetBasePath, qs, $stateParams) {
+                    let path = `${GetBasePath('instances')}`;
+                    return qs.search(path, $stateParams[`instance_search`]);
+                }
+            ]
+        }
     });
 
     $stateExtender.addState(instanceJobsRoute);