Merge pull request #2318 from jakemcdermott/job-results/viewable-page-up-down

make output nav controls move up or down by viewable content height

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

@@ -21,6 +21,7 @@ const listeners = [];
 const rx = [];
 
 let following = false;
+let attach = true;
 
 function bufferInit () {
     rx.length = 0;
@@ -65,6 +66,10 @@ function onFrames (events) {
             return $q.resolve();
         }
 
+        if (!attach) {
+            return $q.resolve();
+        }
+
         follow();
     }
 
@@ -117,23 +122,39 @@ function last () {
             stream.setMissingCounterThreshold(slide.getTailCounter() + 1);
             scroll.setScrollPosition(scroll.getScrollHeight());
 
+            attach = true;
             scroll.resume();
 
             return $q.resolve();
         });
 }
 
+function down () {
+    scroll.moveDown();
+}
+
+function up () {
+    if (following) {
+        unfollow();
+    } else {
+        scroll.moveUp();
+    }
+}
+
 function follow () {
     scroll.pause();
-    // scroll.hide();
+    scroll.hide();
 
     following = true;
+    vm.isFollowing = following;
 }
 
 function unfollow () {
+    attach = false;
     following = false;
+    vm.isFollowing = following;
 
-    // scroll.unhide();
+    scroll.unhide();
     scroll.resume();
 }
 
@@ -289,13 +310,9 @@ function OutputIndexController (
     vm.togglePanelExpand = togglePanelExpand;
 
     // Stdout Navigation
-    vm.menu = {
-        end: last,
-        home: first,
-        up: previous,
-        down: next,
-    };
+    vm.menu = { last, first, down, up };
     vm.isMenuExpanded = true;
+    vm.isFollowing = following;
     vm.toggleMenuExpand = toggleMenuExpand;
     vm.toggleLineExpand = toggleLineExpand;
     vm.showHostDetails = showHostDetails;

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

@@ -23,18 +23,19 @@
                     ng-class="{ 'fa-minus': vm.isMenuExpanded, 'fa-plus': !vm.isMenuExpanded }"></i>
             </div>
 
-            <div class="pull-right" ng-click="vm.menu.end()">
+            <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.menu.isLocked }"></i>
             </div>
-            <div class="pull-right" ng-click="vm.menu.home()">
+            <div class="pull-right" ng-click="vm.menu.first()">
                 <i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
             </div>
             <div class="pull-right" ng-click="vm.menu.down()">
                 <i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
             </div>
             <div class="pull-right" ng-click="vm.menu.up()">
-                <i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
+                <i class="at-Stdout-menuIcon--lg fa fa-angle-up"
+                    ng-class=" { 'at-Stdout-menuIcon--active': vm.isFollowing }"></i>
             </div>
 
             <div class="at-u-clear"></div>

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

@@ -86,22 +86,20 @@ function JobScrollService ($q, $timeout) {
         return false;
     };
 
-    this.pageUp = () => {
-        if (this.isPaused()) {
-            return;
-        }
-
+    /**
+     * Move scroll position up by one page of visible content.
+     */
+    this.moveUp = () => {
         const top = this.getScrollPosition();
         const height = this.getViewableHeight();
 
         this.setScrollPosition(top - height);
     };
 
-    this.pageDown = () => {
-        if (this.isPaused()) {
-            return;
-        }
-
+    /**
+     * Move scroll position down by one page of visible content.
+     */
+    this.moveDown = () => {
         const top = this.getScrollPosition();
         const height = this.getViewableHeight();
 
@@ -110,6 +108,12 @@ function JobScrollService ($q, $timeout) {
 
     this.getScrollHeight = () => this.el[0].scrollHeight;
     this.getViewableHeight = () => this.el[0].offsetHeight;
+
+    /**
+     * Get the vertical scroll position.
+     *
+     * @returns {Number} - The number of pixels that are hidden from view above the scrollable area.
+     */
     this.getScrollPosition = () => this.el[0].scrollTop;
 
     this.setScrollPosition = position => {