Removed accordions from jobs page.

.jshintrc

@@ -7,7 +7,7 @@
     "jquery": true,
     "esnext": true,
     "globalstrict": true,
-    "globals": { "angular":false, "alert":false, "$AnsibleConfig":true, "$basePath":true, "jsyaml":false },
+    "globals": { "angular":false, "alert":false, "$AnsibleConfig":true, "$basePath":true, "jsyaml":false, "_":true },
     "strict": false,
     "quotmark": false,
     "smarttabs": true,

awx/ui/static/js/controllers/JobDetail.js

@@ -5,8 +5,6 @@
  *
  */
 
-/* global _ */
-
 'use strict';
 
 function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest, ProcessErrors, DigestEvents,
@@ -251,8 +249,6 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         }
     });
 
-    // Use debounce from the underscore library. We're including underscore
-    // for the timezone stuff, so might as well take advantage of it.
     function adjustSize() {
         var height, ww = $(window).width();
         if (ww < 1240) {
@@ -293,6 +289,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         adjustSize();
     });
 
+    // Use debounce for the underscore library to adjust after user resizes window.
     $(window).resize(_.debounce(function(){
         adjustSize();
     }, 500));

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

@@ -17,7 +17,8 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea
 
     var e,
         completed_scope, running_scope, queued_scope, scheduled_scope,
-        choicesCount = 0;
+        choicesCount = 0,
+        listCount = 0;
 
     LoadBreadCrumbs();
 
@@ -26,6 +27,15 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea
     e.html(Breadcrumbs({ list: { editTitle: 'Jobs' } , mode: 'edit' }));
     $compile(e)($scope);
 
+    if ($scope.removeListLoaded) {
+        $scope.removeListLoaded();
+    }
+    $scope.removeListLoaded = $scope.$on('listLoaded', function() {
+        listCount++;
+        if (listCount === 4) {
+            resizeContainers();
+        }
+    });
 
     // After all choices are ready, load up the lists and populate the page
     if ($scope.removeBuildJobsList) {
@@ -81,6 +91,10 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea
             completed_scope.search('completed_job');
             scheduled_scope.search('schedule');
         };
+
+        $(window).resize(_.debounce(function() {
+            resizeContainers(); 
+        }, 500));
     });
 
     if ($scope.removeChoicesReady) {
@@ -111,6 +125,44 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea
         callback: 'choicesReady'
     });
 
+    function resizeContainers() {
+        var docw = $(document).width(),
+            available_height,
+            search_row, page_row, height, header, row_height, rows;
+
+        if (docw > 1240) {
+            // customize the container height and # of rows based on available viewport height
+            available_height = $('#wrap').height() - $('#main_tabs').height() - $('#breadcrumbs').outerHeight() - $('.site-footer').outerHeight() - 15;
+            $('.jobs-list-container').each(function() {
+                $(this).height(Math.floor(available_height / 2));
+            });
+            search_row = $('.search-row:eq(0)').outerHeight();
+            page_row = $('.page-row:eq(0)').outerHeight();
+            header = $('#completed_jobs_table thead').height();
+            height = Math.floor(available_height / 2) - header - page_row - search_row;
+            row_height = $('.jobs-list-container tbody tr:eq(0)').height();
+            rows = Math.floor(height / row_height);
+            completed_scope[CompletedJobsList.iterator + '_page_size'] = rows;
+            completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
+            running_scope[RunningJobsList.iterator + '_page_size'] = rows;
+            running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator);
+            queued_scope[QueuedJobsList.iterator + '_page_size'] = rows;
+            queued_scope.changePageSize(QueuedJobsList.name, QueuedJobsList.iterator);
+        }
+        else {
+            // when width < 1240px put things back to their default state
+            $('.jobs-list-container').each(function() {
+                $(this).css({ 'height': 'auto' });
+            });
+            rows = 5;
+            completed_scope[CompletedJobsList.iterator + '_page_size'] = rows;
+            completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
+            running_scope[RunningJobsList.iterator + '_page_size'] = rows;
+            running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator);
+            queued_scope[QueuedJobsList.iterator + '_page_size'] = rows;
+            queued_scope.changePageSize(QueuedJobsList.name, QueuedJobsList.iterator);
+        }
+    }   
 }
 
 JobsListController.$inject = ['$scope', '$compile', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'LoadSchedulesScope', 'LoadJobsScope', 'RunningJobsList', 'CompletedJobsList',

awx/ui/static/js/helpers/JobDetail.js

@@ -732,6 +732,14 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
             setTimeout( function() { $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom"); }, 700);
         }, 100);
     };
+}])
+
+.factory('GetHostSummary', [ function() {
+
+}])
+
+.factory('DrawGraph', [ function() {
+
 }]);
 
 

awx/ui/static/js/helpers/Jobs.js

@@ -347,24 +347,32 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
  *  Called from JobsList controller to load each section or list on the page
  *
  */
-.factory('LoadJobsScope', ['$routeParams', '$location', 'SearchInit', 'PaginateInit', 'GenerateList', 'JobsControllerInit', 'JobsListUpdate',
-    function($routeParams, $location, SearchInit, PaginateInit, GenerateList, JobsControllerInit, JobsListUpdate) {
+.factory('LoadJobsScope', ['$routeParams', '$location', '$compile', 'SearchInit', 'PaginateInit', 'GenerateList', 'JobsControllerInit', 'JobsListUpdate', 'SearchWidget',
+    function($routeParams, $location, $compile, SearchInit, PaginateInit, GenerateList, JobsControllerInit, JobsListUpdate, SearchWidget) {
     return function(params) {
         var parent_scope = params.parent_scope,
             scope = params.scope,
             list = params.list,
             id = params.id,
             url = params.url,
-            base = $location.path().replace(/^\//, '').split('/')[0];
+            base = $location.path().replace(/^\//, '').split('/')[0],
+            e, html;
+
+        // Add the search widget. We want it arranged differently, so we're injecting and compiling it separately
+        html = SearchWidget({ 
+            iterator: list.iterator,
+            template: params.list,
+            includeSize: false
+        });
+        e = angular.element(document.getElementById(id + '-search-container')).append(html);
+        $compile(e)(scope);
 
         GenerateList.inject(list, {
             mode: 'edit',
             id: id,
             breadCrumbs: false,
             scope: scope,
-            searchSize: 'col-lg-4 col-md-6',
-            listSize: 'col-lg-8 col-md-6',
-            showSearch: true
+            showSearch: false
         });
 
         SearchInit({

awx/ui/static/js/helpers/PaginationHelpers.js

@@ -144,8 +144,7 @@ angular.module('PaginationHelpers', ['Utilities', 'RefreshHelper', 'RefreshRelat
 
             scope.changePageSize = function (set, iterator) {
                 // Called whenever a new page size is selected
-                // Using the session cookie, keep track of user rows per page selection
-                scope[iterator + '_page'] = 0;
+                scope[iterator + '_page'] = 1;
                 var new_url = scope[iterator + '_url'].replace(/\?page_size\=\d+/, ''),
                     connect = (/\/$/.test(new_url)) ? '?' : '&';
                 new_url += (scope[iterator + 'SearchParams']) ? connect + scope[iterator + 'SearchParams'] + '&page_size=' + scope[iterator + '_page_size'] :

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

@@ -78,14 +78,7 @@ angular.module('CompletedJobsDefinition', [])
             }
         },
 
-        actions: {
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
-            refresh: {
-                mode: 'all',
-                awToolTip: "Refresh the page",
-                ngClick: "refreshJobs()"
-            }
-        },
+        actions: { },
         
         fieldActions: {
             submit: {

awx/ui/static/js/lists/QueuedJobs.js

@@ -63,14 +63,7 @@ angular.module('QueuedJobsDefinition', [])
             }
         },
 
-        actions: {
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
-            refresh: {
-                mode: 'all',
-                awToolTip: "Refresh the page",
-                ngClick: "refreshJobs()"
-            }
-        },
+        actions: { },
 
         fieldActions: {
             submit: {

awx/ui/static/js/lists/RunningJobs.js

@@ -63,14 +63,7 @@ angular.module('RunningJobsDefinition', [])
             }
         },
 
-        actions: {
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
-            refresh: {
-                mode: 'all',
-                awToolTip: "Refresh the page",
-                ngClick: "refreshJobs()"
-            }
-        },
+        actions: { },
        
         fieldActions: {
             submit: {

awx/ui/static/js/lists/ScheduledJobs.js

@@ -61,14 +61,7 @@ angular.module('ScheduledJobsDefinition', [])
             }
         },
 
-        actions: {
-            columnClass: 'col-md-2 col-sm-3 col-xs-3',
-            refresh: {
-                mode: 'all',
-                awToolTip: "Refresh the page",
-                ngClick: "refreshSchedules()"
-            }
-        },
+        actions: { },
         
         fieldActions: {
             "play": {

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

@@ -35,6 +35,7 @@
 @import "angular-scheduler.less";
 @import "log-viewer.less";
 @import "job-details.less";
+@import "jobs.less";
 
 
 html, body { height: 100%; }
@@ -376,7 +377,7 @@ dd {
 
 /* The sticky footer: http://css-tricks.com/snippets/css/sticky-footer, with less variables */
   @footer-height: 68px;
-  @footer-margin: 40px;
+  @footer-margin: 22px;
   @push-height: (@footer-height + @footer-margin);
   #wrap {
       min-height: 100%;
@@ -965,7 +966,7 @@ input[type="checkbox"].checkbox-no-label {
     padding: 15px 0;
 }
 
-/* Jobs pages */
+/* Status Icons */
 
   .license-expired,
   .license-invalid,
@@ -1088,24 +1089,7 @@ input[type="checkbox"].checkbox-no-label {
     line-height: 1;
   }
 
-  .job-list.ui-accordion-content {
-      padding: 25px 15px 25px 15px;
-  }
-  .job-list {
-      thead >tr >th, .page-row {
-          font-size: 12px;
-          color: #666;
-      }
-      .pagination li a {
-          font-size: 13px;
-      }
-      i[class*="icon-job-"] {
-          font-size: 13px;
-      }
-  }
-  #completed_jobs_table i[class*="icon-job-"] {
-      font-size: 13px;
-  }
+/* job_events page */ 
 
   #jobevents_table {
       div.return-code {

awx/ui/static/less/jobs.less

@@ -0,0 +1,70 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ *  jobs.less
+ *
+ *  custom styles for the jobs pages
+ *
+ */
+
+
+#jobs { 
+
+    .jobs-list-container {
+        border: 1px solid @grey;
+        border-radius: 4px;
+        padding: 5px;
+    }
+
+    .job-list {
+        thead >tr >th, .page-row {
+            font-size: 12px;
+            color: #666;
+        }
+        .pagination li a {
+            font-size: 13px;
+        }
+        i[class*="icon-job-"] {
+            font-size: 13px;
+        }
+    }
+
+    #completed_jobs_table i[class*="icon-job-"] {
+        font-size: 13px;
+    }
+    
+    .title {
+        font-weight: bold;
+        margin-top: 5px;
+        margin-left: 3px;
+    }
+
+}
+
+@media (min-width: 1024px) {
+    #jobs {
+        .left-side {
+            padding-right: 7px;
+        }
+
+        .right-side {
+            padding-left: 7px;
+        }
+
+        .bottom-row {
+            margin-top: 15px;
+        }
+    }
+}
+
+@media (max-width: 1023px) {
+    #jobs .jobs-list-container { 
+        margin-top: 15px;
+    }
+    #jobs .jobs-list-container.completed {
+        margin-top: 0;
+    }
+    .title{
+        margin-bottom: 8px;
+    }
+}

awx/ui/static/partials/jobs.html

@@ -4,37 +4,57 @@
             <div class="col-md-12" id="breadcrumbs"></div>
         </div>    
         <div class="row">
-            <div class="col-md-12">
-                <div id="jobs-page ">
-                    <div id="job-page-accordion-0" aw-accordion>
-                        <h3>Completed</h3>
-                        <div class="job-list" id="completed-jobs-container">
-                            <div id="completed-jobs" class="job-list-target"></div>
-                        </div>
+            <div class="col-md-6 left-side">
+                <div class="jobs-list-container completed">
+                    <div class="row search-row">
+                        <div class="col-md-6"><div class="title">Completed</div></div>
+                        <div class="col-md-6" id="completed-jobs-search-container"></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" 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" 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" class="job-list-target"></div>
-                        </div>
+                    <div class="job-list" id="completed-jobs-container">
+                        <div id="completed-jobs" class="job-list-target"></div>
                     </div>
                 </div>
             </div>
-        </div>
+            <div class="col-md-6 right-side">
+                <div class="jobs-list-container">
+                    <div class="row search-row">
+                        <div class="col-md-6"><div class="title">Active</div></div>
+                        <div class="col-md-6" id="active-jobs-search-container"></div>
+                    </div>
+                    <div class="job-list" id="active-jobs-container">
+                        <div id="active-jobs" class="job-list-target"></div>
+                    </div>
+                </div>
+            </div>
+        </div><!-- row -->
+        <div class="row bottom-row">
+            <div class="col-md-6 left-side">
+                <div class="jobs-list-container">
+                    <div class="row search-row">
+                        <div class="col-md-6"><div class="title">Queued</div></div>
+                        <div class="col-md-6" id="queued-jobs-search-container"></div>
+                    </div>
+                    <div class="job-list" id="queued-jobs-container">
+                        <div id="queued-jobs" class="job-list-target"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 right-side">
+                <div class="jobs-list-container">
+                    <div class="row search-row">
+                        <div class="col-md-6"><div class="title">Scheduled</div></div>
+                        <div class="col-md-6" id="scheduled-jobs-search-container"></div>
+                    </div>
+                    <div class="job-list" id="scheduled-jobs-container">
+                        <div id="scheduled-jobs" class="job-list-target"></div>
+                    </div>
+                </div>
+            </div>
+        </div><!-- row -->
+       
         <div id="schedule-dialog-target"></div>
         <div ng-include="'/static/partials/logviewer.html'"></div>
         <div ng-include="'/static/partials/schedule_dialog.html'"></div>
+    
     </div>
 </div>