shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Job detail page re-refactor

Browse Source 
Added endless scroll to host event viewer with a page size of 50 rows.
This commit is contained in:
Chris Houseknecht 2014-07-10 12:23:44 -04:00
parent 490d53419e
commit 807577abc8
5 changed files with 90 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/static/js/app.js
View File

@ -401,7 +401,7 @@ angular.module('Tower', [
if ($AnsibleConfig.debug_mode) {
_debug(msg);
}
}
};
return $delegate;
});
})

2
awx/ui/static/js/config.js
View File

@ -14,7 +14,7 @@ var $AnsibleConfig = {
tooltip_delay: {show: 500, hide: 100}, // Default number of milliseconds to delay displaying/hiding tooltips
debug_mode: false, // Enable console logging messages
debug_mode: true, // Enable console logging messages
password_strength: 45, // User password strength. Integer between 0 and 100, 100 being impossibly strong.
// This value controls progress bar colors:

119
awx/ui/static/js/helpers/HostEventsViewer.js
View File

@ -19,7 +19,8 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
job_id = params.job_id,
url = params.url,
title = params.title, //optional
fixHeight, buildTable;
fixHeight, buildTable,
lastID, setStatus, buildRow;
scope.host_events_search_name = params.name;
scope.host_events_search_status = (params.status) ? params.status : 'all';
@ -39,9 +40,10 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
if (scope.removeJobReady) {
scope.removeJobReady();
}
scope.removeEventReady = scope.$on('EventsReady', function(e, data) {
scope.removeEventReady = scope.$on('EventsReady', function(e, data, maxID) {
var elem, html;
lastID = maxID;
html = buildTable(data);
$('#host-events').html(html);
elem = angular.element(document.getElementById('host-events-modal-dialog'));
@ -81,41 +83,52 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
$compile(elem)(scope);
});
setStatus = function(result) {
var msg = '', status = 'ok', status_text = 'OK';
if (!result.task && result.event_data && result.event_data.res && result.event_data.res.ansible_facts) {
result.task = "Gathering Facts";
}
if (result.event === "runner_on_no_hosts") {
msg = "No hosts remaining";
}
if (result.event === 'runner_on_unreachable') {
status = 'unreachable';
status_text = 'Unreachable';
}
else if (result.failed) {
status = 'failed';
status_text = 'Failed';
}
else if (result.changed) {
status = 'changed';
status_text = 'Changed';
}
if (result.event_data.res && result.event_data.res.msg) {
msg = result.event_data.res.msg;
}
result.msg = msg;
result.status = status;
result.status_text = status_text;
return result;
};
buildRow = function(res) {
var html = '';
html += "<tr ng-click=\"showDetails(" + res.id + ")\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n";
html += "<td class=\"col-md-3\"><i class=\"fa icon-job-" + res.status + "\"></i> <a href=\"\">" + res.status_text + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + res.play + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + res.task + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + res.msg + "</a></td>";
html += "</tr>";
return html;
};
buildTable = function(data) {
var html = "<table class=\"table\">\n";
html += "<tbody>\n";
data.results.forEach(function(result) {
var msg = '',
status = 'ok',
status_text = 'OK';
if (result.event_data.res && result.event_data.res.msg) {
msg = result.event_data.res.msg;
}
if (!result.task && result.event_data.res.ansible_facts) {
result.task = "Gathering Facts";
}
if (result.event === "runner_on_no_hosts") {
msg = "No hosts remaining";
}
if (result.event === 'runner_on_unreachable') {
status = 'unreachable';
status_text = 'Unreachable';
}
else if (result.failed) {
status = 'failed';
status_text = 'Failed';
}
else if (result.changed) {
status = 'changed';
status_text = 'Changed';
}
html += "<tr ng-click=\"showDetails(" + result.id + ")\" class=\"cursor-pointer\" aw-tool-tip=\"Click to view details\" data-placement=\"top\">\n";
html += "<td class=\"col-md-3\"><i class=\"fa icon-job-" + status + "\"></i> <a href=\"\">" + status_text + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + result.play + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + result.task + "</a></td>\n";
html += "<td class=\"col-md-3\"><a href=\"\">" + msg + "</a></td>";
html += "</tr>";
var res = setStatus(result);
html += buildRow(res);
});
html += "</tbody>\n";
html += "</table>\n";
@ -168,6 +181,32 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
});
};
if (scope.removeEventsScrollDownBuild) {
scope.removeEventsScrollDownBuild();
}
scope.removeEventsScrollDownBuild = scope.$on('EventScrollDownBuild', function(e, data, maxID) {
var elem, html = '';
lastID = maxID;
data.results.forEach(function(result) {
var res = setStatus(result);
html += buildRow(res);
});
if (html) {
$('#host-events table tbody').append(html);
elem = angular.element(document.getElementById('host-events'));
$compile(elem)(scope);
}
});
scope.hostEventsScrollDown = function() {
GetEvents({
scope: scope,
url: url,
gt: lastID,
callback: 'EventScrollDownBuild'
});
};
};
}])
@ -175,6 +214,7 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
return function(params) {
var url = params.url,
scope = params.scope,
gt = params.gt,
callback = params.callback;
if (scope.host_events_search_name) {
@ -200,12 +240,23 @@ angular.module('HostEventsViewerHelper', ['ModalDialog', 'Utilities', 'EventView
url += '&event__icontains=runner&not__event=runner_on_skipped';
}
if (gt) {
// used for endless scroll
url += '&id__gt=' + gt;
}
url += '&page_size=50&order=id';
scope.hostViewSearching = true;
Rest.setUrl(url);
Rest.get()
.success(function(data) {
var lastID;
scope.hostViewSearching = false;
scope.$emit(callback, data);
if (data.results.length > 0) {
lastID = data.results[data.results.length - 1].id;
}
scope.$emit(callback, data, lastID);
})
.error(function(data, status) {
scope.hostViewSearching = false;

2
awx/ui/static/lib/lrInfiniteScroll/lrInfiniteScroll.js
View File

@ -20,6 +20,8 @@
handler = ng.noop;
}
$log.debug('lrInfiniteScroll: ' + attr.lrInfiniteScroll);
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

2
awx/ui/static/partials/job_detail.html
View File

@ -376,7 +376,7 @@
</tr>
</thead>
</table>
<div id="host-events"></div>
<div id="host-events" lr-infinite-scroll="hostEventsScrollDown" scroll-threshold="10" time-threshold="500"></div>
</div>
</div>