From 5a75059c865b4bda8c8e1c18cc25ebf42234b2bb Mon Sep 17 00:00:00 2001
From: gconsidine <greg@gregconsidine.com>
Date: Tue, 9 Jan 2018 16:01:20 -0500
Subject: [PATCH] Add load on scroll and max results to base model

---
 .../features/output/index.controller.js       | 27 ++++++++-------
 awx/ui/client/lib/models/Base.js              | 34 +++++++++++++++----
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js
index b00404b398..6aae149d69 100644
--- a/awx/ui/client/features/output/index.controller.js
+++ b/awx/ui/client/features/output/index.controller.js
@@ -79,22 +79,31 @@ function JobsIndexController (_job_, JobEventModel, _$sce_, _$timeout_, _$scope_
         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 - 1;
+        meta.cursor = job.get('related.job_events.results').length;
 
         container.scroll(onScroll);
     });
 }
 
 function next () {
-    job.next('job_events')
+    job.next({ related: 'job_events', limit: 5 })
         .then(() => {
             meta.next = job.get('related.job_events.next');
             meta.prev = job.get('related.job_events.previous');
 
-            console.log(job.get('related.job_events.results'));
+            append();
         });
 }
 
+function append () {
+    const events = job.get('related.job_events.results').slice(meta.cursor);
+    const rows = $($sce.getTrustedHtml($sce.trustAsHtml(parseEvents(events))));
+    const table = $('#result-table');
+
+    table.append(rows);
+    $compile(rows.contents())($scope);
+}
+
 function expand () {
     vm.toggle(meta.parent, true);
 }
@@ -141,13 +150,13 @@ function parseLine (event) {
         ln++;
 
         const isLastLine = i === lines.length - 1;
-        let append = createRow(current, ln, line);
+        let row = createRow(current, ln, line);
 
         if (current && current.isTruncated && isLastLine) {
-            append += createRow(current);
+            row += createRow(current);
         }
 
-        return `${html}${append}`;
+        return `${html}${row}`;
     }, '');
 }
 
@@ -350,12 +359,6 @@ function onScroll () {
     }, 500);
 }
 
-/*
- *function approximateLineNumber () {
- *
- *}
- */
-
 JobsIndexController.$inject = ['job', 'JobEventModel', '$sce', '$timeout', '$scope', '$compile'];
 
 module.exports = JobsIndexController;
diff --git a/awx/ui/client/lib/models/Base.js b/awx/ui/client/lib/models/Base.js
index 0efa02b329..20746ed8aa 100644
--- a/awx/ui/client/lib/models/Base.js
+++ b/awx/ui/client/lib/models/Base.js
@@ -104,6 +104,10 @@ function httpGet (config = {}) {
 
     if (config.params) {
         req.params = config.params;
+
+        if (config.params.page_size) {
+            this.pageSize = config.params.page_size;
+        }
     }
 
     if (typeof config.resource === 'object') {
@@ -330,6 +334,10 @@ function has (method, keys) {
 function extend (related, config) {
     const req = this.parseRequestConfig('GET', config);
 
+    if (config.params.page_size) {
+        this.pageSize = config.params.page_size;
+    }
+
     if (this.has(req.method, `related.${related}`)) {
         req.url = this.get(`related.${related}`);
 
@@ -346,8 +354,17 @@ function extend (related, config) {
     return Promise.reject(new Error(`No related property, ${related}, exists`));
 }
 
-function next (related, config = {}) {
-    const url = this.get(`related.${related}.next`);
+function next (config = {}) {
+    let url;
+    let results;
+
+    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);
@@ -360,13 +377,18 @@ function next (related, config = {}) {
 
     return $http(req)
         .then(({ data }) => {
-            const results = this.get(`related.${related}.results`) || [];
+            results = results || [];
 
             data.results = results.concat(data.results);
-            this.set('get', `related.${related}`, data);
 
-            if (config.limit < results.length) {
-                console.log(results);
+            if ((config.limit * this.pageSize) < data.results.length) {
+                data.results.splice(-config.limit * this.pageSize);
+            }
+
+            if (config.related) {
+                this.set('get', `related.${config.related}`, data);
+            } else {
+                this.set('get', data);
             }
         });
 }