From 91bc39be6b57a8bc12a3dd1ba627991e073dd8fa Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Sun, 12 Aug 2018 11:12:49 -0400 Subject: [PATCH 1/2] performance / ux improvements for higher volume jobs --- .../features/output/index.controller.js | 20 +++++++++- .../client/features/output/scroll.service.js | 38 ------------------- .../client/features/output/stream.service.js | 7 +++- 3 files changed, 24 insertions(+), 41 deletions(-) diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index 88d86ca91b..699717c285 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/awx/ui/client/features/output/index.controller.js @@ -234,6 +234,9 @@ function stopFollowing () { return; } + scroll.unlock(); + scroll.unhide(); + vm.isFollowing = false; vm.followTooltip = vm.strings.get('tooltips.MENU_LAST'); } @@ -482,10 +485,23 @@ function OutputIndexController ( }, }); + const rates = []; stream.init({ bufferAdd, bufferEmpty, onFrames, + onFrameRate (rate) { + rates.push(rate); + rates.splice(0, rates.length - 5); + + if (rate > 1 && vm.isFollowing) { + scroll.lock(); + scroll.hide(); + } else if (rates.every(value => value === 1)) { + scroll.unlock(); + scroll.unhide(); + } + }, onStop () { lockFollow = true; stopFollowing(); @@ -493,7 +509,8 @@ function OutputIndexController ( status.updateStats(); status.dispatch(); status.sync(); - scroll.stop(); + scroll.unlock(); + scroll.unhide(); } }); @@ -533,3 +550,4 @@ OutputIndexController.$inject = [ ]; module.exports = OutputIndexController; + diff --git a/awx/ui/client/features/output/scroll.service.js b/awx/ui/client/features/output/scroll.service.js index 4e6e2eff57..b8b7444928 100644 --- a/awx/ui/client/features/output/scroll.service.js +++ b/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(); } diff --git a/awx/ui/client/features/output/stream.service.js b/awx/ui/client/features/output/stream.service.js index 5b14d26b4b..6d3f2a4137 100644 --- a/awx/ui/client/features/output/stream.service.js +++ b/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(); From 516607551c3e06bdfe58dbccc91fc4476871cb76 Mon Sep 17 00:00:00 2001 From: Jake McDermott Date: Sun, 12 Aug 2018 19:35:59 -0400 Subject: [PATCH 2/2] show follow tip on first auto scroll hide --- awx/ui/client/features/output/constants.js | 1 + awx/ui/client/features/output/index.controller.js | 15 ++++++++++++--- awx/ui/client/features/output/index.view.html | 1 + 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/awx/ui/client/features/output/constants.js b/awx/ui/client/features/output/constants.js index 4bab4ca1bb..5d3b29aab8 100644 --- a/awx/ui/client/features/output/constants.js +++ b/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; diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index 699717c285..2be373476e 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/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'; @@ -485,6 +486,7 @@ function OutputIndexController ( }, }); + let showFollowTip = true; const rates = []; stream.init({ bufferAdd, @@ -494,12 +496,19 @@ function OutputIndexController ( 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(); - } else if (rates.every(value => value === 1)) { - scroll.unlock(); - scroll.unhide(); + + if (showFollowTip) { + showFollowTip = false; + $(OUTPUT_ELEMENT_LAST).trigger('mouseenter'); + } } }, onStop () { diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html index 08df5f714a..738b7a0ae5 100644 --- a/awx/ui/client/features/output/index.view.html +++ b/awx/ui/client/features/output/index.view.html @@ -28,6 +28,7 @@