Add expand/collapse toolbar to Jobs List view.

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

@@ -213,6 +213,16 @@ function ListJobsController (
                 vm.job_dataset = data;
             });
     }
+
+    vm.isCollapsed = true;
+
+    vm.onCollapse = () => {
+        vm.isCollapsed = true;
+    };
+
+    vm.onExpand = () => {
+        vm.isCollapsed = false;
+    };
 }
 
 ListJobsController.$inject = [

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

@@ -13,11 +13,18 @@
             search-bar-full-width="vm.isPortalMode">
         </smart-search>
     </div>
+    <at-list-toolbar
+        sort-only="false"
+        on-collapse="vm.onCollapse"
+        on-expand="vm.onExpand"
+        is-collapsed="vm.isCollapsed">
+    </at-list-toolbar>
     <at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
         <!-- TODO: implement resources are missing red indicator as present in mockup -->
-        <at-row ng-repeat="job in vm.jobs" id="job-{{ job.id }}">
+        <at-row ng-repeat="job in vm.jobs" id="job-{{ job.id }}" ng-class="vm.isCollapsed ? 'at-Row--collapsed' : ''">
             <div class="at-Row-items">
                 <!-- TODO: include workflow tab as well -->
+                <div class="at-Row-container">
                     <at-row-item
                         status="{{ job.status }}"
                         status-tip="{{ vm.strings.get('list.STATUS_TOOLTIP', job.status) }}"
@@ -26,28 +33,45 @@
                         header-tag="{{ vm.jobTypes[job.type] }}"
                         secondary-tag="{{ vm.getSliceJobDetails(job) }}">
                     </at-row-item>
-                <div class="at-Row--inline">
+                    <div class="at-Row-actions">
+                        <at-relaunch job="job" ng-show="job.summary_fields.user_capabilities.start">
+                        </at-relaunch>
+                        <at-row-action icon="fa-minus-circle" ng-click="vm.cancelJob(job)" tooltip="{{ vm.strings.get('listActions.CANCEL', vm.strings.get('list.JOB')) }}"
+                            ng-show="!vm.isPortalMode && (job.summary_fields.user_capabilities.start &&
+                                 (job.status === 'pending' ||
+                                 job.status === 'waiting' ||
+                                 job.status === 'running')) || ($root.user_is_superuser && job.type === 'system_job' &&
+                                 (job.status === 'pending' ||
+                                 job.status === 'waiting' ||
+                                 job.status === 'running'))">
+                        </at-row-action>
+                        <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)" tooltip="{{ vm.strings.get('listActions.DELETE', vm.strings.get('list.JOB')) }}"
+                            ng-show="!vm.isPortalMode && job.summary_fields.user_capabilities.delete &&
+                                 !(job.status === 'pending' ||
+                                 job.status === 'waiting' ||
+                                 job.status === 'running')">
+                        </at-row-action>
+                    </div>
+                </div>
+                <div class="at-Row-container--wrapped">
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
-                        value="{{ job.started | longDate }}"
+                        value="{{ job.started | longDate }}">
-                        inline="true">
                     </at-row-item>
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
-                        value="{{ job.finished | longDate }}"
+                        value="{{ job.finished | longDate }}">
-                        inline="true">
-                    </at-row-item>
-                </div>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
-                    value="{{ job.summary_fields.source_workflow_job.name }}"
-                    value-link="/#/workflows/{{ job.summary_fields.source_workflow_job.id }}">
                     </at-row-item>
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_LAUNCHED_BY') }}"
                         value="{{ job.summary_fields.created_by.username }}"
                         value-link="/#/users/{{ job.summary_fields.created_by.id }}">
                     </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
+                        value="{{ job.summary_fields.source_workflow_job.name }}"
+                        value-link="/#/workflows/{{ job.summary_fields.source_workflow_job.id }}">
+                    </at-row-item>
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_JOB_TEMPLATE') }}"
                         value="{{ job.summary_fields.job_template.name }}"
@@ -63,6 +87,8 @@
                         value="{{ job.summary_fields.project.name }}"
                         value-link="/#/projects/{{ job.summary_fields.project.id }}">
                     </at-row-item>
+                </div>
+                <div class="at-Row-container--wrapped">
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                         tag-values="job.summary_fields.credentials"
@@ -72,27 +98,6 @@
                     <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
                     </labels-list>
                 </div>
-            <div class="at-Row-actions">
-                <at-relaunch job="job"
-                    ng-show="job.summary_fields.user_capabilities.start">
-                </at-relaunch>
-                <at-row-action icon="fa-minus-circle" ng-click="vm.cancelJob(job)"
-                    tooltip="{{ vm.strings.get('listActions.CANCEL', vm.strings.get('list.JOB')) }}"
-                    ng-show="!vm.isPortalMode && (job.summary_fields.user_capabilities.start &&
-                             (job.status === 'pending' ||
-                             job.status === 'waiting' ||
-                             job.status === 'running')) || ($root.user_is_superuser && job.type === 'system_job' &&
-                             (job.status === 'pending' ||
-                             job.status === 'waiting' ||
-                             job.status === 'running'))">
-                </at-row-action>
-                <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)"
-                    tooltip="{{ vm.strings.get('listActions.DELETE', vm.strings.get('list.JOB')) }}"
-                    ng-show="!vm.isPortalMode && job.summary_fields.user_capabilities.delete &&
-                             !(job.status === 'pending' ||
-                             job.status === 'waiting' ||
-                             job.status === 'running')">
-                </at-row-action>
             </div>
         </at-row>
     </at-list>

awx/ui/client/lib/components/index.js

@@ -34,6 +34,7 @@ import tab from '~components/tabs/tab.directive';
 import tabGroup from '~components/tabs/group.directive';
 import tag from '~components/tag/tag.directive';
 import toggleTag from '~components/toggle-tag/toggle-tag.directive';
+import toolbar from '~components/list/list-toolbar.directive';
 import topNavItem from '~components/layout/top-nav-item.directive';
 import truncate from '~components/truncate/truncate.directive';
 import atCodeMirror from '~components/code-mirror';
@@ -69,6 +70,7 @@ angular
     .component('atLaunchTemplate', launchTemplate)
     .directive('atLayout', layout)
     .directive('atList', list)
+    .directive('atListToolbar', toolbar)
     .component('atRelaunch', relaunch)
     .directive('atRow', row)
     .directive('atRowItem', rowItem)