External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 07:17:40 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fixes to status bar display. Now displays in real-tiime despite large number of hosts. Tested with 600 hosts.

Browse Source
This commit is contained in:
chouseknecht
2014-05-09 13:28:50 -04:00
parent b320fc725f
commit bb071379c2
3 changed files with 69 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
awx/ui/static/js/controllers/JobDetail.js
View File

@@ -288,6 +288,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() - height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() -
$('#summary-search-section').outerHeight() - 20; $('#summary-search-section').outerHeight() - 20;
$('#hosts-summary-table').height(height); $('#hosts-summary-table').height(height);
$('#hosts-summary-table').mCustomScrollbar("update");
scope.$emit('RefreshCompleted'); scope.$emit('RefreshCompleted');
}; };
@@ -577,7 +578,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
msg: 'Call to ' + url + '. GET returned: ' + status }); msg: 'Call to ' + url + '. GET returned: ' + status });
}); });
} }
scope.auto_scroll = false; else {
scope.auto_scroll = false;
}
}; };
scope.HostSummaryOnTotalScrollBack = function(mcs) { scope.HostSummaryOnTotalScrollBack = function(mcs) {
@@ -618,6 +621,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
msg: 'Call to ' + url + '. GET returned: ' + status }); msg: 'Call to ' + url + '. GET returned: ' + status });
}); });
} }
else {
scope.auto_scroll = false;
}
}; };
scope.searchTaskHosts = function() { scope.searchTaskHosts = function() {
@@ -685,8 +691,10 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
}); });
Wait('stop'); Wait('stop');
$('#hosts-summary-table').mCustomScrollbar("update"); $('#hosts-summary-table').mCustomScrollbar("update");
scope.auto_scroll = true; setTimeout( function() {
setTimeout( function() { $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom"); }, 700); scope.auto_scroll = true;
$('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom");
}, 700);
}) })
.error(function(data, status) { .error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!', ProcessErrors(scope, data, status, null, { hdr: 'Error!',

71
awx/ui/static/js/helpers/JobDetail.js
View File

@@ -404,7 +404,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
}); });
UpdateJobStatus({ UpdateJobStatus({
scope: scope, scope: scope,
failed: failed, failed: null,
modified: modified modified: modified
}); });
return false; return false;
@@ -504,9 +504,11 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
if (scope.hosts.length > scope.hostSummaryTableRows) { if (scope.hosts.length > scope.hostSummaryTableRows) {
scope.hosts.splice(0,1); scope.hosts.splice(0,1);
} }
scope.auto_scroll = true;
$('#tasks-table-detail').mCustomScrollbar("update"); $('#tasks-table-detail').mCustomScrollbar("update");
setTimeout( function() { $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom"); }, 700); setTimeout( function() {
scope.auto_scroll = true;
$('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom");
}, 700);
} }
} }
@@ -606,6 +608,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
}); });
scope.tasks.every(function(task, idx) { scope.tasks.every(function(task, idx) {
var diff;
if (task.id === task_id) { if (task.id === task_id) {
if (task.id === first) { if (task.id === first) {
scope.tasks[idx].hostCount += 1; scope.tasks[idx].hostCount += 1;
@@ -621,11 +624,29 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
scope.tasks[idx].skippedPct = (scope.tasks[idx].hostCount > 0) ? Math.ceil((100 * (scope.tasks[idx].skippedCount / scope.tasks[idx].hostCount))) : 0; scope.tasks[idx].skippedPct = (scope.tasks[idx].hostCount > 0) ? Math.ceil((100 * (scope.tasks[idx].skippedCount / scope.tasks[idx].hostCount))) : 0;
scope.tasks[idx].successfulPct = (scope.tasks[idx].hostCount > 0) ? Math.ceil((100 * (scope.tasks[idx].successfulCount / scope.tasks[idx].hostCount))) : 0; scope.tasks[idx].successfulPct = (scope.tasks[idx].hostCount > 0) ? Math.ceil((100 * (scope.tasks[idx].successfulCount / scope.tasks[idx].hostCount))) : 0;
scope.tasks[idx].successfulStyle = (scope.tasks[idx].successfulPct > 0) ? { width: scope.tasks[idx].successfulPct + '%' } : { display: 'none' }; diff = (scope.tasks[idx].failedPct + scope.tasks[idx].changedPct + scope.tasks[idx].skippedPct + scope.tasks[idx].successfulPct) - 100;
scope.tasks[idx].changedStyle = (scope.tasks[idx].changedPct > 0) ? { width: scope.tasks[idx].changedPct + '%' } : { display: 'none' }; if (diff > 0) {
scope.tasks[idx].skippedStyle = (scope.tasks[idx].skippedPct > 0) ? { width: scope.tasks[idx].skippedPct + '%' } : { display: 'none' }; if (scope.tasks[idx].failedPct > diff) {
scope.tasks[idx].failedStyle = (scope.tasks[idx].failedPct > 0) ? { width: scope.tasks[idx].failedPct + '%' } : { display: 'none' }; scope.tasks[idx].failedPct = scope.tasks[idx].failedPct - diff;
}
else if (scope.tasks[idx].changedPct > diff) {
scope.tasks[idx].changedPct = scope.tasks[idx].changedPct - diff;
}
else if (scope.tasks[idx].skippedPct > diff) {
scope.tasks[idx].skippedPct = scope.tasks[idx].skippedPct - diff;
}
else if (scope.tasks[idx].successfulPct > diff) {
scope.tasks[idx].successfulPct = scope.tasks[idx].successfulPct - diff;
}
}
scope.tasks[idx].successfulStyle = (scope.tasks[idx].successfulPct > 0) ? { display: 'inline-block', width: scope.tasks[idx].successfulPct + '%' } : { display: 'none' };
scope.tasks[idx].changedStyle = (scope.tasks[idx].changedPct > 0) ? { display: 'inline-block', width: scope.tasks[idx].changedPct + '%' } : { display: 'none' };
scope.tasks[idx].skippedStyle = (scope.tasks[idx].skippedPct > 0) ? { display: 'inline-block', width: scope.tasks[idx].skippedPct + '%' } : { display: 'none' };
scope.tasks[idx].failedStyle = (scope.tasks[idx].failedPct > 0) ? { display: 'inline-block', width: scope.tasks[idx].failedPct + '%' } : { display: 'none' };
$('#' + task.id + '-' + task.play_id + '-' + 'successful-bar').css(scope.tasks[idx].successfulStyle);
$('#' + task.id + '-' + task.play_id + '-' + 'changed-bar').css(scope.tasks[idx].changedStyle);
$('#' + task.id + '-' + task.play_id + '-' + 'skipped-bar').css(scope.tasks[idx].skippedStyle);
$('#' + task.id + '-' + task.play_id + '-' + 'failed-bar').css(scope.tasks[idx].failedStyle);
return false; return false;
} }
return true; return true;
@@ -658,19 +679,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
scope.activeTask = max_task_id; scope.activeTask = max_task_id;
SelectTask({ SelectTask({
scope: scope, scope: scope,
id: max_task_id, id: max_task_id
callback: function() {
// Scroll the task table all the way to the bottom, revealing the last row
setTimeout(function() {
var original_height = $('#tasks-table-detail').css('height'),
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);
$('#tasks-table-detail').mCustomScrollbar("update");
}, 300);
}
}); });
}; };
}]) }])
@@ -682,6 +691,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
id = params.id, id = params.id,
callback = params.callback, callback = params.callback,
url; url;
scope.tasks.forEach(function(task, idx) { scope.tasks.forEach(function(task, idx) {
if (task.id === id) { if (task.id === id) {
scope.tasks[idx].taskActiveClass = 'active'; scope.tasks[idx].taskActiveClass = 'active';
@@ -692,9 +702,18 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
scope.tasks[idx].taskActiveClass = ''; scope.tasks[idx].taskActiveClass = '';
} }
}); });
if (callback) { if (callback) {
callback(); callback();
} }
$('#tasks-table-detail').mCustomScrollbar("update");
setTimeout( function() {
scope.auto_scroll = true;
$('#tasks-table-detail').mCustomScrollbar("scrollTo", "bottom");
}, 700);
// Get current list of hosts from the API
Wait('start'); Wait('start');
scope.hostResults = []; scope.hostResults = [];
url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&'; url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&';
@@ -727,11 +746,11 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
.factory('SelectHost', [ function() { .factory('SelectHost', [ function() {
return function(params) { return function(params) {
var scope = params.scope; var scope = params.scope;
scope.auto_scroll = true; $('#tasks-table-detail').mCustomScrollbar("update");
setTimeout(function() { setTimeout( function() {
$('#tasks-table-detail').mCustomScrollbar("update"); scope.auto_scroll = true;
setTimeout( function() { $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom"); }, 700); $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom");
}, 100); }, 700);
}; };
}]) }])

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

@@ -84,7 +84,7 @@
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }} <i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
</div> </div>
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs"> <div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
<div class="status-bar"><div class="successful-hosts inner-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="{{ task.successfulStyle }}">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="{{ task.changedStyle }}">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="{{ task.skippedStyle }}">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="{{ task.failedStyle }}">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div> <div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="{{ task.successfulCount}} hosts OK" aw-tip-watch="task.successfulCount" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="{{ task.changedCount}} hosts changed" aw-tip-watch="task.changedCount" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="{{ task.skippedCount}} hosts skipped" aw-tip-watch="task.skippedCount" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="{{ task.failedCount}} hosts failed" aw-tip-watch="task.failedCount" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
</div> </div>
</div> </div>
<div class="row" ng-show="taskList.length === 0"> <div class="row" ng-show="taskList.length === 0">
@@ -171,20 +171,26 @@
</div> </div>
<div class="table-header"> <div class="table-header">
<div class="row"> <div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">Host</div> <div class="col-lg-7 col-md-7 col-sm-4 col-xs-4">Host</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Events</div> <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">Events</div>
</div> </div>
</div> </div>
<div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll" <div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
data-on-total-scroll-back="HostSummaryOnTotalScrollBack"> data-on-total-scroll-back="HostSummaryOnTotalScrollBack">
<div class="row" ng-repeat="host in hosts" id="{{ host.id }}"> <div class="row" ng-repeat="host in hosts" id="{{ host.id }}">
<div class="name col-lg-8 col-md-8 col-sm-8 col-xs-8"><a href="/#/home/hosts/?id={{ host.id }}" <div class="name col-lg-7 col-md-6 col-sm-4 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}"
aw-tool-tip="Click to edit host" data-placement="top">{{ host.name }}</a> aw-tool-tip="Click to edit host" data-placement="top">{{ host.name }}</a>
</div> </div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
<a href="" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a> <a href="" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
<a href="" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a> <a href="" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
<a href="" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a> <a href="" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2">
<a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a> <a href="" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a>
</div> </div>
</div> </div>