Add expand/collapse toolbar to Jobs List view.

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

@@ -132,11 +132,11 @@ function ListJobsController (
                     let reloadListStateParams = null;
 
                     if (vm.jobs.length === 1 && $state.params.job_search &&
-                    _.has($state, 'params.job_search.page') &&
-                    $state.params.job_search.page !== '1') {
+                        _.has($state, 'params.job_search.page') &&
+                        $state.params.job_search.page !== '1') {
                         reloadListStateParams = _.cloneDeep($state.params);
                         reloadListStateParams.job_search.page =
-                        (parseInt(reloadListStateParams.job_search.page, 10) - 1).toString();
+                            (parseInt(reloadListStateParams.job_search.page, 10) - 1).toString();
                     }
 
                     $state.go('.', reloadListStateParams, { reload: true });
@@ -173,8 +173,8 @@ function ListJobsController (
                     let reloadListStateParams = null;
 
                     if (vm.jobs.length === 1 && $state.params.job_search &&
-                    !_.isEmpty($state.params.job_search.page) &&
-                    $state.params.job_search.page !== '1') {
+                        !_.isEmpty($state.params.job_search.page) &&
+                        $state.params.job_search.page !== '1') {
                         const page = `${(parseInt(reloadListStateParams
                             .job_search.page, 10) - 1)}`;
                         reloadListStateParams = _.cloneDeep($state.params);
@@ -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,86 +13,91 @@
             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 -->
-                <at-row-item
-                    status="{{ job.status }}"
-                    status-tip="{{ vm.strings.get('list.STATUS_TOOLTIP', job.status) }}"
-                    header-value="{{ job.id }} - {{ job.name }}"
-                    header-state="{{ vm.getSref(job) }}"
-                    header-tag="{{ vm.jobTypes[job.type] }}"
-                    secondary-tag="{{ vm.getSliceJobDetails(job) }}">
-                </at-row-item>
-                <div class="at-Row--inline">
+                <div class="at-Row-container">
+                    <at-row-item
+                        status="{{ job.status }}"
+                        status-tip="{{ vm.strings.get('list.STATUS_TOOLTIP', job.status) }}"
+                        header-value="{{ job.id }} - {{ job.name }}"
+                        header-state="{{ vm.getSref(job) }}"
+                        header-tag="{{ vm.jobTypes[job.type] }}"
+                        secondary-tag="{{ vm.getSliceJobDetails(job) }}">
+                    </at-row-item>
+                    <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 }}"
-                        inline="true">
+                        value="{{ job.started | longDate }}">
                     </at-row-item>
                     <at-row-item
                         label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
-                        value="{{ job.finished | longDate }}"
-                        inline="true">
+                        value="{{ job.finished | longDate }}">
+                    </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 }}"
+                        value-link="/#/templates/job_template/{{ job.summary_fields.job_template.id }}">
+                    </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
+                        value="{{ job.summary_fields.inventory.name }}"
+                        value-link="/#/inventories/{{job.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ job.summary_fields.inventory.id }}">
+                    </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
+                        value="{{ job.summary_fields.project.name }}"
+                        value-link="/#/projects/{{ job.summary_fields.project.id }}">
                     </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_JOB_TEMPLATE') }}"
-                    value="{{ job.summary_fields.job_template.name }}"
-                    value-link="/#/templates/job_template/{{ job.summary_fields.job_template.id }}">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
-                    value="{{ job.summary_fields.inventory.name }}"
-                    value-link="/#/inventories/{{job.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ job.summary_fields.inventory.id }}">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
-                    value="{{ job.summary_fields.project.name }}"
-                    value-link="/#/projects/{{ job.summary_fields.project.id }}">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
-                    tag-values="job.summary_fields.credentials"
-                    tags-are-creds="true">
-                    <at-toggle-tag ng-init="credTags=vm.buildCredentialTags(job.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
-                </at-row-item>
-                <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 class="at-Row-container--wrapped">
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
+                        tag-values="job.summary_fields.credentials"
+                        tags-are-creds="true">
+                        <at-toggle-tag ng-init="credTags=vm.buildCredentialTags(job.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
+                    </at-row-item>
+                    <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
+                    </labels-list>
+                </div>
             </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)