Merge pull request #1606 from marshmalien/fix/1536-job-results-ux

Fix job result detail and standard out panel styles

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

@@ -6,6 +6,7 @@
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-bottom: none;
+        margin-top: 15px;
 
         & > div {
             user-select: none;
@@ -123,7 +124,7 @@
 
     &-container {
         font-family: monospace;
-        height: calc(~"100vh - 240px");
+        height: 100%;
         overflow-y: scroll;
         font-size: 15px;
         border: 1px solid @at-gray-b7;
@@ -143,6 +144,11 @@
             }
         }
     }
+
+    &--fullscreen {
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
 }
 
 .at-mixin-event() {
@@ -201,12 +207,12 @@
     flex-wrap: wrap;
 }
 
-
 // Status Bar -----------------------------------------------------------------------------
 .HostStatusBar {
     display: flex;
     flex: 0 0 auto;
     width: 100%;
+    margin-bottom: 15px;
 }
 
 .HostStatusBar-ok,
@@ -282,49 +288,28 @@
 
 }
 
+.HostStatusBar-tooltip.top {
+    margin-top: 4px;
+}
+
 // Job Details ---------------------------------------------------------------------------------
 
 @breakpoint-md: 1200px;
 
-.JobResults {
-    .OnePlusTwo-container(100%, @breakpoint-md);
+.JobResults-container {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
+    grid-template-rows: minmax(500px, ~"calc(100vh - 140px)");
 
-    &.fullscreen {
-        .JobResults-rightSide {
-            max-width: 100%;
-        }
-    }
-}
-
-.JobResults-leftSide {
-    .OnePlusTwo-left--panel(100%, @breakpoint-md);
-    max-width: 30%;
-    height: ~"calc(100vh - 177px)";
-
-    @media screen and (max-width: @breakpoint-md) {
-        max-width: 100%;
-    }
-}
-
-.JobResults-rightSide {
-    .OnePlusTwo-right--panel(100%, @breakpoint-md);
-    height: ~"calc(100vh - 177px)";
-
-    @media (max-width: @breakpoint-md - 1px) {
-        padding-right: 15px;
-    }
-}
-
-.JobResults-detailsPanel{
+    .at-Panel {
         overflow-y: scroll;
+    }
 }
 
-.JobResults-stdoutActionButton--active {
-    display: none;
-    visibility: hidden;
-    flex:none;
-    width:0px;
-    padding-right: 0px;
+.JobResults-detailsPanel {
+    display: flex;
+    flex-direction: column;
 }
 
 .JobResults-panelHeader {
@@ -352,8 +337,8 @@
     flex-wrap: wrap;
 }
 
-.JobResults-codeMirrorResultRowLabel{
-    font-size: 12px;
+.JobResults-resultRow #cm-variables-container {
+    width: 100%;
 }
 
 .JobResults-resultRowLabel {
@@ -416,109 +401,10 @@
     padding-right: 10px;
 }
 
-.JobResults-badgeRow {
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-}
-
-.JobResults-badgeTitle{
-    color: @default-interface-txt;
-    font-size: 14px;
-    margin-right: 10px;
-    font-weight: normal;
-    text-transform: uppercase;
-    margin-left: 20px;
-}
-
-@media (max-width: @breakpoint-md) {
-    .JobResults-detailsPanel {
-        overflow-y: auto;
-    }
-
-    .JobResults-rightSide {
-        height: inherit;
-    }
-}
-
-.JobResults-timeBadge {
-    float:right;
-    font-size: 11px;
-    font-weight: normal;
-    padding: 1px 10px;
-    height: 14px;
-    margin: 3px 15px;
-    width: 80px;
-    background-color: @default-bg;
-    border-radius: 5px;
-    color: @default-interface-txt;
-    margin-right: -5px;
-}
-
-.JobResults-panelRight {
-    display: flex;
-    flex-direction: column;
-}
-
-.JobResults-panelRight .SmartSearch-bar {
-    width: 100%;
-}
-
-.JobResults-panelRightTitle{
-    flex-wrap: wrap;
-}
-
-.JobResults-panelRightTitleText{
-    word-wrap: break-word;
-    word-break: break-all;
-    max-width: 100%;
-}
-
-.JobResults-badgeAndActionRow{
-    display:flex;
-    flex: 1 0 auto;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    max-width: 100%;
-}
-
 .StandardOut-panelHeader {
     flex: initial;
 }
 
-.StandardOut-panelHeader--jobIsRunning {
-    margin-bottom: 20px;
-}
-
-host-status-bar {
-    flex: initial;
-    margin-bottom: 20px;
-}
-
-smart-search {
-    flex: initial;
-}
-
-job-results-standard-out {
-    flex: 1;
-    flex-basis: auto;
-    height: ~"calc(100% - 800px)";
-    display: flex;
-    border: 1px solid @d7grey;
-    border-radius: 5px;
-    margin-top: 20px;
-}
-@media screen and (max-width: @breakpoint-md) {
-  job-results-standard-out {
-      height: auto;
-  }
-}
-
-.JobResults-extraVarsHelp {
-    margin-left: 10px;
-    color: @default-icon;
-}
-
 .JobResults-seeMoreLess {
     color: #337AB7;
     margin: 4px 0px;
@@ -528,3 +414,10 @@ job-results-standard-out {
     border-radius: 5px;
     font-size: 11px;
 }
+
+@media screen and (max-width: @breakpoint-md) {
+    .JobResults-container {
+        display: flex;
+        flex-direction: column;
+    }
+}

awx/ui/client/features/output/details.partial.html

@@ -40,18 +40,17 @@
 </div>
 
 <!-- LEFT PANE DETAILS GROUP -->
-<div>
-    <!-- STATUS DETAIL -->
-    <div class="JobResults-resultRow">
+<!-- STATUS DETAIL -->
+<div class="JobResults-resultRow">
     <label class="JobResults-resultRowLabel">{{ vm.status.label }}</label>
     <div class="JobResults-resultRowText">
         <i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i>
         {{ vm.status.value }}
     </div>
-    </div>
+</div>
 
-    <!-- EXPLANATION DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.jobExplanation">
+<!-- EXPLANATION DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.jobExplanation">
     <label class="JobResults-resultRowLabel">{{ vm.jobExplanation.label }}</label>
     <div class="JobResults-resultRowText"
             ng-show="!vm.jobExplanation.showMore">
@@ -71,32 +70,32 @@
             Show Less
         </span>
     </div>
-    </div>
+</div>
 
-    <!-- START TIME DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.started">
+<!-- START TIME DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.started">
     <label class="JobResults-resultRowLabel">{{ vm.started.label }}</label>
     <div class="JobResults-resultRowText">
         {{ vm.started.value }}
     </div>
-    </div>
+</div>
 
-    <!-- FINISHED TIME DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.started">
+<!-- FINISHED TIME DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.started">
     <label class="JobResults-resultRowLabel">{{ vm.finished.label }}</label>
     <div class="JobResults-resultRowText">
         {{ vm.finished.value }}
     </div>
-    </div>
+</div>
 
-    <!-- module args -->
-    <div class="JobResults-resultRow" ng-if="vm.moduleArgs">
+<!-- module args -->
+<div class="JobResults-resultRow" ng-if="vm.moduleArgs">
     <label class="JobResults-resultRowLabel">{{ vm.moduleArgs.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.moduleArgs.value }}</div>
-    </div>
+</div>
 
-    <!-- RESULTS TRACEBACK DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.resultTraceback">
+<!-- RESULTS TRACEBACK DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.resultTraceback">
     <label class="JobResults-resultRowLabel">{{ vm.resultTraceback.label }}</label>
     <div class="JobResults-resultRowText"
             ng-show="!vm.resultTraceback.showMore">
@@ -116,10 +115,10 @@
             Show Less
         </span>
     </div>
-    </div>
+</div>
 
-    <!-- TEMPLATE DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.jobTemplate">
+<!-- TEMPLATE DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.jobTemplate">
     <label class="JobResults-resultRowLabel">{{ vm.jobTemplate.label }}</label>
     <div class="JobResults-resultRowText">
         <a href="{{ vm.jobTemplate.link }}"
@@ -135,16 +134,16 @@
             <i class="WorkflowBadge"> W</i>
         </a>
     </div>
-    </div>
+</div>
 
-    <!-- JOB TYPE DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.jobType">
+<!-- JOB TYPE DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.jobType">
     <label class="JobResults-resultRowLabel">{{ vm.jobType.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.jobType.value }}</div>
-    </div>
+</div>
 
-    <!-- LAUNCHED BY DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.launchedBy">
+<!-- LAUNCHED BY DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.launchedBy">
     <label class="JobResults-resultRowLabel">{{ vm.launchedBy.label }}</label>
     <div ng-if="vm.launchedBy.link" class="JobResults-resultRowText">
         <a href="{{ vm.launchedBy.link }}" aw-tool-tip="{{ vm.launchedBy.tooltip }}" data-placement="top">
@@ -154,20 +153,20 @@
     <div ng-if="!vm.launchedBy.link" class="jobResults-resultRowText">
         {{ vm.launchedBy.value }}
     </div>
-    </div>
+</div>
 
-    <!-- INVENTORY DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.inventory">
+<!-- INVENTORY DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.inventory">
     <label class="JobResults-resultRowLabel">{{ vm.inventory.label }}</label>
     <div class="JobResults-resultRowText">
         <a href="{{ vm.inventory.link }}" aw-tool-tip="{{ vm.inventory.tooltip }}" data-placement="top">
             {{ vm.inventory.value }}
         </a>
     </div>
-    </div>
+</div>
 
-    <!-- PROJECT DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.project">
+<!-- PROJECT DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.project">
     <label class="JobResults-resultRowLabel">{{ vm.project.label }}</label>
     <div class="JobResults-resultRowText">
         <a href="{{ vm.projectUpdate.link }}"
@@ -182,22 +181,22 @@
             {{ vm.project.value }}
         </a>
     </div>
-    </div>
+</div>
 
-    <!-- REVISION DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.scmRevision">
+<!-- REVISION DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.scmRevision">
     <label class="JobResults-resultRowLabel">{{ vm.scmRevision.label }}</label>
     <at-truncate string="{{ vm.scmRevision.value }}" maxLength="7" class="JobResults-resultRowText"></at-truncate>
-    </div>
+</div>
 
-    <!-- PLAYBOOK DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.playbook">
+<!-- PLAYBOOK DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.playbook">
     <label class="JobResults-resultRowLabel">{{ vm.playbook.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.playbook.value }}</div>
-    </div>
+</div>
 
-    <!-- CREDENTIAL DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.credential">
+<!-- CREDENTIAL DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.credential">
     <label class="JobResults-resultRowLabel">{{ vm.credential.label }}</label>
     <div class="JobResults-resultRowText">
         <a href="{{ vm.credential.link }}"
@@ -207,28 +206,28 @@
             {{ vm.credential.value }}
         </a>
     </div>
-    </div>
+</div>
 
-    <!-- FORKS DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.forks">
+<!-- FORKS DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.forks">
     <label class="JobResults-resultRowLabel">{{ vm.forks.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.forks.value }}</div>
-    </div>
+</div>
 
-    <!-- LIMIT DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.limit">
+<!-- LIMIT DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.limit">
     <label class="JobResults-resultRowLabel">{{ vm.limit.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.limit.value }}</div>
-    </div>
+</div>
 
-    <!-- VERBOSITY DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.verbosity">
+<!-- VERBOSITY DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.verbosity">
     <label class="JobResults-resultRowLabel">{{ vm.verbosity.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.verbosity.value }}</div>
-    </div>
+</div>
 
-    <!-- IG DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.instanceGroup">
+<!-- IG DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.instanceGroup">
     <label class="JobResults-resultRowLabel">{{ vm.instanceGroup.label }}</label>
     <div class="JobResults-resultRowText JobResults-resultRowText--instanceGroup">
         {{ vm.instanceGroup.value }}
@@ -236,32 +235,33 @@
             {{ vm.instanceGroup.isolated }}
         </span>
     </div>
-    </div>
+</div>
 
-    <!-- TAGS DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.jobTags">
+<!-- TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.jobTags">
     <label class="JobResults-resultRowLabel">{{ vm.jobTags.label }}</label>
     <div class="JobResults-resultRowText">{{ vm.jobTags.value }}</div>
-    </div>
+</div>
 
-    <!-- SKIP TAGS DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.skipTags">
+<!-- SKIP TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.skipTags">
     <label class="JobResults-resultRowLabel">{{ vm.skipTags.label }}</label>
     <div class="JobResults-resultRowText"> {{ vm.skipTags.value }}</div>
-    </div>
+</div>
 
-    <!-- EXTRA VARIABLES DETAIL -->
-    <at-code-mirror
+<!-- EXTRA VARIABLES DETAIL -->
+<at-code-mirror
+    class="JobResults-resultRow"
     ng-if="vm.extraVars"
     variables="{{ vm.extraVars.value }}"
     tooltip="{{ vm.extraVars.tooltip }}"
     label="{{ vm.extraVars.label}}"
-        label-class="JobResults-codeMirrorResultRowLabel"
+    label-class="JobResults-resultRowLabel"
     disabled="{{ vm.extraVars.disabled }}">
-    </at-code-mirror>
+</at-code-mirror>
 
-    <!-- LABELS DETAIL -->
-    <div class="JobResults-resultRow" ng-show="vm.labels">
+<!-- LABELS DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.labels">
     <div class="JobResults-resultRow">
         <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
             ng-show="vm.labels.more"
@@ -283,5 +283,4 @@
             <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
         </div>
     </div>
-    </div>
 </div>

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

@@ -1,14 +1,13 @@
-<div class="container-fluid">
-    <div ui-view></div>
-    <div class="col-md-4" ng-show="!vm.fullscreen.isFullscreen">
-        <at-panel>
+<div ui-view></div>
+<div class="JobResults-container">
+    <at-panel ng-show="!vm.fullscreen.isFullscreen">
         <at-job-details resource="vm.resource"></at-job-details>
     </at-panel>
-    </div>
 
-    <div ng-class="vm.fullscreen.isFullscreen ? 'col-md-12' : 'col-md-8'">
-        <at-panel class="at-Stdout">
-            <div class="at-Panel-headingTitle">{{ vm.title }}</div>
+    <at-panel class="at-Stdout" ng-class="{'at-Stdout--fullscreen': vm.fullscreen.isFullscreen}">
+        <div class="at-Panel-headingTitle">
+            {{ vm.title }}
+        </div>
         <at-job-stats
             resource="vm.resource"
             fullscreen="vm.fullscreen">
@@ -60,5 +59,4 @@
             <div class="at-u-clear"></div>
         </div>
     </at-panel>
-    </div>
 </div>

awx/ui/client/features/output/stats.partial.html

@@ -42,40 +42,47 @@
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.ok }}"
-        data-tip-watch="vm.tooltips.ok">
+        data-tip-watch="vm.tooltips.ok"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-skipped"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.skipped }}"
-        data-tip-watch="vm.tooltips.skipped">
+        data-tip-watch="vm.tooltips.skipped"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-changed"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.changed }}"
-        data-tip-watch="vm.tooltips.changed">
+        data-tip-watch="vm.tooltips.changed"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-failures"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.failures }}"
-        data-tip-watch="vm.tooltips.failures">
+        data-tip-watch="vm.tooltips.failures"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-dark"
         ng-show="!vm.running"
         data-placement="top"
         aw-tool-tip="{{ vm.tooltips.dark }}"
-        data-tip-watch="vm.tooltips.dark">
+        data-tip-watch="vm.tooltips.dark"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-noData"
         ng-show="vm.running"
         data-placement="top"
-        aw-tool-tip="{{:: vm.tooltips.running }}">
+        aw-tool-tip="{{:: vm.tooltips.running }}"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
     <div class="HostStatusBar-noData"
         ng-show="!vm.running && !vm.statsAreAvailable"
         data-placement="top"
-        aw-tool-tip="{{:: vm.tooltips.unavailable }}">
+        aw-tool-tip="{{:: vm.tooltips.unavailable }}"
+        tooltip-outer-class="HostStatusBar-tooltip">
     </div>
 </div>