External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 11:20:39 -03:30
Code Issues Packages Projects Releases Wiki Activity

Add legend to workflow details view

Browse Source
This commit is contained in:
Michael Abashian 2016-12-01 15:20:11 -05:00
parent a5c0d5a0f9
commit 6854ddac59
3 changed files with 63 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
View File

@ -136,50 +136,47 @@
.WorkflowMaker-formElement {
margin-bottom: 10px;
}
.WorkflowMaker-legend {
.WorkflowMaker-chart {
display: flex;
}
.WorkflowMaker-totalJobs {
margin-right: 10px;
}
.WorkflowLegend-maker {
display: flex;
height: 40px;
line-height: 40px;
color: #707070;
}
.WorkflowMaker-chart {
display: flex;
}
.WorkflowMaker-legendLeft {
.WorkflowLegend-maker--left {
display: flex;
flex: 1 0 auto;
padding-left: 20px;
}
.WorkflowMaker-legendRight {
.WorkflowLegend-maker--right {
flex: 0 0 170px;
text-align: right;
padding-right: 20px;
}
.WorkflowMaker-legendItem {
display: flex;
}
.WorkflowMaker-legendItem:not(:last-child) {
padding-right: 20px;
}
.WorkflowMaker-onSuccessLegend {
.WorkflowLegend-onSuccessLegend {
height: 4px;
width: 20px;
background-color: @submit-button-bg;
margin: 18px 5px 18px 0px;
}
.WorkflowMaker-onFailLegend {
.WorkflowLegend-onFailLegend {
height: 4px;
width: 20px;
background-color: #d9534f;
margin: 18px 5px 18px 0px;
}
.WorkflowMaker-alwaysLegend {
.WorkflowLegend-alwaysLegend {
height: 4px;
width: 20px;
background-color: #337ab7;
margin: 18px 5px 18px 0px;
}
.WorkflowMaker-letterCircle{
.WorkflowLegend-letterCircle{
border-radius: 50%;
width: 20px;
height: 20px;
@ -189,6 +186,17 @@
margin: 10px 5px 10px 0px;
line-height: 20px;
}
.WorkflowMaker-totalJobs {
margin-right: 10px;
.WorkflowLegend-details {
display: flex;
height: 40px;
line-height: 40px;
padding-left: 20px;
border: 1px solid #F6F6F6;
margin-top:10px;
}
.WorkflowLegend-legendItem {
display: flex;
}
.WorkflowLegend-legendItem:not(:last-child) {
padding-right: 20px;
}

28
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
View File

@ -31,31 +31,31 @@
</div>
<div class="WorkflowMaker-contentHolder">
<div class="WorkflowMaker-contentLeft">
<div class="WorkflowMaker-legend">
<div class="WorkflowMaker-legendLeft">
<div class="WorkflowMaker-legendItem">KEY:</div>
<div class="WorkflowMaker-legendItem">
<div class="WorkflowMaker-onSuccessLegend"></div>
<div class="WorkflowLegend-maker">
<div class="WorkflowLegend-maker--left">
<div class="WorkflowLegend-legendItem">KEY:</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-onSuccessLegend"></div>
<div>On Success</div>
</div>
<div class="WorkflowMaker-legendItem">
<div class="WorkflowMaker-onFailLegend"></div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-onFailLegend"></div>
<div>On Fail</div>
</div>
<div class="WorkflowMaker-legendItem">
<div class="WorkflowMaker-alwaysLegend"></div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-alwaysLegend"></div>
<div>Always</div>
</div>
<div class="WorkflowMaker-legendItem">
<div class="WorkflowMaker-letterCircle">P</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-letterCircle">P</div>
<div>Project Sync</div>
</div>
<div class="WorkflowMaker-legendItem">
<div class="WorkflowMaker-letterCircle">I</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-letterCircle">I</div>
<div>Inventory Sync</div>
</div>
</div>
<div class="WorkflowMaker-legendRight">
<div class="WorkflowLegend-maker--right">
<span class="WorkflowMaker-totalJobs">TOTAL JOBS</span>
<span class="badge List-titleBadge" ng-bind="treeData.data.totalNodes"></span>
</div>

23
awx/ui/client/src/workflow-results/workflow-results.partial.html
View File

@ -216,6 +216,29 @@
</div>
</div>
<workflow-status-bar></workflow-status-bar>
<div class="WorkflowLegend-details">
<div class="WorkflowLegend-legendItem">KEY:</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-onSuccessLegend"></div>
<div>On Success</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-onFailLegend"></div>
<div>On Fail</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-alwaysLegend"></div>
<div>Always</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-letterCircle">P</div>
<div>Project Sync</div>
</div>
<div class="WorkflowLegend-legendItem">
<div class="WorkflowLegend-letterCircle">I</div>
<div>Inventory Sync</div>
</div>
</div>
<workflow-chart tree-data="treeData.data" can-add-workflow-job-template="canAddWorkflowJobTemplate" mode="details" class="WorkflowMaker-chart"></workflow-chart>
</div>