Fix job result detail and standard out panel styles

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

View File

@@ -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>