External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02: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
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 { .WorkflowMaker-formElement {
margin-bottom: 10px; margin-bottom: 10px;
} }
.WorkflowMaker-legend { .WorkflowMaker-chart {
display: flex;
}
.WorkflowMaker-totalJobs {
margin-right: 10px;
}
.WorkflowLegend-maker {
display: flex; display: flex;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color: #707070; color: #707070;
} }
.WorkflowMaker-chart { .WorkflowLegend-maker--left {
display: flex;
}
.WorkflowMaker-legendLeft {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
padding-left: 20px; padding-left: 20px;
} }
.WorkflowMaker-legendRight { .WorkflowLegend-maker--right {
flex: 0 0 170px; flex: 0 0 170px;
text-align: right; text-align: right;
padding-right: 20px; padding-right: 20px;
} }
.WorkflowMaker-legendItem { .WorkflowLegend-onSuccessLegend {
display: flex;
}
.WorkflowMaker-legendItem:not(:last-child) {
padding-right: 20px;
}
.WorkflowMaker-onSuccessLegend {
height: 4px; height: 4px;
width: 20px; width: 20px;
background-color: @submit-button-bg; background-color: @submit-button-bg;
margin: 18px 5px 18px 0px; margin: 18px 5px 18px 0px;
} }
.WorkflowMaker-onFailLegend { .WorkflowLegend-onFailLegend {
height: 4px; height: 4px;
width: 20px; width: 20px;
background-color: #d9534f; background-color: #d9534f;
margin: 18px 5px 18px 0px; margin: 18px 5px 18px 0px;
} }
.WorkflowMaker-alwaysLegend { .WorkflowLegend-alwaysLegend {
height: 4px; height: 4px;
width: 20px; width: 20px;
background-color: #337ab7; background-color: #337ab7;
margin: 18px 5px 18px 0px; margin: 18px 5px 18px 0px;
} }
.WorkflowMaker-letterCircle{ .WorkflowLegend-letterCircle{
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -189,6 +186,17 @@
margin: 10px 5px 10px 0px; margin: 10px 5px 10px 0px;
line-height: 20px; line-height: 20px;
} }
.WorkflowMaker-totalJobs { .WorkflowLegend-details {
margin-right: 10px; 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>
<div class="WorkflowMaker-contentHolder"> <div class="WorkflowMaker-contentHolder">
<div class="WorkflowMaker-contentLeft"> <div class="WorkflowMaker-contentLeft">
<div class="WorkflowMaker-legend"> <div class="WorkflowLegend-maker">
<div class="WorkflowMaker-legendLeft"> <div class="WorkflowLegend-maker--left">
<div class="WorkflowMaker-legendItem">KEY:</div> <div class="WorkflowLegend-legendItem">KEY:</div>
<div class="WorkflowMaker-legendItem"> <div class="WorkflowLegend-legendItem">
<div class="WorkflowMaker-onSuccessLegend"></div> <div class="WorkflowLegend-onSuccessLegend"></div>
<div>On Success</div> <div>On Success</div>
</div> </div>
<div class="WorkflowMaker-legendItem"> <div class="WorkflowLegend-legendItem">
<div class="WorkflowMaker-onFailLegend"></div> <div class="WorkflowLegend-onFailLegend"></div>
<div>On Fail</div> <div>On Fail</div>
</div> </div>
<div class="WorkflowMaker-legendItem"> <div class="WorkflowLegend-legendItem">
<div class="WorkflowMaker-alwaysLegend"></div> <div class="WorkflowLegend-alwaysLegend"></div>
<div>Always</div> <div>Always</div>
</div> </div>
<div class="WorkflowMaker-legendItem"> <div class="WorkflowLegend-legendItem">
<div class="WorkflowMaker-letterCircle">P</div> <div class="WorkflowLegend-letterCircle">P</div>
<div>Project Sync</div> <div>Project Sync</div>
</div> </div>
<div class="WorkflowMaker-legendItem"> <div class="WorkflowLegend-legendItem">
<div class="WorkflowMaker-letterCircle">I</div> <div class="WorkflowLegend-letterCircle">I</div>
<div>Inventory Sync</div> <div>Inventory Sync</div>
</div> </div>
</div> </div>
<div class="WorkflowMaker-legendRight"> <div class="WorkflowLegend-maker--right">
<span class="WorkflowMaker-totalJobs">TOTAL JOBS</span> <span class="WorkflowMaker-totalJobs">TOTAL JOBS</span>
<span class="badge List-titleBadge" ng-bind="treeData.data.totalNodes"></span> <span class="badge List-titleBadge" ng-bind="treeData.data.totalNodes"></span>
</div> </div>

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

@@ -216,6 +216,29 @@
</div> </div>
</div> </div>
<workflow-status-bar></workflow-status-bar> <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> <workflow-chart tree-data="treeData.data" can-add-workflow-job-template="canAddWorkflowJobTemplate" mode="details" class="WorkflowMaker-chart"></workflow-chart>
</div> </div>