Add partial implementation of model.next

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

@@ -3,6 +3,7 @@ import hasAnsi from 'has-ansi';
 
 let vm;
 let ansi;
+let job;
 let jobEvent;
 let $timeout;
 let $sce;
@@ -27,11 +28,12 @@ const TIME_EVENTS = [
     EVENT_STATS_PLAY
 ];
 
-function JobsIndexController (job, JobEventModel, _$sce_, _$timeout_, _$scope_, _$compile_) {
+function JobsIndexController (_job_, JobEventModel, _$sce_, _$timeout_, _$scope_, _$compile_) {
     $timeout = _$timeout_;
     $sce = _$sce_;
     $compile = _$compile_;
     $scope = _$scope_;
+    job = _job_;
 
     ansi = new Ansi();
     jobEvent = new JobEventModel();
@@ -39,7 +41,9 @@ function JobsIndexController (job, JobEventModel, _$sce_, _$timeout_, _$scope_,
     const events = job.get('related.job_events.results');
     const html = $sce.trustAsHtml(parseEvents(events));
 
-    vm = this || {}; $scope.ns = 'jobs';
+    vm = this || {};
+
+    $scope.ns = 'jobs';
     $scope.jobs = {
         modal: {}
     };
@@ -48,9 +52,13 @@ function JobsIndexController (job, JobEventModel, _$sce_, _$timeout_, _$scope_,
     vm.showHostDetails = showHostDetails;
 
     vm.menu = {
+        scroll,
         top: {
-            expand: menuExpand,
+            expand,
             isExpanded: false
+        },
+        bottom: {
+            next
         }
     };
 
@@ -62,10 +70,27 @@ function JobsIndexController (job, JobEventModel, _$sce_, _$timeout_, _$scope_,
     });
 }
 
-function menuExpand () {
+function next () {
+    job.next('job_events')
+        .then(data => {
+            console.log(data);
+        });
+}
+
+function expand () {
     vm.toggle(meta.parent);
 }
 
+function scroll (direction) {
+    const container = $('.at-Stdout-container')[0];
+
+    if (direction === 'top') {
+        container.scrollTop = 0;
+    } else {
+        container.scrollTop = container.scrollHeight;
+    }
+}
+
 function parseEvents (events) {
     events.sort(orderByLineNumber);
 

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

@@ -35,7 +35,7 @@ function JobsRun ($stateExtender, strings) {
                 return new Jobs('get', id)
                     .then(job => job.extend('job_events', {
                         params: {
-                            page_size: 10000,
+                            page_size: 10,
                             order_by: 'start_line'
                         }
                     }));

awx/ui/client/features/output/index.view.html

@@ -7,12 +7,27 @@
 
     <div class="col-md-8">
         <at-panel class="at-Stdout">
-            <at-code-menu-top state="vm.menu.top"></at-code-menu-top>
+            <div class="at-Stdout-menuTop">
+                <div class="pull-left" ng-click="vm.menu.top.expand()">
+                    <i class="at-Stdout-menuIcon fa"
+                       ng-class="{ 'fa-minus': vm.menu.top.isExpanded, 'fa-plus': !vm.menu.top.isExpanded }"></i>
+                </div>
+
+                <div class="pull-right" ng-click="vm.menu.scroll('bottom')">
+                    <i class="at-Stdout-menuIcon fa fa-arrow-down"></i>
+                </div>
+
+                <div class="at-u-clear"></div>
+            </div>
 
             <pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="result-table"></tbody></table></pre>
 
             <div class="at-Stdout-menuBottom">
-                <div class="pull-right" ng-click="vm.menu.scrollToTop()">
+                <div class="pull-left" ng-click="vm.menu.bottom.next()">
+                    <i class="at-Stdout-menuIcon fa fa-plus"></i>
+                </div>
+
+                <div class="pull-right" ng-click="vm.menu.scroll('top')">
                     <i class="at-Stdout-menuIcon fa fa-arrow-up"></i>
                 </div>
 
@@ -23,6 +38,6 @@
 
     <at-modal>
         <br />
-        <at-output-stdout state="vm.host"></at-output-stdout>
+        <at-code-stdout state="vm.host"></at-code-stdout>
     </at-modal>
 </div>

awx/ui/client/lib/components/code/menu-top.directive.js

@@ -20,8 +20,6 @@ function AtCodeMenuTopController () {
     vm.scroll = () => {
         const container = element.parent().find('.at-Stdout-container')[0];
 
-        console.log(container);
-
         container.scrollTop = 0;
     };
 

awx/ui/client/lib/components/code/stdout.directive.js

@@ -7,11 +7,11 @@ let $sce;
 let $timeout;
 let ansi;
 
-function atOutputStdoutLink (scope, element, attrs, controller) {
+function atCodeStdoutLink (scope, element, attrs, controller) {
     controller.init(scope, element);
 }
 
-function AtOutputStdoutController (_$sce_, _$timeout_) {
+function AtCodeStdoutController (_$sce_, _$timeout_) {
     const vm = this || {};
 
     $timeout = _$timeout_;
@@ -45,7 +45,7 @@ function AtOutputStdoutController (_$sce_, _$timeout_) {
     };
 }
 
-AtOutputStdoutController.$inject = [
+AtCodeStdoutController.$inject = [
     '$sce',
     '$timeout',
 ];
@@ -85,20 +85,21 @@ function createRow (ln, content) {
             <td class="at-Stdout-event">${content}</td>
         </tr>`;
 }
-function atOutputStdout () {
+
+function atCodeStdout () {
     return {
         restrict: 'E',
         transclude: true,
         replace: true,
-        require: 'atOutputStdout',
+        require: 'atCodeStdout',
         templateUrl,
-        controller: AtOutputStdoutController,
+        controller: AtCodeStdoutController,
         controllerAs: 'vm',
-        link: atOutputStdoutLink,
+        link: atCodeStdoutLink,
         scope: {
             state: '=',
         }
     };
 }
 
-export default atOutputStdout;
+export default atCodeStdout;

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

@@ -346,6 +346,24 @@ function extend (related, config) {
     return Promise.reject(new Error(`No related property, ${related}, exists`));
 }
 
+function next (related) {
+    related = related || this.resource;
+
+    if (!this.has(`related.${related}.next`)) {
+        return Promise.resolve(null);
+    }
+
+    const req = {
+        method: 'GET',
+        url: this.get(`related.${related}.next`)
+    };
+
+    return $http(req)
+        .then(({ data }) => {
+            console.log(data);
+        });
+}
+
 function normalizePath (resource) {
     const version = '/api/v2/';
 
@@ -523,6 +541,7 @@ function BaseModel (resource, settings) {
     this.isCacheable = isCacheable;
     this.isCreatable = isCreatable;
     this.match = match;
+    this.next = next;
     this.normalizePath = normalizePath;
     this.options = options;
     this.parseRequestConfig = parseRequestConfig;