Add more robust stdout navigation

awx/ui/client/features/jobs/_index.less

@@ -41,6 +41,14 @@
         cursor: pointer;
     }
 
+    &-menuIcon--lg {
+        font-size: 22px;
+        line-height: 12px;
+        font-weight: bold;
+        padding: 10px;
+        cursor: pointer;
+    }
+
     &-toggle {
         color: @at-gray-848992;
         background-color: @at-gray-eb;

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

@@ -73,7 +73,10 @@ function JobsIndexController (
     vm.menu = {
         scroll: {
             display: false,
-            to: scrollTo
+            home: scrollHome,
+            end: scrollEnd,
+            down: scrollPageDown,
+            up: scrollPageUp
         },
         top: {
             expand,
@@ -137,6 +140,8 @@ function next () {
 }
 
 function prev () {
+    const container = $(ELEMENT_CONTAINER)[0];
+
     const config = {
         related,
         page: meta.page.cache[0].page - 1,
@@ -157,7 +162,10 @@ function prev () {
             });
 
             return pop()
-                .then(() => prepend(data.results));
+                .then(() => prepend(data.results))
+                .then(lines => {
+                    container.scrollTop = (getRowHeight() * lines)
+                });
         });
 }
 
@@ -236,9 +244,7 @@ function prepend (events) {
         table.prepend(rows);
         $compile(rows.contents())($scope);
 
-        $timeout(() => {
+        $timeout(() => resolve(parsed.lines));
-            resolve();
-        });
     });
 }
 
@@ -257,9 +263,7 @@ function pop () {
         rows.empty();
         rows.remove();
 
-        $timeout(() => {
+        $timeout(() => resolve(ejected));
-            return resolve();
-        });
     });
 }
 
@@ -278,9 +282,19 @@ function shift () {
         rows.empty();
         rows.remove();
 
-        $timeout(() => {
+        $timeout(() => resolve());
-            return resolve();
+    });
-        });
+}
+
+function clear () {
+    console.log('[3] clearing pages');
+    return $q(resolve => {
+        const rows = $(ELEMENT_TBODY).children();
+
+        rows.empty();
+        rows.remove();
+
+        $timeout(() => resolve());
     });
 }
 
@@ -288,14 +302,6 @@ function expand () {
     vm.toggle(meta.parent, true);
 }
 
-function scrollTo (direction) {
-    if (direction === 'top') {
-        container[0].scrollTop = 0;
-    } else {
-        container[0].scrollTop = container[0].scrollHeight;
-    }
-}
-
 function parseEvents (events) {
     let lines = 0;
     let html = '';
@@ -486,22 +492,6 @@ function getTime (created) {
     return `${hour}:${minute}:${second}`;
 }
 
-function pageUp () {
-
-}
-
-function pageDown () {
-
-}
-
-function jumpToStart () {
-
-}
-
-function jumpToEnd () {
-
-}
-
 function showHostDetails (id) {
     jobEvent.request('get', id)
         .then(() => {
@@ -581,6 +571,91 @@ function onScroll () {
     }, SCROLL_LOAD_DELAY);
 }
 
+function scrollHome () {
+    const config = {
+        related,
+        page: 'first',
+        params: {
+            order_by: 'start_line'
+        }
+    };
+
+    meta.scroll.inProgress = true;
+
+    console.log('[2] getting first page', config.page, meta.page.cache);
+    return resource.goToPage(config)
+        .then(data => {
+            if (!data || !data.results) {
+                return $q.resolve();
+            }
+
+            meta.page.cache = [{
+                page: data.page
+            }]
+
+            return clear()
+                .then(() => prepend(data.results))
+                .then(() => {
+                    meta.scroll.inProgress = false;
+                });
+        });
+}
+
+function scrollEnd () {
+    const config = {
+        related,
+        page: 'last',
+        params: {
+            order_by: 'start_line'
+        }
+    };
+
+    meta.scroll.inProgress = true;
+
+    console.log('[2] getting last page', config.page, meta.page.cache);
+    return resource.goToPage(config)
+        .then(data => {
+            if (!data || !data.results) {
+                return $q.resolve();
+            }
+
+            meta.page.cache = [{
+                page: data.page
+            }]
+
+            return clear()
+                .then(() => append(data.results))
+                .then(() => {
+                    const container = $(ELEMENT_CONTAINER)[0];
+
+                    container.scrollTop = getScrollHeight();
+                    meta.scroll.inProgress = false;
+                });
+        });
+}
+
+function scrollPageUp () {
+    const container = $(ELEMENT_CONTAINER)[0];
+    const jump = container.scrollTop - container.offsetHeight;
+
+    if (jump < 0) {
+        container.scrollTop = 0;
+    } else {
+        container.scrollTop = jump;
+    }
+}
+
+function scrollPageDown () {
+    const container = $(ELEMENT_CONTAINER)[0];
+    const jump = container.scrollTop + container.offsetHeight;
+
+    if (jump > container.scrollHeight) {
+        container.scrollTop = container.scrollHeight;
+    } else {
+        container.scrollTop = jump;
+    }
+}
+
 JobsIndexController.$inject = [
     'resource',
     '$sce',

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

@@ -13,8 +13,17 @@
                        ng-class="{ 'fa-minus': vm.menu.top.isExpanded, 'fa-plus': !vm.menu.top.isExpanded }"></i>
                 </div>
 
-                <div class="pull-right" ng-click="vm.menu.scroll.to('bottom')">
+                <div class="pull-right" ng-click="vm.menu.scroll.end()">
-                    <i class="at-Stdout-menuIcon fa fa-arrow-down"></i>
+                    <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"></i>
+                </div>
+                <div class="pull-right" ng-click="vm.menu.scroll.down()">
+                    <i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
+                </div>
+                <div class="pull-right" ng-click="vm.menu.scroll.up()">
+                    <i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
+                </div>
+                <div class="pull-right" ng-click="vm.menu.scroll.home()">
+                    <i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
                 </div>
 
                 <div class="at-u-clear"></div>
@@ -23,8 +32,8 @@
             <pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="atStdoutResultTable"></tbody></table></pre>
 
             <div ng-show="vm.menu.scroll.display" class="at-Stdout-menuBottom">
-                <div class="at-Stdout-menuIconGroup" ng-click="vm.menu.scroll.to('top')">
+                <div class="at-Stdout-menuIconGroup" ng-click="vm.menu.scroll.home()">
-                    <p class="pull-left"><i class="fa fa-caret-up"></i></p>
+                    <p class="pull-left"><i class="fa fa-angle-double-up"></i></p>
                     <p class="pull-right">Back to Top</p>
                 </div>