mirror of
https://github.com/ansible/awx.git
synced 2026-01-12 18:40:01 -03:30
fixed standard out layout for non playbook run jobs
This commit is contained in:
parent
41baa7d28d
commit
3642a1f4de
@ -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;
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
flex: 1 1;
|
||||
height: @height;
|
||||
width: 100%;
|
||||
max-wdith: 50%;
|
||||
max-width: 50%;
|
||||
margin-right: 0px;
|
||||
.Panel{
|
||||
height: 100%;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user