Fixed scrolling issues and page resizing issues. When page resizes the number of visible rows in each table expands.

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

@@ -17,7 +17,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         event_queue = [],
         processed_events = [],
         scope = $scope,
-        api_complete = false;
+        api_complete = false,
+        refresh_count = 0;
     
     scope.plays = [];
     scope.tasks = [];
@@ -28,6 +29,8 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
     scope.auto_scroll = false;
     scope.searchTaskHostsEnabled = true;
     scope.searchSummaryHostsEnabled = true;
+    scope.hostTableRows = 120;
+    scope.hostSummaryTableRows = 120;
     
     event_socket =  Socket({
         scope: scope,
@@ -177,8 +180,12 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         }
     });
     
-    Wait('start');
     
+    if (scope.removeLoadJob) {
+        scope.removeLoadJob();
+    }
+    scope.removeLoadJobRow = scope.$on('LoadJob', function() {
+        Wait('start');
         // Load the job record
         Rest.setUrl(GetBasePath('jobs') + job_id + '/');
         Rest.get()
@@ -223,33 +230,19 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                 ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                     msg: 'Failed to retrieve job: ' + $routeParams.id + '. GET returned: ' + status });
             });
-
-    scope.selectPlay = function(id) {
-        SelectPlay({
-            scope: scope,
-            id: id
     });
-    };
 
-    scope.selectTask = function(id) {
+    if (scope.removeRefreshCompleted) {
-        SelectTask({
+        scope.removeRefreshCompleted();
-            scope: scope,
+    }
-            id: id
+    scope.removeRefreshCompleted = scope.$on('RefreshCompleted', function() {
-        });
+        refresh_count++;
-    };
+        if (refresh_count === 2) {
-
+            scope.$emit('LoadJob');
-    $("#hosts-slider-vertical").slider({
-        orientation: "vertical",
-        range: "min",
-        min: 0,
-        max: 100,
-        value: 60,
-        slide: function( event, ui ) {
-            $( "#amount" ).val( ui.value );
         }
     });
 
-    function adjustSize() {
+    scope.adjustSize = function() {
         var height, ww = $(window).width();
         if (ww < 1240) {
             $('#job-summary-container').hide();
@@ -268,32 +261,144 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
             $('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px", "z-index": 0 }).show();
         }
 
-        // Adjust page height
+        // Detail table height adjusting. First, put page height back to 'normal'.
         $('#plays-table-detail').height(150);
-        $('#plays-table-detail').mCustomScrollbar("update");
         $('#tasks-table-detail').height(150);
-        $('#tasks-table-detail').mCustomScrollbar("update");
         $('#hosts-table-detail').height(150);
-        $('#hosts-table-detail').mCustomScrollbar("update");
+        scope.hostTableRows = 120;
-        height = ($('#wrap').height() - $('.site-footer').height()) - $('.main-container').height() - 22;
+        height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
         if (height > 15) {
+            // there's a bunch of white space at the bottom, let's use it
             $('#plays-table-detail').height(150 + (height / 3));
-            $('#plays-table-detail').mCustomScrollbar("update");
+            //$('#plays-table-detail').mCustomScrollbar("update");
             $('#tasks-table-detail').height(150 + (height / 3));
-            $('#tasks-table-detail').mCustomScrollbar("update");
+            // Host details
             $('#hosts-table-detail').height(150 + (height / 3));
-            $('#hosts-table-detail').mCustomScrollbar("update");
+            scope.hostTableRows = Math.max(Math.ceil((150 + (height / 3)) / 20) * 3, 120);
         }
-    }
+        refreshHostRows();
-    $(document).ready(function() {
+
-        adjustSize();
+        // Summary table height adjusting.
+        height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() - $('#hosts-summary-section .table-header').outerHeight() - 20;
+        scope.hostSummaryTableRows = Math.max(Math.ceil(height / 20), 120);
+        $('#hosts-summary-table').height(height);
+        refreshSummaryHostRows();
+    };
+
+    function refreshHostRows() {
+        var url;
+        if (scope.activeTask) {
+            scope.hostResults = [];
+            scope.auto_scroll = true;
+            url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
+            url += (scope.task_host_name) ? 'host__name__icontains=' + scope.task_host_name + '&' : '';
+            url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
+            Wait('start');
+            Rest.setUrl(url);
+            Rest.get()
+                .success(function(data) {
+                    data.results.forEach(function(row) {
+                        scope.hostResults.push({
+                            id: row.id,
+                            status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
+                            host_id: row.host,
+                            task_id: row.parent,
+                            name: row.event_data.host,
+                            created: row.created,
+                            msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
                         });
+                    });
+                    $('#hosts-table-detail').mCustomScrollbar("update");
+                    setTimeout( function() { $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom"); }, 700);
+                    Wait('stop');
+                    scope.$emit('RefreshCompleted');
+                })
+                .error(function(data, status) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+        else {
+            $('#hosts-table-detail').mCustomScrollbar("update");
+            scope.$emit('RefreshCompleted');
+        }
+    }
+
+    function refreshSummaryHostRows() {
+        if (scope.hosts.length < scope.hostSummaryTableRows) {
+            var url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
+            url += (scope.summary_host_name) ? 'host__name__icontains=' + scope.summary_host_name + '&': '';
+            url += '&page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
+            Wait('start');
+            Rest.setUrl(url);
+            Rest.get()
+                .success(function(data) {
+                    data.results.forEach(function(row) {
+                        var found = false;
+                        scope.hosts.every(function(host) {
+                            if (host.id === row.host) {
+                                found = true;
+                                return false;
+                            }
+                            return true;
+                        });
+                        if (!found) {
+                            scope.hosts.push({
+                                id: row.host,
+                                name: row.summary_fields.host.name,
+                                ok: row.ok,
+                                changed: row.changed,
+                                unreachable: row.dark,
+                                failed: row.failures
+                            });
+                        }
+                    });
+                    scope.hosts.sort(function(a,b) {
+                        if (a.name < b.name) {
+                            return -1;
+                        }
+                        if (a.name > b.name) {
+                            return 1;
+                        }
+                        return 0;
+                    });
+                    $('#hosts-summary-table').mCustomScrollbar("update");
+                    setTimeout( function() { $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom"); }, 700);
+                    Wait('stop');
+                    scope.$emit('RefreshCompleted');
+                })
+                .error(function(data, status) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+        else {
+            $('#hosts-table-detail').mCustomScrollbar("update");
+            scope.$emit('RefreshCompleted');
+        }
+    }
+
+    setTimeout(function() { scope.adjustSize(); }, 500);
 
     // Use debounce for the underscore library to adjust after user resizes window.
     $(window).resize(_.debounce(function(){
-        adjustSize();
+        scope.adjustSize();
     }, 500));
 
+    $scope.selectPlay = function(id) {
+        SelectPlay({
+            scope: scope,
+            id: id
+        });
+    };
+
+    $scope.selectTask = function(id) {
+        SelectTask({
+            scope: scope,
+            id: id
+        });
+    };
+
     $scope.toggleSummary = function(hide) {
         var docw, doch, height = $('#job-detail-container').height(), slide_width;
         if (!hide) {
@@ -325,16 +430,19 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         }
     };
 
-    $scope.HostDetailOnTotalScroll = function(mcs) {
+    $scope.HostDetailOnTotalScroll = _.debounce(function() {
-        var url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask;
+        // Called when user scrolls down (or forward in time). Using _.debounce
-        url += '&host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=5&order_by=host__name';
+        var url, mcs = arguments[0];
-        if (!scope.auto_scroll) {
+        scope.$apply(function() {
+            if (!scope.auto_scroll && scope.activeTask && scope.hostResults) {
+                scope.auto_scroll = true;
+                url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
+                url += (scope.task_host_name) ? 'host__name__icontains=' + scope.task_host_name + '&' : '';
+                url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=host__name';
                 Wait('start');
                 Rest.setUrl(url);
                 Rest.get()
                     .success(function(data) {
-                    setTimeout(function() {
-                        scope.$apply(function() {
                         data.results.forEach(function(row) {
                             scope.hostResults.push({
                                 id: row.id,
@@ -345,17 +453,15 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                                 created: row.created,
                                 msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
                             });
-                                if (scope.hostResults.length > 10) {
+                            if (scope.hostResults.length > scope.hostTableRows) {
                                 scope.hostResults.splice(0,1);
                             }
                         });
-                            //$('#hosts-table-detail').mCustomScrollbar("update");
                         if (data.next) {
                             // there are more rows. move dragger up, letting user know.
-                                setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 10) + 'px'}); }, 700);
+                            setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700);
                         }
-                        });
+                        scope.auto_scroll = false;
-                    }, 100);
                         Wait('stop');
                     })
                     .error(function(data, status) {
@@ -363,18 +469,25 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                             msg: 'Call to ' + url + '. GET returned: ' + status });
                     });
             }
+            else {
                 scope.auto_scroll = false;
-    };
+            }
+        });
+    }, 300);
 
-    $scope.HostDetailOnTotalScrollBack = function(mcs) {
+    $scope.HostDetailOnTotalScrollBack = _.debounce(function() {
-        var url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask;
+        // Called when user scrolls up (or back in time)
+        var url, mcs = arguments[0];
+        scope.$apply(function() {
+            if (!scope.auto_scroll && scope.activeTask && scope.hostResults) {
+                scope.auto_scroll = true;
+                url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
+                url += (scope.task_host_name) ? 'host__name__icontains=' + scope.task_host_name + '&' : '';
+                url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=-host__name';
                 Wait('start');
-        url += '&host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=5&order_by=-host__name';
                 Rest.setUrl(url);
                 Rest.get()
                     .success(function(data) {
-                setTimeout(function() {
-                    scope.$apply(function() {
                         data.results.forEach(function(row) {
                             scope.hostResults.unshift({
                                 id: row.id,
@@ -385,29 +498,34 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                                 created: row.created,
                                 msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
                             });
-                            if (scope.hostResults.length > 10) {
+                            if (scope.hostResults.length > scope.hostTableRows) {
                                 scope.hostResults.pop();
                             }
                         });
-                        $('#hosts-table-detail').mCustomScrollbar("update");
                         if (data.next) {
                             // there are more rows. move dragger down, letting user know.
-                            setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 10) + 'px' }); }, 700);
+                            setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700);
                         }
-                    });
-                }, 100);
                         Wait('stop');
+                        scope.auto_scroll = false;
                     })
                     .error(function(data, status) {
                         ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                             msg: 'Call to ' + url + '. GET returned: ' + status });
                     });
-    };
+            }
+            else {
+                scope.auto_scroll = false;
+            }
+        });
+    }, 300);
 
     $scope.HostSummaryOnTotalScroll = function(mcs) {
-        var url = GetBasePath('jobs') + job_id + '/job_host_summaries/';
+        var url;
-        url += '?host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=5&order_by=host__name';
+        if (!scope.auto_scroll && scope.hosts) {
-        if (!scope.auto_scroll) {
+            url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
+            url += (scope.summary_host_name) ? 'host__name__icontains=' + scope.summary_host_name + '&': '';
+            url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=host__name';
             Wait('start');
             Rest.setUrl(url);
             Rest.get()
@@ -423,14 +541,13 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                                     unreachable: row.dark,
                                     failed: row.failures
                                 });
-                                if (scope.hosts.length > 10) {
+                                if (scope.hosts.length > scope.hostSummaryTableRows) {
                                     scope.hosts.splice(0,1);
                                 }
                             });
-                            //$('#hosts-summary-table').mCustomScrollbar("update");
                             if (data.next) {
                                 // there are more rows. move dragger up, letting user know.
-                                setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop - 10) + 'px'}); }, 700);
+                                setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700);
                             }
                         });
                     }, 100);
@@ -445,9 +562,12 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
     };
 
     $scope.HostSummaryOnTotalScrollBack = function(mcs) {
-        var url = GetBasePath('jobs') + job_id + '/job_host_summaries/';
+        var url;
+        if (!scope.auto_scroll && scope.hosts) {
+            url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
+            url += (scope.summary_host_name) ? 'host__name__icontains=' + scope.summary_host_name + '&': '';
+            url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=-host__name';
             Wait('start');
-        url += '?host__name__lt=' + scope.hosts[0].name + '&page_size=5&order_by=-host__name';
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
@@ -462,14 +582,13 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                                     unreachable: row.dark,
                                     failed: row.failures
                                 });
-                            if (scope.hosts.length > 10) {
+                                if (scope.hosts.length > scope.hostSummaryTableRows) {
                                     scope.hosts.pop();
                                 }
                             });
-                        $('#hosts-summary-table').mCustomScrollbar("update");
                             if (data.next) {
                                 // there are more rows. move dragger down, letting user know.
-                            setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop + 10) + 'px' }); }, 700);
+                                setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700);
                             }
                         });
                     }, 100);
@@ -479,6 +598,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                         msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
+        }
     };
 
     $scope.searchTaskHosts = function() {
@@ -487,7 +607,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         scope.hostResults = [];
         url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + scope.activeTask;
         url += (scope.task_host_name) ? '&host__name__icontains=' + scope.task_host_name : '';
-        url += '&host__name__isnull=false&page_size=10&order_by=host__name';
+        url += '&host__name__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
         Rest.setUrl(url);
         Rest.get()
             .success(function(data) {
@@ -530,7 +650,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
         scope.hosts = [];
         url = GetBasePath('jobs') + $routeParams.id + '/job_host_summaries/?';
         url += (scope.summary_host_name) ? 'host__name__icontains=' + scope.summary_host_name + '&': '';
-        url += 'page_size=10&order_by=host__name';
+        url += 'page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
         Rest.setUrl(url);
         Rest.get()
             .success(function(data) {

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

@@ -499,7 +499,7 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
                     return 0;
                 });
                 // Only keep 10 hosts
-                if (scope.hosts.length > 10) {
+                if (scope.hosts.length > scope.hostSummaryTableRows) {
                     scope.hosts.splice(0,1);
                 }
                 scope.auto_scroll = true;
@@ -564,8 +564,8 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
             return 0;
         });
 
-        // Keep the list pruned to 10 hosts
+        // Keep the list pruned to a limited # of hosts
-        if (scope.hostResults.length === 10) {
+        if (scope.hostResults.length === scope.hostTableRows) {
             scope.hostResults.splice(0,1);
         }
 
@@ -695,25 +695,23 @@ function(UpdatePlayStatus, UpdateHostStatus, UpdatePlayChild, AddHostResult, Sel
         }
         Wait('start');
         scope.hostResults = [];
-        url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id +
+        url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id + '&';
-            '&host__isnull=false&page_size=10&order_by=-host__name';
+        url += (scope.task_host_name) ? 'host__name__icontains=' + scope.task_host_name + '&' : '';
+        url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
         Rest.setUrl(url);
         Rest.get()
             .success(function(data) {
-                var i;
+                data.results.forEach(function(row) {
-                if (data.results.length > 0) {
-                    for (i = data.results.length - 1; i >=0; i--) {
                     scope.hostResults.push({
-                            id: data.results[i].id,
+                        id: row.id,
-                            status: ( (data.results[i].failed) ? 'failed' : (data.results[i].changed) ? 'changed' : 'successful' ),
+                        status: ( (row.failed) ? 'failed' : (row.changed) ? 'changed' : 'successful' ),
-                            host_id: data.results[i].host,
+                        host_id: row.host,
-                            task_id: data.results[i].parent,
+                        task_id: row.parent,
-                            name: data.results[i].event_data.host,
+                        name: row.event_data.host,
-                            created: data.results[i].created,
+                        created: row.created,
-                            msg: ( (data.results[i].event_data && data.results[i].event_data.res) ? data.results[i].event_data.res.msg : '' )
+                        msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
+                    });
                 });
-                    }
-                }
                 Wait('stop');
                 SelectHost({ scope: scope });
             })

awx/ui/static/lib/ansible/directives.js

@@ -727,15 +727,16 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                     updateOnContentResize: true
                 },
                 scrollButtons: {
-                    enable: true,
+                    enable: true
-                    scrollType: 'continuous'
                 },
                 theme: 'dark-thick',
                 mouseWheel: true,
-                scrollInertia: 0,
+                scrollInertia: 300,
                 callbacks: {
                     onTotalScroll: scope[attrs.onTotalScroll],
+                    onTotalScrollOfset: attrs.onTotalScrollOffset,
                     onTotalScrollBack: scope[attrs.onTotalScrollBack],
+                    onTotalScrollBackOffset: attrs.onTotlaScrollBackOffset
                 }
             });
         };