mirror of
https://github.com/ansible/awx.git
synced 2024-11-02 01:21:21 +03:00
Merge pull request #1606 from marshmalien/fix/1536-job-results-ux
Fix job result detail and standard out panel styles
This commit is contained in:
Jake McDermott
GitHub
commit
c31dd4994e
@ -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%;
|
||||
}
|
||||
.at-Panel {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.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{
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -40,248 +40,247 @@
|
||||
</div>
|
||||
|
||||
<!-- LEFT PANE DETAILS GROUP -->
|
||||
<div>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
{{ vm.jobExplanation.less }}
|
||||
<span ng-show="vm.jobExplanation.hasMoreToShow">...</span>
|
||||
<span ng-show="vm.jobExplanation.hasMoreToShow"
|
||||
class="JobResults-seeMoreLess"
|
||||
ng-click="vm.jobExplanation.showMore = true">
|
||||
Show More
|
||||
</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>
|
||||
<!-- 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">
|
||||
{{ vm.jobExplanation.less }}
|
||||
<span ng-show="vm.jobExplanation.hasMoreToShow">...</span>
|
||||
<span ng-show="vm.jobExplanation.hasMoreToShow"
|
||||
class="JobResults-seeMoreLess"
|
||||
ng-click="vm.jobExplanation.showMore = true">
|
||||
Show More
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 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 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
{{ vm.resultTraceback.less }}
|
||||
<span ng-show="vm.resultTraceback.hasMoreToShow">...</span>
|
||||
<span ng-show="vm.resultTraceback.hasMoreToShow"
|
||||
class="JobResults-seeMoreLess"
|
||||
ng-click="vm.resultTraceback.showMore = true">
|
||||
Show More
|
||||
</span>
|
||||
</div>
|
||||
<div class="JobResults-resultRowText"
|
||||
ng-show="vm.resultTraceback.showMore">
|
||||
{{ vm.resultTraceback.more }}
|
||||
<span class="JobResults-seeMoreLess"
|
||||
ng-click="vm.resultTraceback.showMore = false">
|
||||
Show Less
|
||||
</span>
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
{{ vm.resultTraceback.less }}
|
||||
<span ng-show="vm.resultTraceback.hasMoreToShow">...</span>
|
||||
<span ng-show="vm.resultTraceback.hasMoreToShow"
|
||||
class="JobResults-seeMoreLess"
|
||||
ng-click="vm.resultTraceback.showMore = true">
|
||||
Show More
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 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 }}"
|
||||
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 class="JobResults-resultRowText"
|
||||
ng-show="vm.resultTraceback.showMore">
|
||||
{{ vm.resultTraceback.more }}
|
||||
<span class="JobResults-seeMoreLess"
|
||||
ng-click="vm.resultTraceback.showMore = false">
|
||||
Show Less
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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 }}"
|
||||
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>
|
||||
|
||||
<!-- 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">
|
||||
{{ vm.launchedBy.value }}
|
||||
</a>
|
||||
</div>
|
||||
<div ng-if="!vm.launchedBy.link" class="jobResults-resultRowText">
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
{{ vm.launchedBy.value }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 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 ng-if="!vm.launchedBy.link" class="jobResults-resultRowText">
|
||||
{{ vm.launchedBy.value }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 }}"
|
||||
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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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 }}"
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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 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>
|
||||
|
||||
@ -1,64 +1,62 @@
|
||||
<div class="container-fluid">
|
||||
<div ui-view></div>
|
||||
<div class="col-md-4" ng-show="!vm.fullscreen.isFullscreen">
|
||||
<at-panel>
|
||||
<at-job-details resource="vm.resource"></at-job-details>
|
||||
</at-panel>
|
||||
</div>
|
||||
<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 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-job-stats
|
||||
resource="vm.resource"
|
||||
fullscreen="vm.fullscreen">
|
||||
</at-job-stats>
|
||||
<at-job-search></at-job-search>
|
||||
<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">
|
||||
</at-job-stats>
|
||||
<at-job-search></at-job-search>
|
||||
|
||||
<div class="at-Stdout-menuTop">
|
||||
<div class="pull-left" ng-click="vm.expand()">
|
||||
<i class="at-Stdout-menuIcon fa"
|
||||
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 class="at-Stdout-menuTop">
|
||||
<div class="pull-left" ng-click="vm.expand()">
|
||||
<i class="at-Stdout-menuIcon fa"
|
||||
ng-class="{ 'fa-minus': vm.isExpanded, 'fa-plus': !vm.isExpanded }"></i>
|
||||
</div>
|
||||
|
||||
<pre class="at-Stdout-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="at-Stdout-toggle"> </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 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>
|
||||
</at-panel>
|
||||
</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>
|
||||
|
||||
<pre class="at-Stdout-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="at-Stdout-toggle"> </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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user