Fix model pagination behavior, limit, and cache

awx/ui/client/features/output/index.controller.js

@@ -16,6 +16,7 @@ const meta = {
     scroll: {}
 };
 
+const SCROLL_BUFFER = 250;
 const EVENT_START_TASK = 'playbook_on_task_start';
 const EVENT_START_PLAY = 'playbook_on_play_start';
 const EVENT_STATS_PLAY = 'playbook_on_stats';
@@ -75,8 +76,6 @@ function JobsIndexController (_job_, JobEventModel, _$sce_, _$timeout_, _$scope_
         table.html($sce.getTrustedHtml(html));
         $compile(table.contents())($scope);
 
-        meta.scroll.height = container[0].scrollHeight;
-        meta.scroll.buffer = 100;
         meta.next = job.get('related.job_events.next');
         meta.prev = job.get('related.job_events.previous');
         meta.cursor = job.get('related.job_events.results').length;
@@ -86,17 +85,17 @@ function JobsIndexController (_job_, JobEventModel, _$sce_, _$timeout_, _$scope_
 }
 
 function next () {
-    job.next({ related: 'job_events', limit: 5 })
+    job.next({ related: 'job_events' })
-        .then(() => {
+        .then(cursor => {
             meta.next = job.get('related.job_events.next');
             meta.prev = job.get('related.job_events.previous');
 
-            append();
+            append(cursor);
         });
 }
 
-function append () {
+function append (cursor) {
-    const events = job.get('related.job_events.results').slice(meta.cursor);
+    const events = job.get('related.job_events.results').slice(cursor);
     const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parseEvents(events))));
     const table = $('#result-table');
 
@@ -176,10 +175,6 @@ function createRecord (ln, lines, event) {
         isHost: typeof event.host === 'number'
     };
 
-    if (info.isHost) {
-        console.log(event);
-    }
-
     if (event.parent_uuid) {
         info.parents = getParentEvents(event.parent_uuid);
     }
@@ -341,7 +336,7 @@ function onScroll () {
 
     $timeout(() => {
         const top = container[0].scrollTop;
-        const bottom = top + meta.scroll.buffer + container[0].offsetHeight;
+        const bottom = top + SCROLL_BUFFER + container[0].offsetHeight;
 
         meta.scroll.inProgress = false;
 
@@ -353,10 +348,10 @@ function onScroll () {
 
         vm.menu.scroll.display = true;
 
-        if (bottom >= meta.scroll.height && meta.next) {
+        if (bottom >= container[0].scrollHeight && meta.next) {
             next();
         }
-    }, 500);
+    }, 250);
 }
 
 JobsIndexController.$inject = ['job', 'JobEventModel', '$sce', '$timeout', '$scope', '$compile'];

awx/ui/client/features/output/index.js

@@ -34,10 +34,12 @@ function JobsRun ($stateExtender, strings) {
 
                 return new Jobs('get', id)
                     .then(job => job.extend('job_events', {
+                        pageCache: true,
+                        pageLimit: 2,
                         params: {
-                            page_size: 13,
+                            page_size: 25,
                             order_by: 'start_line'
-                        }
+                        },
                     }));
             }]
         }

awx/ui/client/lib/models/Base.js

@@ -107,6 +107,8 @@ function httpGet (config = {}) {
 
         if (config.params.page_size) {
             this.pageSize = config.params.page_size;
+            this.pageLimit = config.pageLimit || false;
+            this.pageCache = config.pageCache || false;
         }
     }
 
@@ -336,6 +338,8 @@ function extend (related, config) {
 
     if (config.params.page_size) {
         this.pageSize = config.params.page_size;
+        this.pageLimit = config.pageLimit || false;
+        this.pageCache = config.pageCache || false;
     }
 
     if (this.has(req.method, `related.${related}`)) {
@@ -377,12 +381,19 @@ function next (config = {}) {
 
     return $http(req)
         .then(({ data }) => {
-            results = results || [];
+            let cursor = 0;
 
-            data.results = results.concat(data.results);
+            if (this.pageCache) {
+                results = results || [];
+                data.results = results.concat(data.results);
+                cursor = results.length;
 
-            if ((config.limit * this.pageSize) < data.results.length) {
+                if (this.pageLimit && this.pageLimit * this.pageSize < data.results.length) {
-                data.results.splice(-config.limit * this.pageSize);
+                    const removeCount = data.results.length - this.pageLimit * this.pageSize;
+
+                    data.results.splice(0, removeCount);
+                    cursor -= removeCount;
+                }
             }
 
             if (config.related) {
@@ -390,31 +401,8 @@ function next (config = {}) {
             } else {
                 this.set('get', data);
             }
-        });
-}
 
-function prev (related, config = {}) {
+            return cursor <= 0 ? 0 : cursor;
-    const url = this.get(`related.${related}.previous`);
-
-    if (!url) {
-        return Promise.resolve(null);
-    }
-
-    const req = {
-        method: 'GET',
-        url
-    };
-
-    return $http(req)
-        .then(({ data }) => {
-            const results = this.get(`related.${related}.results`) || [];
-
-            data.results = data.results.concat(results);
-            this.set('get', `related.${related}`, data);
-
-            if (config.limit < results.length) {
-                console.log(results);
-            }
         });
 }
 
@@ -599,7 +587,6 @@ 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;