From 60da8e6ad8596d491bf5f58bcb308f6e9848553a Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Tue, 13 May 2014 17:10:48 -0400 Subject: [PATCH] AC-1271 replay calcl height of each container and number of rows on jobs page without having to use a timer and requery rows on page load. --- awx/ui/static/js/controllers/Jobs.js | 50 ++++++++++++------- awx/ui/static/js/helpers/PaginationHelpers.js | 3 +- awx/ui/static/js/lists/CompletedJobs.js | 2 +- awx/ui/static/js/lists/QueuedJobs.js | 2 +- awx/ui/static/js/lists/RunningJobs.js | 2 +- awx/ui/static/js/lists/ScheduledJobs.js | 2 +- .../static/lib/ansible/generator-helpers.js | 2 +- 7 files changed, 38 insertions(+), 25 deletions(-) diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js index ee63614b08..e7c6f72781 100644 --- a/awx/ui/static/js/controllers/Jobs.js +++ b/awx/ui/static/js/controllers/Jobs.js @@ -22,7 +22,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr api_complete = false, event_socket, event_queue = [{"status":"pending","endpoint":"/socket.io/jobs","unified_job_id":4129,"event":"status_changed"}], - expecting = 0; + expecting = 0, + max_rows; event_socket = Socket({ scope: $scope, @@ -124,7 +125,6 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr $scope.removeListLoaded = $scope.$on('listLoaded', function() { listCount++; if (listCount === 4) { - resizeContainers(); api_complete = true; $scope.$emit('ProcessQueue'); } @@ -167,7 +167,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr list: CompletedJobsList, id: 'completed-jobs', url: GetBasePath('unified_jobs') + '?or__status=successful&or__status=failed&or__status=error&or__status=canceled', - searchParams: search_params + searchParams: search_params, + pageSize: max_rows }); running_scope = $scope.$new(true); LoadJobsScope({ @@ -175,7 +176,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr scope: running_scope, list: RunningJobsList, id: 'active-jobs', - url: GetBasePath('unified_jobs') + '?status=running' + url: GetBasePath('unified_jobs') + '?status=running', + pageSize: max_rows }); queued_scope = $scope.$new(true); LoadJobsScope({ @@ -183,7 +185,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr scope: queued_scope, list: QueuedJobsList, id: 'queued-jobs', - url: GetBasePath('unified_jobs') + '?or__status=pending&or__status=waiting&or__status=new' + url: GetBasePath('unified_jobs') + '?or__status=pending&or__status=waiting&or__status=new', + pageSize: max_rows }); scheduled_scope = $scope.$new(true); LoadSchedulesScope({ @@ -191,7 +194,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr scope: scheduled_scope, list: ScheduledJobsList, id: 'scheduled-jobs', - url: GetBasePath('schedules') + '?next_run__isnull=false' + url: GetBasePath('schedules') + '?next_run__isnull=false', + pageSize: max_rows }); /*$scope.refreshJobs = function() { @@ -212,6 +216,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr $scope.removeChoicesReady = $scope.$on('choicesReady', function() { choicesCount++; if (choicesCount === 2) { + setHeight(); + console.log('rows: ' + max_rows); $scope.$emit('buildJobsList'); } }); @@ -234,38 +240,44 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr callback: 'choicesReady' }); - // Set container height and return the number of allowed rows - function resizeContainers() { + // Set the height of each container and calc max number of rows containers can hold + function setHeight() { var docw = $(document).width(), available_height, - search_row, page_row, height, header, row_height, rows; + search_row, page_row, height, header, row_height; if (docw > 1240) { // customize the container height and # of rows based on available viewport height available_height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() - $('.site-footer').outerHeight() - 25; $('.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(); + search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50); + page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33); + header = Math.max($('#completed_jobs_table thead').height(), 41); height = Math.floor(available_height / 2) - header - page_row - search_row - 15; - row_height = $('.jobs-list-container tbody tr:eq(0)').height(); - rows = Math.floor(height / row_height); + row_height = (docw < 1415) ? 47 : 27; + //$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded + max_rows = Math.floor(height / row_height); } else { // when width < 1240px put things back to their default state $('.jobs-list-container').each(function() { $(this).css({ 'height': 'auto' }); }); - rows = 5; + max_rows = 5; } - completed_scope[CompletedJobsList.iterator + '_page_size'] = rows; + } + + // Set container height and return the number of allowed rows + function resizeContainers() { + setHeight(); + completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows; completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator); - running_scope[RunningJobsList.iterator + '_page_size'] = rows; + running_scope[RunningJobsList.iterator + '_page_size'] = max_rows; running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator); - queued_scope[QueuedJobsList.iterator + '_page_size'] = rows; + queued_scope[QueuedJobsList.iterator + '_page_size'] = max_rows; queued_scope.changePageSize(QueuedJobsList.name, QueuedJobsList.iterator); - scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = rows; + scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows; scheduled_scope.changePageSize(ScheduledJobsList.name, ScheduledJobsList.iterator); } } diff --git a/awx/ui/static/js/helpers/PaginationHelpers.js b/awx/ui/static/js/helpers/PaginationHelpers.js index 98d851a1d4..3fe76daee9 100644 --- a/awx/ui/static/js/helpers/PaginationHelpers.js +++ b/awx/ui/static/js/helpers/PaginationHelpers.js @@ -114,13 +114,14 @@ angular.module('PaginationHelpers', ['Utilities', 'RefreshHelper', 'RefreshRelat var scope = params.scope, list = params.list, iterator = (params.iterator) ? params.iterator : list.iterator, + pageSize = params.pageSize, mode = (params.mode) ? params.mode : null; scope[iterator + '_page'] = (params.page) ? params.page : 1; scope[iterator + '_url'] = params.url; scope[iterator + '_mode'] = mode; - if (params.pageSize) { + if (pageSize) { scope[iterator + '_page_size'] = params.pageSize; } else if (mode === 'lookup') { scope[iterator + '_page_size'] = 5; diff --git a/awx/ui/static/js/lists/CompletedJobs.js b/awx/ui/static/js/lists/CompletedJobs.js index c4151c377b..d58041e105 100644 --- a/awx/ui/static/js/lists/CompletedJobs.js +++ b/awx/ui/static/js/lists/CompletedJobs.js @@ -47,7 +47,7 @@ angular.module('CompletedJobsDefinition', []) label: 'Finished On', noLink: true, searchable: false, - filter: "date:'MM/dd/yy HH:mm:ss'", + filter: "date:'MM/dd HH:mm:ss'", columnClass: "col-md-2 hidden-xs", key: true, desc: true diff --git a/awx/ui/static/js/lists/QueuedJobs.js b/awx/ui/static/js/lists/QueuedJobs.js index e43ef56e82..835b510c8f 100644 --- a/awx/ui/static/js/lists/QueuedJobs.js +++ b/awx/ui/static/js/lists/QueuedJobs.js @@ -43,7 +43,7 @@ angular.module('QueuedJobsDefinition', []) label: 'Created On', noLink: true, searchable: false, - filter: "date:'MM/dd/yy HH:mm:ss'", + filter: "date:'MM/dd HH:mm:ss'", columnClass: 'col-md-2 hidden-xs' }, type: { diff --git a/awx/ui/static/js/lists/RunningJobs.js b/awx/ui/static/js/lists/RunningJobs.js index b9cae134f0..baa8b3a4b0 100644 --- a/awx/ui/static/js/lists/RunningJobs.js +++ b/awx/ui/static/js/lists/RunningJobs.js @@ -43,7 +43,7 @@ angular.module('RunningJobsDefinition', []) label: 'Started On', noLink: true, searchable: false, - filter: "date:'MM/dd/yy HH:mm:ss'", + filter: "date:'MM/dd HH:mm:ss'", columnClass: "col-md-2 hidden-xs" }, type: { diff --git a/awx/ui/static/js/lists/ScheduledJobs.js b/awx/ui/static/js/lists/ScheduledJobs.js index 56a5c419d1..265f720e24 100644 --- a/awx/ui/static/js/lists/ScheduledJobs.js +++ b/awx/ui/static/js/lists/ScheduledJobs.js @@ -36,7 +36,7 @@ angular.module('ScheduledJobsDefinition', []) noLink: true, searchable: false, columnClass: "col-md-2 hidden-xs", - filter: "date:'MM/dd/yy HH:mm:ss'", + filter: "date:'MM/dd HH:mm:ss'", key: true }, type: { diff --git a/awx/ui/static/lib/ansible/generator-helpers.js b/awx/ui/static/lib/ansible/generator-helpers.js index 630b000084..bd076ae76e 100644 --- a/awx/ui/static/lib/ansible/generator-helpers.js +++ b/awx/ui/static/lib/ansible/generator-helpers.js @@ -816,7 +816,7 @@ angular.module('GeneratorHelpers', []) html += "
\n"; html += "
\n"; html += "Page {{ " + iterator + "_page }} of {{ " + iterator + "_num_pages }} for {{ " + iterator + "_total_rows | number:0 }} " + - set.replace(/^home_/,'').replace(/\_/g,' '); + set.replace(/^(completed|queued|running)_/,'').replace(/^home_/,'').replace(/\_/g,' '); html += "
\n"; html += "
\n"; html += "\n";