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
}