Merge pull request #3502 from marshmalien/feat-toolbar-sort-instance-modal-list

Feat toolbar sort instance modal list

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

awx/ui/client/lib/components/list/row-item.directive.js

@@ -18,7 +18,6 @@ function atRowItem () {
             statusTip: '@',
             statusClick: '&?',
             labelValue: '@',
-            labelLink: '@',
             labelState: '@',
             value: '@',
             valueLink: '@',

awx/ui/client/lib/components/list/row-item.partial.html

@@ -32,9 +32,6 @@
         <div class="at-RowItem-tag at-RowItem-tag--secondary" ng-if="secondaryTag">
             {{ secondaryTag }}
         </div>
-        <div class="at-RowItem-label" ng-if="labelValue && labelLink">
-            <a ng-href="{{ labelLink }}">{{ labelValue }}</a>
-        </div>
         <div class="at-RowItem-label" ng-if="labelValue && !labelLink && !labelState">
             {{ labelValue }}
         </div>

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

@@ -2,6 +2,7 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
     const { instanceGroup } = models;
     const vm = this || {};
     let relatedInstanceIds = [];
+    let paginateQuerySet = {};
 
     function setRelatedInstances () {
         vm.relatedInstances = instanceGroup.get('related.instances.results');
@@ -21,11 +22,9 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
         vm.instanceGroupId = instanceGroup.get('id');
         vm.instanceGroupName = instanceGroup.get('name');
 
-        vm.querySet = $state.params.instance_search;
-
         vm.list = {
             name: 'instances',
-            iterator: 'instance',
+            iterator: 'add_instance',
             basePath: `/api/v2/instances/`
         };
 
@@ -33,14 +32,51 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
         vm.instance_dataset = Dataset.data;
 
         setRelatedInstances();
-
-        $scope.$watch('vm.instances', function() {
-            angular.forEach(vm.instances, function(instance) {
-                instance.isSelected = _.filter(vm.selectedRows, { 'id': instance.id }).length > 0;
-            });
-        });
     }
 
+    const toolbarSortDefault = {
+      label: `${strings.get('sort.NAME_ASCENDING')}`,
+      value: 'hostname'
+    };
+
+    vm.toolbarSortValue = toolbarSortDefault;
+    vm.toolbarSortOptions = [
+        toolbarSortDefault,
+        {
+            label: `${strings.get('sort.NAME_DESCENDING')}`,
+            value: '-hostname'
+        }
+    ];
+
+    const removeStateParamsListener = $scope.$watchCollection('$state.params', () => {
+        setToolbarSort();
+    });
+
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'add_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.add_instance_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        $state.go('.', {
+            add_instance_search: queryParams
+        }, { notify: false, location: 'replace' });
+    };
+
     vm.submit = () => {
         Wait('start');
         const selectedRowIds = vm.selectedRows.map(instance => instance.id);
@@ -97,8 +133,22 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
             row.isSelected = true;
             vm.selectedRows.push(row);
         }
-
     };
+
+    const removeUpdateDatasetListener = $scope.$on('updateDataset', (e, dataset, queryset) => {
+        vm.instances = dataset.results;
+        vm.instance_dataset = dataset;
+        paginateQuerySet = queryset;
+
+        angular.forEach(vm.instances, function(instance) {
+            instance.isSelected = _.filter(vm.selectedRows, { 'id': instance.id }).length > 0;
+        });
+    });
+
+    $scope.$on('$destroy', function() {
+        removeUpdateDatasetListener();
+        removeStateParamsListener();
+    });
 }
 
 InstanceModalController.$inject = [

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

@@ -18,16 +18,21 @@
                     class="at-List-search"
                     django-model="instances"
                     base-path="{{vm.list.basePath}}"
-                    iterator="instance"
+                    iterator="add_instance"
                     list="vm.list"
                     collection="vm.instances"
                     dataset="vm.instance_dataset"
                     search-tags="vm.searchTags"
-                    default-params="vm.querySet"
-                    query-set="vm.querySet"
                     search-bar-full-width="true">
                 </smart-search>
             </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)}">
@@ -51,9 +56,8 @@
             <paginate
                 collection="vm.instances"
                 dataset="vm.instance_dataset"
-                iterator="instance"
+                iterator="add_instance"
-                base-path="{{vm.list.basePath}}"
+                base-path="{{vm.list.basePath}}">
-                query-set="vm.querySet">
             </paginate>
             <div class="at-ActionGroup">
                 <div class="pull-right">

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

@@ -1,4 +1,4 @@
-function InstancesController ($scope, $state, $http, models, strings, Dataset, ProcessErrors) {
+function InstancesController ($scope, $state, $http, $transitions, models, strings, Dataset, ProcessErrors) {
     const { instanceGroup } = models;
     const vm = this || {};
     let paginateQuerySet = {};
@@ -21,6 +21,7 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
         value: 'hostname'
     };
 
+    vm.toolbarSortValue = toolbarSortDefault;
     vm.toolbarSortOptions = [
         toolbarSortDefault,
         {
@@ -29,9 +30,7 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
         }
     ];
 
-    vm.toolbarSortValue = toolbarSortDefault;
+    const removeStateParamsListener = $scope.$watchCollection('$state.params', () => {
-
-    $scope.$watchCollection('$state.params', () => {
         setToolbarSort();
     });
 
@@ -124,17 +123,32 @@ function InstancesController ($scope, $state, $http, models, strings, Dataset, P
         return id === selected;
     };
 
-    $scope.$on('updateDataset', (e, dataset, queryset) => {
+    const removeUpdateDatasetListener = $scope.$on('updateDataset', (e, dataset, queryset) => {
         vm.instances = dataset.results;
         vm.instance_dataset = dataset;
         paginateQuerySet = queryset;
     });
+
+    const removeStateChangeListener = $transitions.onSuccess({}, function(trans) {
+        if (trans.to().name === 'instanceGroups.instances.modal.add') {
+            removeUpdateDatasetListener();
+            removeStateChangeListener();
+            removeStateParamsListener();
+        }
+    });
+
+    $scope.$on('$destroy', function() {
+        removeUpdateDatasetListener();
+        removeStateChangeListener();
+        removeStateParamsListener();
+    });
 }
 
 InstancesController.$inject = [
     '$scope',
     '$state',
     '$http',
+    '$transitions',
     'resolvedModels',
     'InstanceGroupsStrings',
     'Dataset',

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

@@ -51,7 +51,7 @@
                     <div class="at-Row--inline">
                         <at-row-item
                             label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INSTANCES') }}"
-                            label-link="/#/instance_groups/{{ instance_group.id }}/instances"
+                            label-state="instanceGroups.instances({instance_group_id: {{ instance_group.id }}})"
                             value="{{ instance_group.instances }}"
                             inline="true"
                             badge="true">

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

@@ -183,6 +183,7 @@ function InstanceGroupsRun ($stateExtender, strings) {
     $stateExtender.addState({
         name: 'instanceGroups.instances',
         url: '/:instance_group_id/instances',
+        searchPrefix: 'instance',
         ncyBreadcrumb: {
             parent: 'instanceGroups.edit',
             label: strings.get('state.INSTANCES_BREADCRUMB_LABEL')
@@ -230,11 +231,13 @@ function InstanceGroupsRun ($stateExtender, strings) {
 
     $stateExtender.addState({
         name: 'instanceGroups.instances.modal.add',
+        url: '/add',
         ncyBreadcrumb: {
             skip: true,
         },
+        searchPrefix: 'add_instance',
         params: {
-            instance_search: {
+            add_instance_search: {
                 value: {
                     page_size: '10',
                     order_by: 'hostname'
@@ -254,7 +257,7 @@ function InstanceGroupsRun ($stateExtender, strings) {
             Dataset: ['GetBasePath', 'QuerySet', '$stateParams',
                 function(GetBasePath, qs, $stateParams) {
                     let path = `${GetBasePath('instances')}`;
-                    return qs.search(path, $stateParams[`instance_search`]);
+                    return qs.search(path, $stateParams[`add_instance_search`]);
                 }
             ]
         }