Job detail page refactoration

Changed results list title to 'Host Events' and added Item column. Added table header row and applied ellipsis to all columns.

awx/ui/static/js/controllers/JobDetail.js

@@ -187,7 +187,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
-                    var idx, event, status, status_text;
+                    var idx, event, status, status_text, item;
                     if (data.results.length > 0) {
                         lastEventId =  data.results[0].id;
                     }
@@ -218,6 +218,14 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                             case "skipped":
                                 status_text = "Skipped";
                         }
+
+                        if (event.event_data && event.event_data.res) {
+                            item = event.event_data.res.item;
+                            if (typeof item === "object") {
+                                item = JSON.stringify(item);
+                            }
+                        }
+
                         if (event.event !== "runner_on_no_hosts") {
                             task.hostResults[event.id] = {
                                 id: event.id,
@@ -227,7 +235,8 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                                 task_id: event.parent,
                                 name: event.event_data.host,
                                 created: event.created,
-                                msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
+                                msg: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' ,
+                                item: item
                             };
                         }
                     }

awx/ui/static/js/helpers/JobDetail.js

@@ -81,7 +81,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     id: event.id,
                     created: event.created,
                     modified: event.modified,
-                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
+                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '',
+                    item: (event.event_data && event.event_data.res) ? event.event_data.res.item : ''
                 });
                 break;
 
@@ -106,7 +107,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     id: event.id,
                     created: event.created,
                     modified: event.modified,
-                    message: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
+                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '',
+                    item: (event.event_data && event.event_data.res) ? event.event_data.res.item : ''
                 });
                 break;
 
@@ -121,7 +123,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     id: event.id,
                     created: event.created,
                     modified: event.modified,
-                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
+                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '',
+                    item: (event.event_data && event.event_data.res) ? event.event_data.res.item : ''
                 });
                 break;
 
@@ -146,7 +149,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     id: event.id,
                     created: event.created,
                     modified: event.modified,
-                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
+                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '',
+                    item: (event.event_data && event.event_data.res) ? event.event_data.res.item : ''
                 });
         }
     };
@@ -458,7 +462,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             task_id = params.task_id,
             modified = params.modified,
             created = params.created,
-            msg = params.message;
+            msg = params.message,
+            item = params.item;
 
         scope.host_summary.ok += (status === 'successful') ? 1 : 0;
         scope.host_summary.changed += (status === 'changed') ? 1 : 0;
@@ -504,7 +509,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             status: status,
             name: name,
             created: created,
-            message: msg
+            message: msg,
+            item: item
         });
     };
 }])
@@ -520,6 +526,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             created = params.created,
             name = params.name,
             msg = params.message,
+            item = params.item,
             status_text = '',
             task;
 
@@ -540,24 +547,32 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                 status_text = "Skipped";
         }
 
-        scope.jobData.plays[scope.activePlay].tasks[task_id].hostResults[event_id] = {
+        if (typeof item === "object") {
-            id: event_id,
+            item = JSON.stringify(item);
-            status: status,
-            status_text: status_text,
-            host_id: host_id,
-            task_id: task_id,
-            name: name,
-            created: created,
-            msg: msg
-        };
-
-        // increment the unreachable count on the play
-        if (status === 'unreachable' && scope.jobData.plays[scope.activePlay]) {
-            scope.jobData.plays[scope.activePlay].unreachableCount++;
         }
 
-        // update the task status bar
+        if (scope.jobData.plays[scope.activePlay].tasks[task_id].hostResults[event_id]) {
-        if (scope.jobData.plays[scope.activePlay].tasks[task_id] !== undefined) {
+            // host already exists. do nothing.
+        }
+        else {
+            scope.jobData.plays[scope.activePlay].tasks[task_id].hostResults[event_id] = {
+                id: event_id,
+                status: status,
+                status_text: status_text,
+                host_id: host_id,
+                task_id: task_id,
+                name: name,
+                created: created,
+                msg: msg,
+                item: item
+            };
+
+            // increment the unreachable count on the play
+            if (status === 'unreachable' && scope.jobData.plays[scope.activePlay]) {
+                scope.jobData.plays[scope.activePlay].unreachableCount++;
+            }
+
+            // update the task status bar
             task = scope.jobData.plays[scope.activePlay].tasks[task_id];
 
             if (task_id === scope.jobData.plays[scope.activePlay].firstTask) {
@@ -883,7 +898,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             Rest.get()
                 .success(function(data) {
                     data.results.forEach(function(event) {
-                        var status, status_text;
+                        var status, status_text, item;
                         if (event.event === "runner_on_skipped") {
                             status = 'skipped';
                         }
@@ -909,6 +924,15 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                             case "skipped":
                                 status_text = "Skipped";
                         }
+
+                        if (event.event_data && event.event_data.res) {
+                            item = event.event_data.res.item;
+                            if (typeof item === "object") {
+                                item = JSON.stringify(item);
+                                item = item.replace(/\"/g,'').replace(/:/g,': ').replace(/,/g,', ');
+                            }
+                        }
+
                         if (event.event !== "runner_on_no_hosts") {
                             scope.hostResults.push({
                                 id: event.id,
@@ -918,7 +942,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                                 task_id: event.parent,
                                 name: event.event_data.host,
                                 created: event.created,
-                                msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
+                                msg: (event.event_data && event.event_data.res) ? event.event_data.res.msg : '',
+                                item: item
                             });
                         }
                     });

awx/ui/static/less/job-details.less

@@ -411,13 +411,20 @@
         position: relative;
         top: 0;
         left: 0;
+        #hosts-table-header table {
+            table-layout: fixed;
+        }
         #hosts-table-detail {
-            padding: 3px 0 3px 5px;
             height: 150px;
             background-color: @white;
-            .col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 {
+        }
-                width: 3%;
+        #hosts-table-detail table {
-            }
+            table-layout: fixed;
+        }
+        #hosts-table-detail td {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 

awx/ui/static/partials/job_detail.html

@@ -200,8 +200,8 @@
                         <div id="task-hosts-section" class="section">
 
                             <div class="row title-row">
-                                <div class="col-lg-1 col-md-2 col-sm-2 title">Hosts</div>
+                                <div class="col-lg-2 col-md-2 col-sm-2 title">Host Events</div>
-                                <div class="col-lg-11 col-md-10 col-sm-10" style="text-align:right;">
+                                <div class="col-lg-10 col-md-10 col-sm-10" style="text-align:right;">
                                     <div id="host-search-form" class="search-form form-inline">
                                         <div class="form-group">
                                             <label>Search</label>
@@ -225,17 +225,32 @@
                                 </div>
                             </div>
 
+                            <div class="table-header" id="hosts-table-header">
+                                <table class="table table-condensed">
+                                    <thead>
+                                        <tr>
+                                            <th class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column">Status</th>
+                                            <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Host</th>
+                                            <th class="col-lg-4 col-md-4 col-sm-3 col-xs-3">Item</th>
+                                            <th class="col-lg-4 col-md-4 col-sm-3 col-xs-3">Message</th>
+                                            <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></th>
+                                        </tr>
+                                    </thead>
+                                </table>
+                            </div>
+
                             <div id="hosts-table-detail" class="table-detail" lr-infinite-scroll="hostResultsScrollDown" scroll-threshold="10" time-threshold="500">
                                 <table class="table table-condensed">
                                     <tbody>
                                         <tr ng-repeat="result in results = (hostResults) track by $index">
-                                            <td class="col-lg-1 col-md-1 col-sm1 colxs-2 status-column"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="fa icon-job-{{ result.status }}"></i><i ng-show="result.status_text == 'Unreachable'" class="fa icon-job-unreachable"></i></a></td>
+                                            <td class="col-lg-1 col-md-1 col-sm-2 col-xs-2 status-column"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top"><i ng-show="result.status_text != 'Unreachable'" class="fa icon-job-{{ result.status }}"></i><i ng-show="result.status_text == 'Unreachable'" class="fa icon-job-unreachable"></i></a></td>
-                                            <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 status-column"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top">{{ result.name }}</a></td>
+                                            <td class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="" ng-click="viewHostResults(result.id)" aw-tool-tip="Event ID: {{ result.id }}<br \>Status: {{ result.status_text }}. Click for details" data-placement="top">{{ result.name }}</a></td>
-                                            <td class="col-lg-4 col-md-4 col-sm-4 col-xs-3">{{ result.msg }}</td>
+                                            <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3 item-column">{{ result.item }}</td>
+                                            <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a href="" ng-click="editHost(result.host_id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
                                         <tr ng-show="results.length === 0">
-                                            <td colspan="4" class="col-lg-12 loading-info">No matching hosts</td>
+                                            <td colspan="5" class="col-lg-12 loading-info">No matching hosts</td>
                                         </tr>
                                     </tbody>
                                 </table>