Job stdout refactor

Infinit scroll in the upward (or back in time) direction works.

awx/ui/static/js/controllers/JobStdout.js

@@ -7,17 +7,21 @@
 
 'use strict';
 
-function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearScope, GetBasePath, Wait, Rest, ProcessErrors, Socket) {
+function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams, ClearScope, GetBasePath, Wait, Rest, ProcessErrors, Socket) {
 
     ClearScope();
 
     var available_height, job_id = $routeParams.id,
         api_complete = false,
         stdout_url,
-        event_socket = Socket({
+        current_range,
-            scope: $scope,
+        event_socket,
-            endpoint: "job_events"
+        first_time=0;
-        });
+
+    event_socket = Socket({
+        scope: $scope,
+        endpoint: "job_events"
+    });
 
     Wait('start');
 
@@ -33,18 +37,17 @@ function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearS
         $scope.removeLoadStdout();
     }
     $scope.removeLoadStdout = $scope.$on('LoadStdout', function() {
-        Rest.setUrl(stdout_url + '?format=json&start_line=-1000');
+        Rest.setUrl(stdout_url + '?format=json&start_line=-500');
         Rest.get()
             .success(function(data) {
                 api_complete = true;
                 Wait('stop');
-                if (data.content) {
+                $('#pre-container-content').html(data.content);
-                    $('#pre-container-content').empty().html(data.content);
+                current_range = data.range;
-                }
+                //$('#pre-container').mCustomScrollbar("update");
-                else {
+                setTimeout(function() {
-                    $('#pre-container-content').empty();
+                    $('#pre-container').mCustomScrollbar("scrollTo", 'bottom');
-                }
+                }, 300);
-                setTimeout(function() { $('#pre-container').mCustomScrollbar("scrollTo", 'bottom'); }, 1000);
             })
             .error(function(data, status) {
                 ProcessErrors($scope, data, status, null, { hdr: 'Error!',
@@ -55,12 +58,6 @@ function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearS
     function resizeToFit() {
         available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() -
             $('#breadcrumb-container').outerHeight() - 20;
-        /*if ($(window).width() < 768) {
-            available_height += 55;
-        }
-        else if ($(window).width() > 1240) {
-            available_height += 5;
-        }*/
         $('#pre-container').height(available_height);
         $('#pre-container').mCustomScrollbar("update");
     }
@@ -81,7 +78,43 @@ function JobStdoutController ($rootScope, $scope, $compile, $routeParams, ClearS
             ProcessErrors($scope, data, status, null, { hdr: 'Error!',
                 msg: 'Failed to retrieve job: ' + job_id + '. GET returned: ' + status });
         });
+
+
+    $scope.onTotalScroll = function() {
+        $log.debug('Total scroll!');
+    };
+
+    $scope.onTotalScrollBack = function() {
+        // scroll up or back in time toward the beginning of the file
+        if (current_range.start > 0) {
+            //we haven't hit the top yet
+            var start = (current_range.start < 500) ? 0 : current_range.start - 500,
+                url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (current_range.start - 1);
+            first_time++;
+            Wait('start');
+            Rest.setUrl(url);
+            Rest.get()
+                .success( function(data) {
+                    Wait('stop');
+                    var oldContentHeight, heightDiff;
+                    oldContentHeight=$("#pre-container .mCSB_container").innerHeight();
+                    $('#pre-container-content').prepend(data.content);
+                    current_range = data.range;
+                    heightDiff=$("#pre-container .mCSB_container").innerHeight() - oldContentHeight;
+                    if (first_time === 1) {
+                        //setTimeout(function() { $("#pre-container").mCustomScrollbar("scrollTo", heightDiff, {scrollInertia:0}); }, 300);
+                        $('#pre-container').mCustomScrollbar("update");
+                    }
+                    $("#pre-container").mCustomScrollbar("scrollTo", heightDiff, {scrollInertia:0});
+                })
+                .error(function(data, status) {
+                    ProcessErrors($scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Failed to retrieve stdout for job: ' + job_id + '. GET returned: ' + status });
+                });
+        }
+    };
 }
 
-JobStdoutController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors', 'Socket' ];
+JobStdoutController.$inject = [ '$log', '$rootScope', '$scope', '$compile', '$routeParams', 'ClearScope', 'GetBasePath', 'Wait', 'Rest', 'ProcessErrors',
+    'Socket' ];
 

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

@@ -722,7 +722,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
 
     .directive('awCustomScroll', [ function() {
         return function(scope, element, attrs) {
-            var theme = (attrs.scrollTheme) ? attrs.scrollTheme : 'dark-thin';
+            var theme = (attrs.scrollTheme) ? attrs.scrollTheme : 'dark-thin',
+                inertia = (attrs.scrollInertia) ? parseInt(attrs.scrollInertia,10) : 500;
             $(element).mCustomScrollbar({
                 advanced:{
                     updateOnContentResize: true
@@ -732,13 +733,14 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                 },
                 theme: theme,
                 mouseWheel: true,
-                scrollInertia: 300,
+                scrollInertia: inertia,
                 callbacks: {
                     onTotalScroll: scope[attrs.onTotalScroll],
                     onTotalScrollOfset: attrs.onTotalScrollOffset,
                     onTotalScrollBack: scope[attrs.onTotalScrollBack],
-                    onTotalScrollBackOffset: attrs.onTotlaScrollBackOffset
+                    onTotalScrollBackOffset: attrs.onTotalScrollBackOffset,
-                }
+                    alwaysTriggerOffsets: false
+                },
             });
         };
     }])

awx/ui/static/partials/job_stdout.html

@@ -14,7 +14,9 @@
 
         <div class="row">
             <div class="col-md-12">
-                <div id="pre-container" class="body_background body_foreground pre mono-space" aw-custom-scroll data-scroll-theme="light-thin">
+                <div id="pre-container" class="body_background body_foreground pre mono-space" aw-custom-scroll data-scroll-theme="light-thin"
+                    data-scroll-inertia="500" data-on-total-scroll="onTotalScroll" data-on-total-scroll-back="onTotalScrollBack"
+                    data-on-total-scroll-back-offset="100">
                     <div id="pre-container-content"></div>
                 </div>
             </div>