Add toolbar sort to Jobs list

awx/ui/client/features/jobs/jobs.strings.js

@@ -4,6 +4,13 @@ function JobsStrings (BaseString) {
     const { t } = this;
     const ns = this.jobs;
 
+    ns.sort = {
+        NAME_ASCENDING: t.s('Name (Ascending)'),
+        NAME_DESCENDING: t.s('Name (Descending)'),
+        START_TIME: t.s('Start Time'),
+        FINISH_TIME: t.s('Finish Time')
+    };
+
     ns.list = {
         PANEL_TITLE: t.s('JOBS'),
         ROW_ITEM_LABEL_STARTED: t.s('Started'),

awx/ui/client/features/jobs/jobsList.controller.js

@@ -28,6 +28,7 @@ function ListJobsController (
     // smart-search
     const name = 'jobs';
     const iterator = 'job';
+    let paginateQuerySet = null;
 
     let launchModalOpen = false;
     let refreshAfterLaunchClose = false;
@@ -40,6 +41,63 @@ function ListJobsController (
     vm.job_dataset = Dataset.data;
     vm.jobs = Dataset.data.results;
 
+    $scope.$watch('$state.params', () => {
+        setToolbarSort();
+    }, true);
+
+    function setToolbarSort () {
+        const orderByValue = _.get($state.params, 'job_search.order_by');
+        const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
+        if (sortValue) {
+            vm.toolbarSortValue = sortValue;
+        } else {
+            vm.toolbarSortValue = toolbarSortDefault;
+        }
+    }
+
+    const toolbarSortDefault = {
+        label: `${strings.get('sort.FINISH_TIME')}`,
+        value: '-finished'
+    };
+
+    vm.toolbarSortOptions = [
+        { label: `${strings.get('sort.NAME_ASCENDING')}`, value: 'name' },
+        { label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' },
+        { label: `${strings.get('sort.START_TIME')}`, value: 'finished' },
+        toolbarSortDefault
+    ];
+
+    vm.toolbarSortValue = toolbarSortDefault;
+
+    // Temporary hack to retrieve $scope.querySet from the paginate directive.
+    // Remove this event listener once the page and page_size params
+    // are represented in the url.
+    $scope.$on('updateDataset', (event, dataset, queryset) => {
+        paginateQuerySet = queryset;
+    });
+
+    vm.onToolbarSort = (sort) => {
+        vm.toolbarSortValue = sort;
+
+        const queryParams = Object.assign(
+            {},
+            $state.params.job_search,
+            paginateQuerySet,
+            { order_by: sort.value }
+        );
+
+        // Update URL with params
+        $state.go('.', {
+            job_search: queryParams
+        }, { notify: false, location: 'replace' });
+
+        qs.search(SearchBasePath, queryParams)
+            .then(({ data }) => {
+                vm.jobs = data.results;
+                vm.job_dataset = data;
+            });
+    };
+
     $scope.$watch('vm.job_dataset.count', () => {
         $scope.$emit('updateCount', vm.job_dataset.count, 'jobs');
     });

awx/ui/client/features/jobs/jobsList.view.html

@@ -14,10 +14,13 @@
     </div>
     <at-list-toolbar
         ng-if="vm.jobs.length > 0"
-        sort-only="false"
-        on-collapse="vm.onCollapse"
         on-expand="vm.onExpand"
-        is-collapsed="vm.isCollapsed">
+        on-collapse="vm.onCollapse"
+        is-collapsed="vm.isCollapsed"
+        sort-only="false"
+        sort-value="vm.toolbarSortValue"
+        sort-options="vm.toolbarSortOptions"
+        on-sort="vm.onToolbarSort">
     </at-list-toolbar>
     <at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
         <!-- TODO: implement resources are missing red indicator as present in mockup -->