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 ba13789244..197f15050d 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 @@ -16,7 +16,7 @@ iterator="instance" list="vm.list" collection="vm.instances" - dataset="vm.dataset" + dataset="vm.instance_dataset" search-tags="vm.searchTags"> @@ -34,6 +34,13 @@
+ + @@ -84,4 +91,10 @@ + + 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 2f956ae634..2db2eb6fc4 100644 --- a/awx/ui/client/src/instance-groups/instances/instances.controller.js +++ b/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.list = { - name: 'instances', - iterator: 'instance', - basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/` - }; + vm.toolbarSortOptions = [ + toolbarSortDefault, + { + label: `${strings.get('sort.NAME_DESCENDING')}`, + value: '-hostname' + } + ]; - vm.dataset = Dataset.data; - vm.instances = instanceGroup.get('related.instances.results'); + vm.toolbarSortValue = toolbarSortDefault; + + $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 = [ diff --git a/awx/ui/client/src/instance-groups/main.js b/awx/ui/client/src/instance-groups/main.js index 43b1b2719a..9c8328aea8 100644 --- a/awx/ui/client/src/instance-groups/main.js +++ b/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 }