From 80fbe0b5257b2b0b55f422992e0a473e7a19bc17 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Mon, 5 May 2014 10:51:37 -0400 Subject: [PATCH] Jobs page- schedules layout now works with new page layout. Refined page auto-resize. --- awx/ui/static/js/controllers/JobTemplates.js | 3 +- awx/ui/static/js/controllers/Jobs.js | 25 +++++------ awx/ui/static/js/controllers/Schedules.js | 2 +- awx/ui/static/js/helpers/Schedules.js | 47 +++++++++++++++----- awx/ui/static/js/lists/Schedules.js | 7 ++- awx/ui/static/less/ansible-ui.less | 2 +- 6 files changed, 52 insertions(+), 34 deletions(-) diff --git a/awx/ui/static/js/controllers/JobTemplates.js b/awx/ui/static/js/controllers/JobTemplates.js index 4ad7b29934..5cdcab71c9 100644 --- a/awx/ui/static/js/controllers/JobTemplates.js +++ b/awx/ui/static/js/controllers/JobTemplates.js @@ -358,7 +358,8 @@ function JobTemplatesEdit($scope, $rootScope, $compile, $location, $log, $routeP choicesCount = 0; CallbackHelpInit({ scope: $scope }); - + + SchedulesList.well = false; generator.inject(form, { mode: 'edit', related: true, scope: $scope }); $scope.parseType = 'yaml'; diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js index 702026165f..1ed5f4fd61 100644 --- a/awx/ui/static/js/controllers/Jobs.js +++ b/awx/ui/static/js/controllers/Jobs.js @@ -129,25 +129,18 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea 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; + 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(); - height = Math.floor(available_height / 2) - header - page_row - search_row; + 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); - 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 @@ -155,13 +148,15 @@ function JobsListController ($scope, $compile, ClearScope, Breadcrumbs, LoadBrea $(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); } + 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); + scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = rows; + scheduled_scope.changePageSize(ScheduledJobsList.name, ScheduledJobsList.iterator); } } diff --git a/awx/ui/static/js/controllers/Schedules.js b/awx/ui/static/js/controllers/Schedules.js index cce9473e15..2549d67ef9 100644 --- a/awx/ui/static/js/controllers/Schedules.js +++ b/awx/ui/static/js/controllers/Schedules.js @@ -43,7 +43,7 @@ GetBasePath, Wait, Breadcrumbs, Find, LoadDialogPartial, LoadSchedulesScope, Get $compile(e)($scope); url += "schedules/"; - + SchedulesList.well = true; LoadSchedulesScope({ parent_scope: $scope, scope: $scope, diff --git a/awx/ui/static/js/helpers/Schedules.js b/awx/ui/static/js/helpers/Schedules.js index 48cd64af2a..677b63870c 100644 --- a/awx/ui/static/js/helpers/Schedules.js +++ b/awx/ui/static/js/helpers/Schedules.js @@ -9,7 +9,8 @@ 'use strict'; -angular.module('SchedulesHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper', 'SearchHelper', 'PaginationHelpers', 'ListGenerator', 'ModalDialog' ]) +angular.module('SchedulesHelper', [ 'Utilities', 'RestServices', 'SchedulesHelper', 'SearchHelper', 'PaginationHelpers', 'ListGenerator', 'ModalDialog', + 'GeneratorHelpers']) .factory('ShowSchedulerModal', ['Wait', 'CreateDialog', function(Wait, CreateDialog) { return function(params) { @@ -541,24 +542,46 @@ angular.module('SchedulesHelper', [ 'Utilities', 'RestServices', 'SchedulesHelpe * Called from a controller to setup the scope for a schedules list * */ - .factory('LoadSchedulesScope', ['$routeParams','SearchInit', 'PaginateInit', 'GenerateList', 'SchedulesControllerInit', 'SchedulesListInit', - function($routeParams, SearchInit, PaginateInit, GenerateList, SchedulesControllerInit, SchedulesListInit) { + .factory('LoadSchedulesScope', ['$compile', '$location', '$routeParams','SearchInit', 'PaginateInit', 'GenerateList', 'SchedulesControllerInit', + 'SchedulesListInit', 'SearchWidget', + function($compile, $location, $routeParams, SearchInit, PaginateInit, GenerateList, SchedulesControllerInit, SchedulesListInit, SearchWidget) { return function(params) { var parent_scope = params.parent_scope, scope = params.scope, list = params.list, id = params.id, url = params.url, - pageSize = params.pageSize || 5; + pageSize = params.pageSize || 5, + base = $location.path().replace(/^\//, '').split('/')[0], + e, html; - GenerateList.inject(list, { - mode: 'edit', - id: id, - breadCrumbs: false, - scope: scope, - searchSize: 'col-lg-4 col-md-6 col-sm-12 col-xs-12', - showSearch: true - }); + if (base === 'jobs') { + // on jobs page the search widget appears on the right + 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, + showSearch: false + }); + } + else { + GenerateList.inject(list, { + mode: 'edit', + id: id, + breadCrumbs: false, + scope: scope, + searchSize: 'col-lg-4 col-md-6 col-sm-12 col-xs-12', + showSearch: true + }); + } SearchInit({ scope: scope, diff --git a/awx/ui/static/js/lists/Schedules.js b/awx/ui/static/js/lists/Schedules.js index 163fc74b0a..eb766a03e8 100644 --- a/awx/ui/static/js/lists/Schedules.js +++ b/awx/ui/static/js/lists/Schedules.js @@ -15,7 +15,7 @@ angular.module('SchedulesListDefinition', []) iterator: 'schedule', selectTitle: '', editTitle: 'Schedules', - well: true, + well: false, index: true, hover: true, @@ -46,9 +46,8 @@ angular.module('SchedulesListDefinition', []) }, id: { label: 'ID', - key: true, - desc: true, - searchType: 'int' + searchType: 'int', + searchOnly: true } }, diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index cf538c4e75..302dc72def 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -740,7 +740,7 @@ select.page-size { /* breadcrumbs */ .nav-path { padding: 5px 0 10px 0; - margin-right: 5px; + margin-right: 2px; margin-bottom: 20px; font-size: 14px; font-weight: bold;