Job stdout scrolling

Started adding bits to detect when user scrolls up. When that happens stop showing live events.

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

@@ -21,6 +21,7 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         event_queue = 0,
         auto_scroll_down=true,
         live_event_processing = true,
+        should_apply_live_events = true,
         page_size = 500;
 
     event_socket = Socket({
@@ -51,7 +52,7 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
                 if ($rootScope.jobStdOutInterval) {
                     window.clearInterval($rootScope.jobStdOutInterval);
                 }
-                if (live_event_processing) {
+                if (live_event_processing && should_apply_live_events) {
                     getNextSection();
                 }
                 live_event_processing = false;
@@ -61,8 +62,8 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
 
     $rootScope.jobStdOutInterval = setInterval( function() {
         // limit the scrolling to every 5 seconds
-        $log.debug('checking for stdout...');
+        if (event_queue > 5) {
-        if (event_queue > 15) {
+            $log.debug('checking for stdout...');
             if (loaded_sections.length === 0) {
                 $log.debug('calling LoadStdout');
                 $scope.$emit('LoadStdout');
@@ -73,7 +74,7 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
             }
             event_queue = 0;
         }
-    }, 5000);
+    }, 1500);
 
     if ($scope.removeLoadStdout) {
         $scope.removeLoadStdout();
@@ -121,6 +122,9 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
             stdout_url = data.related.stdout;
             if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
                 live_event_processing = false;
+                if ($rootScope.jobStdOutInterval) {
+                    window.clearInterval($rootScope.jobStdOutInterval);
+                }
             }
             $scope.$emit('LoadStdout');
         })
@@ -190,8 +194,15 @@ function JobStdoutController ($log, $rootScope, $scope, $compile, $routeParams,
         }
     };
 
+    $scope.scrollStarted = function() {
+        // user touched the scroll bar. stop applying live events and forcing
+        should_apply_live_events = false;
+        $log.debug('turned off live events');
+    };
+
     function getNextSection() {
         var start = current_range.end + 1, url;
+        should_apply_live_events = true;  //user scrolled all the way to bottom. if there are live events, start applying them
         if (loaded_sections.indexOf(start) < 0) {
             url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + (current_range.start + page_size);
             Wait('start');

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

@@ -1134,42 +1134,6 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             return html;
         }
 
-        /*function parseJSON(obj) {
-            var html="", key;
-            html += "<ul class=\"object-list\">\n";
-            for(key in obj) {
-                if (typeof obj[key] === "boolean" || typeof obj[key] === "number" || typeof obj[key] === "string") {
-                    html += "<li><div class=\"key\">" + key + ":</div><div class=\"value\">" + obj[key] + "</div></li>\n";
-                }
-                if (obj[key] === null || obj[key] === undefined) {
-                    html += "<li><div class=\"key\">" + key + ":</div><div class=\"value\">null</div></li>\n";
-                }
-                if (typeof obj[key] === "object") {
-                    html += "<li><div class=\"key\">" + key + ":</div>" + parseJSON(obj[key]) + "</li>\n";
-                }
-            }
-            html += "</ul>\n";
-            return html;
-        }*/
-
-        /*function parseJSON(obj) {
-            var html="", key;
-            for(key in obj) {
-                html += "<div class=\"row object-list\">\n";
-                if (typeof obj[key] === "boolean" || typeof obj[key] === "number" || typeof obj[key] === "string") {
-                    html += "<div class=\"col-lg-4 col-md-4 key\">" + key + ":</div><div class=\"col-lg-8 col-md-8 value\">" + obj[key] + "</div>\n";
-                }
-                if (obj[key] === null || obj[key] === undefined) {
-                    html += "<div class=\"col-lg-4 col-md-4 key\">" + key + ":</div><div class=\"col-lg-8 col-md-8 value\">null</div>\n";
-                }
-                if (typeof obj[key] === "object") {
-                    html += "<div class=\"col-lg-4 col-md-4 key\">" + key + ":</div><div class=\"col-lg-8 col-md-8\">" + parseJSON(obj[key]) + "</div>\n";
-                }
-                html += "</div>\n";
-            }
-            return html;
-        }*/
-
         if (my_scope.removeDataReady) {
             my_scope.removeDataReady();
         }

awx/ui/static/less/job-details.less

@@ -413,6 +413,9 @@ svg text.percent{
     tr:first-child {
         border-top: none;
     }
+    tr td:first-of-type {
+        width: 20%;
+    }
     .key {
         vertical-align: top;
         padding: 3px;
@@ -431,9 +434,12 @@ svg text.percent{
             border-top: none;
             border-bottom: none;
             width: auto;
-            tr:first-child {
+            tr {
                 border-top: none;
             }
+            tr td:first-of-type {
+                width: auto;
+            }
             .key {
                 font-weight: 400;
             }

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

@@ -739,6 +739,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                     onTotalScrollOfset: attrs.onTotalScrollOffset,
                     onTotalScrollBack: scope[attrs.onTotalScrollBack],
                     onTotalScrollBackOffset: attrs.onTotalScrollBackOffset,
+                    onScrollStart: scope[$(element).attr('data-on-scroll-start')],
                     alwaysTriggerOffsets: false
                 },
             });

awx/ui/static/partials/job_stdout.html

@@ -16,8 +16,7 @@
             <div class="col-md-12">
                 <div id="job-status"><label>Job Status</label> <i class="fa icon-job-{{ job.status }}"></i> {{ job.status }}</div>
                 <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-scroll-inertia="500" data-on-total-scroll="onTotalScroll" data-on-total-scroll-back="onTotalScrollBack" data-on-scroll-start="scrollStarted" data-on-total-scroll-back-offset="100">
-                    data-on-total-scroll-back-offset="100">
                     <div id="pre-container-content"></div>
                 </div>
             </div>