Add sort and pagination to instances list

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

@@ -16,7 +16,7 @@
                 iterator="instance"
                 list="vm.list"
                 collection="vm.instances"
-                dataset="vm.dataset"
+                dataset="vm.instance_dataset"
                 search-tags="vm.searchTags">
             </smart-search>
 
@@ -34,6 +34,13 @@
                 <div ui-view="modal"></div>
             </div>
         </div>
+        <at-list-toolbar
+            ng-if="vm.instances.length > 0"
+            sort-only="true"
+            sort-value="vm.toolbarSortValue"
+            sort-options="vm.toolbarSortOptions"
+            on-sort="vm.onToolbarSort">
+        </at-list-toolbar>
         <at-list results='vm.instances'>
             <at-row ng-repeat="instance in vm.instances"
                 ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
@@ -84,4 +91,10 @@
             </at-row>
         </at-list>
     </at-panel-body>
+    <paginate
+        collection="vm.instances"
+        dataset="vm.instance_dataset"
+        iterator="instance"
+        base-path="{{vm.list.basePath}}">
+    </paginate>
 </at-panel>

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

@@ -1,26 +1,65 @@
 function InstancesController ($scope, $state, $http, models, strings, Dataset, ProcessErrors) {
     const { instanceGroup } = models;
     const vm = this || {};
+    let paginateQuerySet = {};
     vm.strings = strings;
     vm.panelTitle = instanceGroup.get('name');
     vm.instance_group_id = instanceGroup.get('id');
     vm.policy_instance_list = instanceGroup.get('policy_instance_list');
     vm.isSuperuser = $scope.$root.user_is_superuser;
 
+    vm.list = {
+        name: 'instances',
+        iterator: 'instance',
+        basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
+    };
+    vm.instance_dataset = Dataset.data;
+    vm.instances = Dataset.data.results;
 
-    init();
+    const toolbarSortDefault = {
+        label: `${strings.get('sort.NAME_ASCENDING')}`,
+        value: 'hostname'
+    };
 
-    function init() {
+    vm.toolbarSortOptions = [
-        vm.list = {
+        toolbarSortDefault,
-            name: 'instances',
+        {
-            iterator: 'instance',
+            label: `${strings.get('sort.NAME_DESCENDING')}`,
-            basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
+            value: '-hostname'
-        };
+        }
+    ];
 
-        vm.dataset = Dataset.data;
+    vm.toolbarSortValue = toolbarSortDefault;
-        vm.instances = instanceGroup.get('related.instances.results');
+
+    $scope.$watchCollection('$state.params', () => {
+        setToolbarSort();
+    });
+
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'instance_search.order_by');
+        const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
+        if (sortValue) {
+            vm.toolbarSortValue = sortValue;
+        } else {
+            vm.toolbarSortValue = toolbarSortDefault;
+        }
     }
 
+    vm.onToolbarSort = (sort) => {
+        vm.toolbarSortValue = sort;
+
+        const queryParams = Object.assign(
+            {},
+            $state.params.instance_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        $state.go('.', {
+            instance_search: queryParams
+        }, { notify: false, location: 'replace' });
+    };
+
     vm.tab = {
         details: {
             _go: 'instanceGroups.edit',
@@ -84,6 +123,12 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
         let selected = parseInt($state.params.instance_id);
         return id === selected;
     };
+
+    $scope.$on('updateDataset', (e, dataset, queryset) => {
+        vm.instances = dataset.results;
+        vm.instance_dataset = dataset;
+        paginateQuerySet = queryset;
+    });
 }
 
 InstancesController.$inject = [

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

@@ -190,7 +190,8 @@ function InstanceGroupsRun ($stateExtender, strings) {
         params: {
             instance_search: {
                 value: {
-                    order_by: 'hostname'
+                    order_by: 'hostname',
+                    page_size: '10'
                 },
                 dynamic: true
             }