Merge pull request #2246 from marshmalien/fix/job-output-table

Extend standard out line border to full length of container

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

@@ -74,23 +74,34 @@
         color: @at-blue;
     }
 
+    &-row {
+        display: flex;
+
+        &:hover div {
+            background-color: white;
+        }
+    }
+
     &-toggle {
-        color: @at-gray-848992;
         background-color: @at-gray-eb;
+        color: @at-gray-848992;
+        display: flex;
+        flex: 0 0 30px;
         font-size: 18px;
+        justify-content: center;
         line-height: 12px;
 
         & > i {
             cursor: pointer;
         }
 
-        padding: 0 10px 0 10px;
         user-select: none;
     }
 
     &-line {
         color: @at-gray-161b1f;
         background-color: @at-gray-eb;
+        flex: 0 0 45px;
         text-align: right;
         vertical-align: top;
         padding-right: 5px;
@@ -100,6 +111,7 @@
 
     &-event {
         .at-mixin-event();
+        flex: 1;
     }
 
     &-event--host {
@@ -123,6 +135,8 @@
     }
 
     &-container {
+        display: flex;
+        flex-direction: column;
         font-family: monospace;
         height: 100%;
         overflow-y: scroll;
@@ -136,15 +150,16 @@
         border-bottom-right-radius: 4px;
         border-bottom-left-radius: 4px;
         max-height: ~"calc(100vh - 350px)";
-        white-space: nowrap;
+    }
 
-        & > table {
+    &-borderHeader {
-            table-layout: fixed;
+        .at-mixin-stdoutBorder();
+        height: 10px;
+    }
 
-            tr:hover > td {
+    &-borderFooter {
-                background: white;
+        .at-mixin-stdoutBorder();
-            }
+        flex: 1;
-        }
     }
 
     &--fullscreen {
@@ -155,9 +170,15 @@
 
 .at-mixin-event() {
     padding: 0 10px;
-    word-wrap: break-word;
     white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+}
 
+.at-mixin-stdoutBorder() {
+    background-color: @at-gray-eb;
+    border-right: 1px solid @at-gray-b7;
+    width: 75px;
 }
 
 // Search ---------------------------------------------------------------------------------

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

@@ -39,18 +39,11 @@
             <div class="at-u-clear"></div>
         </div>
 
-        <pre class="at-Stdout-container">
+        <div class="at-Stdout-container">
-            <table>
+            <div class="at-Stdout-borderHeader"></div>
-                <thead>
+            <div id="atStdoutResultTable"></div>
-                    <tr>
+            <div class="at-Stdout-borderFooter"></div>
-                        <th class="at-Stdout-toggle">&nbsp;</th>
+        </div>
-                        <th class="at-Stdout-line"></th>
-                        <th class="at-Stdout-event"></th>
-                    </tr>
-                </thead>
-                <tbody id="atStdoutResultTable"></tbody>
-            </table>
-        </pre>
 
         <div ng-show="vm.menu.showBackToTop" class="at-Stdout-menuBottom">
             <div class="at-Stdout-menuIconGroup" ng-click="vm.menu.home()">

awx/ui/client/features/output/render.service.js

@@ -198,11 +198,11 @@ function JobRenderService ($q, $sce, $window) {
         if (current) {
             if (this.createToggles && current.isParent && current.line === ln) {
                 id = current.uuid;
-                tdToggle = `<td class="at-Stdout-toggle" ng-click="vm.toggleLineExpand('${id}')"><i class="fa fa-angle-down can-toggle"></i></td>`;
+                tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleLineExpand('${id}')"><i class="fa fa-angle-down can-toggle"></i></div>`;
             }
 
             if (current.isHost) {
-                tdEvent = `<td class="at-Stdout-event--host" ng-click="vm.showHostDetails('${current.id}', '${current.uuid}')">${content}</td>`;
+                tdEvent = `<div class="at-Stdout-event--host" ng-click="vm.showHostDetails('${current.id}', '${current.uuid}')">${content}</div>`;
             }
 
             if (current.time && current.line === ln) {
@@ -215,11 +215,11 @@ function JobRenderService ($q, $sce, $window) {
         }
 
         if (!tdEvent) {
-            tdEvent = `<td class="at-Stdout-event">${content}</td>`;
+            tdEvent = `<div class="at-Stdout-event">${content}</div>`;
         }
 
         if (!tdToggle) {
-            tdToggle = '<td class="at-Stdout-toggle"></td>';
+            tdToggle = '<div class="at-Stdout-toggle"></div>';
         }
 
         if (!ln) {
@@ -227,12 +227,12 @@ function JobRenderService ($q, $sce, $window) {
         }
 
         return `
-            <tr id="${id}" class="${classList}">
+            <div id="${id}" class="at-Stdout-row ${classList}">
                 ${tdToggle}
-                <td class="at-Stdout-line">${ln}</td>
+                <div class="at-Stdout-line">${ln}</div>
                 ${tdEvent}
-                <td class="at-Stdout-time">${timestamp}</td>
+                <div class="at-Stdout-time">${timestamp}</div>
-            </tr>`;
+            </div>`;
     };
 
     this.getTimestamp = created => {

awx/ui/client/lib/components/layout/_index.less

@@ -109,7 +109,7 @@
             color: @at-color-side-nav-content;
             display: flex;
             cursor: pointer;
-            font-size: 12px;
+            font-size: 13px;
                 i {
                     cursor: pointer;
                     color: @at-color-side-nav-item-icon;

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

@@ -301,7 +301,7 @@
 @at-width-input-button-sm: 72px;
 @at-width-input-button-md: 84px;
 @at-width-collapsed-side-nav: 55px;
-@at-width-expanded-side-nav: 180px;
+@at-width-expanded-side-nav: 190px;
 @at-width-list-row-item-label: 120px;
 @at-width-list-row-action: 30px;
 @at-width-side-nav-toggle-mobile: 50px;