External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-12 11:57:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Adjust pagination/scrolling

Browse Source
This commit is contained in:
gconsidine
2018-01-24 15:52:31 -05:00
committed by Jake McDermott
parent cc36ee6bed
commit e5187e4ac8
4 changed files with 123 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
awx/ui/build/webpack.watch.js
View File

@@ -20,16 +20,18 @@ const watch = {
output: { output: {
filename: OUTPUT filename: OUTPUT
}, },
module: { /*
rules: [ *module: {
{ * rules: [
test: /\.js$/, * {
enforce: 'pre', * test: /\.js$/,
exclude: /node_modules/, * enforce: 'pre',
loader: 'eslint-loader' * exclude: /node_modules/,
} * loader: 'eslint-loader'
] * }
}, * ]
*},
*/
plugins: [ plugins: [
new HtmlWebpackHarddiskPlugin(), new HtmlWebpackHarddiskPlugin(),
new HardSourceWebpackPlugin({ new HardSourceWebpackPlugin({

139
awx/ui/client/features/output/index.controller.js
View File

@@ -14,12 +14,14 @@ let $q;
const record = {}; const record = {};
const meta = { const meta = {
scroll: {} scroll: {},
page: {}
}; };
const ROW_LIMIT = 200; const ROW_LIMIT = 200;
const PAGE_LIMIT = 3;
const SCROLL_BUFFER = 250; 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_TASK = 'playbook_on_task_start';
const EVENT_START_PLAY = 'playbook_on_play_start'; const EVENT_START_PLAY = 'playbook_on_play_start';
const EVENT_STATS_PLAY = 'playbook_on_stats'; const EVENT_STATS_PLAY = 'playbook_on_stats';
@@ -83,6 +85,11 @@ function JobsIndexController (
} }
}; };
meta.page.cache = [{
page: 1,
count: events.length
}];
$timeout(() => { $timeout(() => {
const table = $(ELEMENT_TBODY); const table = $(ELEMENT_TBODY);
container = $(ELEMENT_CONTAINER); container = $(ELEMENT_CONTAINER);
@@ -97,41 +104,54 @@ function JobsIndexController (
function next () { function next () {
const config = { const config = {
related: 'job_events', related: 'job_events',
page: meta.page.cache[meta.page.cache.length - 1].page + 1,
params: { params: {
order_by: 'start_line' order_by: 'start_line'
} }
}; };
console.log('[2] getting next page'); console.log('[2] getting next page', config.page, meta.page.cache);
return job.next(config) return job.goToPage(config)
.then(events => { .then(data => {
console.log(events); if (!data || !data.results) {
if (!events) {
return $q.resolve(); return $q.resolve();
} }
console.log(ROW_LIMIT); meta.page.cache.push({
console.log(getRowCount()); page: data.page,
console.log(getRowsInView()); count: data.results.length
console.log(getScrollPosition()); });
console.log('above:', getRowsAbove()); console.log(data.results);
console.log('below:', getRowsBelow());
return shift() return shift()
.then(() => append(events)); .then(() => append(data.results));
}); });
} }
function prev () { function prev () {
console.log('[2] getting previous page'); const config = {
return job.prev({ related: 'job_events' }) related: 'job_events',
.then(events => { page: meta.page.cache[0].page - 1,
if (!events) { 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(); return $q.resolve();
} }
meta.page.cache.unshift({
page: data.page,
count: data.results.length
});
return pop() return pop()
.then(() => prepend(events)); .then(() => prepend(data.results));
}); });
} }
@@ -187,7 +207,6 @@ function append (events) {
table.append(rows); table.append(rows);
$compile(rows.contents())($scope); $compile(rows.contents())($scope);
$timeout(() => { $timeout(() => {
resolve(); resolve();
}); });
@@ -201,6 +220,10 @@ function prepend (events) {
const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parseEvents(events)))); const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parseEvents(events))));
const table = $(ELEMENT_TBODY); 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); table.prepend(rows);
$compile(rows.contents())($scope); $compile(rows.contents())($scope);
@@ -213,14 +236,20 @@ function prepend (events) {
function pop () { function pop () {
console.log('[3] popping old page'); console.log('[3] popping old page');
return $q(resolve => { return $q(resolve => {
const count = getRowCount() - ROW_LIMIT; if (meta.page.cache.length <= PAGE_LIMIT) {
const rows = $(ELEMENT_TBODY).children().slice(-count); 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.empty();
rows.remove(); rows.remove();
$timeout(() => { $timeout(() => {
resolve(); return resolve();
}); });
}); });
} }
@@ -228,14 +257,20 @@ function pop () {
function shift () { function shift () {
console.log('[3] shifting old page'); console.log('[3] shifting old page');
return $q(resolve => { return $q(resolve => {
const count = getRowCount() - ROW_LIMIT; if (meta.page.cache.length <= PAGE_LIMIT) {
const rows = $(ELEMENT_TBODY).children().slice(0, count); 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.empty();
rows.remove(); rows.remove();
$timeout(() => { $timeout(() => {
resolve(); return resolve();
}); });
}); });
} }
@@ -471,33 +506,37 @@ function onScroll () {
meta.scroll.inProgress = true; meta.scroll.inProgress = true;
const top = container[0].scrollTop; $timeout(() => {
const bottom = top + SCROLL_BUFFER + container[0].offsetHeight; const top = container[0].scrollTop;
const bottom = top + SCROLL_BUFFER + container[0].offsetHeight;
if (top === 0) { if (top <= SCROLL_BUFFER) {
console.log('[1] scroll to top'); console.log('[1] scroll to top');
vm.menu.scroll.display = false; vm.menu.scroll.display = false;
prev() prev()
.then(() => { .then(() => {
console.log('[5] scroll reset'); 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; meta.scroll.inProgress = false;
}); }
}
return; }, SCROLL_LOAD_DELAY);
}
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;
});
}
} }
JobsIndexController.$inject = [ JobsIndexController.$inject = [

2
awx/ui/client/features/output/index.js
View File

@@ -35,7 +35,7 @@ function JobsRun ($stateExtender, strings) {
return new Jobs('get', id) return new Jobs('get', id)
.then(job => job.extend('job_events', { .then(job => job.extend('job_events', {
pageCache: true, pageCache: true,
pageLimit: 4, pageLimit: 3,
params: { params: {
page_size: 100, page_size: 100,
order_by: 'start_line' order_by: 'start_line'

28
awx/ui/client/lib/models/Base.js
View File

@@ -398,8 +398,9 @@ function extend (related, config) {
return Promise.reject(new Error(`No related property, ${related}, exists`)); return Promise.reject(new Error(`No related property, ${related}, exists`));
} }
function goToPage (config, page) { function goToPage (config) {
const params = config.params || {}; const params = config.params || {};
const page = config.page;
let url; let url;
let key; let key;
@@ -429,18 +430,22 @@ function goToPage (config, page) {
pageNumber = page; pageNumber = page;
} }
this.page.current = pageNumber; console.log('pageNumber', page, pageNumber);
if (pageNumber < 1 || pageNumber > this.page.last) { if (pageNumber < 1 || pageNumber > this.page.last) {
return Promise.resolve(null); return Promise.resolve(null);
} }
this.page.current = pageNumber;
if (this.page.cache) { if (this.page.cache) {
pageCache = _.get(this.page.cache, key); pageCache = _.get(this.page.cache, key);
pagesInCache = _.get(this.page.cachedPages, key); pagesInCache = _.get(this.page.cachedPages, key);
if (_.has(pageCache, pageNumber)) { 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) return $http(req)
.then(({ data }) => { .then(({ data }) => {
let ejected;
if (pageCache) { if (pageCache) {
pageCache[pageNumber] = data.results; pageCache[pageNumber] = data.results;
pagesInCache.push(pageNumber); pagesInCache.push(pageNumber);
@@ -466,16 +473,23 @@ function goToPage (config, page) {
} }
} }
return data.results; return {
results: data.results,
page: pageNumber
}
}); });
} }
function next (config = {}) { function next (config = {}) {
return this.goToPage(config, 'next'); config.page = 'next';
return this.goToPage(config);
} }
function prev (config = {}) { function prev (config = {}) {
return this.goToPage(config, 'previous'); config.page = 'previous';
return this.goToPage(config);
} }
function normalizePath (resource) { function normalizePath (resource) {