mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 19:10:07 -03:30
Job stdout
Replaced scrolling widget with new angular directive and simplified approach to endless scroll. Fixed non-response to job failing before any job_events actually received. Now if playbook run completely fails, the stdout gets displayed without having to refresh browser.
This commit is contained in:
Chris Houseknecht
parent
1d1137a8d8
commit
ac3e76236a
@ -16,37 +16,23 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
stdout_url,
|
||||
current_range,
|
||||
event_socket,
|
||||
first_time_up = 0,
|
||||
first_time_down = 0,
|
||||
status_socket,
|
||||
loaded_sections = [],
|
||||
event_queue = 0,
|
||||
auto_scroll_down=true, // programmatic scroll to bottom
|
||||
live_event_processing = true,
|
||||
should_apply_live_events = true,
|
||||
prior_mcs,
|
||||
page_size = 500;
|
||||
page_size = 500,
|
||||
lastScrollTop = 0,
|
||||
st,
|
||||
direction;
|
||||
|
||||
event_socket = Socket({
|
||||
status_socket = Socket({
|
||||
scope: $scope,
|
||||
endpoint: "job_events"
|
||||
endpoint: "jobs"
|
||||
});
|
||||
|
||||
Wait('start');
|
||||
|
||||
event_socket.init();
|
||||
|
||||
event_socket.on("job_events-" + job_id, function() {
|
||||
if (api_complete) {
|
||||
event_queue++;
|
||||
}
|
||||
});
|
||||
|
||||
if ($rootScope.removeJobStatusChange) {
|
||||
$rootScope.removeJobStatusChange();
|
||||
}
|
||||
$rootScope.removeJobStatusChange = $rootScope.$on('JobStatusChange', function(e, data) {
|
||||
// if we receive a status change event for the current job indicating the job
|
||||
// is finished, stop event queue processing and reload
|
||||
status_socket.init();
|
||||
status_socket.on("status_changed", function(data) {
|
||||
if (parseInt(data.unified_job_id, 10) === parseInt(job_id,10) && $scope.job) {
|
||||
$scope.job.status = data.status;
|
||||
if (data.status === 'failed' || data.status === 'canceled' ||
|
||||
@ -55,13 +41,29 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
window.clearInterval($rootScope.jobStdOutInterval);
|
||||
}
|
||||
if (live_event_processing) {
|
||||
getNextSection();
|
||||
if (loaded_sections.length === 0) {
|
||||
$scope.$emit('LoadStdout');
|
||||
}
|
||||
else {
|
||||
getNextSection();
|
||||
}
|
||||
}
|
||||
live_event_processing = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
event_socket = Socket({
|
||||
scope: $scope,
|
||||
endpoint: "job_events"
|
||||
});
|
||||
event_socket.init();
|
||||
event_socket.on("job_events-" + job_id, function() {
|
||||
if (api_complete) {
|
||||
event_queue++;
|
||||
}
|
||||
});
|
||||
|
||||
$rootScope.jobStdOutInterval = setInterval( function() {
|
||||
if (event_queue > 0) {
|
||||
// events happened since the last check
|
||||
@ -94,9 +96,8 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
start: (data.range.start < 0) ? 0 : data.range.start,
|
||||
end: data.range.end
|
||||
});
|
||||
setTimeout(function() {
|
||||
$('#pre-container').mCustomScrollbar("scrollTo", "bottom");
|
||||
}, 300);
|
||||
$('#pre-container').scrollTop($('#pre-container').prop("scrollHeight"));
|
||||
//console.log($('#pre-container-content').prop("scrollHeight"));
|
||||
}
|
||||
else {
|
||||
api_complete = true;
|
||||
@ -108,11 +109,21 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
});
|
||||
});
|
||||
|
||||
function detectDirection() {
|
||||
st = $('#pre-container').scrollTop();
|
||||
if (st > lastScrollTop) {
|
||||
direction = "down";
|
||||
} else {
|
||||
direction = "up";
|
||||
}
|
||||
lastScrollTop = st;
|
||||
return direction;
|
||||
}
|
||||
|
||||
function resizeToFit() {
|
||||
available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#job-status').outerHeight() -
|
||||
$('#breadcrumb-container').outerHeight() - 30;
|
||||
$('#breadcrumb-container').outerHeight() - 60;
|
||||
$('#pre-container').height(available_height);
|
||||
$('#pre-container').mCustomScrollbar("update");
|
||||
}
|
||||
resizeToFit();
|
||||
|
||||
@ -120,6 +131,12 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
resizeToFit();
|
||||
}, 500));
|
||||
|
||||
$('#pre-container').bind('scroll', function() {
|
||||
if (detectDirection() === "up") {
|
||||
should_apply_live_events = false;
|
||||
}
|
||||
});
|
||||
|
||||
Rest.setUrl(GetBasePath('jobs') + job_id + '/');
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
@ -139,56 +156,7 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
});
|
||||
|
||||
|
||||
$scope.onTotalScroll = function() {
|
||||
// scroll forward or into the future toward the end of the file
|
||||
var start, url;
|
||||
if ((live_event_processing === false || (live_event_processing && should_apply_live_events === false)) &&
|
||||
auto_scroll_down === false) {
|
||||
|
||||
if (loaded_sections.length > 0) {
|
||||
start = loaded_sections[loaded_sections.length - 1].end + 1;
|
||||
}
|
||||
else {
|
||||
start = 0;
|
||||
}
|
||||
url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (start + page_size);
|
||||
first_time_down++;
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data) {
|
||||
Wait('stop');
|
||||
if (loaded_sections.indexOf(start) < 0) {
|
||||
if (data.content) {
|
||||
$('#pre-container-content').append(data.content);
|
||||
loaded_sections.push({
|
||||
start: (data.range.start < 0) ? 0 : data.range.start,
|
||||
end: data.range.end
|
||||
});
|
||||
current_range = data.range;
|
||||
}
|
||||
}
|
||||
if (data.range.end === data.range.absolute_end) {
|
||||
should_apply_live_events = true; //we're at the bottom
|
||||
$log.debug('at the end. turned on live events');
|
||||
}
|
||||
auto_scroll_down = true;
|
||||
if (first_time_down === 1) {
|
||||
$('#pre-container').mCustomScrollbar("update");
|
||||
}
|
||||
$("#pre-container").mCustomScrollbar("scrollTo", "bottom", {scrollInertia:0});
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Failed to retrieve stdout for job: ' + job_id + '. GET returned: ' + status });
|
||||
});
|
||||
}
|
||||
else {
|
||||
auto_scroll_down = false;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onTotalScrollBack = function() {
|
||||
$scope.stdOutScrollToTop = function() {
|
||||
// scroll up or back in time toward the beginning of the file
|
||||
var start, end, url;
|
||||
if (loaded_sections.length > 0 && loaded_sections[0].start > 0) {
|
||||
@ -200,26 +168,26 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
end = page_size;
|
||||
}
|
||||
if (start !== undefined && end !== undefined) {
|
||||
$('#stdoutMoreRowsTop').fadeIn();
|
||||
url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + end;
|
||||
first_time_up++;
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data) {
|
||||
Wait('stop');
|
||||
var oldContentHeight, heightDiff;
|
||||
oldContentHeight=$("#pre-container .mCSB_container").innerHeight();
|
||||
//var currentPos = $('#pre-container').scrollTop();
|
||||
var newSH, oldSH = $('#pre-container').prop('scrollHeight'),
|
||||
st = $('#pre-container').scrollTop();
|
||||
|
||||
$('#pre-container-content').prepend(data.content);
|
||||
|
||||
newSH = $('#pre-container').prop('scrollHeight');
|
||||
$('#pre-container').scrollTop(newSH - oldSH + st);
|
||||
|
||||
loaded_sections.unshift({
|
||||
start: (data.range.start < 0) ? 0 : data.range.start,
|
||||
end: data.range.end
|
||||
});
|
||||
current_range = data.range;
|
||||
heightDiff=$("#pre-container .mCSB_container").innerHeight() - oldContentHeight;
|
||||
if (first_time_up === 1) {
|
||||
$('#pre-container').mCustomScrollbar("update");
|
||||
}
|
||||
$("#pre-container").mCustomScrollbar("scrollTo", heightDiff, {scrollInertia:0});
|
||||
$('#stdoutMoreRowsTop').fadeOut(400);
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
|
||||
@ -228,42 +196,11 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
}
|
||||
};
|
||||
|
||||
$scope.whileScrolling = function(mcs) {
|
||||
var direction;
|
||||
if (prior_mcs !== undefined) {
|
||||
if (mcs.topPct < prior_mcs.topPct && prior_mcs.topPct !== 100) {
|
||||
direction = "up";
|
||||
}
|
||||
else if (mcs.topPct > prior_mcs.topPct) {
|
||||
direction = "down";
|
||||
}
|
||||
else {
|
||||
direction = "none";
|
||||
}
|
||||
}
|
||||
prior_mcs = mcs;
|
||||
if (direction === "up") {
|
||||
// user is scrollin up or back in time
|
||||
$log.debug('user scrolled up. turned off live events.');
|
||||
should_apply_live_events = false;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.scrollStarted = function() {
|
||||
// user touched the scroll bar. stop applying live events and forcing
|
||||
//if (auto_scroll_down === false) {
|
||||
// should_apply_live_events = false;
|
||||
// $log.debug('turned off live events');
|
||||
//}
|
||||
//else {
|
||||
// auto_scroll_down = false;
|
||||
//}
|
||||
};
|
||||
|
||||
function getNextSection() {
|
||||
// get the next range of data from the API
|
||||
var start = loaded_sections[loaded_sections.length - 1].end + 1, url;
|
||||
url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (start + page_size);
|
||||
$('#stdoutMoreRowsBottom').fadeIn();
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success( function(data) {
|
||||
@ -276,12 +213,9 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
|
||||
// if user has not disabled live event view by scrolling upward, then scroll down to the new content
|
||||
current_range = data.range;
|
||||
auto_scroll_down = true; // prevent auto load from happening
|
||||
first_time_down++;
|
||||
if (first_time_down === 1) {
|
||||
$('#pre-container').mCustomScrollbar("update");
|
||||
}
|
||||
$("#pre-container").mCustomScrollbar("scrollTo", "bottom", {scrollInertia:0});
|
||||
$('#pre-container-content').scrollTop($('#pre-container-content').prop("scrollHeight"));
|
||||
}
|
||||
$('#stdoutMoreRowsBottom').fadeOut(400);
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
|
||||
|
||||
@ -13,473 +13,477 @@
|
||||
@skipped-hosts-color: @skipped;
|
||||
@unreachable-hosts-color: @unreachable;
|
||||
|
||||
.job_summary {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
border: 1px solid @well-border;
|
||||
background-color: @white;
|
||||
|
||||
#jobs-detail {
|
||||
|
||||
.job_summary {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
border: 1px solid @well-border;
|
||||
background-color: @white;
|
||||
}
|
||||
.table>tbody>tr>td {
|
||||
border-top-color: @well-border;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.table>thead>tr>th {
|
||||
border-bottom-color: @well-border;
|
||||
padding-bottom: 0;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
.table>tbody>tr>td {
|
||||
border-top-color: @well-border;
|
||||
padding-bottom: 0;
|
||||
|
||||
.status-bar {
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
border: 1px solid @grey;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.table>thead>tr>th {
|
||||
border-bottom-color: @well-border;
|
||||
padding-bottom: 0;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
border: 1px solid @grey;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.inner-bar {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.scroll-spinner {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
color:#000;
|
||||
float:right;
|
||||
}
|
||||
#hostResultsMoreRows.scroll-spinner {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.failed-hosts {
|
||||
background-color: @failed-hosts-color;
|
||||
}
|
||||
.failed-hosts-color {
|
||||
color: @failed-hosts-color;
|
||||
}
|
||||
.successful-hosts {
|
||||
background-color: @successful-hosts-color;
|
||||
}
|
||||
.successful-hosts-color {
|
||||
color: @successful-hosts-color;
|
||||
}
|
||||
.changed-hosts {
|
||||
background-color: @changed-hosts-color;
|
||||
}
|
||||
.changed-hosts-color {
|
||||
color: @changed-hosts-color;
|
||||
}
|
||||
.skipped-hosts, .no-matching-hosts {
|
||||
background-color: @skipped-hosts-color;
|
||||
}
|
||||
.unreachable-hosts {
|
||||
background-color: @unreachable-hosts-color;
|
||||
}
|
||||
.unreachable-hosts-color {
|
||||
color: @unreachable-hosts-color;
|
||||
}
|
||||
.missing-hosts {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.job_well {
|
||||
padding: 8px;
|
||||
background-color: @white;
|
||||
border: 1px solid @well-border;
|
||||
border-radius: 4px;
|
||||
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);*/
|
||||
}
|
||||
|
||||
#hide-summary-button {
|
||||
text-align: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
.inner-bar {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.scroll-spinner {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
color:#000;
|
||||
float:right;
|
||||
}
|
||||
|
||||
#job-detail-tables {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#hostResultsMoreRows.scroll-spinner {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
#job_options {
|
||||
height: 100px;
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
}
|
||||
.failed-hosts {
|
||||
background-color: @failed-hosts-color;
|
||||
}
|
||||
.failed-hosts-color {
|
||||
color: @failed-hosts-color;
|
||||
}
|
||||
.successful-hosts {
|
||||
background-color: @successful-hosts-color;
|
||||
}
|
||||
.successful-hosts-color {
|
||||
color: @successful-hosts-color;
|
||||
}
|
||||
.changed-hosts {
|
||||
background-color: @changed-hosts-color;
|
||||
}
|
||||
.changed-hosts-color {
|
||||
color: @changed-hosts-color;
|
||||
}
|
||||
.skipped-hosts, .no-matching-hosts {
|
||||
background-color: @skipped-hosts-color;
|
||||
}
|
||||
.unreachable-hosts {
|
||||
background-color: @unreachable-hosts-color;
|
||||
}
|
||||
.unreachable-hosts-color {
|
||||
color: @unreachable-hosts-color;
|
||||
}
|
||||
.missing-hosts {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#job_plays, #job_tasks {
|
||||
height: 150px;
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
}
|
||||
.job_well {
|
||||
padding: 8px;
|
||||
background-color: @white;
|
||||
border: 1px solid @well-border;
|
||||
border-radius: 4px;
|
||||
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);*/
|
||||
}
|
||||
|
||||
#breadcrumb-container {
|
||||
padding-right: 15px;
|
||||
.nav-path {
|
||||
#hide-summary-button {
|
||||
text-align: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#job-detail-container {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
padding-right: 7px;
|
||||
width: 58.33333333%;
|
||||
.well {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#job-status-form {
|
||||
label {
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.control-label {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.form-group {
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#job-detail-tables {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#job_options {
|
||||
height: 100px;
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
}
|
||||
|
||||
#job_plays, #job_tasks {
|
||||
height: 150px;
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
}
|
||||
|
||||
#breadcrumb-container {
|
||||
padding-right: 15px;
|
||||
.nav-path {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#job-detail-container {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
padding-right: 7px;
|
||||
width: 58.33333333%;
|
||||
.well {
|
||||
overflow: hidden;
|
||||
}
|
||||
.more-or-less {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#started-time,
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
display: inline-block;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 15px;
|
||||
|
||||
#job-status-form {
|
||||
label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.control-label {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
.more-or-less {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#started-time,
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
display: inline-block;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#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 @well-border;
|
||||
border-radius: 4px;
|
||||
background-color: @white;
|
||||
/*padding-left: 3px; */
|
||||
.row {
|
||||
border-top: 1px solid @well-border;
|
||||
}
|
||||
.row:first-child {
|
||||
border: none;
|
||||
}
|
||||
/*.row:nth-child(odd) {
|
||||
background-color: @well;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}*/
|
||||
.active {
|
||||
background-color: #EDF2F2;
|
||||
#job-summary-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-right: 15px;
|
||||
padding-left: 7px;
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.loading-info {
|
||||
padding-top: 5px;
|
||||
padding-left: 3px;
|
||||
.table-header {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-column i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#tasks-table-detail {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#play-section {
|
||||
.table-detail {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 1px solid @well-border;
|
||||
border-radius: 4px;
|
||||
background-color: @white;
|
||||
/*padding-left: 3px; */
|
||||
.row {
|
||||
border-top: 1px solid @well-border;
|
||||
}
|
||||
.row:first-child {
|
||||
border: none;
|
||||
}
|
||||
/*.row:nth-child(odd) {
|
||||
background-color: @well;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}*/
|
||||
.active {
|
||||
background-color: #EDF2F2;
|
||||
}
|
||||
|
||||
.loading-info {
|
||||
padding-top: 5px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-column i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#tasks-table-detail {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: bottom: 5px;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
#play-section {
|
||||
.table-detail {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
float: right;
|
||||
input {
|
||||
width: 250px;
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: bottom: 5px;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
float: right;
|
||||
input {
|
||||
width: 250px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
a:hover {
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#summary-search-section {
|
||||
.remove-left-padding {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 6px;
|
||||
}
|
||||
#search_all_hosts_name {
|
||||
width: 100%;
|
||||
padding-left: 3px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#event-help-link {
|
||||
margin-left: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#search-all-input-icons {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 5px;
|
||||
z-index: 100;
|
||||
a {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
a:hover {
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#summary-search-section {
|
||||
.remove-left-padding {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 6px;
|
||||
}
|
||||
#search_all_hosts_name {
|
||||
width: 100%;
|
||||
padding-left: 3px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#event-help-link {
|
||||
margin-left: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#search-all-input-icons {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 5px;
|
||||
z-index: 100;
|
||||
a {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
a:hover {
|
||||
color: @black;
|
||||
}
|
||||
}
|
||||
|
||||
label.small-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#task-hosts-section {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
#hosts-table-detail {
|
||||
padding: 3px 0 3px 5px;
|
||||
border: 1px solid @well-border;
|
||||
border-top: 2px solid @well-border;
|
||||
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;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.table-detail {
|
||||
height: 200px;
|
||||
}
|
||||
.name {
|
||||
word-break: break-all;
|
||||
}
|
||||
.badge {
|
||||
label.small-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.badge-column a {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
i:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mCSB_container {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
#graph-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.header {
|
||||
margin-top: 20px;
|
||||
.legend {
|
||||
i {
|
||||
margin-left: 10px
|
||||
}
|
||||
i:first-child {
|
||||
margin-left: 0;
|
||||
#task-hosts-section {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
#hosts-table-detail {
|
||||
padding: 3px 0 3px 5px;
|
||||
border: 1px solid @well-border;
|
||||
border-top: 2px solid @well-border;
|
||||
height: 150px;
|
||||
background-color: @white;
|
||||
.col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {
|
||||
width: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
path.slice{
|
||||
stroke-width:2px;
|
||||
}
|
||||
|
||||
polyline{
|
||||
opacity: .3;
|
||||
stroke: black;
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg text.percent{
|
||||
fill:@black;
|
||||
text-anchor:middle;
|
||||
font-size:12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#event-viewer-dialog {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
overflow: hidden;
|
||||
.results {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.spacer {
|
||||
height: 60px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid @well-border;
|
||||
}
|
||||
tr {
|
||||
border-top: 1px solid @well-border;
|
||||
/*border-bottom: 1px solid @well-border;*/
|
||||
}
|
||||
tr:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
tr td:first-of-type {
|
||||
width: 20%;
|
||||
}
|
||||
.key {
|
||||
vertical-align: top;
|
||||
padding: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.value {
|
||||
padding: 3px;
|
||||
i {
|
||||
#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;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.table-detail {
|
||||
height: 200px;
|
||||
}
|
||||
.name {
|
||||
word-break: break-all;
|
||||
}
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
.badge-column a {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.nested-table {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
.legend {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
i:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mCSB_container {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
#graph-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.header {
|
||||
margin-top: 20px;
|
||||
.legend {
|
||||
i {
|
||||
margin-left: 10px
|
||||
}
|
||||
i:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
path.slice{
|
||||
stroke-width:2px;
|
||||
}
|
||||
|
||||
polyline{
|
||||
opacity: .3;
|
||||
stroke: black;
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg text.percent{
|
||||
fill:@black;
|
||||
text-anchor:middle;
|
||||
font-size:12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#event-viewer-dialog {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
overflow: hidden;
|
||||
.results {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.spacer {
|
||||
height: 60px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid @well-border;
|
||||
}
|
||||
tr {
|
||||
border-top: 1px solid @well-border;
|
||||
/*border-bottom: 1px solid @well-border;*/
|
||||
}
|
||||
tr:first-child {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
width: auto;
|
||||
tr {
|
||||
}
|
||||
tr td:first-of-type {
|
||||
width: 20%;
|
||||
}
|
||||
.key {
|
||||
vertical-align: top;
|
||||
padding: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.value {
|
||||
padding: 3px;
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.nested-table {
|
||||
border: none;
|
||||
padding: 0;
|
||||
table {
|
||||
border-top: none;
|
||||
}
|
||||
tr td:first-of-type {
|
||||
border-bottom: none;
|
||||
width: auto;
|
||||
tr {
|
||||
border-top: none;
|
||||
}
|
||||
tr td:first-of-type {
|
||||
width: auto;
|
||||
}
|
||||
.key {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.key {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#job-detail-container {
|
||||
#job-status-form {
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
display: block;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#job-detail-container {
|
||||
#job-status-form {
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
display: block;
|
||||
}
|
||||
#finished-time,
|
||||
#elapsed-time {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,12 +6,33 @@
|
||||
*/
|
||||
|
||||
#jobs-stdout {
|
||||
margin-bottom: 20px;
|
||||
|
||||
#job-status {
|
||||
label {
|
||||
margin-right: 15px;
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scroll-spinner {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
color:#000;
|
||||
}
|
||||
#stdoutMoreRowsTop {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
#stdoutMoreRowsBottom {
|
||||
float: right;
|
||||
}
|
||||
#pre-container {
|
||||
overflow-x: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.body_foreground { color: #AAAAAA; }
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
'use strict';
|
||||
var module = ng.module('lrInfiniteScroll', []);
|
||||
|
||||
module.directive('lrInfiniteScroll', ['$timeout', function (timeout) {
|
||||
module.directive('lrInfiniteScroll', ['$log', '$timeout', function ($log, timeout) {
|
||||
return{
|
||||
link: function (scope, element, attr) {
|
||||
var
|
||||
@ -21,10 +21,8 @@
|
||||
}
|
||||
|
||||
element.bind('scroll', function () {
|
||||
var remaining =
|
||||
(direction === 'down') ? element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop) : element[0].scrollTop;
|
||||
|
||||
//if we have reached the threshold and we scroll down
|
||||
var remaining = (direction === 'down') ? element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop) : element[0].scrollTop;
|
||||
// if we have reached the threshold and we scroll down
|
||||
if ((direction === 'down' && remaining < lengthThreshold && (remaining - lastRemaining) < 0) ||
|
||||
direction === 'up' && remaining < lengthThreshold) {
|
||||
//if there is already a timer running which has not expired yet we have to cancel it and restart the timer
|
||||
|
||||
@ -15,12 +15,13 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div id="job-status"><label>Job Status</label> <i class="fa icon-job-{{ job.status }}"></i> {{ job.status }}</div>
|
||||
<div id="pre-container" class="body_background body_foreground pre mono-space" aw-custom-scroll data-scroll-theme="light-thin"
|
||||
data-scroll-inertia="500" data-on-total-scroll="onTotalScroll" data-on-total-scroll-back="onTotalScrollBack" data-on-scroll-start="scrollStarted"
|
||||
data-while-scrolling="whileScrolling" data-on-total-scroll-back-offset="100" data-scroll-axis="yx">
|
||||
<div class="scroll-spinner" id="stdoutMoreRowsTop"><i class="fa fa-cog fa-spin"></i></div>
|
||||
<div id="pre-container" class="body_background body_foreground pre mono-space" lr-infinite-scroll="stdOutScrollToTop"
|
||||
scroll-threshold="300" data-direction="up" time-threshold="500">
|
||||
<div id="pre-container-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-spinner" id="stdoutMoreRowsBottom"><i class="fa fa-cog fa-spin"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user