Merge pull request #2827 from jakemcdermott/job-results/performance-testing

performance / ux scrolling fixes for higher volume jobs

awx/ui/client/features/output/constants.js

@@ -15,6 +15,7 @@ export const JOB_STATUS_FINISHED = JOB_STATUS_COMPLETE.concat(JOB_STATUS_INCOMPL
 
 export const OUTPUT_ELEMENT_CONTAINER = '.at-Stdout-container';
 export const OUTPUT_ELEMENT_TBODY = '#atStdoutResultTable';
+export const OUTPUT_ELEMENT_LAST = '#atStdoutMenuLast';
 export const OUTPUT_MAX_LAG = 120;
 export const OUTPUT_ORDER_BY = 'counter';
 export const OUTPUT_PAGE_CACHE = true;

awx/ui/client/features/output/index.controller.js

@@ -2,6 +2,7 @@
 import {
     EVENT_START_PLAY,
     EVENT_START_TASK,
+    OUTPUT_ELEMENT_LAST,
     OUTPUT_PAGE_SIZE,
 } from './constants';
 
@@ -234,6 +235,9 @@ function stopFollowing () {
         return;
     }
 
+    scroll.unlock();
+    scroll.unhide();
+
     vm.isFollowing = false;
     vm.followTooltip = vm.strings.get('tooltips.MENU_LAST');
 }
@@ -482,10 +486,31 @@ function OutputIndexController (
             },
         });
 
+        let showFollowTip = true;
+        const rates = [];
         stream.init({
             bufferAdd,
             bufferEmpty,
             onFrames,
+            onFrameRate (rate) {
+                rates.push(rate);
+                rates.splice(0, rates.length - 5);
+
+                if (rates.every(value => value === 1)) {
+                    scroll.unlock();
+                    scroll.unhide();
+                }
+
+                if (rate > 1 && vm.isFollowing) {
+                    scroll.lock();
+                    scroll.hide();
+
+                    if (showFollowTip) {
+                        showFollowTip = false;
+                        $(OUTPUT_ELEMENT_LAST).trigger('mouseenter');
+                    }
+                }
+            },
             onStop () {
                 lockFollow = true;
                 stopFollowing();
@@ -493,7 +518,8 @@ function OutputIndexController (
                 status.updateStats();
                 status.dispatch();
                 status.sync();
-                scroll.stop();
+                scroll.unlock();
+                scroll.unhide();
             }
         });
 
@@ -533,3 +559,4 @@ OutputIndexController.$inject = [
 ];
 
 module.exports = OutputIndexController;
+

awx/ui/client/features/output/index.view.html

@@ -28,6 +28,7 @@
                 <div class="pull-right" ng-click="vm.menu.last()">
                     <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"
                         ng-class="{ 'at-Stdout-menuIcon--active': vm.isFollowing }"
+                        id="atStdoutMenuLast"
                         data-placement="top"
                         data-trigger="hover"
                         data-tip-watch="vm.followTooltip"

awx/ui/client/features/output/scroll.service.js

@@ -5,8 +5,6 @@ import {
     OUTPUT_SCROLL_THRESHOLD,
 } from './constants';
 
-const MAX_THRASH = 20;
-
 function JobScrollService ($q, $timeout) {
     this.init = ({ next, previous, onThresholdLeave }) => {
         this.el = $(OUTPUT_ELEMENT_CONTAINER);
@@ -33,7 +31,6 @@ function JobScrollService ($q, $timeout) {
             paused: false,
             locked: false,
             hover: false,
-            running: true,
             thrash: 0,
         };
 
@@ -44,13 +41,6 @@ function JobScrollService ($q, $timeout) {
 
     this.onMouseEnter = () => {
         this.state.hover = true;
-
-        if (this.state.thrash >= MAX_THRASH) {
-            this.state.thrash = MAX_THRASH - 1;
-        }
-
-        this.unlock();
-        this.unhide();
     };
 
     this.onMouseLeave = () => {
@@ -62,23 +52,6 @@ function JobScrollService ($q, $timeout) {
             return;
         }
 
-        if (this.state.thrash > 0) {
-            if (this.isLocked() || this.state.hover) {
-                this.state.thrash--;
-            }
-        }
-
-        if (!this.state.hover) {
-            this.state.thrash++;
-        }
-
-        if (this.state.thrash >= MAX_THRASH) {
-            if (this.isRunning()) {
-                this.lock();
-                this.hide();
-            }
-        }
-
         if (this.isLocked()) {
             return;
         }
@@ -195,16 +168,6 @@ function JobScrollService ($q, $timeout) {
         this.setScrollPosition(this.getScrollHeight());
     };
 
-    this.start = () => {
-        this.state.running = true;
-    };
-
-    this.stop = () => {
-        this.unlock();
-        this.unhide();
-        this.state.running = false;
-    };
-
     this.lock = () => {
         this.state.locked = true;
     };
@@ -256,7 +219,6 @@ function JobScrollService ($q, $timeout) {
     };
 
     this.isPaused = () => this.state.paused;
-    this.isRunning = () => this.state.running;
     this.isLocked = () => this.state.locked;
     this.isMissing = () => $(OUTPUT_ELEMENT_TBODY)[0].clientHeight < this.getViewableHeight();
 }

awx/ui/client/features/output/stream.service.js

@@ -6,11 +6,12 @@ import {
 } from './constants';
 
 function OutputStream ($q) {
-    this.init = ({ bufferAdd, bufferEmpty, onFrames, onStop }) => {
+    this.init = ({ bufferAdd, bufferEmpty, onFrames, onFrameRate, onStop }) => {
         this.hooks = {
             bufferAdd,
             bufferEmpty,
             onFrames,
+            onFrameRate,
             onStop,
         };
 
@@ -53,6 +54,7 @@ function OutputStream ($q) {
         const boundedIndex = Math.min(this.factors.length - 1, index);
 
         this.framesPerRender = this.factors[boundedIndex];
+        this.hooks.onFrameRate(this.framesPerRender);
     };
 
     this.setMissingCounterThreshold = counter => {
@@ -111,7 +113,8 @@ function OutputStream ($q) {
                 }
 
                 const isReady = maxReady && (this.state.ending ||
-                    (maxReady - minReady) % this.framesPerRender === 0);
+                    count % this.framesPerRender === 0 ||
+                    count < OUTPUT_PAGE_SIZE && (maxReady - minReady) % this.framesPerRender === 0);
 
                 if (!isReady) {
                     return $q.resolve();