External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-28 16:28:43 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fix job result detail and standard out panel styles

Browse Source
This commit is contained in:
Marliana Lara
2018-04-26 16:36:53 -04:00
parent 1b013eb2e3
commit 35bd98eb49
4 changed files with 315 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
awx/ui/client/features/output/_index.less
View File

@@ -6,6 +6,7 @@
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom: none; border-bottom: none;
margin-top: 15px;
& > div { & > div {
user-select: none; user-select: none;
@@ -123,7 +124,7 @@
&-container { &-container {
font-family: monospace; font-family: monospace;
height: calc(~"100vh - 240px"); height: 100%;
overflow-y: scroll; overflow-y: scroll;
font-size: 15px; font-size: 15px;
border: 1px solid @at-gray-b7; border: 1px solid @at-gray-b7;
@@ -143,6 +144,11 @@
} }
} }
} }
&--fullscreen {
grid-column-start: 1;
grid-column-end: 3;
}
} }
.at-mixin-event() { .at-mixin-event() {
@@ -201,12 +207,12 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
// Status Bar ----------------------------------------------------------------------------- // Status Bar -----------------------------------------------------------------------------
.HostStatusBar { .HostStatusBar {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
width: 100%; width: 100%;
margin-bottom: 15px;
} }
.HostStatusBar-ok, .HostStatusBar-ok,
@@ -282,49 +288,28 @@
} }
.HostStatusBar-tooltip.top {
margin-top: 4px;
}
// Job Details --------------------------------------------------------------------------------- // Job Details ---------------------------------------------------------------------------------
@breakpoint-md: 1200px; @breakpoint-md: 1200px;
.JobResults { .JobResults-container {
.OnePlusTwo-container(100%, @breakpoint-md); display: grid;
grid-gap: 20px;
grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
grid-template-rows: minmax(500px, ~"calc(100vh - 140px)");
&.fullscreen { .at-Panel {
.JobResults-rightSide { overflow-y: scroll;
max-width: 100%;
}
} }
} }
.JobResults-leftSide { .JobResults-detailsPanel {
.OnePlusTwo-left--panel(100%, @breakpoint-md); display: flex;
max-width: 30%; flex-direction: column;
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{
overflow-y: scroll;
}
.JobResults-stdoutActionButton--active {
display: none;
visibility: hidden;
flex:none;
width:0px;
padding-right: 0px;
} }
.JobResults-panelHeader { .JobResults-panelHeader {
@@ -352,8 +337,8 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.JobResults-codeMirrorResultRowLabel{ .JobResults-resultRow #cm-variables-container {
font-size: 12px; width: 100%;
} }
.JobResults-resultRowLabel { .JobResults-resultRowLabel {
@@ -416,109 +401,10 @@
padding-right: 10px; 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 { .StandardOut-panelHeader {
flex: initial; 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 { .JobResults-seeMoreLess {
color: #337AB7; color: #337AB7;
margin: 4px 0px; margin: 4px 0px;
@@ -528,3 +414,10 @@ job-results-standard-out {
border-radius: 5px; border-radius: 5px;
font-size: 11px; font-size: 11px;
} }
@media screen and (max-width: @breakpoint-md) {
.JobResults-container {
display: flex;
flex-direction: column;
}
}

429
awx/ui/client/features/output/details.partial.html
View File

@@ -40,248 +40,247 @@
</div> </div>
<!-- LEFT PANE DETAILS GROUP --> <!-- LEFT PANE DETAILS GROUP -->
<div> <!-- STATUS DETAIL -->
<!-- STATUS DETAIL --> <div class="JobResults-resultRow">
<div class="JobResults-resultRow"> <label class="JobResults-resultRowLabel">{{ vm.status.label }}</label>
<label class="JobResults-resultRowLabel">{{ vm.status.label }}</label> <div class="JobResults-resultRowText">
<div class="JobResults-resultRowText"> <i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i>
<i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i> {{ vm.status.value }}
{{ vm.status.value }}
</div>
</div> </div>
</div>
<!-- EXPLANATION DETAIL --> <!-- EXPLANATION DETAIL -->
<div class="JobResults-resultRow" ng-show="vm.jobExplanation"> <div class="JobResults-resultRow" ng-show="vm.jobExplanation">
<label class="JobResults-resultRowLabel">{{ vm.jobExplanation.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.jobExplanation.label }}</label>
<div class="JobResults-resultRowText" <div class="JobResults-resultRowText"
ng-show="!vm.jobExplanation.showMore"> ng-show="!vm.jobExplanation.showMore">
{{ vm.jobExplanation.less }} {{ vm.jobExplanation.less }}
<span ng-show="vm.jobExplanation.hasMoreToShow">...</span> <span ng-show="vm.jobExplanation.hasMoreToShow">...</span>
<span ng-show="vm.jobExplanation.hasMoreToShow" <span ng-show="vm.jobExplanation.hasMoreToShow"
class="JobResults-seeMoreLess" class="JobResults-seeMoreLess"
ng-click="vm.jobExplanation.showMore = true"> ng-click="vm.jobExplanation.showMore = true">
Show More Show More
</span> </span>
</div>
<div class="JobResults-resultRowText"
ng-show="vm.jobExplanation.showMore">
{{ vm.jobExplanation.more }}
<span class="JobResults-seeMoreLess"
ng-click="vm.jobExplanation.showMore = false">
Show Less
</span>
</div>
</div> </div>
<div class="JobResults-resultRowText"
<!-- START TIME DETAIL --> ng-show="vm.jobExplanation.showMore">
<div class="JobResults-resultRow" ng-if="vm.started"> {{ vm.jobExplanation.more }}
<label class="JobResults-resultRowLabel">{{ vm.started.label }}</label> <span class="JobResults-seeMoreLess"
<div class="JobResults-resultRowText"> ng-click="vm.jobExplanation.showMore = false">
{{ vm.started.value }} Show Less
</div> </span>
</div> </div>
</div>
<!-- FINISHED TIME DETAIL --> <!-- START TIME DETAIL -->
<div class="JobResults-resultRow" ng-show="vm.started"> <div class="JobResults-resultRow" ng-if="vm.started">
<label class="JobResults-resultRowLabel">{{ vm.finished.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.started.label }}</label>
<div class="JobResults-resultRowText"> <div class="JobResults-resultRowText">
{{ vm.finished.value }} {{ vm.started.value }}
</div>
</div> </div>
</div>
<!-- module args --> <!-- FINISHED TIME DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.moduleArgs"> <div class="JobResults-resultRow" ng-show="vm.started">
<label class="JobResults-resultRowLabel">{{ vm.moduleArgs.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.finished.label }}</label>
<div class="JobResults-resultRowText">{{ vm.moduleArgs.value }}</div> <div class="JobResults-resultRowText">
{{ vm.finished.value }}
</div> </div>
</div>
<!-- RESULTS TRACEBACK DETAIL --> <!-- module args -->
<div class="JobResults-resultRow" ng-show="vm.resultTraceback"> <div class="JobResults-resultRow" ng-if="vm.moduleArgs">
<label class="JobResults-resultRowLabel">{{ vm.resultTraceback.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.moduleArgs.label }}</label>
<div class="JobResults-resultRowText" <div class="JobResults-resultRowText">{{ vm.moduleArgs.value }}</div>
ng-show="!vm.resultTraceback.showMore"> </div>
{{ vm.resultTraceback.less }}
<span ng-show="vm.resultTraceback.hasMoreToShow">...</span> <!-- RESULTS TRACEBACK DETAIL -->
<span ng-show="vm.resultTraceback.hasMoreToShow" <div class="JobResults-resultRow" ng-show="vm.resultTraceback">
class="JobResults-seeMoreLess" <label class="JobResults-resultRowLabel">{{ vm.resultTraceback.label }}</label>
ng-click="vm.resultTraceback.showMore = true"> <div class="JobResults-resultRowText"
Show More ng-show="!vm.resultTraceback.showMore">
</span> {{ vm.resultTraceback.less }}
</div> <span ng-show="vm.resultTraceback.hasMoreToShow">...</span>
<div class="JobResults-resultRowText" <span ng-show="vm.resultTraceback.hasMoreToShow"
ng-show="vm.resultTraceback.showMore"> class="JobResults-seeMoreLess"
{{ vm.resultTraceback.more }} ng-click="vm.resultTraceback.showMore = true">
<span class="JobResults-seeMoreLess" Show More
ng-click="vm.resultTraceback.showMore = false"> </span>
Show Less
</span>
</div>
</div> </div>
<div class="JobResults-resultRowText"
<!-- TEMPLATE DETAIL --> ng-show="vm.resultTraceback.showMore">
<div class="JobResults-resultRow" ng-if="vm.jobTemplate"> {{ vm.resultTraceback.more }}
<label class="JobResults-resultRowLabel">{{ vm.jobTemplate.label }}</label> <span class="JobResults-seeMoreLess"
<div class="JobResults-resultRowText"> ng-click="vm.resultTraceback.showMore = false">
<a href="{{ vm.jobTemplate.link }}" Show Less
aw-tool-tip="{{ vm.jobTemplate.tooltip }}" </span>
data-placement="top"
data-tip-watch="vm.jobTemplate.tooltip">
{{ vm.jobTemplate.value }}
</a>
<a href="{{ vm.sourceWorkflowJob.link }}"
ng-if="vm.sourceWorkflowJob"
aw-tool-tip="{{ vm.sourceWorkflowJob.tooltip }}" data-placement="top">
<i class="WorkflowBadge"> W</i>
</a>
</div>
</div> </div>
</div>
<!-- JOB TYPE DETAIL --> <!-- TEMPLATE DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.jobType"> <div class="JobResults-resultRow" ng-if="vm.jobTemplate">
<label class="JobResults-resultRowLabel">{{ vm.jobType.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.jobTemplate.label }}</label>
<div class="JobResults-resultRowText">{{ vm.jobType.value }}</div> <div class="JobResults-resultRowText">
<a href="{{ vm.jobTemplate.link }}"
aw-tool-tip="{{ vm.jobTemplate.tooltip }}"
data-placement="top"
data-tip-watch="vm.jobTemplate.tooltip">
{{ vm.jobTemplate.value }}
</a>
<a href="{{ vm.sourceWorkflowJob.link }}"
ng-if="vm.sourceWorkflowJob"
aw-tool-tip="{{ vm.sourceWorkflowJob.tooltip }}" data-placement="top">
<i class="WorkflowBadge"> W</i>
</a>
</div> </div>
</div>
<!-- LAUNCHED BY DETAIL --> <!-- JOB TYPE DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.launchedBy"> <div class="JobResults-resultRow" ng-if="vm.jobType">
<label class="JobResults-resultRowLabel">{{ vm.launchedBy.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.jobType.label }}</label>
<div ng-if="vm.launchedBy.link" class="JobResults-resultRowText"> <div class="JobResults-resultRowText">{{ vm.jobType.value }}</div>
<a href="{{ vm.launchedBy.link }}" aw-tool-tip="{{ vm.launchedBy.tooltip }}" data-placement="top"> </div>
{{ vm.launchedBy.value }}
</a> <!-- LAUNCHED BY DETAIL -->
</div> <div class="JobResults-resultRow" ng-if="vm.launchedBy">
<div ng-if="!vm.launchedBy.link" class="jobResults-resultRowText"> <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">
{{ vm.launchedBy.value }} {{ vm.launchedBy.value }}
</div> </a>
</div> </div>
<div ng-if="!vm.launchedBy.link" class="jobResults-resultRowText">
<!-- INVENTORY DETAIL --> {{ vm.launchedBy.value }}
<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>
</div>
<!-- PROJECT DETAIL --> <!-- INVENTORY DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.project"> <div class="JobResults-resultRow" ng-if="vm.inventory">
<label class="JobResults-resultRowLabel">{{ vm.project.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.inventory.label }}</label>
<div class="JobResults-resultRowText"> <div class="JobResults-resultRowText">
<a href="{{ vm.projectUpdate.link }}" <a href="{{ vm.inventory.link }}" aw-tool-tip="{{ vm.inventory.tooltip }}" data-placement="top">
ng-if="vm.projectUpdate" {{ vm.inventory.value }}
aw-tool-tip="{{ vm.projectUpdate.tooltip }}" </a>
data-placement="top">
<i ng-if="vm.projectStatus" class="JobResults-statusResultIcon fa icon-job-{{ vm.projectStatus }}"></i>
</a>
<a href="{{ vm.project.link }}"
aw-tool-tip="{{ vm.project.tooltip }}"
data-placement="top">
{{ vm.project.value }}
</a>
</div>
</div> </div>
</div>
<!-- REVISION DETAIL --> <!-- PROJECT DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.scmRevision"> <div class="JobResults-resultRow" ng-if="vm.project">
<label class="JobResults-resultRowLabel">{{ vm.scmRevision.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.project.label }}</label>
<at-truncate string="{{ vm.scmRevision.value }}" maxLength="7" class="JobResults-resultRowText"></at-truncate> <div class="JobResults-resultRowText">
<a href="{{ vm.projectUpdate.link }}"
ng-if="vm.projectUpdate"
aw-tool-tip="{{ vm.projectUpdate.tooltip }}"
data-placement="top">
<i ng-if="vm.projectStatus" class="JobResults-statusResultIcon fa icon-job-{{ vm.projectStatus }}"></i>
</a>
<a href="{{ vm.project.link }}"
aw-tool-tip="{{ vm.project.tooltip }}"
data-placement="top">
{{ vm.project.value }}
</a>
</div> </div>
</div>
<!-- PLAYBOOK DETAIL --> <!-- REVISION DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.playbook"> <div class="JobResults-resultRow" ng-if="vm.scmRevision">
<label class="JobResults-resultRowLabel">{{ vm.playbook.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.scmRevision.label }}</label>
<div class="JobResults-resultRowText">{{ vm.playbook.value }}</div> <at-truncate string="{{ vm.scmRevision.value }}" maxLength="7" class="JobResults-resultRowText"></at-truncate>
</div>
<!-- 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>
<!-- 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 }}"
aw-tool-tip="{{ vm.credential.tooltip }}"
data-placement="top"
data-tip-watch="vm.credential.tooltip">
{{ vm.credential.value }}
</a>
</div> </div>
</div>
<!-- CREDENTIAL DETAIL --> <!-- FORKS DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.credential"> <div class="JobResults-resultRow" ng-if="vm.forks">
<label class="JobResults-resultRowLabel">{{ vm.credential.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.forks.label }}</label>
<div class="JobResults-resultRowText"> <div class="JobResults-resultRowText">{{ vm.forks.value }}</div>
<a href="{{ vm.credential.link }}" </div>
aw-tool-tip="{{ vm.credential.tooltip }}"
data-placement="top" <!-- LIMIT DETAIL -->
data-tip-watch="vm.credential.tooltip"> <div class="JobResults-resultRow" ng-if="vm.limit">
{{ vm.credential.value }} <label class="JobResults-resultRowLabel">{{ vm.limit.label }}</label>
</a> <div class="JobResults-resultRowText">{{ vm.limit.value }}</div>
</div> </div>
<!-- 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>
<!-- 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 }}
<span class="JobResults-isolatedBadge" ng-if="vm.instanceGroup.isolated">
{{ vm.instanceGroup.isolated }}
</span>
</div> </div>
</div>
<!-- FORKS DETAIL --> <!-- TAGS DETAIL -->
<div class="JobResults-resultRow" ng-if="vm.forks"> <div class="JobResults-resultRow" ng-if="vm.jobTags">
<label class="JobResults-resultRowLabel">{{ vm.forks.label }}</label> <label class="JobResults-resultRowLabel">{{ vm.jobTags.label }}</label>
<div class="JobResults-resultRowText">{{ vm.forks.value }}</div> <div class="JobResults-resultRowText">{{ vm.jobTags.value }}</div>
</div>
<!-- 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>
<!-- 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-resultRowLabel"
disabled="{{ vm.extraVars.disabled }}">
</at-code-mirror>
<!-- 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"
href=""
ng-click="vm.toggleLabels()">
<span translate>Labels</span>
<i class="JobResults-expandArrow fa fa-caret-right"></i>
</a>
<a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
ng-show="!vm.labels.more"
href=""
ng-click="vm.toggleLabels()">
<span translate>Labels</span>
<i class="JobResults-expandArrow fa fa-caret-down"></i>
</a>
</div> </div>
<div id="job-results-labels" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
<!-- LIMIT DETAIL --> <div ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
<div class="JobResults-resultRow" ng-if="vm.limit"> <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
<label class="JobResults-resultRowLabel">{{ vm.limit.label }}</label>
<div class="JobResults-resultRowText">{{ vm.limit.value }}</div>
</div>
<!-- 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>
<!-- 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 }}
<span class="JobResults-isolatedBadge" ng-if="vm.instanceGroup.isolated">
{{ vm.instanceGroup.isolated }}
</span>
</div>
</div>
<!-- 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>
<!-- 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>
<!-- EXTRA VARIABLES DETAIL -->
<at-code-mirror
ng-if="vm.extraVars"
variables="{{ vm.extraVars.value }}"
tooltip="{{ vm.extraVars.tooltip }}"
label="{{ vm.extraVars.label}}"
label-class="JobResults-codeMirrorResultRowLabel"
disabled="{{ vm.extraVars.disabled }}">
</at-code-mirror>
<!-- 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"
href=""
ng-click="vm.toggleLabels()">
<span translate>Labels</span>
<i class="JobResults-expandArrow fa fa-caret-right"></i>
</a>
<a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
ng-show="!vm.labels.more"
href=""
ng-click="vm.toggleLabels()">
<span translate>Labels</span>
<i class="JobResults-expandArrow fa fa-caret-down"></i>
</a>
</div>
<div id="job-results-labels" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
<div ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
<div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
</div>
</div> </div>
</div> </div>
</div> </div>

114
awx/ui/client/features/output/index.view.html
View File

@@ -1,64 +1,62 @@
<div class="container-fluid"> <div ui-view></div>
<div ui-view></div> <div class="JobResults-container">
<div class="col-md-4" ng-show="!vm.fullscreen.isFullscreen"> <at-panel ng-show="!vm.fullscreen.isFullscreen">
<at-panel> <at-job-details resource="vm.resource"></at-job-details>
<at-job-details resource="vm.resource"></at-job-details> </at-panel>
</at-panel>
</div>
<div ng-class="vm.fullscreen.isFullscreen ? 'col-md-12' : 'col-md-8'"> <at-panel class="at-Stdout" ng-class="{'at-Stdout--fullscreen': vm.fullscreen.isFullscreen}">
<at-panel class="at-Stdout"> <div class="at-Panel-headingTitle">
<div class="at-Panel-headingTitle">{{ vm.title }}</div> {{ vm.title }}
<at-job-stats </div>
resource="vm.resource" <at-job-stats
fullscreen="vm.fullscreen"> resource="vm.resource"
</at-job-stats> fullscreen="vm.fullscreen">
<at-job-search></at-job-search> </at-job-stats>
<at-job-search></at-job-search>
<div class="at-Stdout-menuTop"> <div class="at-Stdout-menuTop">
<div class="pull-left" ng-click="vm.expand()"> <div class="pull-left" ng-click="vm.expand()">
<i class="at-Stdout-menuIcon fa" <i class="at-Stdout-menuIcon fa"
ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i> ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i>
</div>
<div class="pull-right" ng-click="vm.scroll.end()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"
ng-class=" { 'at-Stdout-menuIcon--active': vm.scroll.isLocked }"></i>
</div>
<div class="pull-right" ng-click="vm.scroll.home()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
</div>
<div class="pull-right" ng-click="vm.scroll.down()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
</div>
<div class="pull-right" ng-click="vm.scroll.up()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
</div>
<div class="at-u-clear"></div>
</div> </div>
<pre class="at-Stdout-container"> <div class="pull-right" ng-click="vm.scroll.end()">
<table> <i class="at-Stdout-menuIcon--lg fa fa-angle-double-down"
<thead> ng-class=" { 'at-Stdout-menuIcon--active': vm.scroll.isLocked }"></i>
<tr>
<th class="at-Stdout-toggle">&nbsp;</th>
<th class="at-Stdout-line"></th>
<th class="at-Stdout-event"></th>
</tr>
</thead>
<tbody id="atStdoutResultTable"></tbody>
</table>
</pre>
<div ng-show="vm.scroll.showBackToTop" class="at-Stdout-menuBottom">
<div class="at-Stdout-menuIconGroup" ng-click="vm.scroll.home()">
<p class="pull-left"><i class="fa fa-angle-double-up"></i></p>
<p class="pull-right">Back to Top</p>
</div>
<div class="at-u-clear"></div>
</div> </div>
</at-panel> <div class="pull-right" ng-click="vm.scroll.home()">
</div> <i class="at-Stdout-menuIcon--lg fa fa-angle-double-up"></i>
</div>
<div class="pull-right" ng-click="vm.scroll.down()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-down"></i>
</div>
<div class="pull-right" ng-click="vm.scroll.up()">
<i class="at-Stdout-menuIcon--lg fa fa-angle-up"></i>
</div>
<div class="at-u-clear"></div>
</div>
<pre class="at-Stdout-container">
<table>
<thead>
<tr>
<th class="at-Stdout-toggle">&nbsp;</th>
<th class="at-Stdout-line"></th>
<th class="at-Stdout-event"></th>
</tr>
</thead>
<tbody id="atStdoutResultTable"></tbody>
</table>
</pre>
<div ng-show="vm.scroll.showBackToTop" class="at-Stdout-menuBottom">
<div class="at-Stdout-menuIconGroup" ng-click="vm.scroll.home()">
<p class="pull-left"><i class="fa fa-angle-double-up"></i></p>
<p class="pull-right">Back to Top</p>
</div>
<div class="at-u-clear"></div>
</div>
</at-panel>
</div> </div>

21
awx/ui/client/features/output/stats.partial.html
View File

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