add expandable explanation and traceback details

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 traceback = resource.model.get('result_traceback');
-    const resultTraceback = resource.model.get('result_traceback');
 
-    if (!resultTraceback) {
+    if (!traceback) {
-        return null;
-    }
-
-    if (!previousTaskFailed) {
         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 () {

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>
+        <label class="JobResults-resultRowLabel">{{ vm.status.label }}</label>
-         <div class="JobResults-resultRowText">
+        <div class="JobResults-resultRowText">
-             <i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i>
+            <i class="JobResults-statusResultIcon {{ vm.status.icon }}"></i>
-             {{ vm.status.value }}
+            {{ vm.status.value }}
-         </div>
+        </div>
-     </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 }}"

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()">

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);