From e5187e4ac8bd1567111d25e47d37c22691e34a10 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Wed, 24 Jan 2018 15:52:31 -0500 Subject: [PATCH] Adjust pagination/scrolling --- awx/ui/build/webpack.watch.js | 22 +-- .../features/output/index.controller.js | 139 +++++++++++------- awx/ui/client/features/output/index.js | 2 +- awx/ui/client/lib/models/Base.js | 28 +++- 4 files changed, 123 insertions(+), 68 deletions(-) diff --git a/awx/ui/build/webpack.watch.js b/awx/ui/build/webpack.watch.js index 0ae7d77ef5..a68c2eee25 100644 --- a/awx/ui/build/webpack.watch.js +++ b/awx/ui/build/webpack.watch.js @@ -20,16 +20,18 @@ const watch = { output: { filename: OUTPUT }, - module: { - rules: [ - { - test: /\.js$/, - enforce: 'pre', - exclude: /node_modules/, - loader: 'eslint-loader' - } - ] - }, + /* + *module: { + * rules: [ + * { + * test: /\.js$/, + * enforce: 'pre', + * exclude: /node_modules/, + * loader: 'eslint-loader' + * } + * ] + *}, + */ plugins: [ new HtmlWebpackHarddiskPlugin(), new HardSourceWebpackPlugin({ diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js index 3fa2686c08..9021108a30 100644 --- a/awx/ui/client/features/output/index.controller.js +++ b/awx/ui/client/features/output/index.controller.js @@ -14,12 +14,14 @@ let $q; const record = {}; const meta = { - scroll: {} + scroll: {}, + page: {} }; const ROW_LIMIT = 200; +const PAGE_LIMIT = 3; const SCROLL_BUFFER = 250; -// const SCROLL_LOAD_DELAY = 100; +const SCROLL_LOAD_DELAY = 250; const EVENT_START_TASK = 'playbook_on_task_start'; const EVENT_START_PLAY = 'playbook_on_play_start'; const EVENT_STATS_PLAY = 'playbook_on_stats'; @@ -83,6 +85,11 @@ function JobsIndexController ( } }; + meta.page.cache = [{ + page: 1, + count: events.length + }]; + $timeout(() => { const table = $(ELEMENT_TBODY); container = $(ELEMENT_CONTAINER); @@ -97,41 +104,54 @@ function JobsIndexController ( function next () { const config = { related: 'job_events', + page: meta.page.cache[meta.page.cache.length - 1].page + 1, params: { order_by: 'start_line' } }; - console.log('[2] getting next page'); - return job.next(config) - .then(events => { - console.log(events); - if (!events) { + console.log('[2] getting next page', config.page, meta.page.cache); + return job.goToPage(config) + .then(data => { + if (!data || !data.results) { return $q.resolve(); } - console.log(ROW_LIMIT); - console.log(getRowCount()); - console.log(getRowsInView()); - console.log(getScrollPosition()); + meta.page.cache.push({ + page: data.page, + count: data.results.length + }); - console.log('above:', getRowsAbove()); - console.log('below:', getRowsBelow()); + console.log(data.results); return shift() - .then(() => append(events)); + .then(() => append(data.results)); }); } function prev () { - console.log('[2] getting previous page'); - return job.prev({ related: 'job_events' }) - .then(events => { - if (!events) { + const config = { + related: 'job_events', + page: meta.page.cache[0].page - 1, + params: { + order_by: 'start_line' + } + }; + + console.log('[2] getting previous page', config.page, meta.page.cache); + + return job.goToPage(config) + .then(data => { + if (!data || !data.results) { return $q.resolve(); } + meta.page.cache.unshift({ + page: data.page, + count: data.results.length + }); + return pop() - .then(() => prepend(events)); + .then(() => prepend(data.results)); }); } @@ -187,7 +207,6 @@ function append (events) { table.append(rows); $compile(rows.contents())($scope); - $timeout(() => { resolve(); }); @@ -201,6 +220,10 @@ function prepend (events) { const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parseEvents(events)))); const table = $(ELEMENT_TBODY); + // Set row count added + // pop number of rows (not number of events) + // meta.page.cache[0].rows = rows.length; + table.prepend(rows); $compile(rows.contents())($scope); @@ -213,14 +236,20 @@ function prepend (events) { function pop () { console.log('[3] popping old page'); return $q(resolve => { - const count = getRowCount() - ROW_LIMIT; - const rows = $(ELEMENT_TBODY).children().slice(-count); + if (meta.page.cache.length <= PAGE_LIMIT) { + console.log('[3.1] nothing to pop'); + return resolve(); + } + + const ejected = meta.page.cache.pop(); + console.log('[3.1] popping', ejected); + const rows = $(ELEMENT_TBODY).children().slice(-ejected.count); rows.empty(); rows.remove(); $timeout(() => { - resolve(); + return resolve(); }); }); } @@ -228,14 +257,20 @@ function pop () { function shift () { console.log('[3] shifting old page'); return $q(resolve => { - const count = getRowCount() - ROW_LIMIT; - const rows = $(ELEMENT_TBODY).children().slice(0, count); + if (meta.page.cache.length <= PAGE_LIMIT) { + console.log('[3.1] nothing to shift'); + return resolve(); + } + + const ejected = meta.page.cache.shift(); + console.log('[3.1] shifting', ejected); + const rows = $(ELEMENT_TBODY).children().slice(0, ejected.count); rows.empty(); rows.remove(); $timeout(() => { - resolve(); + return resolve(); }); }); } @@ -471,33 +506,37 @@ function onScroll () { meta.scroll.inProgress = true; - const top = container[0].scrollTop; - const bottom = top + SCROLL_BUFFER + container[0].offsetHeight; + $timeout(() => { + const top = container[0].scrollTop; + const bottom = top + SCROLL_BUFFER + container[0].offsetHeight; - if (top === 0) { - console.log('[1] scroll to top'); - vm.menu.scroll.display = false; + if (top <= SCROLL_BUFFER) { + console.log('[1] scroll to top'); + vm.menu.scroll.display = false; - prev() - .then(() => { - console.log('[5] scroll reset'); + prev() + .then(() => { + console.log('[5] scroll reset'); + meta.scroll.inProgress = false; + }); + + return; + } else { + vm.menu.scroll.display = true; + + if (bottom >= container[0].scrollHeight) { + console.log('[1] scroll to bottom'); + + next() + .then(() => { + console.log('[5] scroll reset'); + meta.scroll.inProgress = false; + }); + } else { meta.scroll.inProgress = false; - }); - - return; - } - - vm.menu.scroll.display = true; - - if (bottom >= container[0].scrollHeight) { - console.log('[1] scroll to bottom'); - - next() - .then(() => { - console.log('[5] scroll reset'); - meta.scroll.inProgress = false; - }); - } + } + } + }, SCROLL_LOAD_DELAY); } JobsIndexController.$inject = [ diff --git a/awx/ui/client/features/output/index.js b/awx/ui/client/features/output/index.js index 1e8fc4e23e..e8daf39557 100644 --- a/awx/ui/client/features/output/index.js +++ b/awx/ui/client/features/output/index.js @@ -35,7 +35,7 @@ function JobsRun ($stateExtender, strings) { return new Jobs('get', id) .then(job => job.extend('job_events', { pageCache: true, - pageLimit: 4, + pageLimit: 3, params: { page_size: 100, order_by: 'start_line' diff --git a/awx/ui/client/lib/models/Base.js b/awx/ui/client/lib/models/Base.js index e9723655f4..0c04964a5f 100644 --- a/awx/ui/client/lib/models/Base.js +++ b/awx/ui/client/lib/models/Base.js @@ -398,8 +398,9 @@ function extend (related, config) { return Promise.reject(new Error(`No related property, ${related}, exists`)); } -function goToPage (config, page) { +function goToPage (config) { const params = config.params || {}; + const page = config.page; let url; let key; @@ -429,18 +430,22 @@ function goToPage (config, page) { pageNumber = page; } - this.page.current = pageNumber; - + console.log('pageNumber', page, pageNumber); if (pageNumber < 1 || pageNumber > this.page.last) { return Promise.resolve(null); } + this.page.current = pageNumber; + if (this.page.cache) { pageCache = _.get(this.page.cache, key); pagesInCache = _.get(this.page.cachedPages, key); if (_.has(pageCache, pageNumber)) { - return Promise.resolve(pageCache[pageNumber]); + return Promise.resolve({ + results: pageCache[pageNumber], + page: pageNumber + }); } } @@ -455,6 +460,8 @@ function goToPage (config, page) { return $http(req) .then(({ data }) => { + let ejected; + if (pageCache) { pageCache[pageNumber] = data.results; pagesInCache.push(pageNumber); @@ -466,16 +473,23 @@ function goToPage (config, page) { } } - return data.results; + return { + results: data.results, + page: pageNumber + } }); } function next (config = {}) { - return this.goToPage(config, 'next'); + config.page = 'next'; + + return this.goToPage(config); } function prev (config = {}) { - return this.goToPage(config, 'previous'); + config.page = 'previous'; + + return this.goToPage(config); } function normalizePath (resource) {