diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js index b418305453..f64e541ad0 100644 --- a/awx/ui/static/js/controllers/JobDetail.js +++ b/awx/ui/static/js/controllers/JobDetail.js @@ -5,6 +5,8 @@ * */ +/* global _ */ + 'use strict'; function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest, ProcessErrors, DigestEvents, @@ -76,6 +78,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc event_socket.on("job_events-" + job_id, function(data) { var matches; data.id = data.event_id; + data.event = data.event_name; if (api_complete) { matches = processed_events.find(function(x) { return x === data.id; }); if (matches.length === 0) { @@ -236,7 +239,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc }); }; - $( "#hosts-slider-vertical" ).slider({ + $("#hosts-slider-vertical").slider({ orientation: "vertical", range: "min", min: 0, @@ -246,6 +249,27 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc $( "#amount" ).val( ui.value ); } }); + + // 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 ww = $(window).width(); + if (ww < 1240) { + $('#job-summary-container').hide(); + $('#job-detail-container').css({ "width": "100%", "padding-right": "15px" }); + } + else { + $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" }); + $('#job-summary-container').show(); + } + } + $(document).ready(function() { + adjustSize(); + }); + + $(window).resize(_.debounce(function(){ + adjustSize(); + }, 500)); } JobDetailController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', 'Wait', diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js index ee75ef91ee..2df18802f7 100644 --- a/awx/ui/static/js/helpers/JobDetail.js +++ b/awx/ui/static/js/helpers/JobDetail.js @@ -157,7 +157,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla status: 'unreachable', event_id: event.id, created: event.created, - modified: event.modified + modified: event.modified, + message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' }); } @@ -170,7 +171,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla status: 'failed', event_id: event.id, created: event.created, - modified: event.modified + modified: event.modified, + message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' }); } if (event.event === 'runner_on_skipped') { @@ -182,7 +184,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla status: 'skipped', event_id: event.id, created: event.created, - modified: event.modified + modified: event.modified, + message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' }); } if (event.event === 'runner_on_ok') { @@ -194,7 +197,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ), event_id: event.id, created: event.created, - modified: event.modified + modified: event.modified, + message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' }); } if (event.event === 'playbook_on_stats') { @@ -453,6 +457,7 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla task_id = params.task_id, modified = params.modified, created = params.created, + msg = params.message, host_found = false; scope.hosts.every(function(host, i) { @@ -493,7 +498,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla event_id: event_id, status: status, name: name, - created: created + created: created, + message: msg }); }; }]) @@ -508,6 +514,7 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla status = params.status, created = params.created, name = params.name, + msg = params.message, play_id, first; scope.hostResults.push({ @@ -516,7 +523,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla host_id: host_id, task_id: task_id, name: name, - created: created + created: created, + msg: msg }); scope.tasks.every(function(task) { @@ -587,12 +595,12 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla callback: function() { // Scroll the task table all the way to the bottom, revealing the last row setTimeout(function() { - var original_height = $('#task-table-body').css('height'), + var original_height = $('#tasks-table-detail').css('height'), table_height; - $('#task-table-body').css('height', 'auto'); - table_height = $('#task-table-body').height(); - $('#task-table-body').css('height', original_height); - $('#task-table-body').scrollTop(table_height); + $('#tasks-table-detail').css('height', 'auto'); + table_height = $('#tasks-table-detail').height(); + $('#tasks-table-detail').css('height', original_height); + $('#tasks-table-detail').scrollTop(table_height); }, 300); } }); @@ -624,8 +632,8 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla .factory('SelectHost', [ function() { return function() { setTimeout(function() { - var inner_height = $('#host_details .job-detail-table').height(); - $('#host_details').scrollTop(inner_height); + var inner_height = $('#hosts-table-details').height(); + $('#hosts-table-details').scrollTop(inner_height); }, 100); }; }]); diff --git a/awx/ui/static/js/lists/JobTemplates.js b/awx/ui/static/js/lists/JobTemplates.js index f803b8ae22..283f9a1ed9 100644 --- a/awx/ui/static/js/lists/JobTemplates.js +++ b/awx/ui/static/js/lists/JobTemplates.js @@ -24,11 +24,12 @@ angular.module('JobTemplatesListDefinition', []) fields: { name: { key: true, - label: 'Name' + label: 'Name', + columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8' }, description: { label: 'Description', - columnClass: 'hidden-sm hidden-xs' + columnClass: 'col-lg-4 col-md-4 hidden-sm hidden-xs' } }, diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less index 1ec9c090d3..153ece18d6 100644 --- a/awx/ui/static/less/job-details.less +++ b/awx/ui/static/less/job-details.less @@ -19,58 +19,10 @@ } #job-status { - margin: 8px 0 15px 0; - ul { - list-style: none; - margin: 0; - padding: 0; - } - li { - display: inline-block; - margin-right: 20px; - } - i { - font-size: 12px; - } - .label { - display: inline-block; - text-align: left; - width: 50px; - font-size: 12px; - color: @black; - padding-left: 0; - } } .job-detail-table { - margin-bottom: 0; - border: 1px solid @grey; - background-color: @white; - - /* http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap */ - width: 100%; - thead, tbody, tr, td, th { display: block; } - tr:after { - content: ' '; - display: block; - visibility: hidden; - clear: both; - } - tbody { - overflow-y: auto; - height: 150px; - } - thead { - /* fallback */ - } - thead>tr>th { - height: 22px; - } - tbody td, thead th { - height: auto; - float: left; - } tbody>tr>td { border-top-color: @well; @@ -85,22 +37,6 @@ tbody>tr.active, tbody>tr.active>td { background-color: #EDF2F2; } - - .status-column i { - font-size: 12px; - } -} - -.section { - margin-bottom: 20px; - h5 { - margin-top: 0; - margin-bottom: 12px; - } -} - -.section:last-child { - margin-bottom: 0; } .job_summary { @@ -162,6 +98,33 @@ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } + + + +.section { + margin-bottom: 20px; + h5 { + margin-top: 0; + margin-bottom: 12px; + } +} + +.section:last-child { + margin-bottom: 0; +} + +#job-detail-tables { + margin-top: 20px; +} + +.status-row { + margin-bottom: 10px; + .job-label { + font-weight: bold; + font-size: 12px; + } +} + #job_options { height: 100px; overflow-y: auto; @@ -174,30 +137,96 @@ overflow-x: none; } -#hosts-section { - border: 1px solid @grey; - border-top: 2px solid #ddd; - padding: 5px; - height: 150px; - background-color: @white; - overflow-y: hide; - overflow-x: auto; +#breadcrumb-container { + padding-right: 10px; } -#host-details { - ul { - list-style: none; - margin: 0; - padding: 0; - i { - font-size: 12px; - } - } - li { - border-bottom: 1px solid @well; - padding-bottom: 2px; +#job-detail-container { + position: relative; + padding-left: 15px; + padding-right: 7px; + width: 58.33333333%; +} + +#job-summary-container { + position: absolute; + top: 0; + right: 0; + padding-right: 15px; + padding-left: 7px; + width: 41.66666667%; +} + +.table-header { + font-weight: bold; + font-size: 12px; +} + +.table-detail { + overflow-x: hidden; + overflow-y: auto; + border: 1px solid @black; + background-color: @white; + .row { + border-top: 1px solid @grey; + } + /*.row:nth-child(odd) { + background-color: @well; padding-top: 0; - margin: 0; - line-height: normal; + padding-bottom: 0; + }*/ + .active { + background-color: #EDF2F2; } } + +.status-column i { + font-size: 12px; +} + +#tasks-table-detail { + height: 150px; +} + +#play-section { + .table-detail { + height: 150px; + } +} + +#task-hosts-section { + position: relative; + top: 0; + left: 0; + #hosts-table-detail { + padding: 3px; + border: 1px solid @grey; + border-top: 2px solid #ddd; + height: 150px; + background-color: @white; + .col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 { + width: 3%; + } + } +} + +#hosts-summary-section { + .col-lg-4, .col-md-4, .col-sm-4, .col-xs-4 { + width: 33%; + } + .col-lg-2, .col-md-2, .col-sm-2, .col-xs-2 { + width: 16.5%; + } + .table-header { + font-size: 12px; + } + .table-detail { + height: 200px; + } + .name { + word-break: break-all; + } +} + + + diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html index 4c9646ae44..09692d8f79 100644 --- a/awx/ui/static/partials/job_detail.html +++ b/awx/ui/static/partials/job_detail.html @@ -2,98 +2,111 @@
-
+
-
-
+
+
- -
-
    -
  • {{ job_status.status }}  -{{ job_status.explanation }}
    • -
  • Status
    {{ job_status.status }}
    • -
  • Start
    {{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}
    • -
  • Start
    Not Started
    • -
  • Finish
    {{ job_status.finished | date:'MM/dd/yy HH:mm:ss' }}
  • -
  • Elapsed
    {{ job_status.elapsed }}
    • -
- +
+
Status
+
{{ job_status.status }} {{ job_status.explanation }}
- -
-
+ +
+
Started
+
{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}
+
Not Started
+
Elapsed
+
{{ job_status.elapsed }}
+
00:00:00
+
+ +
+
Project
+
{{ project_name }}
+
Inventory
+
{{ inventory_name }}
+
+ +
+
Plays
- - - - - - - - - - - - - - - -
Name
- {{ play.name }}
+
+
+ + +
Name
+
+
+
+
+ + +
+ {{ play.name }} +
+
+
-
+
Tasks
- - - - - - - - - - - - - - - - - -
NameHost Status
+
+
+ + +
Name
+ +
+
+
+
+ + +
{{ task.role }} {{ task.name }} -
-
-
{{ task.successfulCount }}
-
{{ task.changedCount }}
-
{{ task.skippedCount }}
-
{{ task.failedCount }}
-
-
+
+ +
+
-
+
Hosts
-
-
- +
+
+
+ + +
+
+ {{ result.name }} +
+
+ {{ result.msg }} +
@@ -105,30 +118,29 @@
-
+
-
+
Host Summary
- - - - - - - - - - - - - - - - - - - -
HostOKChangedDarkFailed
{{ host.name }}{{ host.ok }}{{ host.changed }}{{ host.unreachable }}{{ host.failed }}
+
+
+
Host
+
OK
+
Change
+
Dark
+
Fail
+
+
+
+
+
{{ host.name }}
+
{{ host.ok }}
+
{{ host.changed }}
+
{{ host.unreachable }}
+
{{ host.failed }}
+
+