shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-02 09:51:09 +03:00
Code Releases Activity

Add WIP implementation of pagination with cache

Browse Source
This commit is contained in:
gconsidine 2018-01-19 15:07:25 -05:00 committed by Jake McDermott
parent ab8651eab6
commit 4b81d8d494
2 changed files with 181 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,20 +89,36 @@ function JobsIndexController (_job_, JobEventModel, _$sce_, _$timeout_, _$scope_
}
function next () {
job.next({ related: 'job_events' })
const config = {
related: 'job_events',
params: {
order_by: 'start_line'
}
};
job.next(config)
.then(cursor => {
meta.next = job.get('related.job_events.next');
meta.prev = job.get('related.job_events.previous');
console.log(ROW_LIMIT);
console.log(getRowCount());
console.log(getRowHeight());
console.log(getRowsInView());
console.log(getScrollPosition());
console.log('above:', getRowsAbove());
console.log('below:', getRowsBelow());
append(cursor);
shift();
debugger;
});
}
function prev () {
job.prev({ related: 'job_events' })
.then(cursor => {
console.log(cursor);
});
}
@ -158,6 +174,22 @@ function append (cursor) {
$compile(rows.contents())($scope);
}
/*
*function prepend (cursor) {
*
*}
*
*/
function shift () {
const count = getRowCount() - ROW_LIMIT;
const rows = $(ELEMENT_TBODY).children().slice(0, count);
console.log(count, rows);
rows.empty();
rows.remove();
}
function expand () {
vm.toggle(meta.parent, true);
}
@ -398,6 +430,8 @@ function onScroll () {
if (top === 0) {
vm.menu.scroll.display = false;
prev();
return;
}

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

@ -106,9 +106,10 @@ function httpGet (config = {}) {
req.params = config.params;
if (config.params.page_size) {
this.pageSize = config.params.page_size;
this.pageLimit = config.pageLimit || false;
this.pageCache = config.pageCache || false;
this.page.size = config.params.page_size;
this.page.limit = config.pageLimit || false;
this.page.cache = config.pageCache || false;
this.page.current = 1;
}
}
@ -120,6 +121,7 @@ function httpGet (config = {}) {
req.url = `${this.path}${config.resource}/`;
}
console.log(req, this.path);
return $http(req)
.then(res => {
this.model.GET = res.data;
@ -337,9 +339,11 @@ function extend (related, config) {
const req = this.parseRequestConfig('GET', config);
if (config.params.page_size) {
this.pageSize = config.params.page_size;
this.pageLimit = config.pageLimit || false;
this.pageCache = config.pageCache || false;
this.page.size = config.params.page_size;
this.page.limit = config.pageLimit || false;
this.page.cache = config.pageCache || false;
this.page.current = 1;
this.page.cursor = 0;
}
if (this.has(req.method, `related.${related}`)) {
@ -358,54 +362,146 @@ function extend (related, config) {
return Promise.reject(new Error(`No related property, ${related}, exists`));
}
function next (config = {}) {
function goToPage (config, page) {
const params = config.params || {};
let url;
let results;
// let results;
let cursor;
let pageNumber;
if (config.related) {
url = this.get(`related.${config.related}.next`);
results = this.get(`related.${config.related}.results`) || [];
// results = this.get(`related.${config.related}.results`) || [];
url = `${this.endpoint}${config.related}/`;
} else {
url = this.get('next');
results = this.get('results');
// results = this.get('results');
url = this.endpoint;
}
if (!url) {
return Promise.resolve(null);
params.page_size = this.page.size;
if (page === 'next') {
// if (at max)
pageNumber = this.page.current + 1;
cursor = this.page.cursor + this.page.size;
} else if (page === 'prev') {
// if (at min)
pageNumber = this.page.current - 1;
cursor = this.page.cursor - this.page.size;
} else {
pageNumber = page;
cursor = this.page.size * (pageNumber - 1);
}
if (cursor !== 0 && cursor !== (this.page.limit * this.page.size)) {
this.page.cursor = cursor;
this.page.current = pageNumber;
return Promise.resolve(cursor);
}
params.page_size = this.page.size;
params.page = this.page.current;
const req = {
method: 'GET',
url
url,
params
};
return $http(req)
.then(({ data }) => {
let cursor = 0;
if (this.pageCache) {
results = results || [];
data.results = results.concat(data.results);
cursor = results.length;
if (this.pageLimit && this.pageLimit * this.pageSize < data.results.length) {
const removeCount = data.results.length - this.pageLimit * this.pageSize;
data.results.splice(0, removeCount);
cursor -= removeCount;
}
}
if (config.related) {
this.set('get', `related.${config.related}`, data);
} else {
this.set('get', data);
}
return cursor <= 0 ? 0 : cursor;
console.log(data);
});
}
function next (config = {}) {
return this.goToPage(config, 'next');
/*
* .then(({ data }) => {
* let cursor = 0;
*
* if (this.pageCache) {
* results = results || [];
* data.results = results.concat(data.results);
* cursor = results.length;
*
* if (this.pageLimit && this.pageLimit * this.pageSize < data.results.length) {
* const removeCount = data.results.length - this.pageLimit * this.pageSize;
*
* data.results.splice(0, removeCount);
* cursor -= removeCount;
* }
* }
*
* if (config.related) {
* this.set('get', `related.${config.related}`, data);
* } else {
* this.set('get', data);
* }
*
* this.page.current++;
*
* return cursor <= 0 ? 0 : cursor;
* });
*/
}
function prev (config = {}) {
return this.goToPage(config, 'next');
}
/*
* let url;
* let results;
*
* console.log(config, config.cursor)
* if (config.related) {
* url = this.get(`related.${config.related}.next`);
* results = this.get(`related.${config.related}.results`) || [];
* } else {
* url = this.get('next');
* results = this.get('results');
* }
*
* if (!url) {
* return Promise.resolve(null);
* }
*
* const req = {
* method: 'GET',
* url
* };
*
* return $http(req)
* .then(({ data }) => {
* let cursor = 0;
*
* if (this.pageCache) {
* results = results || [];
* data.results = results.concat(data.results);
* cursor = results.length;
*
* if (this.pageLimit && this.pageLimit * this.pageSize < data.results.length) {
* const removeCount = data.results.length - this.pageLimit * this.pageSize;
*
* data.results.splice(0, removeCount);
* cursor -= removeCount;
* }
* }
*
* if (config.related) {
* this.set('get', `related.${config.related}`, data);
* } else {
* this.set('get', data);
* }
*
* return cursor <= 0 ? 0 : cursor;
* });
*}
*/
function normalizePath (resource) {
const version = '/api/v2/';
@ -515,6 +611,10 @@ function create (method, resource, config) {
return this;
}
if (req.resource) {
this.setEndpoint(req.resource);
}
this.promise = this.request(req);
if (req.graft) {
@ -525,6 +625,10 @@ function create (method, resource, config) {
.then(() => this);
}
function setEndpoint (resource) {
this.endpoint = `${this.path}${resource}/`;
}
function parseRequestConfig (method, resource, config) {
if (!method) {
return null;
@ -577,6 +681,7 @@ function BaseModel (resource, settings) {
this.create = create;
this.find = find;
this.get = get;
this.goToPage = goToPage;
this.graft = graft;
this.has = has;
this.isEditable = isEditable;
@ -587,10 +692,12 @@ function BaseModel (resource, settings) {
this.normalizePath = normalizePath;
this.options = options;
this.parseRequestConfig = parseRequestConfig;
this.prev = prev;
this.request = request;
this.requestWithCache = requestWithCache;
this.search = search;
this.set = set;
this.setEndpoint = setEndpoint;
this.unset = unset;
this.extend = extend;
this.copy = copy;
@ -605,6 +712,7 @@ function BaseModel (resource, settings) {
delete: httpDelete.bind(this)
};
this.page = {};
this.model = {};
this.path = this.normalizePath(resource);
this.label = strings.get(`${resource}.LABEL`);