Re-styling jobs page and hooking it up to /unified_jobs resource.

awx/ui/static/js/controllers/Jobs.js

@@ -79,7 +79,7 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea
             scope: completed_scope,
             list: CompletedJobsList,
             id: 'completed-jobs',
-            url: GetBasePath('unified_jobs') + '?status__in=(succesful,failed,error,canceled)'     ///static/sample/data/jobs/completed/data.json'
+            url: GetBasePath('unified_jobs') + '?or__status=successful&or__status=failed&or__status=error&or__status=canceled'
         });
         running_scope = $scope.$new();
         LoadScope({
@@ -95,7 +95,7 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea
             scope: queued_scope,
             list: QueuedJobsList,
             id: 'queued-jobs',
-            url: GetBasePath('unified_jobs') + '?status__in(pending,waiting,new)'              //'/static/sample/data/jobs/queued/data.json'
+            url: GetBasePath('unified_jobs') + '?or__status=pending&or__status=waiting$or__status=new'
         });
         scheduled_scope = $scope.$new();
         LoadScope({

awx/ui/static/js/lists/CompletedJobs.js

@@ -28,6 +28,23 @@ angular.module('CompletedJobsDefinition', [])
                 searchType: 'int',
                 columnClass: 'col-md-1 col-sm-2 col-xs-2'
             },
+            status: {
+                label: 'Status',
+                awToolTip: "{{ completed_job.status_tip }}",
+                awTipPlacement: "top",
+                dataTitle: "{{ completed_job.status_popover_title }}",
+                icon: 'icon-job-{{ completed_job.status }}',
+                iconOnly: true,
+                awPopOver: "{{ completed_job.status_popover }}",
+                dataPlacement: 'right',
+                searchType: 'select',
+                searchOptions: [
+                    { name: "Success", value: "successful" },
+                    { name: "Error", value: "error" },
+                    { name: "Failed", value: "failed" },
+                    { name: "Canceled", value: "canceled" }
+                ]
+            },
             inventory: {
                 label: 'Inventory ID',
                 searchType: 'int',
@@ -60,17 +77,6 @@ angular.module('CompletedJobsDefinition', [])
                 searchValue: 'true',
                 searchOnly: true,
                 nosort: true
-            },
-            status: {
-                label: 'Status',
-                searchType: 'select',
-                searchOnly: true,
-                searchOptions: [
-                    { name: "Success", value: "successful" },
-                    { name: "Error", value: "error" },
-                    { name: "Failed", value: "failed" },
-                    { name: "Canceled", value: "canceled" }
-                ]
             }
         },
 
@@ -84,15 +90,6 @@ angular.module('CompletedJobsDefinition', [])
         },
         
         fieldActions: {
-            status: {
-                mode: 'all',
-                awToolTip: "{{ completed_job.status_tip }}",
-                awTipPlacement: "top",
-                dataTitle: "{{ completed_job.status_popover_title }}",
-                iconClass: 'fa icon-job-{{ completed_job.status }}',
-                awPopOver: "{{ completed_job.status_popover }}",
-                dataPlacement: 'left'
-            },
             submit: {
                 icon: 'icon-rocket',
                 mode: 'all',

awx/ui/static/less/ansible-ui.less

@@ -984,7 +984,8 @@ input[type="checkbox"].checkbox-no-label {
   }
 
   .icon-job-error:before,
-  .icon-job-failed:before {
+  .icon-job-failed:before,
+  .icon-job-canceled:before {
       content: "\f06a";
   }
 
@@ -1007,17 +1008,16 @@ input[type="checkbox"].checkbox-no-label {
   }
 
   .icon-job-error,
-  .icon-job-failed {
+  .icon-job-failed,
+  .icon-job-canceled {
       color: @red;
   }
 
-  .icon-job-none,
+  .icon-job-none {
-  .icon-job-canceled {
       color: @grey;
       opacity: 0.45;
   }
 
-  .icon-job-canceled,
   .icon-job-none:before {
       content: "\f10c";
   }
@@ -1048,10 +1048,12 @@ input[type="checkbox"].checkbox-no-label {
       .pagination li a {
           font-size: 12px;
       }
+      .list-table-container {
+          min-height: 338px;
+      }
   }
-
+  .job-list-target {
-  #completed-jobs-container {
+      min-height: 445px;
-      margin-top: 0;
   }
 
 /* Inventory job status badge */

awx/ui/static/lib/ansible/list-generator.js

@@ -275,6 +275,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                     }
                     
                     // table header row
+                    html += "<div class=\"list-table-container\">\n";
                     html += "<table id=\"" + list.name + "_table\" ";
                     html += "class=\"table";
                     html += (list['class']) ? " " + list['class'] : "";
@@ -426,6 +427,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                     // End List
                     html += "</tbody>\n";
                     html += "</table>\n";
+                    html += "</div><!-- table container -->\n";
 
                     if (options.mode === 'select' && (options.selectButton === undefined || options.selectButton)) {
                         html += "<div class=\"navigation-buttons\">\n";

awx/ui/static/partials/jobs.html

@@ -9,25 +9,25 @@
                     <div id="job-page-accordion-0" aw-accordion>
                         <h3>Completed</h3>
                         <div class="job-list" id="completed-jobs-container">
-                            <div id="completed-jobs"></div>
+                            <div id="completed-jobs" class="job-list-target"></div>
                         </div>
                     </div>
                     <div id="job-page-accordion-1" aw-accordion>
                         <h3>Active</h3>
                         <div class="job-list" id="active-jobs-container">
-                            <div id="active-jobs"></div>
+                            <div id="active-jobs" class="job-list-target"></div>
                         </div>
                     </div>
                     <div id="job-page-accordion-2" aw-accordion>
                         <h3>Queued</h3>
                         <div class="job-list" id="queued-jobs-container">
-                            <div id="queued-jobs"></div>
+                            <div id="queued-jobs" class="job-list-target"></div>
                         </div>
                     </div>
                     <div id="job-page-accordion-3" aw-accordion>
                         <h3>Scheduled</h3>
                         <div class="job-list" id="scheduled-jobs-container">
-                            <div id="scheduled-jobs"></div>
+                            <div id="scheduled-jobs" class="job-list-target"></div>
                         </div>
                     </div>
                 </div>