From 807577abc8a5d8cd06fced9c7f3b8ec848395827 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Thu, 10 Jul 2014 12:23:44 -0400 Subject: [PATCH] Job detail page re-refactor Added endless scroll to host event viewer with a page size of 50 rows. --- awx/ui/static/js/app.js | 2 +- awx/ui/static/js/config.js | 2 +- awx/ui/static/js/helpers/HostEventsViewer.js | 119 +++++++++++++----- .../lib/lrInfiniteScroll/lrInfiniteScroll.js | 2 + awx/ui/static/partials/job_detail.html | 2 +- 5 files changed, 90 insertions(+), 37 deletions(-) diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index 492422e453..403cd93ec2 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -401,7 +401,7 @@ angular.module('Tower', [ if ($AnsibleConfig.debug_mode) { _debug(msg); } - } + }; return $delegate; }); }) diff --git a/awx/ui/static/js/config.js b/awx/ui/static/js/config.js index 66255cf4da..8b82bc3da5 100644 --- a/awx/ui/static/js/config.js +++ b/awx/ui/static/js/config.js @@ -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: diff --git a/awx/ui/static/js/helpers/HostEventsViewer.js b/awx/ui/static/js/helpers/HostEventsViewer.js index 18c52a7129..f49f244653 100644 --- a/awx/ui/static/js/helpers/HostEventsViewer.js +++ b/awx/ui/static/js/helpers/HostEventsViewer.js @@ -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 += "\n"; + html += " " + res.status_text + "\n"; + html += "" + res.play + "\n"; + html += "" + res.task + "\n"; + html += "" + res.msg + ""; + html += ""; + return html; + }; + buildTable = function(data) { var html = "\n"; html += "\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 += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += ""; - html += ""; + var res = setStatus(result); + html += buildRow(res); }); html += "\n"; html += "
" + status_text + "" + result.play + "" + result.task + "" + msg + "
\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¬__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; diff --git a/awx/ui/static/lib/lrInfiniteScroll/lrInfiniteScroll.js b/awx/ui/static/lib/lrInfiniteScroll/lrInfiniteScroll.js index 2fbb4b32de..3268a94081 100644 --- a/awx/ui/static/lib/lrInfiniteScroll/lrInfiniteScroll.js +++ b/awx/ui/static/lib/lrInfiniteScroll/lrInfiniteScroll.js @@ -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 diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html index bde6e7fa17..9c9a99caee 100644 --- a/awx/ui/static/partials/job_detail.html +++ b/awx/ui/static/partials/job_detail.html @@ -376,7 +376,7 @@ -
+