From 9f7dd2af0939a63aaab01fb0a682dc85ff176fb7 Mon Sep 17 00:00:00 2001
From: Jake McDermott <jmcdermott@ansible.com>
Date: Fri, 13 Apr 2018 13:26:55 -0400
Subject: [PATCH] add expandable explanation and traceback details

---
 .../features/output/details.directive.js      | 42 +++++++++----
 .../features/output/details.partial.html      | 61 ++++++++++++++++---
 awx/ui/client/features/output/index.view.html | 13 +++-
 .../tests/test-configuration-ldap-fields.js   |  2 -
 4 files changed, 92 insertions(+), 26 deletions(-)

diff --git a/awx/ui/client/features/output/details.directive.js b/awx/ui/client/features/output/details.directive.js
index 45b6b64f84..f372f75624 100644
--- a/awx/ui/client/features/output/details.directive.js
+++ b/awx/ui/client/features/output/details.directive.js
@@ -256,33 +256,49 @@ function getPlaybookDetails () {
 }
 
 function getJobExplanationDetails () {
-    const jobExplanation = resource.model.get('job_explanation');
+    const explanation = resource.model.get('job_explanation');
 
-    if (!jobExplanation) {
+    if (!explanation) {
         return null;
     }
 
-    const value = null;
+    const limit = 150;
+    const label = 'Explanation';
 
-    return { value };
+    let more = explanation;
+
+    if (explanation.split(':')[0] === 'Previous Task Failed') {
+        const taskStringIndex = explanation.split(':')[0].length + 1;
+        const task = JSON.parse(explanation.substring(taskStringIndex));
+
+        more = `${task.job_type} failed for ${task.job_name} with ID ${task.job_id}`;
+    }
+
+    const less = $filter('limitTo')(more, limit);
+
+    const showMore = false;
+    const hasMoreToShow = more.length > limit;
+
+    return { label, less, more, showMore, hasMoreToShow };
 }
 
 function getResultTracebackDetails () {
-    const previousTaskFailed = false;
-    const resultTraceback = resource.model.get('result_traceback');
+    const traceback = resource.model.get('result_traceback');
 
-    if (!resultTraceback) {
-        return null;
-    }
-
-    if (!previousTaskFailed) {
+    if (!traceback) {
         return null;
     }
 
+    const limit = 150;
     const label = 'Results Traceback';
-    const value = null;
 
-    return { label, value };
+    const more = traceback;
+    const less = $filter('limitTo')(more, limit);
+
+    const showMore = false;
+    const hasMoreToShow = more.length > limit;
+
+    return { label, less, more, showMore, hasMoreToShow };
 }
 
 function getCredentialDetails () {
diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index 55398f6864..c8940ec561 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -44,13 +44,35 @@
 <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>
+        <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>
+    </div>
 
     <!-- START TIME DETAIL -->
     <div class="JobResults-resultRow" ng-if="vm.started">
@@ -75,9 +97,26 @@
     </div>
 
     <!-- RESULTS TRACEBACK DETAIL -->
-    <div class="JobResults-resultRow" ng-if="vm.resultTraceback">
+    <div class="JobResults-resultRow" ng-show="vm.resultTraceback">
         <label class="JobResults-resultRowLabel">{{ vm.resultTraceback.label }}</label>
-        <div class="JobResults-resultRowText" ng-bind-html="vm.resultTraceback.value"></div>
+        <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>
     </div>
 
     <!-- TEMPLATE DETAIL -->
@@ -91,7 +130,9 @@
                 {{ vm.jobTemplate.value }}
             </a>
 
-            <a href="{{ vm.sourceWorkflowJob.link }}" ng-if="vm.sourceWorkflowJob" aw-tool-tip="{{ vm.sourceWorkflowJob.tooltip }}" data-placement="top">
+            <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>
@@ -157,7 +198,7 @@
     </div>
 
     <!-- CREDENTIAL DETAIL -->
-    <div class="JobResults-resultRow" if="vm.credential">
+    <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 }}"
diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html
index 4e0a791bc4..0c4a92de07 100644
--- a/awx/ui/client/features/output/index.view.html
+++ b/awx/ui/client/features/output/index.view.html
@@ -34,7 +34,18 @@
                 <div class="at-u-clear"></div>
             </div>
 
-            <pre class="at-Stdout-container"><table><thead><tr><th class="at-Stdout-toggle">&nbsp;</th><th class="at-Stdout-line"></th><th class="at-Stdout-event"></th></tr></thead><tbody id="atStdoutResultTable"></tbody></table></pre>
+            <pre class="at-Stdout-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="at-Stdout-toggle">&nbsp;</th>
+                            <th class="at-Stdout-line"></th>
+                            <th class="at-Stdout-event"></th>
+                        </tr>
+                    </thead>
+                    <tbody id="atStdoutResultTable"></tbody>
+                </table>
+            </pre>
 
             <div ng-show="vm.scroll.showBackToTop" class="at-Stdout-menuBottom">
                 <div class="at-Stdout-menuIconGroup" ng-click="vm.scroll.home()">
diff --git a/awx/ui/test/e2e/tests/test-configuration-ldap-fields.js b/awx/ui/test/e2e/tests/test-configuration-ldap-fields.js
index 181e33f509..ab0db09d16 100644
--- a/awx/ui/test/e2e/tests/test-configuration-ldap-fields.js
+++ b/awx/ui/test/e2e/tests/test-configuration-ldap-fields.js
@@ -20,13 +20,11 @@ module.exports = {
 
         configuration.waitForElementVisible(systemTab);
         configuration.click(systemTab);
-
         configuration.waitForElementNotVisible(authView);
         configuration.waitForElementVisible(systemView);
 
         configuration.waitForElementVisible(authTab);
         configuration.click(authTab);
-
         configuration.waitForElementNotVisible(systemView);
         configuration.waitForElementVisible(authView);