From c60fb7a58fb503aff1c2c23e3f26699efe4c827f Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Tue, 24 Jun 2014 04:04:46 -0400 Subject: [PATCH] Job stdout refactor Infinit scroll in the upward (or back in time) direction works. --- awx/ui/static/js/controllers/JobStdout.js | 73 ++++++++++++++++------- awx/ui/static/lib/ansible/directives.js | 10 ++-- awx/ui/static/partials/job_stdout.html | 4 +- 3 files changed, 62 insertions(+), 25 deletions(-) diff --git a/awx/ui/static/js/controllers/JobStdout.js b/awx/ui/static/js/controllers/JobStdout.js index 18b65e2f48..084af3ea3a 100644 --- a/awx/ui/static/js/controllers/JobStdout.js +++ b/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({ - scope: $scope, - endpoint: "job_events" - }); + current_range, + event_socket, + 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').empty().html(data.content); - } - else { - $('#pre-container-content').empty(); - } - setTimeout(function() { $('#pre-container').mCustomScrollbar("scrollTo", 'bottom'); }, 1000); + $('#pre-container-content').html(data.content); + current_range = data.range; + //$('#pre-container').mCustomScrollbar("update"); + setTimeout(function() { + $('#pre-container').mCustomScrollbar("scrollTo", 'bottom'); + }, 300); }) .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' ]; diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js index 32ae238942..f642dd43e3 100644 --- a/awx/ui/static/lib/ansible/directives.js +++ b/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 + }, }); }; }]) diff --git a/awx/ui/static/partials/job_stdout.html b/awx/ui/static/partials/job_stdout.html index 5870796a02..0cef385aad 100644 --- a/awx/ui/static/partials/job_stdout.html +++ b/awx/ui/static/partials/job_stdout.html @@ -14,7 +14,9 @@
-
+