From ebc3dbe7b6dec30f4a46e44c1d733b7c8dd2b562 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 6 Nov 2018 22:43:44 -0500
Subject: [PATCH] Add source WF label to job details template

* Change label from "Parent WF" to "Source WF"
* Fix WF job result Firefox responsive style bugs
---
 awx/ui/client/features/output/_index.less           |  3 ++-
 awx/ui/client/features/output/details.component.js  |  4 +++-
 awx/ui/client/features/output/details.partial.html  | 13 +++++++++++++
 awx/ui/client/features/output/output.strings.js     |  1 +
 .../client/src/bread-crumb/bread-crumb.block.less   |  1 -
 .../workflow-chart/workflow-chart.directive.js      |  3 ---
 .../workflow-maker/workflow-maker.block.less        |  3 ++-
 .../workflow-results/workflow-results.block.less    |  8 +++++++-
 .../workflow-results/workflow-results.controller.js |  3 ++-
 .../workflow-results/workflow-results.partial.html  |  6 ++++--
 10 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less
index b6110eb773..4491a1eb45 100644
--- a/awx/ui/client/features/output/_index.less
+++ b/awx/ui/client/features/output/_index.less
@@ -334,7 +334,7 @@
 .JobResults-container {
     display: grid;
     grid-gap: 20px;
-    grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
+    grid-template-columns: minmax(400px, 1fr) minmax(500px, 2fr);
     grid-template-rows: minmax(500px, ~"calc(100vh - 130px)");
 
     .at-Panel {
@@ -457,5 +457,6 @@
     .JobResults-container {
         display: flex;
         flex-direction: column;
+        min-width: 400px;
     }
 }
diff --git a/awx/ui/client/features/output/details.component.js b/awx/ui/client/features/output/details.component.js
index 5d0ef52338..2b9cb2a931 100644
--- a/awx/ui/client/features/output/details.component.js
+++ b/awx/ui/client/features/output/details.component.js
@@ -120,10 +120,12 @@ function getSourceWorkflowJobDetails () {
         return null;
     }
 
+    const label = strings.get('labels.SOURCE_WORKFLOW_JOB');
+    const value = sourceWorkflowJob.name;
     const link = `/#/workflows/${sourceWorkflowJob.id}`;
     const tooltip = strings.get('tooltips.SOURCE_WORKFLOW_JOB');
 
-    return { link, tooltip };
+    return { label, value, link, tooltip };
 }
 
 function getSliceJobDetails () {
diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index 051309f4ac..9e42ad9c5c 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -281,6 +281,19 @@
     </div>
 </div>
 
+<!-- SOURCE WORKFLOW JOB DETAIL -->
+<div class="JobResults-resultRow" ng-if="vm.sourceWorkflowJob">
+    <label class="JobResults-resultRowLabel">{{ vm.sourceWorkflowJob.label }}</label>
+    <div class="JobResults-resultRowText">
+        <a href="{{ vm.sourceWorkflowJob.link }}"
+        aw-tool-tip="{{ vm.sourceWorkflowJob.tooltip }}"
+        data-placement="top">
+        {{ vm.sourceWorkflowJob.value }}
+        </a>
+    </div>
+</div>
+
+
 <!-- EXTRA VARIABLES DETAIL -->
 <at-code-mirror
     class="JobResults-resultRow"
diff --git a/awx/ui/client/features/output/output.strings.js b/awx/ui/client/features/output/output.strings.js
index 53430984b8..1f89700a36 100644
--- a/awx/ui/client/features/output/output.strings.js
+++ b/awx/ui/client/features/output/output.strings.js
@@ -74,6 +74,7 @@ function OutputStrings (BaseString) {
         SKIP_TAGS: t.s('Skip Tags'),
         SOURCE: t.s('Source'),
         SOURCE_CREDENTIAL: t.s('Source Credential'),
+        SOURCE_WORKFLOW_JOB: t.s('Source Workflow'),
         STARTED: t.s('Started'),
         STATUS: t.s('Status'),
         VERBOSITY: t.s('Verbosity'),
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
index ffef6556df..5b7190fb28 100644
--- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less
+++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
@@ -99,7 +99,6 @@
 
 @media screen and (max-width: @breakpoint-sm) {
     .BreadCrumb {
-        padding-left: 50px;
         position: fixed;
         z-index: 2;
     }
diff --git a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
index aaa34fad04..928a636ec7 100644
--- a/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
+++ b/awx/ui/client/src/templates/workflows/workflow-chart/workflow-chart.directive.js
@@ -48,7 +48,6 @@ export default ['$state', 'moment', '$timeout', '$window', '$filter', 'Rest', 'G
                     windowWidth = dimensions.width;
 
                     $('.WorkflowMaker-chart').css("height", windowHeight);
-                    $('.WorkflowMaker-chart').css("width", windowWidth);
 
                     scope.dimensionsSet = true;
 
@@ -1137,7 +1136,6 @@ export default ['$state', 'moment', '$timeout', '$window', '$filter', 'Rest', 'G
                 function onResize() {
                     let dimensions = calcAvailableScreenSpace();
 
-                    $('.WorkflowMaker-chart').css("width", dimensions.width);
                     $('.WorkflowMaker-chart').css("height", dimensions.height);
                 }
 
@@ -1160,7 +1158,6 @@ export default ['$state', 'moment', '$timeout', '$window', '$filter', 'Rest', 'G
                     scope.$on('workflowMakerModalResized', function () {
                         let dimensions = calcAvailableScreenSpace();
 
-                        $('.WorkflowMaker-chart').css("width", dimensions.width);
                         $('.WorkflowMaker-chart').css("height", dimensions.height);
                     });
                 }
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 65f7a9c2a9..f1e3671d1c 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
@@ -51,7 +51,7 @@
     overflow: hidden;
 }
 .WorkflowMaker-contentLeft {
-    flex: 1 0 auto;
+    flex: 1;
     flex-direction: column;
     height: 100%;
 }
@@ -152,6 +152,7 @@
 }
 .WorkflowMaker-chart {
     display: flex;
+    width: 100%;
 }
 .WorkflowMaker-totalJobs {
     margin-right: 5px;
diff --git a/awx/ui/client/src/workflow-results/workflow-results.block.less b/awx/ui/client/src/workflow-results/workflow-results.block.less
index 4e1bd89088..3fbe218d88 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.block.less
+++ b/awx/ui/client/src/workflow-results/workflow-results.block.less
@@ -9,6 +9,11 @@
             max-width: 100%;
         }
     }
+
+    @media screen and (max-width: @breakpoint-md) {
+        display: block;
+        min-width: 400px;
+    }
 }
 
 .WorkflowResults-leftSide {
@@ -26,6 +31,7 @@
     .OnePlusTwo-right--panel(100%, @breakpoint-md);
     height: ~"calc(100vh - 177px)";
     min-height: 350px;
+    min-width: 0;
 
     @media (max-width: @breakpoint-md - 1px) {
         padding-right: 15px;
@@ -74,7 +80,7 @@
 .WorkflowResults-resultRowLabel {
     text-transform: uppercase;
     color: @default-interface-txt;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: normal!important;
     width: 30%;
     margin-right: 20px;
diff --git a/awx/ui/client/src/workflow-results/workflow-results.controller.js b/awx/ui/client/src/workflow-results/workflow-results.controller.js
index 81c62947ff..fdb0acca79 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.controller.js
+++ b/awx/ui/client/src/workflow-results/workflow-results.controller.js
@@ -41,6 +41,7 @@ export default ['workflowData', 'workflowResultsService', 'workflowDataOptions',
                     EDIT_WORKFLOW: i18n._('Edit the workflow job template'),
                     EDIT_SLICE_TEMPLATE: i18n._('Edit the slice job template'),
                     EDIT_SCHEDULE: i18n._('Edit the schedule'),
+                    SOURCE_WORKFLOW_JOB: i18n._('View the source Workflow Job'),
                     TOGGLE_STDOUT_FULLSCREEN: i18n._('Expand Output'),
                     STATUS: '' // re-assigned elsewhere
                 },
@@ -53,7 +54,7 @@ export default ['workflowData', 'workflowResultsService', 'workflowDataOptions',
                     STATUS: i18n._('Status'),
                     SLICE_TEMPLATE: i18n._('Slice Job Template'),
                     JOB_EXPLANATION: i18n._('Explanation'),
-                    SOURCE_WORKFLOW_JOB: i18n._('Parent Workflow')
+                    SOURCE_WORKFLOW_JOB: i18n._('Source Workflow')
                 },
                 details: {
                     HEADER: i18n._('DETAILS'),
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 b17a277074..7fbc1ae332 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -187,14 +187,16 @@
                         </div>
                     </div>
 
-                    <!-- PARENT WORKFLOW DETAIL -->
+                    <!-- SOURCE WORKFLOW JOB DETAIL -->
                     <div class="WorkflowResults-resultRow"
                         ng-if="workflow.summary_fields.source_workflow_job">
                         <label class="WorkflowResults-resultRowLabel">
                             {{ strings.labels.SOURCE_WORKFLOW_JOB }}
                         </label>
                         <div class="WorkflowResults-resultRowText">
-                            <a href="{{ source_workflow_job_link }}">
+                            <a href="{{ source_workflow_job_link }}"
+                            aw-tool-tip="{{ strings.tooltips.SOURCE_WORKFLOW_JOB }}"
+                            data-placement="top">
                                 {{ workflow.summary_fields.source_workflow_job.name }}
                             </a>
                         </div>