Job detail page re-refactor

Fixed task hostCount value when data is reloaded in response to a search. Now the 'skipped' or not processed gap shows on task progress bars. Added animation to less/more link

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

@@ -678,7 +678,16 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     };
 
     scope.toggleLessStatus = function() {
-        scope.lessStatus = (scope.lessStatus) ? false : true;
+        if (!scope.lessStatus) {
+            console.log('hide');
+            $('#job-status-form .toggle-show').hide(400);
+            scope.lessStatus = true;
+        }
+        else {
+            console.log('show');
+            $('#job-status-form .toggle-show').show(400);
+            scope.lessStatus = false;
+        }
     };
 
     scope.filterPlayStatus = function() {

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

@@ -656,7 +656,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
     return function(params) {
         var scope = params.scope,
             callback = params.callback,
-            url;
+            url, play;
 
         scope.tasks = [];
         scope.tasksMap = {};
@@ -667,12 +667,25 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             url += (scope.search_task_status === 'failed') ? '&failed=true' : '';
             url += '&page_size=' + scope.tasksMaxRows + '&order_by=id';
 
+            scope.plays.every(function(p, idx) {
+                if (p.id === scope.activePlay) {
+                    play = scope.plays[idx];
+                    return false;
+                }
+                return true;
+            });
+
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
                     data.results.forEach(function(event, idx) {
                         var end, elapsed, status, status_text;
 
+                        if (play.firstTask === undefined  || play.firstTask === null) {
+                            play.firstTask = event.id;
+                            play.hostCount = (event.host_count) ? event.host_count : 0;
+                        }
+
                         if (idx < data.length - 1) {
                             // end date = starting date of the next event
                             end = data[idx + 1].created;
@@ -722,6 +735,11 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                             taskActiveClass: ''
                         });
 
+                        if (play.firstTask !== event.id) {
+                            // this is not the first task
+                            scope.tasks[scope.tasks.length - 1].hostCount = play.hostCount;
+                        }
+
                         SetTaskStyles({
                             task: scope.tasks[scope.tasks.length - 1]
                         });
@@ -1131,7 +1149,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                 filteredListA = hostResults;
             }
 
-            if (scope.search_host_status === 'failed') {
+            if (scope.search_host_status === 'failed' || scope.search_host_status === 'unreachable') {
                 for (key in filteredListA) {
                     if (filteredListA[key].status === 'failed') {
                         filteredListB[key] = filteredListA[key];
@@ -1190,7 +1208,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
 
             if (scope.search_host_summary_status === 'failed') {
                 for (key in filteredListA) {
-                    if (filteredListA[key].status === 'failed') {
+                    if (filteredListA[key].status === 'failed' || filteredListA[key].status === 'unreachable') {
                         filteredListB[key] = filteredListA[key];
                     }
                 }

awx/ui/static/partials/job_detail.html

@@ -41,21 +41,21 @@
                             </div>
                         </div>
 
-                        <div class="form-group" ng-show="!lessStatus">
+                        <div class="form-group toggle-show" style="display:none;">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
                             <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group" ng-show="!lessStatus">
+                        <div class="form-group toggle-show" style="display:none;">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
                             <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                             </div>
                         </div>
 
-                        <div class="form-group" ng-show="!lessStatus">
+                        <div class="form-group toggle-show" style="display:none;">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
                             <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>