External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 14:57:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Job detail page refactoration

Browse Source 
Finished job event viewer dialog. Centered next/prev buttons with a custom javascript resize calc. Page size is 50 with an 'endless scroll' in both directions.
This commit is contained in:
Chris Houseknecht
2014-07-16 17:44:08 -04:00
parent 7789ccd3eb
commit 7d0e8c85eb
1 changed files with 73 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
awx/ui/static/js/helpers/EventViewer.js
View File

@@ -20,10 +20,43 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
scope = parent_scope.$new(true), scope = parent_scope.$new(true),
current_event; current_event;
if (scope.removeShowNextEvent) {
scope.removeShowNextEvent();
}
scope.removeShowNextEvent = scope.$on('ShowNextEvent', function(e, data, show_event) {
scope.events = data;
$('#event-next-spinner').hide(400);
if (show_event === 'prev') {
showEvent(scope.events.length - 1);
}
else if (show_event === 'next') {
showEvent(0);
}
});
// show scope.events[idx] // show scope.events[idx]
function showEvent(idx) { function showEvent(idx) {
var show_tabs = false, elem, data = scope.events[idx]; var show_tabs = false, elem, data;
if (idx > scope.events.length - 1) {
GetEvent({
scope: scope,
url: scope.next_event_set,
show_event: 'next'
});
return;
}
if (idx < 0) {
GetEvent({
scope: scope,
url: scope.prev_event_set,
show_event: 'prev'
});
return;
}
data = scope.events[idx];
current_event = idx; current_event = idx;
$('#status-form-container').empty(); $('#status-form-container').empty();
@@ -86,8 +119,17 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
} }
function setButtonMargin() { function setButtonMargin() {
var width = ($('.ui-dialog[aria-describedby=["eventviewer-modal-dialog"] .ui-dialog-buttonpane').innerWidth() / 2) - $('#events-next-button').outerWidth(); var width = ($('.ui-dialog[aria-describedby="eventviewer-modal-dialog"] .ui-dialog-buttonpane').innerWidth() / 2) - $('#events-next-button').outerWidth() - 73;
console.log('width: ' + width); $('#events-next-button').css({'margin-right': width + 'px'});
}
function addSpinner() {
var position;
if ($('#event-next-spinner').length > 0) {
$('#event-next-spinner').remove();
}
position = $('#events-next-button').position();
$('#events-next-button').after('<i class="fa fa-cog fa-spin" id="event-next-spinner" style="display:none; position:absolute; top:' + (position.top + 15) + 'px; left:' + (position.left + 75) + 'px;"></i>');
} }
if (scope.removeModalReady) { if (scope.removeModalReady) {
@@ -102,8 +144,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
scope.removeJobReady(); scope.removeJobReady();
} }
scope.removeEventReady = scope.$on('EventReady', function(e, data) { scope.removeEventReady = scope.$on('EventReady', function(e, data) {
var elem, btns; var btns;
scope.events = data; scope.events = data;
// find and show the selected event // find and show the selected event
@@ -121,7 +162,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
btns.push({ btns.push({
label: "Prev", label: "Prev",
onClick: function () { onClick: function () {
if (current_event - 1 === 0) { if (current_event - 1 === 0 && !scope.prev_event_set) {
$('#events-prev-button').prop('disabled', true); $('#events-prev-button').prop('disabled', true);
} }
if (current_event - 1 < scope.events.length - 1) { if (current_event - 1 < scope.events.length - 1) {
@@ -139,7 +180,7 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
if (current_event + 1 > 0) { if (current_event + 1 > 0) {
$('#events-prev-button').prop('disabled', false); $('#events-prev-button').prop('disabled', false);
} }
if (current_event + 1 >= scope.events.length - 1) { if (current_event + 1 >= scope.events.length - 1 && !scope.next_event_set) {
$('#events-next-button').prop('disabled', true); $('#events-next-button').prop('disabled', true);
} }
showEvent(current_event + 1); showEvent(current_event + 1);
@@ -170,6 +211,10 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
title: ( (title) ? title : 'Event Details' ), title: ( (title) ? title : 'Event Details' ),
buttons: btns, buttons: btns,
closeOnEscape: true, closeOnEscape: true,
onResizeStop: function() {
setButtonMargin();
addSpinner();
},
onClose: function() { onClose: function() {
try { try {
scope.$destroy(); scope.$destroy();
@@ -182,9 +227,13 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
$('#eventview-tabs a:first').tab('show'); $('#eventview-tabs a:first').tab('show');
$('#dialog-ok-button').focus(); $('#dialog-ok-button').focus();
if (scope.events.length > 1 && current_event === 0) { if (scope.events.length > 1 && current_event === 0) {
console.log('disabling prev button');
$('#events-prev-button').prop('disabled', true); $('#events-prev-button').prop('disabled', true);
} }
if (scope.events.length > 1) {
setButtonMargin();
addSpinner();
}
} }
}); });
}); });
@@ -206,20 +255,26 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
return function(params) { return function(params) {
var url = params.url, var url = params.url,
scope = params.scope, scope = params.scope,
show_event = params.show_event,
results= []; results= [];
if (show_event) {
$('#event-next-spinner').show();
}
else {
Wait('start');
}
function getStatus(data) { function getStatus(data) {
return (data.results[0].event === "runner_on_unreachable") ? "unreachable" : (data.results[0].event === "runner_on_skipped") ? 'skipped' : (data.results[0].failed) ? 'failed' : return (data.results[0].event === "runner_on_unreachable") ? "unreachable" : (data.results[0].event === "runner_on_skipped") ? 'skipped' : (data.results[0].failed) ? 'failed' :
(data.results[0].changed) ? 'changed' : 'ok'; (data.results[0].changed) ? 'changed' : 'ok';
} }
console.log('url: ' + url);
Wait('start');
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success( function(data) { .success( function(data) {
scope.next_event_set = data.next; scope.next_event_set = data.next;
scope.prev_event_set = data.prev; scope.prev_event_set = data.previous;
console.log(data.results);
data.results.forEach(function(event) { data.results.forEach(function(event) {
var key, event_data = {}; var key, event_data = {};
if (event.event_data.res) { if (event.event_data.res) {
@@ -270,8 +325,12 @@ angular.module('EventViewerHelper', ['ModalDialog', 'Utilities', 'EventsViewerFo
event_data.event = (event.event_display) ? event.event_display : event.event; event_data.event = (event.event_display) ? event.event_display : event.event;
results.push(event_data); results.push(event_data);
}); });
if (show_event) {
scope.$emit('EventReady', results); scope.$emit('ShowNextEvent', results, show_event);
}
else {
scope.$emit('EventReady', results);
}
}) })
.error(function(data, status) { .error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!', ProcessErrors(scope, data, status, null, { hdr: 'Error!',