mirror of
https://github.com/ansible/awx.git
synced 2026-01-23 15:38:06 -03:30
Fixes to status bar display. Now displays in real-tiime despite large number of hosts. Tested with 600 hosts.
This commit is contained in:
chouseknecht
parent
b320fc725f
commit
bb071379c2
@ -285,9 +285,10 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
}
|
||||
|
||||
// Summary table height adjusting.
|
||||
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;
|
||||
$('#hosts-summary-table').height(height);
|
||||
$('#hosts-summary-table').mCustomScrollbar("update");
|
||||
scope.$emit('RefreshCompleted');
|
||||
};
|
||||
|
||||
@ -399,7 +400,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
}
|
||||
else {
|
||||
scope.search_all_label = 'Failures';
|
||||
scope.searchAllDisabled = true;
|
||||
scope.searchAllDisabled = true;
|
||||
scope.search_all_placeholder = '';
|
||||
}
|
||||
};
|
||||
@ -577,7 +578,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
}
|
||||
scope.auto_scroll = false;
|
||||
else {
|
||||
scope.auto_scroll = false;
|
||||
}
|
||||
};
|
||||
|
||||
scope.HostSummaryOnTotalScrollBack = function(mcs) {
|
||||
@ -618,6 +621,9 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
}
|
||||
else {
|
||||
scope.auto_scroll = false;
|
||||
}
|
||||
};
|
||||
|
||||
scope.searchTaskHosts = function() {
|
||||
@ -685,8 +691,10 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
});
|
||||
Wait('stop');
|
||||
$('#hosts-summary-table').mCustomScrollbar("update");
|
||||
scope.auto_scroll = true;
|
||||
setTimeout( function() { $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom"); }, 700);
|
||||
setTimeout( function() {
|
||||
scope.auto_scroll = true;
|
||||
$('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom");
|
||||
}, 700);
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
|
||||
@ -404,7 +404,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
});
|
||||
UpdateJobStatus({
|
||||
scope: scope,
|
||||
failed: failed,
|
||||
failed: null,
|
||||
modified: modified
|
||||
});
|
||||
return false;
|
||||
@ -504,9 +504,11 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
if (scope.hosts.length > scope.hostSummaryTableRows) {
|
||||
scope.hosts.splice(0,1);
|
||||
}
|
||||
scope.auto_scroll = true;
|
||||
$('#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) {
|
||||
var diff;
|
||||
if (task.id === task_id) {
|
||||
if (task.id === first) {
|
||||
scope.tasks[idx].hostCount += 1;
|
||||
@ -620,12 +623,30 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
scope.tasks[idx].changedPct = (scope.tasks[idx].hostCount > 0) ? Math.ceil((100 * (scope.tasks[idx].changedCount / 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].successfulStyle = (scope.tasks[idx].successfulPct > 0) ? { width: scope.tasks[idx].successfulPct + '%' } : { display: 'none' };
|
||||
scope.tasks[idx].changedStyle = (scope.tasks[idx].changedPct > 0) ? { width: scope.tasks[idx].changedPct + '%' } : { display: 'none' };
|
||||
scope.tasks[idx].skippedStyle = (scope.tasks[idx].skippedPct > 0) ? { width: scope.tasks[idx].skippedPct + '%' } : { display: 'none' };
|
||||
scope.tasks[idx].failedStyle = (scope.tasks[idx].failedPct > 0) ? { width: scope.tasks[idx].failedPct + '%' } : { display: 'none' };
|
||||
|
||||
diff = (scope.tasks[idx].failedPct + scope.tasks[idx].changedPct + scope.tasks[idx].skippedPct + scope.tasks[idx].successfulPct) - 100;
|
||||
if (diff > 0) {
|
||||
if (scope.tasks[idx].failedPct > diff) {
|
||||
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 true;
|
||||
@ -658,19 +679,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
scope.activeTask = max_task_id;
|
||||
SelectTask({
|
||||
scope: scope,
|
||||
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);
|
||||
}
|
||||
id: max_task_id
|
||||
});
|
||||
};
|
||||
}])
|
||||
@ -682,6 +691,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
id = params.id,
|
||||
callback = params.callback,
|
||||
url;
|
||||
|
||||
scope.tasks.forEach(function(task, idx) {
|
||||
if (task.id === id) {
|
||||
scope.tasks[idx].taskActiveClass = 'active';
|
||||
@ -692,9 +702,18 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
scope.tasks[idx].taskActiveClass = '';
|
||||
}
|
||||
});
|
||||
|
||||
if (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');
|
||||
scope.hostResults = [];
|
||||
url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&';
|
||||
@ -727,11 +746,11 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
|
||||
.factory('SelectHost', [ function() {
|
||||
return function(params) {
|
||||
var scope = params.scope;
|
||||
scope.auto_scroll = true;
|
||||
setTimeout(function() {
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
setTimeout( function() { $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom"); }, 700);
|
||||
}, 100);
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
setTimeout( function() {
|
||||
scope.auto_scroll = true;
|
||||
$('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom");
|
||||
}, 700);
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
|
||||
</div>
|
||||
<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 class="row" ng-show="taskList.length === 0">
|
||||
@ -171,20 +171,26 @@
|
||||
</div>
|
||||
<div class="table-header">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">Host</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Events</div>
|
||||
<div class="col-lg-7 col-md-7 col-sm-4 col-xs-4">Host</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">Events</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hosts-summary-table" class="table-detail" aw-custom-scroll data-on-total-scroll="HostSummaryOnTotalScroll"
|
||||
data-on-total-scroll-back="HostSummaryOnTotalScrollBack">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user