From 6854ddac599fccc028135c1f5c4c483000a25210 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Thu, 1 Dec 2016 15:20:11 -0500
Subject: [PATCH] Add legend to workflow details view

---
 .../workflow-maker/workflow-maker.block.less  | 44 +++++++++++--------
 .../workflow-maker.partial.html               | 28 ++++++------
 .../workflow-results.partial.html             | 23 ++++++++++
 3 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
index 0dd966a5c2..bd0c733046 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
@@ -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;
 }
diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
index 8674576710..e7b6f8e934 100644
--- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
+++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
@@ -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>
diff --git a/awx/ui/client/src/workflow-results/workflow-results.partial.html b/awx/ui/client/src/workflow-results/workflow-results.partial.html
index 38b6eee6ca..e21dc31698 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -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>