From b2b0f67c65c08aa8f7d27443c201e2554c4971c5 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Sat, 3 May 2014 21:31:22 -0400 Subject: [PATCH] Removed accordions from jobs page. --- .jshintrc | 2 +- awx/ui/static/js/controllers/JobDetail.js | 5 +- awx/ui/static/js/controllers/Jobs.js | 54 +++++++++++++- awx/ui/static/js/helpers/JobDetail.js | 8 +++ awx/ui/static/js/helpers/Jobs.js | 20 ++++-- awx/ui/static/js/helpers/PaginationHelpers.js | 3 +- awx/ui/static/js/lists/CompletedJobs.js | 9 +-- awx/ui/static/js/lists/QueuedJobs.js | 9 +-- awx/ui/static/js/lists/RunningJobs.js | 9 +-- awx/ui/static/js/lists/ScheduledJobs.js | 9 +-- awx/ui/static/less/ansible-ui.less | 24 ++----- awx/ui/static/less/jobs.less | 70 +++++++++++++++++++ awx/ui/static/partials/jobs.html | 70 ++++++++++++------- 13 files changed, 201 insertions(+), 91 deletions(-) create mode 100644 awx/ui/static/less/jobs.less diff --git a/.jshintrc b/.jshintrc index e0e02de4d9..7f9c13c67f 100644 --- a/.jshintrc +++ b/.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, diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js index 93bca739fa..2b9a8f4d83 100644 --- a/awx/ui/static/js/controllers/JobDetail.js +++ b/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)); diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js index 8babf34c42..69878c0969 100644 --- a/awx/ui/static/js/controllers/Jobs.js +++ b/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', diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js index b6ba89fd24..a542070476 100644 --- a/awx/ui/static/js/helpers/JobDetail.js +++ b/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() { + }]); diff --git a/awx/ui/static/js/helpers/Jobs.js b/awx/ui/static/js/helpers/Jobs.js index 188bcb1cc9..6f841864b3 100644 --- a/awx/ui/static/js/helpers/Jobs.js +++ b/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({ diff --git a/awx/ui/static/js/helpers/PaginationHelpers.js b/awx/ui/static/js/helpers/PaginationHelpers.js index 22022c16b4..98d851a1d4 100644 --- a/awx/ui/static/js/helpers/PaginationHelpers.js +++ b/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'] : diff --git a/awx/ui/static/js/lists/CompletedJobs.js b/awx/ui/static/js/lists/CompletedJobs.js index 7b671ae783..c4151c377b 100644 --- a/awx/ui/static/js/lists/CompletedJobs.js +++ b/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: { diff --git a/awx/ui/static/js/lists/QueuedJobs.js b/awx/ui/static/js/lists/QueuedJobs.js index afe8619f03..e43ef56e82 100644 --- a/awx/ui/static/js/lists/QueuedJobs.js +++ b/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: { diff --git a/awx/ui/static/js/lists/RunningJobs.js b/awx/ui/static/js/lists/RunningJobs.js index 19a5fd67ec..b9cae134f0 100644 --- a/awx/ui/static/js/lists/RunningJobs.js +++ b/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: { diff --git a/awx/ui/static/js/lists/ScheduledJobs.js b/awx/ui/static/js/lists/ScheduledJobs.js index 64565b011a..56a5c419d1 100644 --- a/awx/ui/static/js/lists/ScheduledJobs.js +++ b/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": { diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 0857d152cc..cf538c4e75 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/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 { diff --git a/awx/ui/static/less/jobs.less b/awx/ui/static/less/jobs.less new file mode 100644 index 0000000000..40e2f655ed --- /dev/null +++ b/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; + } +} diff --git a/awx/ui/static/partials/jobs.html b/awx/ui/static/partials/jobs.html index 620a18a436..1aebb74667 100644 --- a/awx/ui/static/partials/jobs.html +++ b/awx/ui/static/partials/jobs.html @@ -4,37 +4,57 @@
-
-
-
-

Completed

-
-
-
+
+
+
+
Completed
+
-
-

Active

-
-
-
-
-
-

Queued

-
-
-
-
-
-

Scheduled

-
-
-
+
+
-
+
+
+
+
Active
+
+
+
+
+
+
+
+
+
+
+
+
+
Queued
+
+
+
+
+
+
+
+
+
+
+
Scheduled
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file