Updated the job details failure explanation

Uses a help popover set up in the partial
Also pulls labels for the job types from the unified_jobs option request using the helper services

awx/ui/client/src/controllers/JobDetail.js

@@ -13,7 +13,7 @@
 
 export function JobDetailController ($location, $rootScope, $filter, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
     ProcessErrors, SelectPlay, SelectTask, Socket, GetElapsed, DrawGraph, LoadHostSummary, ReloadHostSummaryList, JobIsFinished, SetTaskStyles, DigestEvent,
-    UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit, ParseVariableString, GetChoices) {
+    UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit, ParseVariableString, GetChoices, fieldChoices, fieldLabels) {
 
     ClearScope();
 
@@ -27,11 +27,33 @@ export function JobDetailController ($location, $rootScope, $filter, $scope, $co
 
     scope.plays = [];
 
+    scope.previousTaskFailed = false;
+
     scope.$watch('job_status', function(job_status) {
         if (job_status && job_status.explanation && job_status.explanation.split(":")[0] === "Previous Task Failed") {
+            scope.previousTaskFailed = true;
             var taskObj = JSON.parse(job_status.explanation.substring(job_status.explanation.split(":")[0].length + 1));
-            job_status.explanation = job_status.explanation.split(":")[0] + ". ";
+            // return a promise from the options request with the permission type choices (including adhoc) as a param
-            job_status.explanation += "<code>" + taskObj.task_type + "-" + taskObj.task_id + " failed for " + taskObj.task_name + "</code>"
+            var fieldChoice = fieldChoices({
+                scope: $scope,
+                url: 'api/v1/unified_jobs/',
+                field: 'type'
+            });
+
+            // manipulate the choices from the options request to be set on
+            // scope and be usable by the list form
+            fieldChoice.then(function (choices) {
+                choices =
+                    fieldLabels({
+                        choices: choices
+                    });
+                scope.explanation_fail_type = choices[taskObj.job_type];
+                scope.explanation_fail_name = taskObj.job_name;
+                scope.explanation_fail_id = taskObj.job_id;
+                scope.task_detail = scope.explanation_fail_type + " failed for " + scope.explanation_fail_name + " with id " + scope.explanation_fail_id + ".";
+            });
+        } else {
+            scope.previousTaskFailed = false;
         }
     }, true);
 
@@ -1415,5 +1437,5 @@ export function JobDetailController ($location, $rootScope, $filter, $scope, $co
 JobDetailController.$inject = [ '$location', '$rootScope', '$filter', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
     'Wait', 'Rest', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
     'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer', 'DeleteJob', 'PlaybookRun', 'HostEventsViewer', 'LoadPlays', 'LoadTasks',
-    'LoadHosts', 'HostsEdit', 'ParseVariableString', 'GetChoices'
+    'LoadHosts', 'HostsEdit', 'ParseVariableString', 'GetChoices', 'fieldChoices', 'fieldLabels'
 ];

awx/ui/client/src/partials/job_detail.html

@@ -34,7 +34,22 @@
 
                         <div class="form-group" ng-show="job_status.explanation">
                             <label class="col-lg-2 col-md-12 col-sm-12 col-xs-12">Explanation</label>
-                            <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12  job_status_explanation" ng-bind-html="job_status.explanation"></div>
+                            <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12  job_status_explanation"
+                            ng-show="!previousTaskFailed" ng-bind-html="job_status.explanation"></div>
+                            <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12 job_status_explanation"
+                            ng-show="previousTaskFailed">Previous Task Failed
+                                <a
+                                    href=""
+                                    aw-pop-over="{{ task_detail }}"
+                                    aw-pop-over-watch="task_detail"
+                                    data-placement="right"
+                                    data-container="body" class="help-link" over-title="Failure Detail"
+                                    title=""
+                                    tabindex="-1">
+                                        <i class="fa fa-question-circle">
+                                        </i>
+                                </a>
+                            </div>
                         </div>
 
                         <div class="form-group" ng-show="job_status.traceback">