From 7a668c908933328a76581d38feca3d40557f0cba Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Fri, 23 Jan 2015 11:36:38 -0500
Subject: [PATCH 1/2] add explanation and result traceback to details page for
 failed jobs

---
 awx/ui/static/js/controllers/JobDetail.js |  6 ++++--
 awx/ui/static/partials/job_detail.html    | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index a6a651cd49..0812d8f1ba 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -478,7 +478,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                     scope.selectedPlay = scope.activePlay;
                 } else {
                     // if we are here, there are no plays and the job has failed, let the user know they may want to consult stdout
-                    if (scope.job_status.status === 'failed' || scope.job_status.status === 'error' &&
+                    if ( (scope.job_status.status === 'failed' || scope.job_status.status === 'error') &&
                         (!scope.job_status.explanation)) {
                         scope.job_status.explanation = "<a href=\"/#/jobs/" + scope.job_id + "/stdout\" target=\"_blank\">View stdout for more detail <i class=\"fa fa-external-link\"></i></a>";
                     }
@@ -671,7 +671,9 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                 scope.job_status.started = data.started;
                 scope.job_status.status_class = ((data.status === 'error' || data.status === 'failed') && data.job_explanation) ? "alert alert-danger" : "";
                 scope.job_status.explanation = data.job_explanation;
-
+                if(data.result_traceback) {
+                    scope.job_status.traceback = data.result_traceback;
+                }
                 if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
                     scope.job_status.finished = data.finished;
                     scope.liveEventProcessing = false;
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index 68142f2523..0787dddbf9 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -30,12 +30,21 @@
                     <div class="form-horizontal" role="form" id="job-status-form">
 
                         <div class="form-group">
-                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Status</label>
-                            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</div>
-                            <div class="col-lg-8 col-md-7 col-sm-6 col-xs-5" ng-bind-html="job_status.explanation"></div>
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Status</label>
+                            <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 job_status"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</div>
                         </div>
 
-                        <div class="form-group">
+                        <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>
+
+                        <div class="form-group" ng-show="job_status.traceback">
+                            <label class="col-lg-2 col-md-12 col-sm-12 col-xs-12">Results Traceback</label>
+                            <div class="col-lg-10 col-md-12 col-sm-12 col-xs-12  job_status_traceback" ng-bind-html="job_status.traceback"></div>
+                        </div>
+
+                        <div class="form-group" ng-show="job_status.started">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Timing</label>
                             <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                 <div ng-show="job_status.started" id="started-time">Started &nbsp;{{ job_status.started | date:'MM/dd/yy HH:mm:ss' }}</div>

From ef331d37bbd9939a18f9563f9f5aec2675c1a9c4 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Fri, 23 Jan 2015 14:45:18 -0500
Subject: [PATCH 2/2] finished styling for explanation/traceback on the details
 page

---
 awx/ui/static/js/controllers/JobDetail.js |  2 +-
 awx/ui/static/partials/job_detail.html    | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index 0812d8f1ba..a1a8a9e6de 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -672,7 +672,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                 scope.job_status.status_class = ((data.status === 'error' || data.status === 'failed') && data.job_explanation) ? "alert alert-danger" : "";
                 scope.job_status.explanation = data.job_explanation;
                 if(data.result_traceback) {
-                    scope.job_status.traceback = data.result_traceback;
+                    scope.job_status.traceback = data.result_traceback.trim().split('\n').join('<br />');
                 }
                 if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
                     scope.job_status.finished = data.finished;
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index 0787dddbf9..ac073e29aa 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -14,7 +14,10 @@
             <div id="job-detail-container">
                 <div class="job_well">
                     <div class="row">
-                        <div class="col-md-12 text-right">
+                        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Status</label>
+                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 job_status"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</div>
+
+                        <div class="col-lg-4 text-right">
                             <a href="" id="play-help" aw-pop-over="Live event processing is now paused. Click here to resume." id="play-button-help" data-placement="left" ng-show="pauseLiveEvents" ><i class="fa fa-question"></i></a>
                             <a href="" ng-click="togglePlayButton()" id="play-button" class="btn btn-primary btn-xs" aw-tool-tip="Resume viewing live events" data-placement="top" ng-show="pauseLiveEvents" style="margin-right:25px;"><i class="fa fa-play"></i></a>
                             <a href="/#/jobs/{{ job_id }}/stdout" id="view-stdout-button" target="_blank" type="button" class="btn btn-primary btn-xs" aw-tool-tip="View standard out. Opens in new tab or window." data-placement="top"><i class="fa fa-external-link"></i></a>
@@ -29,11 +32,6 @@
 
                     <div class="form-horizontal" role="form" id="job-status-form">
 
-                        <div class="form-group">
-                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Status</label>
-                            <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 job_status"><i class="fa icon-job-{{ job_status.status }}"></i> {{ job_status.status }}</div>
-                        </div>
-
                         <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>