External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-24 12:25:01 -02:30
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
chouseknecht
2014-05-13 17:10:48 -04:00
parent eb4b17017c
commit 60da8e6ad8
7 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
awx/ui/static/js/controllers/Jobs.js
View File

@@ -22,7 +22,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
api_complete = false, api_complete = false,
event_socket, event_socket,
event_queue = [{"status":"pending","endpoint":"/socket.io/jobs","unified_job_id":4129,"event":"status_changed"}], event_queue = [{"status":"pending","endpoint":"/socket.io/jobs","unified_job_id":4129,"event":"status_changed"}],
expecting = 0; expecting = 0,
max_rows;
event_socket = Socket({ event_socket = Socket({
scope: $scope, scope: $scope,
@@ -124,7 +125,6 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
$scope.removeListLoaded = $scope.$on('listLoaded', function() { $scope.removeListLoaded = $scope.$on('listLoaded', function() {
listCount++; listCount++;
if (listCount === 4) { if (listCount === 4) {
resizeContainers();
api_complete = true; api_complete = true;
$scope.$emit('ProcessQueue'); $scope.$emit('ProcessQueue');
} }
@@ -167,7 +167,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
list: CompletedJobsList, list: CompletedJobsList,
id: 'completed-jobs', id: 'completed-jobs',
url: GetBasePath('unified_jobs') + '?or__status=successful&or__status=failed&or__status=error&or__status=canceled', 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); running_scope = $scope.$new(true);
LoadJobsScope({ LoadJobsScope({
@@ -175,7 +176,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
scope: running_scope, scope: running_scope,
list: RunningJobsList, list: RunningJobsList,
id: 'active-jobs', id: 'active-jobs',
url: GetBasePath('unified_jobs') + '?status=running' url: GetBasePath('unified_jobs') + '?status=running',
pageSize: max_rows
}); });
queued_scope = $scope.$new(true); queued_scope = $scope.$new(true);
LoadJobsScope({ LoadJobsScope({
@@ -183,7 +185,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
scope: queued_scope, scope: queued_scope,
list: QueuedJobsList, list: QueuedJobsList,
id: 'queued-jobs', 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); scheduled_scope = $scope.$new(true);
LoadSchedulesScope({ LoadSchedulesScope({
@@ -191,7 +194,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
scope: scheduled_scope, scope: scheduled_scope,
list: ScheduledJobsList, list: ScheduledJobsList,
id: 'scheduled-jobs', id: 'scheduled-jobs',
url: GetBasePath('schedules') + '?next_run__isnull=false' url: GetBasePath('schedules') + '?next_run__isnull=false',
pageSize: max_rows
}); });
/*$scope.refreshJobs = function() { /*$scope.refreshJobs = function() {
@@ -212,6 +216,8 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
$scope.removeChoicesReady = $scope.$on('choicesReady', function() { $scope.removeChoicesReady = $scope.$on('choicesReady', function() {
choicesCount++; choicesCount++;
if (choicesCount === 2) { if (choicesCount === 2) {
setHeight();
console.log('rows: ' + max_rows);
$scope.$emit('buildJobsList'); $scope.$emit('buildJobsList');
} }
}); });
@@ -234,38 +240,44 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
callback: 'choicesReady' callback: 'choicesReady'
}); });
// Set container height and return the number of allowed rows // Set the height of each container and calc max number of rows containers can hold
function resizeContainers() { function setHeight() {
var docw = $(document).width(), var docw = $(document).width(),
available_height, available_height,
search_row, page_row, height, header, row_height, rows; search_row, page_row, height, header, row_height;
if (docw > 1240) { if (docw > 1240) {
// customize the container height and # of rows based on available viewport height // 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; available_height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() - $('.site-footer').outerHeight() - 25;
$('.jobs-list-container').each(function() { $('.jobs-list-container').each(function() {
$(this).height(Math.floor(available_height / 2)); $(this).height(Math.floor(available_height / 2));
}); });
search_row = $('.search-row:eq(0)').outerHeight(); search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50);
page_row = $('.page-row:eq(0)').outerHeight(); page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
header = $('#completed_jobs_table thead').height(); header = Math.max($('#completed_jobs_table thead').height(), 41);
height = Math.floor(available_height / 2) - header - page_row - search_row - 15; height = Math.floor(available_height / 2) - header - page_row - search_row - 15;
row_height = $('.jobs-list-container tbody tr:eq(0)').height(); row_height = (docw < 1415) ? 47 : 27;
rows = Math.floor(height / row_height); //$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded
max_rows = Math.floor(height / row_height);
} }
else { else {
// when width < 1240px put things back to their default state // when width < 1240px put things back to their default state
$('.jobs-list-container').each(function() { $('.jobs-list-container').each(function() {
$(this).css({ 'height': 'auto' }); $(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); 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); 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); 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); scheduled_scope.changePageSize(ScheduledJobsList.name, ScheduledJobsList.iterator);
} }
} }

3
awx/ui/static/js/helpers/PaginationHelpers.js
View File

@@ -114,13 +114,14 @@ angular.module('PaginationHelpers', ['Utilities', 'RefreshHelper', 'RefreshRelat
var scope = params.scope, var scope = params.scope,
list = params.list, list = params.list,
iterator = (params.iterator) ? params.iterator : list.iterator, iterator = (params.iterator) ? params.iterator : list.iterator,
pageSize = params.pageSize,
mode = (params.mode) ? params.mode : null; mode = (params.mode) ? params.mode : null;
scope[iterator + '_page'] = (params.page) ? params.page : 1; scope[iterator + '_page'] = (params.page) ? params.page : 1;
scope[iterator + '_url'] = params.url; scope[iterator + '_url'] = params.url;
scope[iterator + '_mode'] = mode; scope[iterator + '_mode'] = mode;
if (params.pageSize) { if (pageSize) {
scope[iterator + '_page_size'] = params.pageSize; scope[iterator + '_page_size'] = params.pageSize;
} else if (mode === 'lookup') { } else if (mode === 'lookup') {
scope[iterator + '_page_size'] = 5; scope[iterator + '_page_size'] = 5;

2
awx/ui/static/js/lists/CompletedJobs.js
View File

@@ -47,7 +47,7 @@ angular.module('CompletedJobsDefinition', [])
label: 'Finished On', label: 'Finished On',
noLink: true, noLink: true,
searchable: false, searchable: false,
filter: "date:'MM/dd/yy HH:mm:ss'", filter: "date:'MM/dd HH:mm:ss'",
columnClass: "col-md-2 hidden-xs", columnClass: "col-md-2 hidden-xs",
key: true, key: true,
desc: true desc: true

2
awx/ui/static/js/lists/QueuedJobs.js
View File

@@ -43,7 +43,7 @@ angular.module('QueuedJobsDefinition', [])
label: 'Created On', label: 'Created On',
noLink: true, noLink: true,
searchable: false, searchable: false,
filter: "date:'MM/dd/yy HH:mm:ss'", filter: "date:'MM/dd HH:mm:ss'",
columnClass: 'col-md-2 hidden-xs' columnClass: 'col-md-2 hidden-xs'
}, },
type: { type: {

2
awx/ui/static/js/lists/RunningJobs.js
View File

@@ -43,7 +43,7 @@ angular.module('RunningJobsDefinition', [])
label: 'Started On', label: 'Started On',
noLink: true, noLink: true,
searchable: false, searchable: false,
filter: "date:'MM/dd/yy HH:mm:ss'", filter: "date:'MM/dd HH:mm:ss'",
columnClass: "col-md-2 hidden-xs" columnClass: "col-md-2 hidden-xs"
}, },
type: { type: {

2
awx/ui/static/js/lists/ScheduledJobs.js
View File

@@ -36,7 +36,7 @@ angular.module('ScheduledJobsDefinition', [])
noLink: true, noLink: true,
searchable: false, searchable: false,
columnClass: "col-md-2 hidden-xs", columnClass: "col-md-2 hidden-xs",
filter: "date:'MM/dd/yy HH:mm:ss'", filter: "date:'MM/dd HH:mm:ss'",
key: true key: true
}, },
type: { type: {

2
awx/ui/static/lib/ansible/generator-helpers.js
View File

@@ -816,7 +816,7 @@ angular.module('GeneratorHelpers', [])
html += "<div class=\"col-lg-4 col-md-4\" ng-hide=\"" + iterator + "_mode == 'lookup'\">\n"; html += "<div class=\"col-lg-4 col-md-4\" ng-hide=\"" + iterator + "_mode == 'lookup'\">\n";
html += "<div class=\"page-label\">\n"; html += "<div class=\"page-label\">\n";
html += "Page {{ " + iterator + "_page }} of {{ " + iterator + "_num_pages }} for {{ " + iterator + "_total_rows | number:0 }} " + 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 += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";