From 77334af55a9c915595d7e820c352f7c4b90be474 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 30 Jul 2018 09:45:15 -0400
Subject: [PATCH] Fix instance modal pagination and search

---
 .../instances/instance-modal.controller.js    | 34 +++++++------------
 .../instances/instance-modal.partial.html     | 11 ++++--
 .../instances/instances-list.partial.html     |  2 +-
 .../instances/instances.controller.js         |  5 +--
 awx/ui/client/src/instance-groups/main.js     | 21 ++++++++++--
 5 files changed, 41 insertions(+), 32 deletions(-)

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 93400a8ad8..b1fddd782e 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
@@ -1,27 +1,17 @@
-function InstanceModalController ($scope, $state, models, strings, ProcessErrors, Wait) {
-    const { instance, instanceGroup } = models;
+function InstanceModalController ($scope, $state, Dataset, models, strings, ProcessErrors, Wait) {
+    const { 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;
-        });
-    };
-
-    vm.setRelatedInstances = () => {
-        vm.instanceGroupName = instanceGroup.get('name');
+    function setRelatedInstances () {
         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 = { order_by: 'hostname', page_size: '5' };
+        vm.querySet = $state.params.instance_search;
 
         vm.list = {
             name: 'instances',
@@ -39,11 +29,10 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
             basePath: `/api/v2/instances/`
         };
 
-        if (vm.instanceGroupId === undefined) {
-            vm.setInstances();
-        } else {
-            vm.setRelatedInstances();
-        }
+        vm.instances = Dataset.data.results;
+        vm.instance_dataset = Dataset.data;
+
+        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',
diff --git a/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html b/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
index bc0c2ec263..12179cfa28 100644
--- a/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
+++ b/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"
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index b4321f1b8f..ba13789244 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/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') }}"
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 6b3e58e3fd..0c9e82228a 100644
--- a/awx/ui/client/src/instance-groups/instances/instances.controller.js
+++ b/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 = {
diff --git a/awx/ui/client/src/instance-groups/main.js b/awx/ui/client/src/instance-groups/main.js
index b27ddf4518..9a8c5799aa 100644
--- a/awx/ui/client/src/instance-groups/main.js
+++ b/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);