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

awx/ui/static/js/controllers/JobDetail.js

@@ -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() {
-                setTimeout( function() { $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom"); }, 700);
+                    scope.auto_scroll = true;
+                    $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom");
+                }, 700);
             })
             .error(function(data, status) {
                 ProcessErrors(scope, data, status, null, { hdr: 'Error!',

awx/ui/static/js/helpers/JobDetail.js

@@ -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,
+            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,
             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;
+        $('#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);
     };
 }])
 

awx/ui/static/partials/job_detail.html

@@ -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-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 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>