Update job output styling

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

@@ -1,9 +1,27 @@
 .at-Stdout {
+    font-family: monospace;
+
+    &-controls {
+        border: 1px solid @at-gray-dark-2x;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border-bottom: none;
+    }
+
+    &-controlIcon {
+        font-size: 16px;
+        padding: 10px;
+    }
+
     &-expand {
-        padding-right: 10px;
+        background-color: @at-gray-light-2x;
+
+        padding: 0 10px;
     }
 
     &-lineNumber {
+        background-color: @at-gray-light-2x;
+
         padding-right: 5px;
         border-right: 1px solid gray;
     }
@@ -15,4 +33,14 @@
     &-timestamp {
         padding-left: 20px;
     }
+
+    &-output {
+        font-size: 14px;
+        border: 1px solid @at-gray-dark-2x;
+        background-color: @at-gray-light-3x;
+        padding: 0;
+        margin: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
 }

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

@@ -27,14 +27,27 @@ function JobsIndexController (job, $sce) {
     const html = parseEvents(events);
 
     vm.html = $sce.trustAsHtml(html);
+    vm.toggle = toggle;
 }
 
 function parseEvents (events) {
-    events.sort((a, b) => a.start_line > b.start_line);
+    events.sort(orderByLineNumber);
 
     return events.reduce((html, event) => `${html}${parseLine(event)}`, '');
 }
 
+function orderByLineNumber (a, b) {
+    if (a.start_line > b.start_line) {
+        return 1;
+    }
+
+    if (a.start_line < b.start_line) {
+        return -1;
+    }
+
+    return 0;
+}
+
 function parseLine (event) {
     if (!event || !event.stdout) {
         return '';
@@ -60,7 +73,7 @@ function createRow (ln, content, time, group) {
 
     let expand = '';
     if (group.parent) {
-        expand = '<i class="fa fa-caret-down"></i>';
+        expand = '<i class="fa fa-caret-down" ng-click="vm.toggle(group.level)"></i>';
     }
 
     return `
@@ -97,6 +110,16 @@ function getTime (event, i) {
     return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
 }
 
+function toggle (id) {
+    console.log(id);
+}
+
+/*
+ *function addDynamic (start) {
+ *    document.getElementsByClassName('parent')
+ *}
+ */
+
 JobsIndexController.$inject = ['job', '$sce'];
 
 module.exports = JobsIndexController;

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

@@ -5,11 +5,16 @@
         </at-panel>
     </div>
     <div class="col-md-8">
-        <at-panel>
+        <at-panel class="at-Stdout">
-            <pre class="at-Stdout">
+            <div class="at-Stdout-controls">
+                <div class="pull-left"><i class="at-Stdout-controlIcon fa fa-minus-circle"></i></div>
+                <div class="pull-right"><i class="at-Stdout-controlIcon fa fa-arrow-circle-down"></i></div>
+                <div class="at-u-clear"></div>
+            </div>
+
+            <pre class="at-Stdout-output">
                 <table>
-                  <tbody ng-bind-html="vm.html">
+                  <tbody ng-bind-html="vm.html"></tbody>
-                  </tbody>
                 </table>
             </pre>
         </at-panel>

awx/ui/client/lib/theme/_utility.less

@@ -16,3 +16,7 @@
     margin-left: 0;
     margin-right: 0;
 }
+
+.at-u-clear {
+    clear: both;
+}