Fix stream pause/resume transitions

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

@@ -10,9 +10,6 @@ let resource;
 let $state;
 let qs;
 
-let chain;
-let chainLength;
-
 function JobsIndexController (
     _resource_,
     _page_,
@@ -179,6 +176,10 @@ function shift () {
 }
 
 function scrollHome () {
+    if (scroll.isPaused()) {
+        return;
+    }
+
     scroll.pause();
 
     return page.first()
@@ -198,12 +199,18 @@ function scrollHome () {
 
 function scrollEnd () {
     if (stream.isActive()) {
+        if (stream.isTransitioning()) {
+            return;
+        }
+
         if (stream.isPaused()) {
             stream.resume();
         } else {
             stream.pause();
         }
 
+        return;
+    } else if (scroll.isPaused()) {
         return;
     }
 
@@ -225,10 +232,18 @@ function scrollEnd () {
 }
 
 function scrollPageUp () {
+    if (scroll.isPaused()) {
+        return;
+    }
+
     scroll.pageUp();
 }
 
 function scrollPageDown () {
+    if (scroll.isPaused()) {
+        return;
+    }
+
     scroll.pageDown();
 }
 

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

@@ -1,7 +1,6 @@
 <div class="container-fluid">
     <div class="col-md-4">
         <at-panel>
-            <p><button class="btn" ng-click="vm.clear()">Stream Mode</button></p>
             <p><button class="btn" ng-click="vm.clear(true)">Page Mode</button></p>
         </at-panel>
     </div>

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

@@ -189,12 +189,13 @@ function JobPageService ($q) {
             return;
         }
 
-        this.bookmark.state.first = this.page.state.first - 1;
+        this.bookmark.state.first = this.page.state.first;
         this.bookmark.state.last = this.page.state.last  - 1;
         this.bookmark.state.current = this.page.state.current - 1;
         this.bookmark.cache = JSON.parse(JSON.stringify(this.page.cache));
         this.bookmark.set = true;
         this.bookmark.pending = false;
+        console.log('applied', JSON.stringify(this.bookmark.state, 0, 2));
     };
 
     this.removeBookmark = () => {

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

@@ -87,7 +87,7 @@ function JobRenderService ($q, $sce, $window) {
         return { html, count };
     };
 
-    this.createRecord = event => {
+    this.createRecord = (ln, lines, event) => {
         if (!event.uuid) {
             return null;
         }
@@ -104,7 +104,7 @@ function JobRenderService ($q, $sce, $window) {
         };
 
         if (event.parent_uuid) {
-            info.parents = getParentEvents(event.parent_uuid);
+            info.parents = this.getParentEvents(event.parent_uuid);
         }
 
         if (info.isTruncated) {
@@ -209,7 +209,7 @@ function JobRenderService ($q, $sce, $window) {
             list.push(uuid);
 
             if (this.record[uuid].parents) {
-                list = list.concat(record[uuid].parents);
+                list = list.concat(this.record[uuid].parents);
             }
         }
 
@@ -231,7 +231,6 @@ function JobRenderService ($q, $sce, $window) {
 
     this.remove = elements => {
         return this.requestAnimationFrame(() => {
-            elements.empty();
             elements.remove();
         });
     };
@@ -254,10 +253,6 @@ function JobRenderService ($q, $sce, $window) {
         return this.requestAnimationFrame();
     };
 
-    this.build = () => {
-
-    };
-
     this.clear = () => {
         const elements = this.el.children();
 

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

@@ -137,6 +137,10 @@ function JobScrollService ($q, $timeout) {
         this.isAtRest();
     };
 
+    this.scrollToBottom = () => {
+        this.setScrollPosition(this.getScrollHeight());
+    };
+
     this.isAtRest = () => {
         if (this.position.current === 0 && !this.state.top) {
             this.state.top = true;
@@ -161,12 +165,10 @@ function JobScrollService ($q, $timeout) {
 
     this.lock = () => {
         this.state.locked = true;
-        this.state.paused = true;
     };
 
     this.unlock = () => {
         this.state.locked = false;
-        this.state.paused = false;
     };
 
     this.isLocked = () => {

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

@@ -106,7 +106,7 @@ function JobStreamService ($q) {
         return this.hooks.render(events)
             .then(() => {
                 if (this.scroll.isLocked()) {
-                    this.scroll.setScrollPosition(this.scroll.getScrollHeight());
+                    this.scroll.scrollToBottom();
                 }
 
                 if (this.isEnding()) {
@@ -127,13 +127,13 @@ function JobStreamService ($q) {
         if (done) {
             this.state.resuming = false;
             this.state.paused = false;
-
+        } else if (!this.isTransitioning()) {
-            return;
+            this.scroll.pause();
+            this.scroll.lock();
+            this.scroll.scrollToBottom();
+            this.state.resuming = true;
+            this.page.removeBookmark();
         }
-
-        this.scroll.lock();
-        this.state.resuming = true;
-        this.page.removeBookmark();
     };
 
     this.pause = done => {
@@ -141,18 +141,17 @@ function JobStreamService ($q) {
             this.state.pausing = false;
             this.state.paused = true;
             this.scroll.resume();
-
+        } else if (!this.isTransitioning()) {
-            return;
+            this.scroll.pause();
+            this.scroll.unlock();
+            this.state.pausing = true;
+            this.page.setBookmark();
         }
-
-        this.scroll.unlock();
-        this.scroll.pause();
-        this.state.pausing = true;
-        this.page.setBookmark();
     };
 
     this.start = () => {
         this.state.started = true;
+        this.scroll.pause();
         this.scroll.lock();
     };
 
@@ -161,6 +160,7 @@ function JobStreamService ($q) {
             this.state.ending = false;
             this.state.ended = true;
             this.scroll.unlock();
+            this.scroll.resume();
 
             return;
         }
@@ -172,6 +172,7 @@ function JobStreamService ($q) {
     this.isPaused = () => this.state.paused;
     this.isPausing = () => this.state.pausing;
     this.isResuming = () => this.state.resuming;
+    this.isTransitioning = () => this.isActive() && (this.state.pausing || this.state.resuming);
     this.isActive = () => this.state.started && !this.state.ended;
     this.isEnding = () => this.state.ending;
     this.isDone = () => this.state.ended;