fixed standard out layout for non playbook run jobs

This commit is contained in:
John Mitchell 2016-06-21 15:14:45 -04:00
parent 41baa7d28d
commit 3642a1f4de
7 changed files with 79 additions and 55 deletions

View File

@ -5,7 +5,7 @@
@import '../shared/layouts/one-plus-one.less';
@breakpoint-md: 1200px;
@breakpoint-sm: 420px;
@breakpoint-sm: 623px;
.JobDetail-tasks.section{
margin-top:40px;

View File

@ -36,7 +36,7 @@
flex: 1 1;
height: @height;
width: 100%;
max-wdith: 50%;
max-width: 50%;
margin-right: 0px;
.Panel{
height: 100%;

View File

@ -16,12 +16,12 @@
<div class="StandardOut-details">
<div class="StandardOut-detailsRow" ng-show="job.module_name">
<div class="StandardOut-detailsLabel">Name</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Name</div>
<div class="StandardOut-detailsContent">{{ job.module_name }}</div>
</div>
<div class="StandardOut-detailsRow">
<div class="StandardOut-detailsLabel">STATUS</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
<div class="StandardOut-detailsContent">
<i class="fa icon-job-{{ job.status }}"></i>
<span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@ -29,33 +29,33 @@
</div>
<div class="StandardOut-detailsRow" ng-show="job.started">
<div class="StandardOut-detailsLabel">STARTED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
<div class="StandardOut-detailsContent">
{{ job.started | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">FINISHED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
<div class="StandardOut-detailsContent">
{{ job.finished | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">ELAPSED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
<div class="StandardOut-detailsContent">
{{ job.elapsed }} seconds
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.module_args">
<div class="StandardOut-detailsLabel">Module Args</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Module Args</div>
<div class="StandardOut-detailsContent">{{ job.module_args }}</div>
</div>
<div class="StandardOut-detailsRow">
<div class="StandardOut-detailsLabel">Inventory</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Inventory</div>
<div class="StandardOut-detailsContent">
<a href="{{ inventory_url }}"
aw-tool-tip="The inventory this command ran on."
@ -64,7 +64,7 @@
</div>
<div class="StandardOut-detailsRow" ng-show="credential_name">
<div class="StandardOut-detailsLabel">Credential</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Credential</div>
<div class="StandardOut-detailsContent">
<a href="{{ credential_url }}"
aw-tool-tip="The credential used to run this command."
@ -73,7 +73,7 @@
</div>
<div class="StandardOut-detailsRow" ng-show="created_by">
<div class="StandardOut-detailsLabel">Launched By</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Launched By</div>
<div class="StandardOut-detailsContent">
<a href="/#/users/{{ created_by.id }}"
aw-tool-tip="The user who ran this command."
@ -84,19 +84,19 @@
<!-- since zero is a falsy value, you need ng-show such that
the number is >= 0 -->
<div class="StandardOut-detailsRow" ng-show="forks >= 0">
<div class="StandardOut-detailsLabel">Forks</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Forks</div>
<div class="StandardOut-detailsContent">{{ forks }}</div>
</div>
<div class="StandardOut-detailsRow" ng-show="limit">
<div class="StandardOut-detailsLabel">Limit</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Limit</div>
<div class="StandardOut-detailsContent">{{ limit }}</div>
</div>
<!-- since zero is a falsy value, you need ng-show such that
the number is >= 0 -->
<div class="StandardOut-detailsRow" ng-show="verbosity >= 0">
<div class="StandardOut-detailsLabel">Verbosity</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">Verbosity</div>
<div class="StandardOut-detailsContent">{{ verbosity }}</div>
</div>
</div>

View File

@ -16,7 +16,7 @@
<div class="StandardOut-details">
<div class="StandardOut-detailsRow" ng-show="inventory_source_name">
<div class="StandardOut-detailsLabel">NAME</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">NAME</div>
<div class="StandardOut-detailsContent">
<a href="{{inv_manage_group_link}}">
{{ inventory_source_name }}
@ -25,7 +25,7 @@
</div>
<div class="StandardOut-detailsRow">
<div class="StandardOut-detailsLabel">STATUS</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
<div class="StandardOut-detailsContent">
<i class="fa icon-job-{{ job.status }}"></i>
<span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@ -33,42 +33,42 @@
</div>
<div class="StandardOut-detailsRow" ng-show="{{job.license_error !== null}}">
<div class="StandardOut-detailsLabel">LICENSE ERROR</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LICENSE ERROR</div>
<div class="StandardOut-detailsContent StandardOut--capitalize">
{{ job.license_error }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.started">
<div class="StandardOut-detailsLabel">STARTED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
<div class="StandardOut-detailsContent">
{{ job.started | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">FINISHED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
<div class="StandardOut-detailsContent">
{{ job.finished | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">ELAPSED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
<div class="StandardOut-detailsContent">
{{ job.elapsed }} seconds
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.launch_type">
<div class="StandardOut-detailsLabel">LAUNCH TYPE</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LAUNCH TYPE</div>
<div class="StandardOut-detailsContent StandardOut--capitalize">
{{ job.launch_type }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="credential_name">
<div class="StandardOut-detailsLabel">CREDENTIAL</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">CREDENTIAL</div>
<div class="StandardOut-detailsContent">
<a ui-sref="credentials.edit({credential_id: credential})">
{{ credential_name }}
@ -77,7 +77,7 @@
</div>
<div class="StandardOut-detailsRow" ng-show="inventory_source_name">
<div class="StandardOut-detailsLabel">GROUP</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">GROUP</div>
<div class="StandardOut-detailsContent">
<a href="{{inv_manage_group_link}}">
{{ inventory_source_name }}
@ -86,28 +86,28 @@
</div>
<div class="StandardOut-detailsRow" ng-show="source">
<div class="StandardOut-detailsLabel">SOURCE</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">SOURCE</div>
<div class="StandardOut-detailsContent">
{{ source }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="source_regions">
<div class="StandardOut-detailsLabel">REGIONS</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">REGIONS</div>
<div class="StandardOut-detailsContent">
{{ source_regions }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="{{ job.overwrite !== null }}">
<div class="StandardOut-detailsLabel">OVERWRITE</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">OVERWRITE</div>
<div class="StandardOut-detailsContent StandardOut--capitalize">
{{ job.overwrite }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="{{ job.overwrite_vars !== null }}">
<div class="StandardOut-detailsLabel">OVERWRITE VARS</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">OVERWRITE VARS</div>
<div class="StandardOut-detailsContent StandardOut--capitalize">
{{ job.overwrite_vars }}
</div>

View File

@ -15,12 +15,12 @@
<div class="StandardOut-details">
<div class="StandardOut-detailsRow" ng-show="job.name">
<div class="StandardOut-detailsLabel">NAME</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">NAME</div>
<div class="StandardOut-detailsContent">{{ job.name }}</div>
</div>
<div class="StandardOut-detailsRow">
<div class="StandardOut-detailsLabel">STATUS</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
<div class="StandardOut-detailsContent">
<i class="fa icon-job-{{ job.status }}"></i>
<span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@ -28,28 +28,28 @@
</div>
<div class="StandardOut-detailsRow" ng-show="job.started">
<div class="StandardOut-detailsLabel">STARTED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
<div class="StandardOut-detailsContent">
{{ job.started | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">FINISHED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
<div class="StandardOut-detailsContent">
{{ job.finished | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">ELAPSED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
<div class="StandardOut-detailsContent">
{{ job.elapsed }} seconds
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.launch_type">
<div class="StandardOut-detailsLabel">LAUNCH TYPE</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LAUNCH TYPE</div>
<div class="StandardOut-detailsContent StandardOut--capitalize">
{{ job.launch_type }}
</div>
@ -59,7 +59,7 @@
<div class="StandardOut-detailsLabel">EXTRA VARS</div>
</div>
<div ng-show="job.extra_vars">
<div class="StandardOut-extraVarsContainer" ng-show="job.extra_vars">
<textarea rows="6" ng-model="variables" name="variables" class="StandardOut-extraVars" id="pre-formatted-variables"></textarea>
</div>

View File

@ -16,7 +16,7 @@
<div class="StandardOut-details">
<div class="StandardOut-detailsRow" ng-show="project_name">
<div class="StandardOut-detailsLabel">NAME</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">NAME</div>
<div class="StandardOut-detailsContent">
<a ui-sref="projects.edit({id: job.project})">
{{ project_name }}
@ -25,7 +25,7 @@
</div>
<div class="StandardOut-detailsRow">
<div class="StandardOut-detailsLabel">STATUS</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STATUS</div>
<div class="StandardOut-detailsContent">
<i class="fa icon-job-{{ job.status }}"></i>
<span class="StandardOut-statusText StandardOut--capitalize">{{ job.status }}</span>
@ -33,35 +33,35 @@
</div>
<div class="StandardOut-detailsRow" ng-show="job.started">
<div class="StandardOut-detailsLabel">STARTED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">STARTED</div>
<div class="StandardOut-detailsContent">
{{ job.started | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">FINISHED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">FINISHED</div>
<div class="StandardOut-detailsContent">
{{ job.finished | longDate }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.finished">
<div class="StandardOut-detailsLabel">ELAPSED</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">ELAPSED</div>
<div class="StandardOut-detailsContent">
{{ job.elapsed }} seconds
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="job.launch_type">
<div class="StandardOut-detailsLabel">LAUNCH TYPE</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">LAUNCH TYPE</div>
<div class="StandardOut-detailsContent StandardOut--capitalize">
{{ job.launch_type }}
</div>
</div>
<div class="StandardOut-detailsRow" ng-show="project_name">
<div class="StandardOut-detailsLabel">PROJECT</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">PROJECT</div>
<div class="StandardOut-detailsContent">
<a ui-sref="projects.edit({id: job.project})">
{{ project_name }}
@ -70,7 +70,7 @@
</div>
<div class="StandardOut-detailsRow" ng-show="credential_name">
<div class="StandardOut-detailsLabel">CREDENTIAL</div>
<div class="StandardOut-detailsLabel col-lg-2 col-md-2 col-sm-2 col-xs-3">CREDENTIAL</div>
<div class="StandardOut-detailsContent">
<a ui-sref="credentials.edit({credential_id: credential})">
{{ credential_name }}

View File

@ -1,8 +1,10 @@
@import "../shared/branding/colors.default.less";
@import "awx/ui/client/src/shared/layouts/one-plus-two.less";
@import "../shared/layouts/one-plus-one.less";
/** @define StandardOut */
@breakpoint-md: 900px;
standard-out-log {
flex: 5;
display: flex;
@ -13,8 +15,9 @@ standard-out-log {
padding: 0 20px 0 20px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.StandardOut-container {
.OnePlusTwo-container;
.OnePlusOne-container(100%, @breakpoint-md);
&.fullscreen {
.StandardOut-rightPanel {
@ -24,14 +27,18 @@ standard-out-log {
}
.StandardOut-leftPanel {
.OnePlusTwo-left--panel(590px);
.OnePlusOne-panel--left(100%, @breakpoint-md);
max-width: 600px;
@media (max-width: @breakpoint-md - 1px) {
max-width: 100%;
}
}
.StandardOut-rightPanel {
.OnePlusTwo-right--panel(590px);
@media (min-width: 900px) {
max-width: 50%;
.OnePlusOne-panel--right(100%, @breakpoint-md);
max-width: 100%;
@media (max-width: @breakpoint-md - 1px) {
padding-right: 15px;
}
.Panel {
@ -45,7 +52,7 @@ standard-out-log {
}
.StandardOut-panelHeader {
.OnePlusTwo-panelHeader
.OnePlusOne-panelHeader
}
.StandardOut-consoleOutput {
@ -64,11 +71,16 @@ standard-out-log {
}
.StandardOut-details {
.OnePlusTwo-left--details;
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding-top: 25px;
}
.StandardOut-detailsRow {
.OnePlusTwo-left--detailsRow;
width: 100%;
display: flex;
margin: 0 -15px;
}
.StandardOut-detailsRow + .StandardOut-detailsRow {
@ -76,15 +88,27 @@ standard-out-log {
}
.StandardOut-detailsRow--extraVars {
margin-bottom: 10px;
margin: 20px 0;
width: 100%;
}
.StandardOut-extraVarsContainer {
width: 100%;
padding-right: 15px;
}
.StandardOut-detailsLabel {
.OnePlusTwo-left--detailsLabel;
flex: 2.5 0 auto;
text-transform: uppercase;
color: @default-interface-txt;
}
.StandardOut-detailsContent {
.OnePlusTwo-left--detailsContent;
width: 40%;
flex: 1 0 auto;
padding: 0px 29px;
text-transform: none;
word-wrap: break-word;
}
.StandardOut-statusText {