Add support for params to BaseModel.extend

awx/ui/client/features/jobs/_index.less

@@ -1,7 +1,7 @@
 .at-Stdout {
     font-family: monospace;
 
-    &-controls {
+    &-menu {
         color: @at-gray-dark-4x;
         border: 1px solid @at-gray-dark-2x;
         border-top-left-radius: 4px;
@@ -9,12 +9,12 @@
         border-bottom: none;
     }
 
-    &-controlIcon {
+    &-menuIcon {
         font-size: 12px;
         padding: 10px;
     }
 
-    &-expand {
+    &-toggle {
         color: @at-gray-dark-4x;
         background-color: @at-gray-light;
         font-size: 12px;
@@ -22,25 +22,38 @@
         padding: 0 20px 0 10px;
     }
 
-    &-lineNumber {
+    &-line {
         color: @at-gray-dark-4x;
         background-color: @at-gray-light;
 
+        text-align: right;
+
         padding-right: 5px;
         border-right: 1px solid @at-gray-dark;
     }
 
-    &-content {
-        padding-left: 20px;
+    &-event {
+        padding-left: 2ch;
+        width: 83ch;
     }
 
-    &-timestamp {
+    &-time {
         padding-left: 20px;
         font-size: 12px;
         text-align: right;
     }
 
-    &-output {
+    &-container {
+        & > table {
+            table-layout: fixed;
+
+            td {
+                vertical-align: top;
+                word-wrap: break-word;
+                white-space: pre-wrap;
+            }
+        }
+
         font-size: 14px;
         border: 1px solid @at-gray-dark-2x;
         background-color: @at-gray-light-3x;

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

@@ -33,6 +33,7 @@ function JobsIndexController (job, $sce) {
 function parseEvents (events) {
     events.sort(orderByLineNumber);
 
+    console.log(events);
     return events.reduce((html, event) => `${html}${parseLine(event)}`, '');
 }
 
@@ -67,20 +68,20 @@ function parseLine (event) {
         const isLastLine = i === lines.length - 1;
 
         if (isTruncated && isLastLine) {
-            return `${html}${createRow(ln, line, time, group)}${createTruncatedRow()}`;
+            return `${html}${createRow(ln, line, time, group)}${createTruncatedRow(event.id)}`;
         }
 
         return `${html}${createRow(ln, line, time, group)}`;
     }, '');
 }
 
-function createTruncatedRow () {
+function createTruncatedRow (id) {
     return `
-        <tr class="">
-            <td class="at-Stdout-expand"></td>
-            <td class="at-Stdout-lineNumber text-center"><i class="fa fa-long-arrow-down"></i></td>
-            <td class="at-Stdout-content"></td>
-            <td class="at-Stdout-timestamp"></td>
+        <tr class="${id}">
+            <td class="at-Stdout-toggle"></td>
+            <td class="at-Stdout-line text-center">...</td>
+            <td class="at-Stdout-event"></td>
+            <td class="at-Stdout-time"></td>
         </tr>`;
 }
 
@@ -94,10 +95,10 @@ function createRow (ln, content, time, group) {
 
     return `
         <tr class="${group.classList}">
-            <td class="at-Stdout-expand">${expand}</td>
-            <td class="at-Stdout-lineNumber">${ln}</td>
-            <td class="at-Stdout-content">${content}</td>
-            <td class="at-Stdout-timestamp">${time}</td>
+            <td class="at-Stdout-toggle">${expand}</td>
+            <td class="at-Stdout-line">${ln}</td>
+            <td class="at-Stdout-event">${content}</td>
+            <td class="at-Stdout-time">${time}</td>
         </tr>`;
 }
 
@@ -129,13 +130,17 @@ function getTime (event, i) {
 function toggle (id) {
     console.log(id);
 }
-
 /*
+ *
+ *function getTruncatedEvent () {
+ *
+ *}
+ *
  *function addDynamic (start) {
  *    document.getElementsByClassName('parent')
  *}
+ *
  */
-
 JobsIndexController.$inject = ['job', '$sce'];
 
 module.exports = JobsIndexController;

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

@@ -28,7 +28,12 @@ function JobsRun ($stateExtender, strings) {
                 const { id } = $stateParams;
 
                 return new Jobs('get', id)
-                    .then(job => job.extend('job_events'));
+                    .then(job => job.extend('job_events', {
+                        params: {
+                            page_size: 200,
+                            order_by: 'start_line'
+                        }
+                    }));
             }]
         }
     });

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

@@ -6,26 +6,26 @@
     </div>
     <div class="col-md-8">
         <at-panel class="at-Stdout">
-            <div class="at-Stdout-controls">
-                <div class="pull-left"><i class="at-Stdout-controlIcon fa fa-minus"></i></div>
-                <div class="pull-right"><i class="at-Stdout-controlIcon fa fa-arrow-down"></i></div>
+            <div class="at-Stdout-menu">
+                <div class="pull-left"><i class="at-Stdout-menuIcon fa fa-minus"></i></div>
+                <div class="pull-right"><i class="at-Stdout-menuIcon fa fa-arrow-down"></i></div>
                 <div class="at-u-clear"></div>
             </div>
 
-            <pre class="at-Stdout-output"><table>
+            <pre class="at-Stdout-container"><table>
                 <thead>
                     <tr>
-                        <th class="at-Stdout-expand">&nbsp;</th>
-                        <th class="at-Stdout-lineNumber"></th>
-                        <th class="at-Stdout-content"></th>
+                        <th class="at-Stdout-toggle">&nbsp;</th>
+                        <th class="at-Stdout-line"></th>
+                        <th class="at-Stdout-event"></th>
                     </tr>
                 </thead>
                 <tbody ng-bind-html="vm.html"></tbody>
                 <tfoot>
                     <tr>
-                        <td class="at-Stdout-expand">&nbsp;</td>
-                        <td class="at-Stdout-lineNumber"></td>
-                        <td class="at-Stdout-content"></td>
+                        <td class="at-Stdout-toggle">&nbsp;</td>
+                        <td class="at-Stdout-line"></td>
+                        <td class="at-Stdout-event"></td>
                         <td class="at-Stdout-backToTop"><i class="fa fa-caret-up"></i> <span>Back to Top</span></td>
                     </tr>
                 </tfoot></table></pre>