Merge pull request #12 from ansible/job-events-refactor-unstable

Refactor job_tasks.

awx/api/tests/__init__.py

@@ -0,0 +1,7 @@
+# Copyright (c) 2014 Ansible, Inc.
+# All Rights Reserved.
+
+from __future__ import absolute_import
+
+from .decorator_paginated import *
+from .job_tasks import *

awx/api/tests/decorator_paginated.py

@@ -0,0 +1,74 @@
+# Copyright (c) 2014 Ansible, Inc.
+# All Rights Reserved.
+
+import json
+
+from django.test import TestCase
+
+from rest_framework.permissions import AllowAny
+from rest_framework.test import APIRequestFactory
+from rest_framework.views import APIView
+
+from awx.api.utils.decorators import paginated
+
+
+class PaginatedDecoratorTests(TestCase):
+    """A set of tests for ensuring that the "paginated" decorator works
+    in the way we expect.
+    """
+    def setUp(self):
+        self.rf = APIRequestFactory()
+
+        # Define an uninteresting view that we can use to test
+        # that the paginator wraps in the way we expect.
+        class View(APIView):
+            permission_classes = (AllowAny,)
+            @paginated
+            def get(self, request, limit, offset):
+                return ['a', 'b', 'c', 'd', 'e'], 26
+        self.view = View.as_view()
+
+    def test_implicit_first_page(self):
+        """Establish that if we get an implicit request for the first page
+        (e.g. no page provided), that it is returned appropriately.
+        """
+        # Create a request, and run the paginated function.
+        request = self.rf.get('/dummy/', {'page_size': 5})
+        response = self.view(request)
+
+        # Ensure the response looks like what it should.
+        r = json.loads(response.rendered_content)
+        self.assertEqual(r['count'], 26)
+        self.assertEqual(r['next'], '/dummy/?page=2&page_size=5')
+        self.assertEqual(r['previous'], None)
+        self.assertEqual(r['results'], ['a', 'b', 'c', 'd', 'e'])
+
+    def test_mid_page(self):
+        """Establish that if we get a request for a page in the middle, that
+        the paginator causes next and prev to be set appropriately.
+        """
+        # Create a request, and run the paginated function.
+        request = self.rf.get('/dummy/', {'page': 3, 'page_size': 5})
+        response = self.view(request)
+
+        # Ensure the response looks like what it should.
+        r = json.loads(response.rendered_content)
+        self.assertEqual(r['count'], 26)
+        self.assertEqual(r['next'], '/dummy/?page=4&page_size=5')
+        self.assertEqual(r['previous'], '/dummy/?page=2&page_size=5')
+        self.assertEqual(r['results'], ['a', 'b', 'c', 'd', 'e'])
+
+    def test_last_page(self):
+        """Establish that if we get a request for the last page, that the
+        paginator picks up on it and sets `next` to None.
+        """
+        # Create a request, and run the paginated function.
+        request = self.rf.get('/dummy/', {'page': 6, 'page_size': 5})
+        response = self.view(request)
+
+        # Ensure the response looks like what it should.
+        r = json.loads(response.rendered_content)
+        self.assertEqual(r['count'], 26)
+        self.assertEqual(r['next'], None)
+        self.assertEqual(r['previous'], '/dummy/?page=5&page_size=5')
+        self.assertEqual(r['results'], ['a', 'b', 'c', 'd', 'e'])

awx/api/utils/decorators.py

@@ -0,0 +1,66 @@
+# Copyright (c) 2014 Ansible, Inc.
+# All Rights Reserved.
+
+import collections
+import copy
+import functools
+
+from rest_framework.response import Response
+from rest_framework.settings import api_settings
+
+def paginated(method):
+    """Given an method with a Django REST Framework API method signature
+    (e.g. `def get(self, request, ...):`), abstract out boilerplate pagination
+    duties.
+
+    This causes the method to receive two additional keyword arguments:
+    `limit`, and `offset`. The method expects a two-tuple to be
+    returned, with a result list as the first item, and the total number
+    of results (across all pages) as the second item.
+    """
+    @functools.wraps(method)
+    def func(self, request, *args, **kwargs):
+        # Manually spin up pagination.
+        # How many results do we show?
+        limit = api_settings.PAGINATE_BY
+        if request.GET.get(api_settings.PAGINATE_BY_PARAM, False):
+            limit = request.GET[api_settings.PAGINATE_BY_PARAM]
+        if api_settings.MAX_PAGINATE_BY:
+            limit = min(api_settings.MAX_PAGINATE_BY, limit)
+        limit = int(limit)
+
+        # What page are we on?
+        page = int(request.GET.get('page', 1))
+        offset = (page - 1) * limit
+
+        # Add the limit, offset, and page variables to the keyword arguments
+        # being sent to the underlying method.
+        kwargs['limit'] = limit
+        kwargs['offset'] = offset
+
+        # Okay, call the underlying method.
+        results, count = method(self, request, *args, **kwargs)
+
+        # Determine the next and previous pages, if any.
+        prev, next_ = None, None
+        if page > 1:
+            get_copy = copy.copy(request.GET)
+            get_copy['page'] = page - 1
+            prev = '%s?%s' % (request.path, get_copy.urlencode())
+        if count > offset + limit:
+            get_copy = copy.copy(request.GET)
+            get_copy['page'] = page + 1
+            next_ = '%s?%s' % (request.path, get_copy.urlencode())
+
+        # Compile the results into a dictionary with pagination
+        # information.
+        answer = collections.OrderedDict((
+            ('count', count),
+            ('next', next_),
+            ('previous', prev),
+            ('results', results),
+        ))
+
+        # Okay, we're done; return response data.
+        return Response(answer)
+    return func

awx/api/views.py

@@ -21,6 +21,7 @@ from django.utils.timezone import now
 # Django REST Framework
 from rest_framework.authtoken.views import ObtainAuthToken
 from rest_framework.exceptions import PermissionDenied, ParseError
+from rest_framework.pagination import BasePaginationSerializer
 from rest_framework.parsers import YAMLParser
 from rest_framework.permissions import AllowAny, IsAuthenticated
 from rest_framework.renderers import YAMLRenderer
@@ -42,6 +43,7 @@ from awx.api.authentication import JobTaskAuthentication
 from awx.api.permissions import *
 from awx.api.renderers import *
 from awx.api.serializers import *
+from awx.api.utils.decorators import paginated
 from awx.api.generics import *
 from awx.api.generics import get_view_name
 
@@ -1517,50 +1519,113 @@ class JobJobPlaysList(BaseJobEventsList):
             all_plays.append(play_details)
         return Response(all_plays)
 
-class JobJobTasksList(BaseJobEventsList):
 
+class JobJobTasksList(BaseJobEventsList):
+    """A view for displaying aggregate data about tasks within a job
+    and their completion status.
+    """
     parent_model = Job
     authentication_classes = [JobTaskAuthentication] + \
                              api_settings.DEFAULT_AUTHENTICATION_CLASSES
     permission_classes = (JobTaskPermission,)
     new_in_150 = True
 
-    def get(self, request, *args, **kwargs):
+    @paginated
-        tasks = []
+    def get(self, request, limit, offset, *args, **kwargs):
+        """Return aggregate data about each of the job tasks that is:
+          - an immediate child of the job event
+          - corresponding to the spinning up of a new task or playbook
+        """
+        results = []
+
+        # Get the job and the parent task.
+        # If there's no event ID specified, this will return a 404.
+        # FIXME: Make this a good error message.
         job = get_object_or_404(self.parent_model, pk=self.kwargs['pk'])
-        parent_task = get_object_or_404(job.job_events, pk=int(request.QUERY_PARAMS.get('event_id', -1)))
+        parent_task = get_object_or_404(job.job_events,
-        for task_start_event in parent_task.children.filter(Q(event='playbook_on_task_start') | Q(event='playbook_on_setup')):
+            pk=int(request.QUERY_PARAMS.get('event_id', -1)),
-            task_data = dict(id=task_start_event.id, name="Gathering Facts" if task_start_event.event == 'playbook_on_setup' else task_start_event.task,
+        )
-                             created=task_start_event.created, modified=task_start_event.modified,
+
-                             failed=False, changed=False, host_count=0, reported_hosts=0, successful_count=0, failed_count=0,
+        # Some events correspond to a playbook or task starting up,
-                             changed_count=0, skipped_count=0)
+        # and these are what we're interested in here.
-            for child_event in task_start_event.children.all():
+        STARTING_EVENTS = ('playbook_on_task_start', 'playbook_on_setup')
-                if child_event.event == 'runner_on_failed':
+
+        # We need to pull information about each start event.
+        #
+        # This is super tricky, because this table has a one-to-many
+        # relationship with itself (parent-child), and we're getting
+        # information for an arbitrary number of children. This means we
+        # need stats on grandchildren, sorted by child. 
+        queryset = (JobEvent.objects.filter(parent__parent=parent_task,
+                                            parent__event__in=STARTING_EVENTS)
+                                    .values('parent__id', 'event', 'changed')
+                                    .annotate(num=Count('event'))
+                                    .order_by('parent__id'))
+        count = queryset.count()
+
+        # The data above will come back in a list, but we are going to
+        # want to access it based on the parent id, so map it into a
+        # dictionary.
+        data = {}
+        for line in queryset[offset:offset + limit]:
+            parent_id = line.pop('parent__id')
+            data.setdefault(parent_id, [])
+            data[parent_id].append(line)
+
+        # Iterate over the start events and compile information about each one.
+        qs = parent_task.children.filter(event__in=STARTING_EVENTS,
+                                         id__in=data.keys())
+        for task_start_event in qs:
+            # Create initial task data.
+            task_data = {
+                'changed': False,
+                'changed_count': 0,
+                'created': task_start_event.created,
+                'failed': False,
+                'failed_count': 0,
+                'host_count': 0,
+                'id': task_start_event.id,
+                'modified': task_start_event.modified,
+                'name': 'Gathering Facts' if
+                            task_start_event.event == 'playbook_on_setup' else
+                            task_start_event.task,
+                'reported_hosts': 0,
+                'skipped_count': 0,
+                'successful_count': 0,
+            }
+
+            # Iterate over the data compiled for this child event, and
+            # make appropriate changes to the task data.
+            for child_data in data.get(task_start_event.id, []):
+                if child_data['event'] == 'runner_on_failed':
                     task_data['failed'] = True
-                    task_data['host_count'] += 1
+                    task_data['host_count'] += child_data['num']
-                    task_data['reported_hosts'] += 1
+                    task_data['reported_hosts'] += child_data['num']
-                    task_data['failed_count'] += 1
+                    task_data['failed_count'] += child_data['num']
-                elif child_event.event == 'runner_on_ok':
+                elif child_data['event'] == 'runner_on_ok':
-                    task_data['host_count'] += 1
+                    task_data['host_count'] += child_data['num']
-                    task_data['reported_hosts'] += 1
+                    task_data['reported_hosts'] += child_data['num']
-                    if child_event.changed:
+                    if child_data['changed']:
-                        task_data['changed_count'] += 1
+                        task_data['changed_count'] += child_data['num']
                         task_data['changed'] = True
                     else:
-                        task_data['successful_count'] += 1
+                        task_data['successful_count'] += child_data['num']
-                elif child_event.event == 'runner_on_skipped':
+                elif child_data['event'] == 'runner_on_skipped':
-                    task_data['host_count'] += 1
+                    task_data['host_count'] += child_data['num']
-                    task_data['reported_hosts'] += 1
+                    task_data['reported_hosts'] += child_data['num']
-                    task_data['skipped_count'] += 1
+                    task_data['skipped_count'] += child_data['num']
-                elif child_event.event == 'runner_on_error':
+                elif child_data['event'] == 'runner_on_error':
-                    task_data['host_count'] += 1
+                    task_data['host_count'] += child_data['num']
-                    task_data['reported_hosts'] += 1
+                    task_data['reported_hosts'] += child_data['num']
                     task_data['failed'] = True
-                    task_data['failed_count'] += 1
+                    task_data['failed_count'] += child_data['num']
-                elif child_event.event == 'runner_on_no_hosts':
+                elif child_data['event'] == 'runner_on_no_hosts':
-                    task_data['host_count'] += 1
+                    task_data['host_count'] += child_data['num']
-            tasks.append(task_data)
+            results.append(task_data)
-        return Response(tasks)
+
+        # Done; return the results and count.
+        return results, count
+
 
 class UnifiedJobTemplateList(ListAPIView):
 

awx/ui/static/js/app.js

@@ -470,6 +470,10 @@ angular.module('Tower', [
                     HideStream();
                 }
 
+                if ($rootScope.jobDetailInterval) {
+                    window.clearInterval($rootScope.jobDetailInterval);
+                }
+
                 // On each navigation request, check that the user is logged in
                 if (!/^\/(login|logout)/.test($location.path())) {
                     // capture most recent URL, excluding login/logout

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

@@ -8,7 +8,7 @@
 'use strict';
 
 function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
-    ProcessErrors, ProcessEventQueue, SelectPlay, SelectTask, Socket, GetElapsed, SelectHost, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList,
+    ProcessErrors, ProcessEventQueue, SelectPlay, SelectTask, Socket, GetElapsed, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList,
     JobIsFinished, SetTaskStyles) {
 
     ClearScope();
@@ -31,10 +31,10 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
     scope.hostResultsMap = {};
     api_complete = false;
 
-    scope.hostTableRows = 150;
+    scope.hostTableRows = 75;
-    scope.hostSummaryTableRows = 150;
+    scope.hostSummaryTableRows = 75;
-    scope.tasksMaxRows = 150;
+    scope.tasksMaxRows = 75;
-    scope.playsMaxRows = 150;
+    scope.playsMaxRows = 75;
 
     scope.search_all_tasks = [];
     scope.search_all_plays = [];
@@ -45,6 +45,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
     scope.searchSummaryHostsEnabled = true;
     scope.searchAllHostsEnabled = true;
     scope.haltEventQueue = false;
+    scope.processing = false;
 
     scope.host_summary = {};
     scope.host_summary.ok = 0;
@@ -69,23 +70,25 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
     event_socket.on("job_events-" + job_id, function(data) {
         data.event = data.event_name;
         if (api_complete && data.id > lastEventId) {
-            $log.debug('received event: ' + data.id);
+            if (queue.length < 25) {
-            if (queue.length < 50) {
+                $log.debug('received event: ' + data.id);
                 queue.unshift(data);
             }
             else {
                 api_complete = false;  // stop more events from hitting the queue
-                $log.debug('queue halted. reloading in 1.');
+                window.clearInterval($rootScope.jobDetailInterval);
+                $log.debug('halting queue. reloading...');
                 setTimeout(function() {
-                    $log.debug('reloading');
+                    $log.debug('reload');
                     scope.haltEventQueue = true;
                     queue = [];
                     scope.$emit('LoadJob');
-                }, 1000);
+                }, 300);
             }
         }
     });
 
+
     if ($rootScope.removeJobStatusChange) {
         $rootScope.removeJobStatusChange();
     }
@@ -98,42 +101,32 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 $log.debug('Job completed!');
                 api_complete = false;
                 scope.haltEventQueue = true;
+                window.clearInterval($rootScope.jobDetailInterval);
                 queue = [];
                 scope.$emit('LoadJob');
             }
         }
     });
 
+
     if (scope.removeAPIComplete) {
         scope.removeAPIComplete();
     }
     scope.removeAPIComplete = scope.$on('APIComplete', function() {
         // process any events sitting in the queue
-        var url, hostId = 0, taskId = 0, playId = 0;
+        var keys, url, hostId = 0, taskId = 0, playId = 0;
-
-        function notEmpty(x) {
-            return Object.keys(x).length > 0;
-        }
-
-        function getMaxId(x) {
-            var keys = Object.keys(x);
-            keys.sort();
-            return keys[keys.length - 1];
-        }
 
         // Find the max event.id value in memory
-        if (notEmpty(scope.hostResults)) {
+        hostId = (scope.hostResults.length > 0) ? scope.hostResults[scope.hostResults.length - 1].id : 0;
-            hostId = getMaxId(scope.hostResults);
+        if (scope.hostResults.length > 0) {
-        }
+            keys = Object.keys(scope.hostResults);
-        else if (notEmpty(scope.tasks)) {
+            keys.sort();
-            taskId = getMaxId(scope.tasks);
+            hostId = keys[keys.length - 1];
-        }
-        else if (notEmpty(scope.plays)) {
-            playId = getMaxId(scope.plays);
         }
+        taskId = (scope.tasks.length > 0) ? scope.tasks[scope.tasks.length - 1].id : 0;
+        playId = (scope.plays.length > 0) ? scope.plays[scope.plays.length - 1].id : 0;
         lastEventId = Math.max(hostId, taskId, playId);
 
-        api_complete = true;
         Wait('stop');
 
         // Draw the graph
@@ -156,16 +149,18 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                         msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
         }
-        else if (scope.host_summary.total > 0) {
+        else {
-            // Draw the graph based on summary values in memory
+            if (scope.host_summary.total > 0) {
-            DrawGraph({ scope: scope, resize: true });
+                // Draw the graph based on summary values in memory
+                DrawGraph({ scope: scope, resize: true });
+            }
+            api_complete = true;
+            scope.haltEventQueue = false;
+            ProcessEventQueue({
+                scope: scope,
+                eventQueue: queue
+            });
         }
-
-        ProcessEventQueue({
-            scope: scope,
-            eventQueue: queue
-        });
-
     });
 
     if (scope.removeInitialDataLoaded) {
@@ -198,6 +193,13 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
     }
     scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) {
         // Call to load all the job bits including, plays, tasks, hosts results and host summary
+
+        scope.host_summary.ok = 0;
+        scope.host_summary.changed = 0;
+        scope.host_summary.unreachable = 0;
+        scope.host_summary.failed = 0;
+        scope.host_summary.total = 0;
+
         var url = scope.job.url  + 'job_plays/?order_by=id';
         Rest.setUrl(url);
         Rest.get()
@@ -224,11 +226,12 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                     else {
                         elapsed = '00:00:00';
                     }
-                    if (scope.playsMap[event.id]) {
+
-                        play = scope.plays[scope.playsMapp[event.id]];
+                    if (scope.playsMap[event.id] !== undefined) {
+                        play = scope.plays[scope.playsMap[event.id]];
                         play.finished = end;
-                        play.elapsed = elapsed;
                         play.status = status;
+                        play.elapsed = elapsed;
                         play.playActiveClass = '';
                     }
                     else {
@@ -239,10 +242,15 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                             finished: end,
                             status: status,
                             elapsed: elapsed,
-                            playActiveClass: ''
+                            playActiveClass: '',
+                            hostCount: 0,
+                            fistTask: null
                         });
-                        scope.playsMap[event.id] = scope.plays.length - 1;
+                        if (scope.plays.length > scope.playsMaxRows) {
+                            scope.plays.shift();
+                        }
                     }
+
                     scope.host_summary.ok += (data.ok_count) ? data.ok_count : 0;
                     scope.host_summary.changed += (data.changed_count) ? data.changed_count : 0;
                     scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0;
@@ -251,7 +259,14 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                         scope.host_summary.unreachable + scope.host_summary.failed;
                 });
 
+                //rebuild the index
+                scope.playsMap = {};
+                scope.plays.forEach(function(play, idx) {
+                    scope.playsMap[play.id] = idx;
+                });
+
                 scope.$emit('PlaysReady', events_url);
+                scope.$emit('FixPlaysScroll');
             })
             .error( function(data, status) {
                 ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -338,7 +353,9 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 }
                 scope.setSearchAll('host');
                 scope.$emit('LoadJobDetails', data.related.job_events);
-                scope.$emit('GetCredentialNames', data);
+                if (!scope.credential_name) {
+                    scope.$emit('GetCredentialNames', data);
+                }
             })
             .error(function(data, status) {
                 ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -346,6 +363,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
             });
     });
 
+
     if (scope.removeRefreshCompleted) {
         scope.removeRefreshCompleted();
     }
@@ -361,6 +379,42 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         }
     });
 
+    if (scope.removeFixPlaysScroll) {
+        scope.removeFixPlaysScroll();
+    }
+    scope.removeFixPlaysScroll = scope.$on('FixPlaysScroll', function() {
+        scope.auto_scroll_plays = true;
+        $('#plays-table-detail').mCustomScrollbar("update");
+        setTimeout( function() {
+            scope.auto_scroll_plays = true;
+            $('#plays-table-detail').mCustomScrollbar("scrollTo", "bottom");
+        }, 500);
+    });
+
+    if (scope.removeFixTasksScroll) {
+        scope.removeFixTasksScroll();
+    }
+    scope.removeFixTasksScroll = scope.$on('FixTasksScroll', function() {
+        scope.auto_scroll_tasks = true;
+        $('#tasks-table-detail').mCustomScrollbar("update");
+        setTimeout( function() {
+            scope.auto_scroll_tasks = true;
+            $('#tasks-table-detail').mCustomScrollbar("scrollTo", "bottom");
+        }, 500);
+    });
+
+    if (scope.removeFixHostResultsScroll) {
+        scope.removeFixHostResultsScroll();
+    }
+    scope.removeFixHostResultsScroll = scope.$on('FixHostResultsScroll', function() {
+        scope.auto_scroll_results = true;
+        $('#hosts-table-detail').mCustomScrollbar("update");
+        setTimeout( function() {
+            scope.auto_scroll_results = true;
+            $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom");
+        }, 500);
+    });
+
     scope.adjustSize = function() {
         var height, ww = $(window).width();
         if (ww < 1240) {
@@ -434,6 +488,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
     };
 
     scope.selectPlay = function(id) {
+        scope.auto_scroll_plays = false;
         SelectPlay({
             scope: scope,
             id: id
@@ -441,6 +496,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
     };
 
     scope.selectTask = function(id) {
+        scope.auto_scroll_tasks = false;
         SelectTask({
             scope: scope,
             id: id
@@ -519,12 +575,12 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         // Called when user scrolls down (or forward in time)
         var url, mcs = arguments[0];
         scope.$apply(function() {
-            if (!scope.auto_scroll && scope.activeTask && scope.hostResults.length) {
+            if ((!scope.auto_scroll_results) && scope.activeTask && scope.hostResults.length) {
                 scope.auto_scroll = true;
                 url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
                 url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
                 url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
-                url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=host__name';
+                url += 'host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
                 Wait('start');
                 Rest.setUrl(url);
                 Rest.get()
@@ -557,7 +613,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                     });
             }
             else {
-                scope.auto_scroll = false;
+                scope.auto_scroll_results = false;
             }
         });
     }, 300);
@@ -566,12 +622,12 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         // Called when user scrolls up (or back in time)
         var url, mcs = arguments[0];
         scope.$apply(function() {
-            if (!scope.auto_scroll && scope.activeTask && scope.hostResults.length) {
+            if ((!scope.auto_scroll_results) && scope.activeTask && scope.hostResults.length) {
                 scope.auto_scroll = true;
                 url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask + '&';
                 url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
                 url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
-                url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + (scope.hostTableRows / 3) + '&order_by=-host__name';
+                url += 'host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=-host__name';
                 Wait('start');
                 Rest.setUrl(url);
                 Rest.get()
@@ -604,7 +660,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                     });
             }
             else {
-                scope.auto_scroll = false;
+                scope.auto_scroll_results = false;
             }
         });
     }, 300);
@@ -613,12 +669,12 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         // Called when user scrolls down (or forward in time)
         var url, mcs = arguments[0];
         scope.$apply(function() {
-            if (!scope.auto_scroll && scope.activePlay && scope.tasks.length) {
+            if ((!scope.auto_scroll_tasks) && scope.activePlay && scope.tasks.length) {
                 scope.auto_scroll = true;
                 url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
                 url += (scope.search_all_tasks.length > 0) ? '&id__in=' + scope.search_all_tasks.join() : '';
                 url += (scope.searchAllStatus === 'failed') ? '&failed=true' : '';
-                url += 'id__gt=' + scope.tasks[scope.tasks.length - 1].id + '&page_size=' + (scope.tasksMaxRows / 3) + '&order_by=id';
+                url += '&id__gt=' + scope.tasks[scope.tasks.length - 1].id + '&page_size=' + scope.tasksMaxRows + '&order_by=id';
                 Wait('start');
                 Rest.setUrl(url);
                 Rest.get()
@@ -631,7 +687,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                             }
                             else {
                                 // no next event (task), get the end time of the play
-                                end = scope.plays[scope.activePlay].finished;
+                                end = scope.plays[scope.playsMap[scope.activePlay]].finished;
                             }
                             if (end) {
                                 elapsed = GetElapsed({
@@ -682,7 +738,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                     });
             }
             else {
-                scope.auto_scroll = false;
+                scope.auto_scroll_tasks = false;
             }
         });
     }, 300);
@@ -691,12 +747,12 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
         // Called when user scrolls up (or back in time)
         var url, mcs = arguments[0];
         scope.$apply(function() {
-            if (!scope.auto_scroll && scope.activePlay && scope.tasks.length) {
+            if ((!scope.auto_scroll_tasks) && scope.activePlay && scope.tasks.length) {
                 scope.auto_scroll = true;
                 url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
                 url += (scope.search_all_tasks.length > 0) ? '&id__in=' + scope.search_all_tasks.join() : '';
                 url += (scope.searchAllStatus === 'failed') ? '&failed=true' : '';
-                url += 'id__lt=' + scope.tasks[scope.tasks[0]].name + '&page_size=' + (scope.tasksMaxRows / 3) + '&order_by=id';
+                url += '&id__lt=' + scope.tasks[0].id + '&page_size=' + scope.tasksMaxRows + '&order_by=-id';
                 Wait('start');
                 Rest.setUrl(url);
                 Rest.get()
@@ -709,7 +765,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                             }
                             else {
                                 // no next event (task), get the end time of the play
-                                end = scope.plays[scope.activePlay].finished;
+                                end = scope.plays[scope.playsMap[scope.activePlay]].finished;
                             }
                             if (end) {
                                 elapsed = GetElapsed({
@@ -760,18 +816,18 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                     });
             }
             else {
-                scope.auto_scroll = false;
+                scope.auto_scroll_tasks = false;
             }
         });
     }, 300);
 
     scope.HostSummaryOnTotalScroll = function(mcs) {
         var url;
-        if (!scope.auto_scroll && scope.hosts) {
+        if ((!scope.auto_scroll_summary) && scope.hosts) {
             url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
             url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
             url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
-            url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=host__name';
+            url += 'host__name__gt=' + scope.hosts[scope.hosts.length - 1].name + '&page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
             Wait('start');
             Rest.setUrl(url);
             Rest.get()
@@ -805,17 +861,17 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 });
         }
         else {
-            scope.auto_scroll = false;
+            scope.auto_scroll_summary = false;
         }
     };
 
     scope.HostSummaryOnTotalScrollBack = function(mcs) {
         var url;
-        if (!scope.auto_scroll && scope.hosts) {
+        if ((!scope.auto_scroll_summary) && scope.hosts) {
             url = GetBasePath('jobs') + job_id + '/job_host_summaries/?';
             url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
             url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
-            url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + (scope.hostSummaryTableRows / 3) + '&order_by=-host__name';
+            url += 'host__name__lt=' + scope.hosts[0].name + '&page_size=' + scope.hostSummaryTableRows + '&order_by=-host__name';
             Wait('start');
             Rest.setUrl(url);
             Rest.get()
@@ -849,7 +905,7 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
                 });
         }
         else {
-            scope.auto_scroll = false;
+            scope.auto_scroll_summary = false;
         }
     };
 
@@ -916,6 +972,6 @@ function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log,
 }
 
 JobDetailController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
-    'Wait', 'Rest', 'ProcessErrors', 'ProcessEventQueue', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'SelectHost', 'FilterAllByHostName', 'DrawGraph',
+    'Wait', 'Rest', 'ProcessErrors', 'ProcessEventQueue', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'FilterAllByHostName', 'DrawGraph',
     'LoadHostSummary', 'ReloadHostSummaryList', 'JobIsFinished', 'SetTaskStyles'
 ];

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

@@ -39,30 +39,33 @@
 
 angular.module('JobDetailHelper', ['Utilities', 'RestServices'])
 
-.factory('ProcessEventQueue', ['$log', 'DigestEvent', 'JobIsFinished', function ($log, DigestEvent, JobIsFinished) {
+.factory('ProcessEventQueue', ['$log', '$rootScope', 'DigestEvent', 'JobIsFinished', function ($log, $rootScope, DigestEvent, JobIsFinished) {
     return function(params) {
         var scope = params.scope,
-            eventQueue = params.eventQueue,
+            eventQueue = params.eventQueue;
-            event;
         function runTheQ() {
-            while (eventQueue.length > 0) {
+            var event;
+            scope.processing = true;
+            while (!JobIsFinished(scope) && !scope.haltEventQueue && eventQueue.length > 0) {
                 event = eventQueue.pop();
-                $log.debug('read event: ' + event.id);
+                $log.debug('processing event: ' + event.id);
                 DigestEvent({ scope: scope, event: event });
             }
-            if (!JobIsFinished(scope) && !scope.haltEventQueue) {
+            $log.debug('processing halted');
-                setTimeout( function() {
+            scope.processing = false;
-                    runTheQ();
-                }, 300);
-            }
         }
-        runTheQ();
+        $rootScope.jobDetailInterval = window.setInterval(function() {
+            $log.debug('checking... processing: ' + scope.processing + ' queue.length: ' + eventQueue.length);
+            if (!scope.processing && eventQueue.length > 0) {
+                runTheQ();
+            }
+        }, 1000);
     };
 }])
 
-.factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult', 'SelectPlay', 'SelectTask',
+.factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult',
     'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', 'JobIsFinished', 'AddNewTask',
-function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTask, GetElapsed,
+function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, GetElapsed,
     UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished, AddNewTask) {
     return function(params) {
 
@@ -88,11 +91,18 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
                     fistTask: null
                 });
                 scope.playsMap[event.id] = scope.plays.length -1;
+                if (scope.playsMap[scope.activePlay] !== undefined) {
+                    scope.plays[scope.playsMap[scope.activePlay]].playActiveClass = '';
+                }
+                scope.activePlay = event.id;
+                scope.plays[scope.playsMap[event.id]].playActiveClass = 'active';
                 scope.tasks = [];
                 scope.tasksMap = {};
                 scope.hostResults = [];
                 scope.hostResultsMap = {};
-                scope.activePlay = event.id;
+                $('#hosts-table-detail').mCustomScrollbar("update");
+                $('#tasks-table-detail').mCustomScrollbar("update");
+                scope.$emit('FixPlaysScroll');
                 break;
 
             case 'playbook_on_setup':
@@ -254,22 +264,28 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             changedStyle: { display: 'none' },
             skippedStyle: { display: 'none' }
         });
-
+        scope.tasksMap[event.id] = scope.tasks.length - 1;
         if (scope.tasks.length > scope.tasksMaxRows) {
             scope.tasks.shift();
         }
-
+        if (!scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
-        if (!scope.playsMap[scope.activePlay].firstTask) {
+            scope.plays[scope.playsMap[scope.activePlay]].firstTask = event.id;
-            scope.playsMap[scope.activePlay].firstTask = event.id;
         }
 
+        if (scope.activeTask && scope.tasksMap[scope.activeTask] !== undefined) {
+            scope.tasks[scope.tasksMap[scope.activeTask]].taskActiveClass = '';
+        }
+        scope.activeTask = event.id;
+        scope.tasks[scope.tasksMap[event.id]].taskActiveClass = 'active';
         scope.hostResults = [];
         scope.hostResultsMap = {};
-        scope.activeTask = event.id;
 
         // Not sure if this still works
         scope.hasRoles = (event.role) ? true : false;
 
+        $('#hosts-table-detail').mCustomScrollbar("update");
+        scope.$emit('FixTasksScroll');
+
         // Record the first task id
         UpdatePlayStatus({
             scope: scope,
@@ -323,7 +339,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             status_text = params.status_text,
             play;
 
-        if (scope.playsMap[id]) {
+        if (scope.playsMap[id] !== undefined) {
             play = scope.plays[scope.playsMap[id]];
             if (failed) {
                 play.status = 'failed';
@@ -363,7 +379,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             no_hosts = params.no_hosts,
             task;
 
-        if (scope.tasksMap[id]) {
+        if (scope.tasksMap[id] !== undefined) {
             task = scope.tasks[scope.tasksMap[id]];
             if (no_hosts){
                 task.status = 'no-matching-hosts';
@@ -414,7 +430,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
         scope.host_summary.total  = scope.host_summary.ok + scope.host_summary.changed + scope.host_summary.unreachable +
             scope.host_summary.failed;
 
-        if (scope.hostsMap[host_id]) {
+        if (scope.hostsMap[host_id] !== undefined) {
             scope.hosts[scope.hostsMap[host_id]].ok += (status === 'successful') ? 1 : 0;
             scope.hosts[scope.hostsMap[host_id]].changed += (status === 'changed') ? 1 : 0;
             scope.hosts[scope.hostsMap[host_id]].unreachable += (status === 'unreachable') ? 1 : 0;
@@ -442,7 +458,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             scope.hosts.forEach(function(host, idx){
                 scope.hostsMap[host.id] = idx;
             });
-            $('#tasks-table-detail').mCustomScrollbar("update");
+            $('#hosts-table-detail').mCustomScrollbar("update");
         }
 
         UpdateTaskStatus({
@@ -479,7 +495,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             msg = params.message,
             task;
 
-        if (!scope.hostResultsMap[host_id] && scope.hostResults.length < scope.hostTableRows) {
+        if (scope.hostResultsMap[host_id] === undefined && scope.hostResults.length < scope.hostTableRows) {
             scope.hostResults.push({
                 id: event_id,
                 status: status,
@@ -503,12 +519,13 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             scope.hostResults.forEach(function(result, idx) {
                 scope.hostResultsMap[result.id] = idx;
             });
+            scope.$emit('FixHostResultsScroll');
         }
 
         // update the task status bar
-        if (scope.tasksMap[task_id]) {
+        if (scope.tasksMap[task_id] !== undefined) {
             task = scope.tasks[scope.tasksMap[task_id]];
-            if (task_id === scope.plays[scope.playsMap[scope.activePlays]].firstPlay) {
+            if (task_id === scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
                 scope.plays[scope.playsMap[scope.activePlay]].hostCount++;
                 task.hostCount++;
             }
@@ -575,7 +592,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             clear = (scope.activePlay === id) ? false : true;  //are we moving to a new play?
         }
 
-        if (scope.playsMap[scope.activePlay]) {
+        if (scope.activePlay && scope.playsMap[scope.activePlay] !== undefined) {
             scope.plays[scope.playsMap[scope.activePlay]].playActiveClass = '';
         }
         if (id) {
@@ -612,13 +629,18 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
             url += (scope.search_all_tasks.length > 0) ? '&id__in=' + scope.search_all_tasks.join() : '';
             url += (scope.searchAllStatus === 'failed') ? '&failed=true' : '';
-            url += '&page_size=' + scope.tasksMaxRows;
+            url += '&page_size=' + scope.tasksMaxRows + '&order_by=id';
 
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
                     data.results.forEach(function(event, idx) {
-                        var end, elapsed, task;
+                        var task, end, elapsed;
+
+                        if (!scope.plays[scope.playsMap[scope.activePlay]].firstTask) {
+                            scope.plays[scope.playsMap[scope.activePlay]].firstTask = event.id;
+                            scope.plays[scope.playsMap[scope.activePlay]].hostCount = (event.host_count) ? event.host_count : 0;
+                        }
 
                         if (idx < data.length - 1) {
                             // end date = starting date of the next event
@@ -626,7 +648,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
                         }
                         else {
                             // no next event (task), get the end time of the play
-                            end = scope.plays[scope.activePlay].finished;
+                            end = scope.plays[scope.playsMap[scope.activePlay]].finished;
                         }
 
                         if (end) {
@@ -639,9 +661,10 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
                             elapsed = '00:00:00';
                         }
 
-                        if (scope.tasksMap[event.id]) {
+                        if (scope.tasksMap[event.id] !== undefined) {
                             task = scope.tasks[scope.tasksMap[event.id]];
-                            task.status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful';
+                            task.status = ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' );
+                            task.modified = event.modified;
                             task.finished = end;
                             task.elapsed = elapsed;
                             task.hostCount = (event.host_count) ? event.host_count : 0;
@@ -671,6 +694,9 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
                                 taskActiveClass: ''
                             });
                             scope.tasksMap[event.id] = scope.tasks.length - 1;
+                            if (scope.tasks.length > scope.tasksMaxRows) {
+                                scope.tasks.shift();
+                            }
                         }
                         SetTaskStyles({
                             scope: scope,
@@ -678,12 +704,21 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
                         });
                     });
 
+                    //rebuild the index;
+                    scope.tasksMap = {};
+                    scope.tasks.forEach(function(task, idx) {
+                        scope.tasksMap[task.id] = idx;
+                    });
+
                     // set the active task
                     SelectTask({
                         scope: scope,
                         id: (scope.tasks.length > 0) ? scope.tasks[scope.tasks.length - 1].id : null,
                         callback: callback
                     });
+
+                    scope.$emit('FixTasksScroll');
+
                 })
                 .error(function(data) {
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -693,6 +728,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
         else {
             scope.tasks = [];
             scope.tasksMap = {};
+            $('#tasks-table-detail').mCustomScrollbar("update");
             SelectTask({
                 scope: scope,
                 id: null,
@@ -717,7 +753,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             clear = (scope.activeTask === id) ? false : true;
         }
 
-        if (scope.activeTask && scope.tasksMap[scope.activeTask]) {
+        if (scope.activeTask && scope.tasksMap[scope.activeTask] !== undefined) {
             scope.tasks[scope.tasksMap[scope.activeTask]].taskActiveClass = '';
         }
         if (id) {
@@ -725,13 +761,6 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
         }
         scope.activeTask = id;
 
-        $('#tasks-table-detail').mCustomScrollbar("update");
-        setTimeout( function() {
-            scope.auto_scroll = true;
-            $('#tasks-table-detail').mCustomScrollbar("scrollTo", "bottom");
-
-        }, 1500);
-
         LoadHosts({
             scope: scope,
             callback: callback,
@@ -741,7 +770,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
 }])
 
 // Refresh the list of hosts
-.factory('LoadHosts', ['Rest', 'ProcessErrors', 'SelectHost', function(Rest, ProcessErrors, SelectHost) {
+.factory('LoadHosts', ['Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
     return function(params) {
         var scope = params.scope,
             callback = params.callback,
@@ -763,21 +792,39 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             Rest.get()
                 .success(function(data) {
                     data.results.forEach(function(event) {
-                        scope.hostResults.push({
+                        var result;
-                            id: event.id,
+                        if (scope.hostResultsMap[event.id] !== undefined) {
-                            status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                            result = scope.hostResults[scope.hostResultsMap[event.id]];
-                            host_id: event.host,
+                            result.status = ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' );
-                            task_id: event.parent,
+                            result.created = event.created;
-                            name: event.event_data.host,
+                            result.msg = (event.event_data && event.event_data.res) ? event.event_data.res.msg : '';
-                            created: event.created,
+                        }
-                            msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
+                        else {
-                        });
+                            scope.hostResults.push({
-                        scope.hostResultsMap[event.id] = scope.hostResults.length - 1;
+                                id: event.id,
+                                status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                                host_id: event.host,
+                                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 : '' )
+                            });
+                            if (scope.hostResults.length > scope.hostTableRows) {
+                                scope.hostResults.shift();
+                            }
+                        }
                     });
+
+                    // Rebuild the index
+                    scope.hostResultsMap = {};
+                    scope.hostResults.forEach(function(result, idx) {
+                        scope.hostResultsMap[result.id] = idx;
+                    });
+
                     if (callback) {
                         scope.$emit(callback);
                     }
-                    SelectHost({ scope: scope });
+                    scope.$emit('FixHostResultsScroll');
                 })
                 .error(function(data, status) {
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -790,22 +837,11 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
             if (callback) {
                 scope.$emit(callback);
             }
-            SelectHost({ scope: scope });
+            $('#hosts-table-detail').mCustomScrollbar("update");
         }
     };
 }])
 
-.factory('SelectHost', [ function() {
-    return function(params) {
-        var scope = params.scope;
-        $('#tasks-table-detail').mCustomScrollbar("update");
-        setTimeout( function() {
-            scope.auto_scroll = true;
-            $('#hosts-table-detail').mCustomScrollbar("scrollTo", "bottom");
-        }, 700);
-    };
-}])
-
 // Refresh the list of hosts in the hosts summary section
 .factory('ReloadHostSummaryList', ['Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
     return function(params) {
@@ -861,11 +897,24 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Se
 .factory('LoadHostSummary', [ function() {
     return function(params) {
         var scope = params.scope,
-            data = params.data;
+            data = params.data,
-        scope.host_summary.ok = Object.keys(data.ok).length;
+            host;
-        scope.host_summary.changed = Object.keys(data.changed).length;
+        scope.host_summary.ok = 0;
-        scope.host_summary.unreachable = Object.keys(data.dark).length;
+        for (host in data.ok) {
-        scope.host_summary.failed = Object.keys(data.failures).length;
+            scope.host_summary.ok += data.ok[host];
+        }
+        scope.host_summary.changed = 0;
+        for (host in data.changed) {
+            scope.host_summary.changed += data.changed[host];
+        }
+        scope.host_summary.unreachable = 0;
+        for (host in data.dark) {
+            scope.host_summary.dark += data.dark[host];
+        }
+        scope.host_summary.failed = 0;
+        for (host in data.failures) {
+            scope.host_summary.failed += data.failures[host];
+        }
         scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed +
             scope.host_summary.unreachable + scope.host_summary.failed;
     };

awx/ui/static/partials/job_detail.html

@@ -3,12 +3,10 @@
 
         <div class="row">
             <div id="breadcrumb-container" class="col-md-12" style="position: relative;">
-                <div class="nav-path">
+                <ul class="ansible-breadcrumb" id="breadcrumb-list">
-                    <ul class="breadcrumb" id="breadcrumb-list">
+                    <li><a href="/#/jobs">Jobs</a></li>
-                        <li><a href="/#/jobs">Jobs</a></li>
+                    <li class="active"><a href="">{{ job_id }} - {{ job.name }}</a></li>
-                        <li><strong>{{ job_id }}</strong> - <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a></li>
+                </ul>
-                    </ul>
-                </div>
             </div>
         </div>
 
@@ -52,10 +50,10 @@
                                 </div>
                             </div>
                             <div id="plays-table-detail" aw-custom-scroll class="table-detail">
-                                <div class="row cursor-pointer" ng-repeat="(play_id, play) in playList = (plays | FilterById : search_all_plays | FilterByField: { status : searchAllStatus }) track by play_id"
+                                <div class="row cursor-pointer" ng-repeat="play in plays"
                                         ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
                                      <!-- | FilterById : search_all_plays | filter:{ status : searchAllStatus} -->
-
+                                     <!-- ) in playList = (plays | FilterById : search_all_plays | FilterByField: { status : searchAllStatus }) track by play_id" -->
                                     <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ play.created | date: 'HH:mm:ss' }}</div>
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ play.finished | date:'HH:mm:ss' }}"
                                         data-placement="top">{{ play.elapsed }}
@@ -65,7 +63,7 @@
                                         <i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
                                     </div>
                                 </div>
-                                <div class="row" ng-show="objectIsEmpty(playList)">
+                                <div class="row" ng-show="plays.length == 0">
                                     <div class="col-lg-12">
                                         <div class="loading-info">No matching plays</div>
                                     </div>
@@ -86,7 +84,7 @@
                             <div id="tasks-table-detail" class="table-detail" aw-custom-scroll data-on-total-scroll="TasksOnTotalScroll"
                                     data-on-total-scroll-back="TasksOnTotalScrollBack">
                                 <div class="row cursor-pointer"
-                                    ng-repeat="(task_id, task) in tasks track by task_id"
+                                    ng-repeat="task in tasks"
                                     ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
                                     <!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} -->
                                     <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
@@ -101,7 +99,7 @@
                                         <div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
                                     </div>
                                 </div>
-                                <div class="row" ng-show="objectIsEmpty(tasks)">
+                                <div class="row" ng-show="tasks.length == 0">
                                     <div class="col-lg-12">
                                         <div class="loading-info">No matching tasks</div>
                                     </div>