External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-18 13:11:19 -03: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
Show Stats 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: {
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({

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

@ -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 = [

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

@ -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'

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`));
}
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) {