Merge branch 'master' into vagrant-unstable

awx/api/views.py

@@ -1494,6 +1494,7 @@ class JobJobPlaysList(BaseJobEventsList):
             ok_count = 0
             changed_count = 0
             skipped_count = 0
+            unreachable_count = 0
             for event_aggregate in event_aggregates:
                 if event_aggregate['event'] == 'runner_on_failed':
                     failed_count += event_aggregate['id__count']
@@ -1501,6 +1502,8 @@ class JobJobPlaysList(BaseJobEventsList):
                     failed_count += event_aggregate['id_count']
                 elif event_aggregate['event'] == 'runner_on_skipped':
                     skipped_count = event_aggregate['id__count']
+                elif event_aggregate['event'] == 'runner_on_unreachable':
+                    unreachable_count = event_aggregate['id__count']
             for change_aggregate in change_aggregates:
                 if change_aggregate['changed'] == False:
                     ok_count = change_aggregate['id__count']
@@ -1510,6 +1513,7 @@ class JobJobPlaysList(BaseJobEventsList):
             play_details['failed_count'] = failed_count
             play_details['changed_count'] = changed_count
             play_details['skipped_count'] = skipped_count
+            play_details['unreachable_count'] = unreachable_count
             all_plays.append(play_details)
         return Response(all_plays)
 

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

@@ -7,25 +7,27 @@
 
 'use strict';
 
-function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest, ProcessErrors, DigestEvents,
+function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
-    SelectPlay, SelectTask, Socket, GetElapsed, SelectHost, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList) {
+    ProcessErrors, ProcessEventQueue, SelectPlay, SelectTask, Socket, GetElapsed, SelectHost, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList,
+    JobIsFinished) {
 
     ClearScope();
 
     var job_id = $routeParams.id,
         event_socket,
-        event_queue = [],
         scope = $scope,
         api_complete = false,
         refresh_count = 0,
-        lastEventId = 0;
+        lastEventId = 0,
+        queue = [];
 
     scope.plays = {};
-    scope.tasks = {};
     scope.hosts = [];
+    scope.hostsMap = {};
+    scope.tasks = {};
     scope.hostResults = [];
     scope.hostResultsMap = {};
-    scope.hostsMap = {};
+    api_complete = false;
 
     scope.search_all_tasks = [];
     scope.search_all_plays = [];
@@ -34,9 +36,10 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
     scope.auto_scroll = false;
     scope.searchTaskHostsEnabled = true;
     scope.searchSummaryHostsEnabled = true;
-    scope.hostTableRows = 300;
+    scope.hostTableRows = 150;
-    scope.hostSummaryTableRows = 300;
+    scope.hostSummaryTableRows = 150;
     scope.searchAllHostsEnabled = true;
+    scope.haltEventQueue = false;
 
     scope.host_summary = {};
     scope.host_summary.ok = 0;
@@ -59,25 +62,32 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
     event_socket.init();
 
     event_socket.on("job_events-" + job_id, function(data) {
+        data.event = data.event_name;
         if (api_complete && data.id > lastEventId) {
-            // api loading is complete, process incoming events
+            $log.debug('received event: ' + data.id);
-            DigestEvents({
+            if (queue.length < 50) {
-                scope: scope,
+                queue.unshift(data);
-                events: [ data ]
-            });
             }
             else {
-            // Waiting on values from the api to load. Until then queue incoming events.
+                api_complete = false;  // stop more events from hitting the queue
-            event_queue.push(data);
+                $log.debug('queue halted. reloading in 1.');
+                setTimeout(function() {
+                    $log.debug('reloading');
+                    scope.haltEventQueue = true;
+                    queue = [];
+                    scope.$emit('LoadJob');
+                }, 1000);
+            }
         }
     });
 
+
     if (scope.removeAPIComplete) {
         scope.removeAPIComplete();
     }
     scope.removeAPIComplete = scope.$on('APIComplete', function() {
         // process any events sitting in the queue
-        var events = [], url;
+        var url, hostId = 0, taskId = 0, playId = 0;
 
         function notEmpty(x) {
             return Object.keys(x).length > 0;
@@ -91,34 +101,26 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
 
         // Find the max event.id value in memory
         if (notEmpty(scope.hostResults)) {
-            lastEventId = getMaxId(scope.hostResults);
+            hostId = getMaxId(scope.hostResults);
         }
         else if (notEmpty(scope.tasks)) {
-            lastEventId = getMaxId(scope.tasks);
+            taskId = getMaxId(scope.tasks);
         }
         else if (notEmpty(scope.plays)) {
-            lastEventId = getMaxId(scope.plays);
+            playId = getMaxId(scope.plays);
         }
+        lastEventId = Math.max(hostId, taskId, playId);
 
-        // Only process queued events > the max event in memory
-        if (event_queue.length > 0) {
-            event_queue.forEach(function(event) {
-                if (event.id > lastEventId) {
-                    events.push(event);
-                }
-            });
-            if (events.length > 0) {
-                DigestEvents({
-                    scope: scope,
-                    events: events
-                });
-            }
-        }
         api_complete = true;
+        Wait('stop');
+
+        ProcessEventQueue({
+            scope: scope,
+            eventQueue: queue
+        });
 
         // Draw the graph
-        if (scope.job.status === 'successful' && scope.job.status === 'failed' && scope.job.status === 'error') {
+        if (JobIsFinished(scope)) {
-            // The job has already completed. graph values found on playbook stats
             url = scope.job.related.job_events + '?event=playbook_on_stats';
             Rest.setUrl(url);
             Rest.get()
@@ -139,7 +141,6 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
         }
         else {
             // Draw the graph based on summary values in memory
-            Wait('stop');
             DrawGraph({ scope: scope, resize: true });
         }
     });
@@ -147,7 +148,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
     if (scope.removeInitialDataLoaded) {
         scope.removeInitialDataLoaded();
     }
-    scope.removeInitialDataLoaded= scope.$on('InitialDataLoaded', function() {
+    scope.removeInitialDataLoaded = scope.$on('InitialDataLoaded', function() {
         // Load data for the host summary table
         if (!api_complete) {
             ReloadHostSummaryList({
@@ -167,28 +168,29 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
         SelectPlay({
             scope: scope,
             id: lastPlay,
+            callback: 'InitialDataLoaded'
         });
     });
 
-    if (scope.removeJobReady) {
+    if (scope.removeLoadJobDetails) {
-        scope.removeJobReady();
+        scope.removeLoadJobDetails();
     }
-    scope.removeJobReady = scope.$on('JobReady', function(e, events_url) {
+    scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) {
-        // Job finished loading. Now get the set of plays
+        // Call to load all the job bits including, plays, tasks, hosts results and host summary
         var url = scope.job.url  + 'job_plays/?order_by=id';
         Rest.setUrl(url);
         Rest.get()
             .success( function(data) {
                 data.forEach(function(event, idx) {
-                    var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none',
+                    var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
-                        start = event.start,
+                        start = event.started,
                         end,
                         elapsed;
-                    if (idx < data.results.length - 1) {
+                    if (idx < data.length - 1) {
                         // end date = starting date of the next event
-                        end = data.results[idx + 1].started;
+                        end = data[idx + 1].started;
                     }
-                    else if (scope.job_status.status === 'successful' || scope.job_status.status === 'failed' || scope.job_status.status === 'error' || scope.job_status.status === 'canceled') {
+                    else if (JobIsFinished(scope)) {
                         // this is the last play and the job already finished
                         end = scope.job_status.finished;
                     }
@@ -210,11 +212,12 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
                         elapsed: elapsed,
                         playActiveClass: ''
                     };
-                    scope.host_summary.total += data.total;
+                    scope.host_summary.ok += data.ok_count;
-                    scope.host_summary.ok += data.ok;
+                    scope.host_summary.changed += data.changed_count;
-                    scope.host_summary.changed += data.changed;
+                    scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0;
-                    scope.host_summary.unreachable += data.unreachable;
+                    scope.host_summary.failed += data.failed_count;
-                    scope.host_summary.failed += data.failed;
+                    scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed +
+                        scope.host_summary.unreachable + scope.host_summary.failed;
                 });
 
                 scope.$emit('PlaysReady', events_url);
@@ -264,7 +267,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
         scope.removeLoadJob();
     }
     scope.removeLoadJobRow = scope.$on('LoadJob', function() {
-        Wait('start');
+        //Wait('start');
         // Load the job record
         Rest.setUrl(GetBasePath('jobs') + job_id + '/');
         Rest.get()
@@ -285,7 +288,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
                 scope.verbosity = data.verbosity;
                 scope.job_tags = data.job_tags;
 
-                // In the case that the job is already completed, or an error already happened,
+                // In the case the job is already completed, or an error already happened,
                 // populate scope.job_status info
                 scope.job_status.status = (data.status === 'waiting' || data.status === 'new') ? 'pending' : data.status;
                 scope.job_status.started = data.started;
@@ -302,9 +305,8 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
                 else {
                     scope.job_status.elapsed = '00:00:00';
                 }
-
                 scope.setSearchAll('host');
-                scope.$emit('JobReady', data.related.job_events);
+                scope.$emit('LoadJobDetails', data.related.job_events);
                 scope.$emit('GetCredentialNames', data);
             })
             .error(function(data, status) {
@@ -323,7 +325,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
             scope.$emit('LoadJob');
         }
         else {
-            // Check if we need to redraw the group
+            // Check if the graph needs to redraw
             setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500);
         }
     });
@@ -460,6 +462,14 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
         }
     };
 
+    scope.objectIsEmpty = function(obj) {
+        if (angular.isObject(obj)) {
+            return (Object.keys(obj).length > 0) ? false : true;
+        }
+        return true;
+    };
+
+    /*
     scope.HostDetailOnTotalScroll = _.debounce(function() {
         // Called when user scrolls down (or forward in time). Using _.debounce
         var url, mcs = arguments[0];
@@ -639,12 +649,10 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
             scope.auto_scroll = false;
         }
     };
-
+    */
-    scope.searchSummaryHosts = function() {
-
-    };
 
     scope.searchAllByHost = function() {
+        var keys, nxtPlay;
         if (scope.search_all_hosts_name) {
             FilterAllByHostName({
                 scope: scope,
@@ -656,12 +664,17 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
             scope.search_all_tasks = [];
             scope.search_all_plays = [];
             scope.searchAllHostsEnabled = true;
-            scope.activePlay = scope.plays[scope.plays.length - 1].id;
+            keys = Object.keys(scope.plays);
-            setTimeout(function() {
+            nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
-                SelectPlay({ scope: scope, id: scope.activePlay });
+            SelectPlay({
-            }, 2000);
+                scope: scope,
+                id: nxtPlay
+            });
+
         }
-        scope.searchSummaryHosts();
+        ReloadHostSummaryList({
+            scope: scope
+        });
     };
 
     scope.allHostNameKeyPress = function(e) {
@@ -671,25 +684,30 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
     };
 
     scope.filterByStatus = function(choice) {
-        var tmp = [];
+        var key, keys, nxtPlay;
         if (choice === 'Failed') {
             scope.searchAllStatus = 'failed';
-            scope.plays.forEach(function(row) {
+            for(key in scope.plays) {
-                if (row.status === 'failed') {
+                if (scope.plays[key].status === 'failed') {
-                    tmp.push(row.id);
+                    nxtPlay = key;
+                }
             }
-            });
-            tmp.sort();
-            scope.activePlay = tmp[tmp.length - 1];
         }
         else {
             scope.searchAllStatus = '';
-            scope.activePlay = scope.plays[scope.plays.length - 1].id;
+            keys = Object.keys(scope.plays);
+            nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
         }
-        scope.searchSummaryHosts();
+        SelectPlay({
-        setTimeout(function() {
+            scope: scope,
-            SelectPlay({ scope: scope, id: scope.activePlay });
+            id: nxtPlay
-        }, 2000);
+        });
+        ReloadHostSummaryList({
+            scope: scope
+        });
+        //setTimeout(function() {
+        //    SelectPlay({ scope: scope, id: scope.activePlay });
+        //}, 2000);
     };
 
     scope.viewEvent = function(event_id) {
@@ -698,7 +716,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
 
 }
 
-JobDetailController.$inject = [ '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', 'Wait',
+JobDetailController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
-    'Rest', 'ProcessErrors', 'DigestEvents', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'SelectHost', 'FilterAllByHostName', 'DrawGraph',
+    'Wait', 'Rest', 'ProcessErrors', 'ProcessEventQueue', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'SelectHost', 'FilterAllByHostName', 'DrawGraph',
-    'LoadHostSummary', 'ReloadHostSummaryList'
+    'LoadHostSummary', 'ReloadHostSummaryList', 'JobIsFinished'
 ];

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

@@ -0,0 +1,715 @@
+/************************************
+ * Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ *  JobDetail.js
+ *
+ */
+
+'use strict';
+
+function JobDetailController ($rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
+    ProcessErrors, DigestEvents, SelectPlay, SelectTask, Socket, GetElapsed, SelectHost, FilterAllByHostName, DrawGraph, LoadHostSummary, ReloadHostSummaryList,
+    JobIsFinished) {
+
+    ClearScope();
+
+    var job_id = $routeParams.id,
+        event_socket,
+        event_queue = [],
+        scope = $scope,
+        api_complete = false,
+        refresh_count = 0,
+        lastEventId = 0;
+
+    scope.plays = {};
+    scope.hosts = [];
+    scope.hostsMap = {};
+
+    scope.search_all_tasks = [];
+    scope.search_all_plays = [];
+    scope.job_status = {};
+    scope.job_id = job_id;
+    scope.auto_scroll = false;
+    scope.searchTaskHostsEnabled = true;
+    scope.searchSummaryHostsEnabled = true;
+    scope.hostTableRows = 300;
+    scope.hostSummaryTableRows = 300;
+    scope.searchAllHostsEnabled = true;
+
+    scope.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;
+
+    scope.eventsHelpText = "<p><i class=\"fa fa-circle successful-hosts-color\"></i> Successful</p>\n" +
+        "<p><i class=\"fa fa-circle changed-hosts-color\"></i> Changed</p>\n" +
+        "<p><i class=\"fa fa-circle unreachable-hosts-color\"></i> Unreachable</p>\n" +
+        "<p><i class=\"fa fa-circle failed-hosts-color\"></i> Failed</p>\n" +
+        "<div class=\"popover-footer\"><span class=\"key\">esc</span> or click to close</div>\n";
+
+    event_socket =  Socket({
+        scope: scope,
+        endpoint: "job_events"
+    });
+
+    event_socket.init();
+
+    event_socket.on("job_events-" + job_id, function(data) {
+        data.event = data.event_name;
+        $log.debug('push event: ' + data.id);
+        if (event_queue.length < 100) {
+            event_queue.push(data);
+        }
+        else {
+            // if we get too far behind, clear the queue and refresh
+            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;
+
+        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 = getMaxId(scope.hostResults);
+        }
+        else if (notEmpty(scope.tasks)) {
+            taskId = getMaxId(scope.tasks);
+        }
+        else if (notEmpty(scope.plays)) {
+            playId = getMaxId(scope.plays);
+        }
+        lastEventId = Math.max(hostId, taskId, playId);
+
+        api_complete = true;
+        Wait('stop');
+
+        DigestEvents({
+            scope: scope,
+            queue: event_queue,
+            lastEventId: lastEventId
+        });
+
+        // Draw the graph
+        if (JobIsFinished(scope)) {
+            url = scope.job.related.job_events + '?event=playbook_on_stats';
+            Rest.setUrl(url);
+            Rest.get()
+                .success(function(data) {
+                    if (data.count > 0) {
+                        LoadHostSummary({
+                            scope: scope,
+                            data: data.results[0].event_data
+                        });
+                        DrawGraph({ scope: scope, resize: true });
+                        Wait('stop');
+                    }
+                })
+                .error(function(data, status) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+        else {
+            // Draw the graph based on summary values in memory
+            DrawGraph({ scope: scope, resize: true });
+        }
+    });
+
+    if (scope.removeInitialDataLoaded) {
+        scope.removeInitialDataLoaded();
+    }
+    scope.removeInitialDataLoaded = scope.$on('InitialDataLoaded', function() {
+        // Load data for the host summary table
+        if (!api_complete) {
+            ReloadHostSummaryList({
+                scope: scope,
+                callback: 'APIComplete'
+            });
+        }
+    });
+
+    if (scope.removePlaysReady) {
+        scope.removePlaysReady();
+    }
+    scope.removePlaysReady = scope.$on('PlaysReady', function() {
+        // Select the most recent play, which will trigger tasks and hosts to load
+        var ids = Object.keys(scope.plays),
+            lastPlay = (ids.length > 0) ? ids[ids.length - 1] : null;
+        SelectPlay({
+            scope: scope,
+            id: lastPlay,
+            callback: 'InitialDataLoaded'
+        });
+    });
+
+    if (scope.removeLoadJobDetails) {
+        scope.removeLoadJobDetails();
+    }
+    scope.removeRefreshJobDetails = scope.$on('LoadJobDetails', function(e, events_url) {
+
+        // Call to load all the job bits including, plays, tasks, hosts results and host summary
+        var url = scope.job.url  + 'job_plays/?order_by=id';
+
+        scope.tasks = {};
+        scope.hostResults = [];
+        scope.hostResultsMap = {};
+        api_complete = false;
+
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data) {
+                data.forEach(function(event, idx) {
+                    var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
+                        start = event.started,
+                        end,
+                        elapsed;
+                    if (idx < data.length - 1) {
+                        // end date = starting date of the next event
+                        end = data[idx + 1].started;
+                    }
+                    else if (JobIsFinished(scope)) {
+                        // this is the last play and the job already finished
+                        end = scope.job_status.finished;
+                    }
+                    if (end) {
+                        elapsed = GetElapsed({
+                            start: start,
+                            end: end
+                        });
+                    }
+                    else {
+                        elapsed = '00:00:00';
+                    }
+                    scope.plays[event.id] = {
+                        id: event.id,
+                        name: event.play,
+                        created: start,
+                        finished: end,
+                        status: status,
+                        elapsed: elapsed,
+                        playActiveClass: ''
+                    };
+                    scope.host_summary.ok += data.ok_count;
+                    scope.host_summary.changed += data.changed_count;
+                    scope.host_summary.unreachable += (data.unreachable_count) ? data.unreachable_count : 0;
+                    scope.host_summary.failed += data.failed_count;
+                    scope.host_summary.total = scope.host_summary.ok + scope.host_summary.changed +
+                        scope.host_summary.unreachable + scope.host_summary.failed;
+                });
+
+                scope.$emit('PlaysReady', events_url);
+            })
+            .error( function(data, status) {
+                ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                    msg: 'Call to ' + url + '. GET returned: ' + status });
+            });
+    });
+
+
+    if (scope.removeGetCredentialNames) {
+        scope.removeGetCredentialNames();
+    }
+    scope.removeGetCredentialNames = scope.$on('GetCredentialNames', function(e, data) {
+        var url;
+        if (data.credential) {
+            url = GetBasePath('credentials') + data.credential + '/';
+            Rest.setUrl(url);
+            Rest.get()
+                .success( function(data) {
+                    scope.credential_name = data.name;
+                })
+                .error( function(data, status) {
+                    scope.credential_name = '';
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+        if (data.cloud_credential) {
+            url = GetBasePath('credentials') + data.credential + '/';
+            Rest.setUrl(url);
+            Rest.get()
+                .success( function(data) {
+                    scope.cloud_credential_name = data.name;
+                })
+                .error( function(data, status) {
+                    scope.credential_name = '';
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+    });
+
+
+    if (scope.removeLoadJob) {
+        scope.removeLoadJob();
+    }
+    scope.removeLoadJobRow = scope.$on('LoadJob', function() {
+        //Wait('start');
+        // Load the job record
+        Rest.setUrl(GetBasePath('jobs') + job_id + '/');
+        Rest.get()
+            .success(function(data) {
+                scope.job = data;
+                scope.job_template_name = data.name;
+                scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
+                scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
+                scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
+                scope.inventory_url = (scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
+                scope.project_url = (scope.project_name && data.project) ? '/#/projects/' + data.project : '';
+                scope.job_type = data.job_type;
+                scope.playbook = data.playbook;
+                scope.credential = data.credential;
+                scope.cloud_credential = data.cloud_credential;
+                scope.forks = data.forks;
+                scope.limit = data.limit;
+                scope.verbosity = data.verbosity;
+                scope.job_tags = data.job_tags;
+
+                // In the case that the job is already completed, or an error already happened,
+                // populate scope.job_status info
+                scope.job_status.status = (data.status === 'waiting' || data.status === 'new') ? 'pending' : data.status;
+                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.finished = data.finished;
+                scope.job_status.explanation = data.job_explanation;
+
+                if (data.started && data.finished) {
+                    scope.job_status.elapsed = GetElapsed({
+                        start: data.started,
+                        end: data.finished
+                    });
+                }
+                else {
+                    scope.job_status.elapsed = '00:00:00';
+                }
+                if ($rootScope.myInterval) {
+                    window.clearInterval($rootScope.myInterval);
+                }
+                scope.setSearchAll('host');
+                scope.$emit('LoadJobDetails', data.related.job_events);
+                scope.$emit('GetCredentialNames', data);
+            })
+            .error(function(data, status) {
+                ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                    msg: 'Failed to retrieve job: ' + $routeParams.id + '. GET returned: ' + status });
+            });
+    });
+
+    if (scope.removeRefreshCompleted) {
+        scope.removeRefreshCompleted();
+    }
+    scope.removeRefreshCompleted = scope.$on('RefreshCompleted', function() {
+        refresh_count++;
+        if (refresh_count === 1) {
+            // First time. User just loaded page.
+            scope.$emit('LoadJob');
+        }
+        else {
+            // Check if we need to redraw the group
+            setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500);
+        }
+    });
+
+    scope.adjustSize = function() {
+        var height, ww = $(window).width();
+        if (ww < 1240) {
+            $('#job-summary-container').hide();
+            $('#job-detail-container').css({ "width": "100%", "padding-right": "15px" });
+            $('#summary-button').show();
+        }
+        else {
+            $('.overlay').hide();
+            $('#summary-button').hide();
+            $('#hide-summary-button').hide();
+            $('#job-detail-container').css({ "width": "58.33333333%", "padding-right": "7px" });
+            $('#job-summary-container .job_well').css({
+                'box-shadow': 'none',
+                'height': 'auto'
+            });
+            $('#job-summary-container').css({
+                "width": "41.66666667%",
+                "padding-left": "7px",
+                "padding-right": "15px",
+                "z-index": 0
+            });
+            setTimeout(function() { $('#job-summary-container .job_well').height($('#job-detail-container').height() - 18); }, 500);
+            $('#job-summary-container').show();
+        }
+        // Detail table height adjusting. First, put page height back to 'normal'.
+        $('#plays-table-detail').height(150);
+        $('#plays-table-detail').mCustomScrollbar("update");
+        $('#tasks-table-detail').height(150);
+        $('#tasks-table-detail').mCustomScrollbar("update");
+        $('#hosts-table-detail').height(150);
+        $('#hosts-table-detail').mCustomScrollbar("update");
+        height = $('#wrap').height() - $('.site-footer').outerHeight() - $('.main-container').height();
+        if (height > 15) {
+            // there's a bunch of white space at the bottom, let's use it
+            $('#plays-table-detail').height(150 + (height / 3));
+            $('#plays-table-detail').mCustomScrollbar("update");
+            $('#tasks-table-detail').height(150 + (height / 3));
+            $('#tasks-table-detail').mCustomScrollbar("update");
+            $('#hosts-table-detail').height(150 + (height / 3));
+            $('#hosts-table-detail').mCustomScrollbar("update");
+        }
+        // Summary table height adjusting.
+        height = ($('#job-detail-container').height() / 2) - $('#hosts-summary-section .header').outerHeight() -
+            $('#hosts-summary-section .table-header').outerHeight() -
+            $('#summary-search-section').outerHeight() - 20;
+        $('#hosts-summary-table').height(height);
+        $('#hosts-summary-table').mCustomScrollbar("update");
+        scope.$emit('RefreshCompleted');
+    };
+
+    setTimeout(function() { scope.adjustSize(); }, 500);
+
+    // Use debounce for the underscore library to adjust after user resizes window.
+    $(window).resize(_.debounce(function(){
+        scope.adjustSize();
+    }, 500));
+
+    scope.setSearchAll = function(search) {
+        if (search === 'host') {
+            scope.search_all_label = 'Host';
+            scope.searchAllDisabled = false;
+            scope.search_all_placeholder = 'Search all by host name';
+        }
+        else {
+            scope.search_all_label = 'Failures';
+            scope.search_all_placeholder = 'Show failed events';
+            scope.searchAllDisabled = true;
+            scope.search_all_placeholder = '';
+        }
+    };
+
+    scope.selectPlay = function(id) {
+        SelectPlay({
+            scope: scope,
+            id: id
+        });
+    };
+
+    scope.selectTask = function(id) {
+        SelectTask({
+            scope: scope,
+            id: id
+        });
+    };
+
+    scope.toggleSummary = function(hide) {
+        var docw, doch, height = $('#job-detail-container').height(), slide_width;
+        if (!hide) {
+            docw = $(window).width();
+            doch = $(window).height();
+            slide_width = (docw < 840) ? '100%' : '80%';
+            $('#summary-button').hide();
+            $('.overlay').css({
+                width: $(document).width(),
+                height: $(document).height()
+            }).show();
+
+            // Adjust the summary table height
+            $('#job-summary-container .job_well').height(height - 18).css({
+                'box-shadow': '-3px 3px 5px 0 #ccc'
+            });
+            height = Math.floor($('#job-detail-container').height() * 0.5) -
+                $('#hosts-summary-section .header').outerHeight() -
+                $('#hosts-summary-section .table-header').outerHeight() -
+                $('#hide-summary-button').outerHeight() -
+                $('#summary-search-section').outerHeight() -
+                $('#hosts-summary-section .header').outerHeight() -
+                $('#hosts-summary-section .legend').outerHeight();
+            $('#hosts-summary-table').height(height - 50);
+            $('#hosts-summary-table').mCustomScrollbar("update");
+
+            $('#hide-summary-button').show();
+
+            $('#job-summary-container').css({
+                top: 0,
+                right: 0,
+                width: slide_width,
+                'z-index': 2000,
+                'padding-right': '15px',
+                'padding-left': '15px'
+            }).show('slide', {'direction': 'right'});
+
+            setTimeout(function() { DrawGraph({ scope: scope, resize: true }); }, 500);
+        }
+        else {
+            $('.overlay').hide();
+            $('#summary-button').show();
+            $('#job-summary-container').hide('slide', {'direction': 'right'});
+        }
+    };
+
+    scope.objectIsEmpty = function(obj) {
+        if (angular.isObject(obj)) {
+            return (Object.keys(obj).length > 0) ? false : true;
+        }
+        return true;
+    };
+
+    scope.HostDetailOnTotalScroll = _.debounce(function() {
+        // Called when user scrolls down (or forward in time). Using _.debounce
+        var url, mcs = arguments[0];
+        scope.$apply(function() {
+            if (!scope.auto_scroll && 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';
+                Wait('start');
+                Rest.setUrl(url);
+                Rest.get()
+                    .success(function(data) {
+                        data.results.forEach(function(row) {
+                            scope.hostResults.push({
+                                id: row.id,
+                                status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
+                                host_id: row.host,
+                                task_id: row.parent,
+                                name: row.event_data.host,
+                                created: row.created,
+                                msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
+                            });
+                            if (scope.hostResults.length > scope.hostTableRows) {
+                                scope.hostResults.splice(0,1);
+                            }
+                        });
+                        if (data.next) {
+                            // there are more rows. move dragger up, letting user know.
+                            setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700);
+                        }
+                        scope.auto_scroll = false;
+                        Wait('stop');
+                    })
+                    .error(function(data, status) {
+                        ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                            msg: 'Call to ' + url + '. GET returned: ' + status });
+                    });
+            }
+            else {
+                scope.auto_scroll = false;
+            }
+        });
+    }, 300);
+
+    scope.HostDetailOnTotalScrollBack = _.debounce(function() {
+        // 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) {
+                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';
+                Wait('start');
+                Rest.setUrl(url);
+                Rest.get()
+                    .success(function(data) {
+                        data.results.forEach(function(row) {
+                            scope.hostResults.unshift({
+                                id: row.id,
+                                status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
+                                host_id: row.host,
+                                task_id: row.parent,
+                                name: row.event_data.host,
+                                created: row.created,
+                                msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
+                            });
+                            if (scope.hostResults.length > scope.hostTableRows) {
+                                scope.hostResults.pop();
+                            }
+                        });
+                        if (data.next) {
+                            // there are more rows. move dragger down, letting user know.
+                            setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700);
+                        }
+                        Wait('stop');
+                        scope.auto_scroll = false;
+                    })
+                    .error(function(data, status) {
+                        ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                            msg: 'Call to ' + url + '. GET returned: ' + status });
+                    });
+            }
+            else {
+                scope.auto_scroll = false;
+            }
+        });
+    }, 300);
+
+    scope.HostSummaryOnTotalScroll = function(mcs) {
+        var url;
+        if (!scope.auto_scroll && 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';
+            Wait('start');
+            Rest.setUrl(url);
+            Rest.get()
+                .success(function(data) {
+                    setTimeout(function() {
+                        scope.$apply(function() {
+                            data.results.forEach(function(row) {
+                                scope.hosts.push({
+                                    id: row.host,
+                                    name: row.summary_fields.host.name,
+                                    ok: row.ok,
+                                    changed: row.changed,
+                                    unreachable: row.dark,
+                                    failed: row.failures
+                                });
+                                if (scope.hosts.length > scope.hostSummaryTableRows) {
+                                    scope.hosts.splice(0,1);
+                                }
+                            });
+                            if (data.next) {
+                                // there are more rows. move dragger up, letting user know.
+                                setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop - 15) + 'px'}); }, 700);
+                            }
+                        });
+                    }, 100);
+                    Wait('stop');
+                })
+                .error(function(data, status) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+        else {
+            scope.auto_scroll = false;
+        }
+    };
+
+    scope.HostSummaryOnTotalScrollBack = function(mcs) {
+        var url;
+        if (!scope.auto_scroll && 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';
+            Wait('start');
+            Rest.setUrl(url);
+            Rest.get()
+                .success(function(data) {
+                    setTimeout(function() {
+                        scope.$apply(function() {
+                            data.results.forEach(function(row) {
+                                scope.hosts.unshift({
+                                    id: row.host,
+                                    name: row.summary_fields.host.name,
+                                    ok: row.ok,
+                                    changed: row.changed,
+                                    unreachable: row.dark,
+                                    failed: row.failures
+                                });
+                                if (scope.hosts.length > scope.hostSummaryTableRows) {
+                                    scope.hosts.pop();
+                                }
+                            });
+                            if (data.next) {
+                                // there are more rows. move dragger down, letting user know.
+                                setTimeout(function() { $('#hosts-summary-table .mCSB_dragger').css({ top: (mcs.draggerTop + 15) + 'px' }); }, 700);
+                            }
+                        });
+                    }, 100);
+                    Wait('stop');
+                })
+                .error(function(data, status) {
+                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        }
+        else {
+            scope.auto_scroll = false;
+        }
+    };
+
+    scope.searchAllByHost = function() {
+        var nxtPlay;
+        if (scope.search_all_hosts_name) {
+            FilterAllByHostName({
+                scope: scope,
+                host: scope.search_all_hosts_name
+            });
+            scope.searchAllHostsEnabled = false;
+        }
+        else {
+            scope.search_all_tasks = [];
+            scope.search_all_plays = [];
+            scope.searchAllHostsEnabled = true;
+            nxtPlay = scope.plays[scope.plays.length - 1].id;
+            SelectPlay({
+                scope: scope,
+                id: nxtPlay
+            });
+            ReloadHostSummaryList({
+                scope: scope
+            });
+        }
+    };
+
+    scope.allHostNameKeyPress = function(e) {
+        if (e.keyCode === 13) {
+            scope.searchAllByHost();
+        }
+    };
+
+    scope.filterByStatus = function(choice) {
+        var key, keys, nxtPlay;
+        if (choice === 'Failed') {
+            scope.searchAllStatus = 'failed';
+            for(key in scope.plays) {
+                if (scope.plays[key].status === 'failed') {
+                    nxtPlay = key;
+                }
+            }
+        }
+        else {
+            scope.searchAllStatus = '';
+            keys = Object.keys(scope.plays);
+            nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
+        }
+        SelectPlay({
+            scope: scope,
+            id: nxtPlay
+        });
+        ReloadHostSummaryList({
+            scope: scope
+        });
+        //setTimeout(function() {
+        //    SelectPlay({ scope: scope, id: scope.activePlay });
+        //}, 2000);
+    };
+
+    scope.viewEvent = function(event_id) {
+        $log.debug(event_id);
+    };
+
+}
+
+JobDetailController.$inject = [ '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
+    'Wait', 'Rest', 'ProcessErrors', 'DigestEvents', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'SelectHost', 'FilterAllByHostName', 'DrawGraph',
+    'LoadHostSummary', 'ReloadHostSummaryList', 'JobIsFinished'
+];

awx/ui/static/js/controllers/Jobs.js

@@ -92,7 +92,6 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
         var event;
         listCount=0;
         if (event_queue.length > 0) {
-            //console.log('found queued events');
             event = event_queue[0];
             processEvent(event);
             event_queue.splice(0,1);
@@ -107,9 +106,6 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
                 }
             });
         }
-        //else {
-            //console.log('no more events');
-        //}
     });
 
     LoadBreadCrumbs();

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

@@ -39,45 +39,61 @@
 
 angular.module('JobDetailHelper', ['Utilities', 'RestServices'])
 
-.factory('DigestEvents', ['UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult', 'SelectPlay', 'SelectTask',
+.factory('ProcessEventQueue', ['$log', 'DigestEvent', 'JobIsFinished', function ($log, DigestEvent, JobIsFinished) {
-    'GetHostCount', 'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary',
+    return function(params) {
-function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTask, GetHostCount, GetElapsed,
+        var scope = params.scope,
-    UpdateTaskStatus, DrawGraph, LoadHostSummary) {
+            eventQueue = params.eventQueue,
+            event;
+        function runTheQ() {
+            while (eventQueue.length > 0) {
+                event = eventQueue.pop();
+                $log.debug('read event: ' + event.id);
+                DigestEvent({ scope: scope, event: event });
+            }
+            if (!JobIsFinished(scope) && !scope.haltEventQueue) {
+                setTimeout( function() {
+                    runTheQ();
+                }, 300);
+            }
+        }
+        runTheQ();
+    };
+}])
+
+.factory('DigestEvent', ['$rootScope', '$log', 'UpdatePlayStatus', 'UpdateHostStatus', 'AddHostResult', 'SelectPlay', 'SelectTask',
+    'GetHostCount', 'GetElapsed', 'UpdateTaskStatus', 'DrawGraph', 'LoadHostSummary', 'JobIsFinished',
+function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTask, GetHostCount, GetElapsed,
+    UpdateTaskStatus, DrawGraph, LoadHostSummary, JobIsFinished) {
     return function(params) {
 
         var scope = params.scope,
-            events = params.events;
+            event = params.event,
+            hostCount;
 
-        events.forEach(function(event) {
+        switch (event.event) {
-            var hostCount;
+            case 'playbook_on_start':
-
+                if (!JobIsFinished(scope)) {
-            if (event.event === 'playbook_on_start') {
-                if (scope.job_status.status!== 'failed' && scope.job_status.status !== 'canceled' &&
-                    scope.job_status.status !== 'error' && scope.job_status !== 'successful') {
                     scope.job_status.started = event.created;
                     scope.job_status.status = 'running';
                 }
-            }
+                break;
 
-            if (event.event === 'playbook_on_play_start') {
+            case 'playbook_on_play_start':
                 scope.plays[event.id] = {
                     id: event.id,
                     name: event.play,
                     created: event.created,
-                    status: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none',
+                    status: (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful',
                     elapsed: '00:00:00'
                 };
-                SelectPlay({
+                scope.tasks = {};
-                    scope: scope,
+                scope.hostResults = [];
-                    id: event.id
+                scope.hostResultsMap = {};
-                });
+                scope.activePlay = event.id;
-            }
+                break;
-            if (event.event === 'playbook_on_setup') {
+
+            case 'playbook_on_setup':
                 if (scope.activePlay === event.parent) {
-                    hostCount = GetHostCount({
-                        scope: scope,
-                        play_id: event.parent
-                    });
                     scope.tasks[event.id] = {
                         id: event.id,
                         play_id: event.parent,
@@ -85,7 +101,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                         status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
                         created: event.created,
                         modified: event.modified,
-                        hostCount: hostCount,
+                        hostCount: 0,
                         reportedHosts: 0,
                         successfulCount: 0,
                         failedCount: 0,
@@ -96,10 +112,9 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                         changedStyle: { display: 'none' },
                         skippedStyle: { display: 'none' }
                     };
-                    SelectTask({
+                    scope.hostResults = [];
-                        scope: scope,
+                    scope.hostResultsMap = {};
-                        id: event.id
+                    scope.activeTask = event.id;
-                    });
                 }
                 UpdatePlayStatus({
                     scope: scope,
@@ -108,23 +123,11 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                     changed: event.changed,
                     modified: event.modified
                 });
-            }
+                break;
-            if (event.event === 'playbook_on_no_hosts_matched') {
+
-                UpdatePlayStatus({
+            case 'playbook_on_task_start':
-                    scope: scope,
-                    play_id: event.parent,
-                    failed: true,
-                    changed: false,
-                    modified: event.modified,
-                    status_text: 'failed- no hosts matched'
-                });
-            }
-            if (event.event === 'playbook_on_task_start') {
                 if (scope.activePlay === event.parent) {
-                    hostCount = GetHostCount({
+                    hostCount = GetHostCount({ scope: scope });
-                        scope: scope,
-                        play_id: event.parent
-                    });
                     scope.tasks[event.id] = {
                         id: event.id,
                         name: event.task,
@@ -144,10 +147,9 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                         changedStyle: { display: 'none' },
                         skippedStyle: { display: 'none' }
                     };
-                    SelectTask({
+                    scope.hostResults = [];
-                        scope: scope,
+                    scope.hostResultsMap = {};
-                        id: event.id
+                    scope.activeTask = event.id;
-                    });
                 }
                 if (event.role) {
                     scope.hasRoles = true;
@@ -159,36 +161,64 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                     changed: event.changed,
                     modified: event.modified
                 });
-            }
+                break;
 
-            if (event.event === 'runner_on_unreachable') {
+            case 'runner_on_ok':
+            case 'runner_on_async_ok':
+                UpdateHostStatus({
+                    scope: scope,
+                    name: event.event_data.host,
+                    host_id: event.host,
+                    task_id: event.parent,
+                    status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
+                    id: event.id,
+                    created: event.created,
+                    modified: event.modified,
+                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
+                });
+                break;
+
+            case 'playbook_on_no_hosts_matched':
+                UpdatePlayStatus({
+                    scope: scope,
+                    play_id: event.parent,
+                    failed: true,
+                    changed: false,
+                    modified: event.modified,
+                    status_text: 'failed- no hosts matched'
+                });
+                break;
+
+            case 'runner_on_unreachable':
                 UpdateHostStatus({
                     scope: scope,
                     name: event.event_data.host,
                     host_id: event.host,
                     task_id: event.parent,
                     status: 'unreachable',
-                    event_id: event.id,
+                    id: event.id,
                     created: event.created,
                     modified: event.modified,
                     message: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
                 });
+                break;
 
-            }
+            case 'runner_on_error':
-            if (event.event === 'runner_on_error' || event.event === 'runner_on_async_failed') {
+            case 'runner_on_async_failed':
                 UpdateHostStatus({
                     scope: scope,
                     name: event.event_data.host,
                     host_id: event.host,
                     task_id: event.parent,
                     status: 'failed',
-                    event_id: event.id,
+                    id: event.id,
                     created: event.created,
                     modified: event.modified,
                     message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
                 });
-            }
+                break;
-            if (event.event === 'runner_on_no_hosts') {
+
+            case 'runner_on_no_hosts':
                 UpdateTaskStatus({
                     scope: scope,
                     failed: event.failed,
@@ -197,34 +227,23 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                     modified: event.modified,
                     no_hosts: true
                 });
-            }
+                break;
-            if (event.event === 'runner_on_skipped') {
+
+            case 'runner_on_skipped':
                 UpdateHostStatus({
                     scope: scope,
                     name: event.event_data.host,
                     host_id: event.host,
                     task_id: event.parent,
                     status: 'skipped',
-                    event_id: event.id,
+                    id: event.id,
                     created: event.created,
                     modified: event.modified,
                     message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
                 });
-            }
+                break;
-            if (event.event === 'runner_on_ok' || event.event === 'runner_on_async_ok') {
+
-                UpdateHostStatus({
+            case 'playbook_on_stats':
-                    scope: scope,
-                    name: event.event_data.host,
-                    host_id: event.host,
-                    task_id: event.parent,
-                    status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
-                    event_id: event.id,
-                    created: event.created,
-                    modified: event.modified,
-                    message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
-                });
-            }
-            if (event.event === 'playbook_on_stats') {
                 scope.job_status.finished = event.modified;
                 scope.job_status.elapsed = GetElapsed({
                     start: scope.job_status.started,
@@ -235,8 +254,15 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                 scope.host_summary = {};
                 LoadHostSummary({ scope: scope, data: event.event_data });
                 DrawGraph({ scope: scope, resize: true });
+                break;
         }
-        });
+    };
+}])
+
+.factory('JobIsFinished', [ function() {
+    return function(scope) {
+        return (scope.job_status.status === 'failed' || scope.job_status.status === 'canceled' ||
+                    scope.job_status.status === 'error' || scope.job_status.status === 'successful');
     };
 }])
 
@@ -258,10 +284,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
         var scope = params.scope,
             taskIds;
         taskIds = Object.keys(scope.tasks);
-        if (taskIds.length > 0) {
+        return (taskIds.length > 0) ? scope.tasks[taskIds[0]].id : null;
-            return scope.tasks[taskIds.length - 1].id;
-        }
-        return null;
     };
 })
 
@@ -329,6 +352,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             status_text = params.status_text,
             play = scope.plays[id];
 
+        if (scope.plays[id]) {
             if (failed) {
                 scope.plays[id].status = 'failed';
             }
@@ -347,6 +371,8 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                 end: modified
             });
             scope.plays[id].status_text = (status_text) ? status_text : scope.plays[id].status;
+        }
+
         UpdateJobStatus({
             scope: scope,
             failed: null,
@@ -363,7 +389,9 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             id = params.task_id,
             modified = params.modified,
             no_hosts = params.no_hosts,
-            task = scope.tasks[scope.activePlay][id];
+            task = scope.tasks[id];
+
+        if (scope.tasks[id]) {
             if (no_hosts){
                 task.status = 'no-matching-hosts';
             }
@@ -379,6 +407,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                 start: task.created,
                 end: modified
             });
+
             UpdatePlayStatus({
                 scope: scope,
                 failed: failed,
@@ -387,6 +416,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                 modified: modified,
                 no_hosts: no_hosts
             });
+        }
     };
 }])
 
@@ -397,7 +427,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
         var scope = params.scope,
             status = params.status,  // successful, changed, unreachable, failed, skipped
             name = params.name,
-            event_id = params.event_id,
+            event_id = params.id,
             host_id = params.host_id,
             task_id = params.task_id,
             modified = params.modified,
@@ -419,6 +449,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             scope.host_summary.changed += (status === 'changed') ? 1 : 0;
             scope.host_summary.unreachable += (status === 'unreachable') ? 1 : 0;
             scope.host_summary.failed += (status === 'failed') ? 1 : 0;
+
             scope.hosts.push({
                 id: host_id,
                 name: name,
@@ -446,10 +477,6 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                 scope.hostsMap[host.id] = idx;
             });
             $('#tasks-table-detail').mCustomScrollbar("update");
-            /*setTimeout( function() {
-                scope.auto_scroll = true;
-                $('#hosts-summary-table').mCustomScrollbar("scrollTo", "bottom");
-            }, 700);*/
         }
 
         UpdateTaskStatus({
@@ -474,7 +501,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
 }])
 
 // Add a new host result
-.factory('AddHostResult', ['FindFirstTaskofPlay', function(FindFirstTaskofPlay) {
+.factory('AddHostResult', ['FindFirstTaskofPlay', 'SetTaskStyles', function(FindFirstTaskofPlay, SetTaskStyles) {
     return function(params) {
         var scope = params.scope,
             task_id = params.task_id,
@@ -484,10 +511,9 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             created = params.created,
             name = params.name,
             msg = params.message,
-            pId, diff, task, play_id, first;
+            play_id, first;
 
-        if (scope.activeTask === task_id && !scope.hostResultsMap[host_id]) {
+        if (!scope.hostResultsMap[host_id]) {
-            // the event applies to the currently selected task
             scope.hostResults.push({
                 id: event_id,
                 status: status,
@@ -510,59 +536,66 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
             if (scope.hostResults.length > scope.hostTableRows) {
                 scope.hostResults.splice(0,1);
             }
+            // Refresh the map
+            scope.hostResultsMap = {};
+            scope.hostResults.forEach(function(result, idx) {
+                scope.hostResultsMap[result.id] = idx;
+            });
         }
 
-        // get the correct play_id for this event. the task_id is always correct/available, but sometimes
+        // update the task
-        // the event does not have a play_id
+        if (scope.tasks[task_id]) {
-        for (pId in scope.tasks) {
+            play_id = scope.tasks[task_id].play_id;
-            if (scope.tasks[pId][task_id]) {
-                play_id = pId;
-            }
-        }
 
             first = FindFirstTaskofPlay({
                 scope: scope,
                 play_id: play_id
             });
-
-        task = scope.tasks[play_id][task_id];
             if (task_id === first) {
-            task.hostCount += 1;
+                scope.tasks[task_id].hostCount += 1;
             }
-        task.reportedHosts++;
+            scope.tasks[task_id].reportedHosts += 1;
-        task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
+            scope.tasks[task_id].failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
-        task.changedCount += (status === 'changed') ? 1 : 0;
+            scope.tasks[task_id].changedCount += (status === 'changed') ? 1 : 0;
-        task.successfulCount += (status === 'successful') ? 1 : 0;
+            scope.tasks[task_id].successfulCount += (status === 'successful') ? 1 : 0;
-        task.skippedCount += (status === 'skipped') ? 1 : 0;
+            scope.tasks[task_id].skippedCount += (status === 'skipped') ? 1 : 0;
+            SetTaskStyles({
+                scope: scope,
+                task_id: task_id
+            });
+        }
+    };
+}])
 
-        task.failedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.failedCount / task.hostCount))) : 0;
+.factory('SetTaskStyles', [ function() {
-        task.changedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.changedCount / task.hostCount))) : 0;
+    return function(params) {
-        task.skippedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.skippedCount / task.hostCount))) : 0;
+        var task_id = params.task_id,
-        task.successfulPct = (task.hostCount > 0) ? Math.ceil((100 * (task.successfulCount / task.hostCount))) : 0;
+            scope = params.scope,
+            diff;
+        scope.tasks[task_id].failedPct = (scope.tasks[task_id].hostCount > 0) ? Math.ceil((100 * (scope.tasks[task_id].failedCount / scope.tasks[task_id].hostCount))) : 0;
+        scope.tasks[task_id].changedPct = (scope.tasks[task_id].hostCount > 0) ? Math.ceil((100 * (scope.tasks[task_id].changedCount / scope.tasks[task_id].hostCount))) : 0;
+        scope.tasks[task_id].skippedPct = (scope.tasks[task_id].hostCount > 0) ? Math.ceil((100 * (scope.tasks[task_id].skippedCount / scope.tasks[task_id].hostCount))) : 0;
+        scope.tasks[task_id].successfulPct = (scope.tasks[task_id].hostCount > 0) ? Math.ceil((100 * (scope.tasks[task_id].successfulCount / scope.tasks[task_id].hostCount))) : 0;
 
-        diff = (task.failedPct + task.changedPct + task.skippedPct + task.successfulPct) - 100;
+        diff = (scope.tasks[task_id].failedPct + scope.tasks[task_id].changedPct + scope.tasks[task_id].skippedPct + scope.tasks[task_id].successfulPct) - 100;
         if (diff > 0) {
-            if (task.failedPct > diff) {
+            if (scope.tasks[task_id].failedPct > diff) {
-                task.failedPct  = task.failedPct - diff;
+                scope.tasks[task_id].failedPct  = scope.tasks[task_id].failedPct - diff;
             }
-            else if (task.changedPct > diff) {
+            else if (scope.tasks[task_id].changedPct > diff) {
-                task.changedPct = task.changedPct - diff;
+                scope.tasks[task_id].changedPct = scope.tasks[task_id].changedPct - diff;
             }
-            else if (task.skippedPct > diff) {
+            else if (scope.tasks[task_id].skippedPct > diff) {
-                task.skippedPct = task.skippedPct - diff;
+                scope.tasks[task_id].skippedPct = scope.tasks[task_id].skippedPct - diff;
             }
-            else if (task.successfulPct > diff) {
+            else if (scope.tasks[task_id].successfulPct > diff) {
-                task.successfulPct = task.successfulPct - diff;
+                scope.tasks[task_id].successfulPct = scope.tasks[task_id].successfulPct - diff;
             }
         }
-        task.successfulStyle = (task.successfulPct > 0) ? { display: 'inline-block', width: task.successfulPct + '%' } : { display: 'none' };
+        scope.tasks[task_id].successfulStyle = (scope.tasks[task_id].successfulPct > 0) ? { 'display': 'inline-block', 'width': scope.tasks[task_id].successfulPct + "%" } : { 'display': 'none' };
-        task.changedStyle = (task.changedPct > 0) ? { display: 'inline-block', width: task.changedPct + '%' } : { display: 'none' };
+        scope.tasks[task_id].changedStyle = (scope.tasks[task_id].changedPct > 0) ? { 'display': 'inline-block', 'width': scope.tasks[task_id].changedPct + "%" } : { 'display': 'none' };
-        task.skippedStyle = (task.skippedPct > 0) ? { display: 'inline-block', width: task.skippedPct + '%' } : { display: 'none' };
+        scope.tasks[task_id].skippedStyle = (scope.tasks[task_id].skippedPct > 0) ? { 'display': 'inline-block', 'width': scope.tasks[task_id].skippedPct + "%" } : { 'display': 'none' };
-        task.failedStyle = (task.failedPct > 0) ? { display: 'inline-block', width: task.failedPct + '%' } : { display: 'none' };
+        scope.tasks[task_id].failedStyle = (scope.tasks[task_id].failedPct > 0) ? { 'display': 'inline-block', 'width': scope.tasks[task_id].failedPct + "%" } : { 'display': 'none' };
-        $('#' + task.id + '-' + task.play_id + '-' + 'successful-bar').css(task.successfulStyle);
-        $('#' + task.id + '-' + task.play_id + '-' + 'changed-bar').css(task.changedStyle);
-        $('#' + task.id + '-' + task.play_id + '-' + 'skipped-bar').css(task.skippedStyle);
-        $('#' + task.id + '-' + task.play_id + '-' + 'failed-bar').css(task.failedStyle);
     };
 }])
 
@@ -570,44 +603,75 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
 .factory('SelectPlay', ['SelectTask', 'LoadTasks', function(SelectTask, LoadTasks) {
     return function(params) {
         var scope = params.scope,
-            id = params.id;
+            id = params.id,
+            callback = params.callback,
+            clear = false;
+
+        // Determine if the tasks and hostResults arrays should be initialized
+        if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
+            clear = true;
+        }
+        else {
+            clear = (scope.activePlay === id) ? false : true;  //are we moving to a new play?
+        }
 
         if (scope.plays[scope.activePlay]) {
             scope.plays[scope.activePlay].playActiveClass = '';
         }
+        if (id) {
             scope.plays[id].playActiveClass = 'active';
+        }
         scope.activePlay = id;
-        scope.activePlayName = scope.plays[id].name;
 
+        setTimeout(function() {
+            scope.$apply(function() {
                 LoadTasks({
-            scope: scope
+                    scope: scope,
+                    callback: callback,
+                    clear: clear
+                });
+            });
         });
 
     };
 }])
 
-.factory('LoadTasks', ['Rest', 'ProcessErrors', 'GetElapsed', 'SelectTask', function(Rest, ProcessErrors, GetElapsed, SelectTask) {
+.factory('LoadTasks', ['Rest', 'ProcessErrors', 'GetElapsed', 'SelectTask', 'SetTaskStyles', function(Rest, ProcessErrors, GetElapsed, SelectTask, SetTaskStyles) {
     return function(params) {
         var scope = params.scope,
             callback = params.callback,
-            url = scope.job.related.job_tasks + '?parent=' + scope.activePlay + '&order_by=id';
+            clear = params.clear,
+            url, tIds, lastId;
+
+        if (clear) {
+            scope.tasks = {};
+        }
+
+        if (scope.activePlay) {
+            url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
+            // job_tasks seems to ignore all query predicates other than event_id
+            //+ '&';
+            //url += (scope.search_all_plays.length > 0) ? 'event_id__in=' + scope.search_all_plays.join() + '&' : '';
+            //url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
+            //url += 'order_by=id';
 
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
-                var tIds, lastId;
+                    data.forEach(function(event, idx) {
-                scope.tasks = {};
-                data.results.forEach(function(event, idx) {
                         var end, elapsed;
+                        if ((!scope.searchAllStatus) || (scope.searchAllStatus === 'failed' && event.failed) &&
+                            ((!scope.search_all_hosts_name) || (scope.search_all_hosts_name && scope.search_all_tasks.indexOf(event.id)))) {
 
-                    if (idx < data.results.length - 1) {
+                            if (idx < data.length - 1) {
                                 // end date = starting date of the next event
-                        end = data.results[idx + 1].created;
+                                end = data[idx + 1].created;
                             }
                             else {
                                 // no next event (task), get the end time of the play
                                 end = scope.plays[scope.activePlay].finished;
                             }
+
                             if (end) {
                                 elapsed = GetElapsed({
                                     start: event.created,
@@ -620,25 +684,27 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
 
                             scope.tasks[event.id] = {
                                 id: event.id,
-                        play_id: event.id,
+                                play_id: scope.activePlay,
-                        name: event.event_display,
+                                name: event.name,
                                 status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
                                 created: event.created,
                                 modified: event.modified,
                                 finished: end,
                                 elapsed: elapsed,
-                        hostCount: 0,             // hostCount,
+                                hostCount: event.host_count,          // hostCount,
-                        reportedHosts: 0,
+                                reportedHosts: event.reported_hosts,
-                        successfulCount: 0,
+                                successfulCount: event.successful_count,
-                        failedCount: 0,
+                                failedCount: event.failed_count,
-                        changedCount: 0,
+                                changedCount: event.changed_count,
-                        skippedCount: 0,
+                                skippedCount: event.skipped_count,
-                        successfulStyle: { display: 'none'},
-                        failedStyle: { display: 'none' },
-                        changedStyle: { display: 'none' },
-                        skippedStyle: { display: 'none' },
                                 taskActiveClass: ''
                             };
+
+                            SetTaskStyles({
+                                scope: scope,
+                                task_id: event.id
+                            });
+                        }
                     });
 
                     // set the active task
@@ -646,17 +712,29 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                     lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
                     SelectTask({
                         scope: scope,
-                    id: lastId
+                        id: lastId,
+                        callback: callback
                     });
-
-                if (callback) {
-                    scope.$emit(callback);
-                }
                 })
                 .error(function(data) {
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                         msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
+        }
+        else {
+            // set the active task
+            //tIds = Object.keys(scope.tasks);
+            //lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
+            //console.log('selecting task: ' + lastId);
+            //console.log('tasks: ');
+            //console.log(scope.tasks);
+            scope.tasks = {};
+            SelectTask({
+                scope: scope,
+                id: null,
+                callback: callback
+            });
+        }
     };
 }])
 
@@ -665,25 +743,36 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
     return function(params) {
         var scope = params.scope,
             id = params.id,
-            callback = params.callback;
+            callback = params.callback,
+            clear=false;
 
-        scope.tasks[scope.activePlay][scope.activeTask].taskActiveClass = '';
+        if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
-        scope.tasks[scope.activePlay][id].taskActiveClass = 'active';
+            clear = true;
-        scope.activeTask = id;
-        scope.activeTaskName = scope.tasks[scope.activePlay][id].name;
-
-        if (callback) {
-            callback();
         }
+        else {
+            clear = (scope.activeTask === id) ? false : true;
+        }
+
+        if (scope.activeTask && scope.tasks[scope.activeTask]) {
+            scope.tasks[scope.activeTask].taskActiveClass = '';
+        }
+        if (id) {
+            scope.tasks[id].taskActiveClass = 'active';
+            scope.activeTaskName = scope.tasks[id].name;
+        }
+        scope.activeTask = id;
 
         $('#tasks-table-detail').mCustomScrollbar("update");
         setTimeout( function() {
             scope.auto_scroll = true;
             $('#tasks-table-detail').mCustomScrollbar("scrollTo", "bottom");
-        }, 700);
+
+        }, 1500);
 
         LoadHosts({
-            scope: scope
+            scope: scope,
+            callback: callback,
+            clear: clear
         });
     };
 }])
@@ -693,9 +782,15 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
     return function(params) {
         var scope = params.scope,
             callback = params.callback,
+            clear = params.clear,
             url;
+
+        if (clear) {
             scope.hostResults = [];
             scope.hostResultsMap = {};
+        }
+
+        if (scope.activeTask) {
             // If we have a selected task, then get the list of hosts
             url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&';
             url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
@@ -716,18 +811,24 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                         });
                         scope.hostResultsMap[event.id] = scope.hostResults.length - 1;
                     });
-                SelectHost({ scope: scope });
                     if (callback) {
                         scope.$emit(callback);
                     }
-                else {
+                    SelectHost({ scope: scope });
-                    scope.$emit('InitialDataLoaded');
-                }
                 })
                 .error(function(data, status) {
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                         msg: 'Call to ' + url + '. GET returned: ' + status });
                 });
+        }
+        else {
+            scope.hostResults = [];
+            scope.hostResultsMap = {};
+            if (callback) {
+                scope.$emit(callback);
+            }
+            SelectHost({ scope: scope });
+        }
     };
 }])
 
@@ -748,16 +849,29 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
         var scope = params.scope,
             callback = params.callback,
             url;
-        scope.hosts = [];
+
-        scope.hostsMap = {};
         url = scope.job.related.job_host_summaries + '?';
         url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&': '';
         url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
         url += 'page_size=' + scope.hostSummaryTableRows + '&order_by=host__name';
+
+        if (scope.search_all_hosts_name || scope.searchAllStatus === 'failed') {
+            // User initiated a search
+            scope.hosts = [];
+            scope.hostsMap = {};
+        }
+
         Rest.setUrl(url);
         Rest.get()
             .success(function(data) {
                 data.results.forEach(function(event) {
+                    if (scope.hostsMap[event.host]) {
+                        scope.hosts[scope.hostsMap[event.host]].ok = event.ok;
+                        scope.hosts[scope.hostsMap[event.host]].changed = event.changed;
+                        scope.hosts[scope.hostsMap[event.host]].dark = event.dark;
+                        scope.hosts[scope.hostsMap[event.host]].failures = event.failures;
+                    }
+                    else {
                         scope.hosts.push({
                             id: event.host,
                             name: event.summary_fields.host.name,
@@ -766,7 +880,8 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                             unreachable: event.dark,
                             failed: event.failures
                         });
-                    scope.hostsMap[event.id] = scope.hosts.length - 1;
+                        scope.hostsMap[event.host] = scope.hosts.length - 1;
+                    }
                 });
                 $('#hosts-summary-table').mCustomScrollbar("update");
                 if (callback) {
@@ -874,12 +989,17 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                     });
                 }, 500);
             }
+            else {
+                scope.tasks = {};
+                scope.hostResults = [];
+            }
         });
 
         if (scope.removeAllTasksReady) {
             scope.removeAllTasksReady();
         }
         scope.removeAllTasksReady = scope.$on('AllTasksReady', function() {
+            if (scope.search_all_tasks.length > 0) {
                 url = scope.job.related.job_events + '?id__in=' + scope.search_all_tasks.join();
                 Rest.setUrl(url);
                 Rest.get()
@@ -907,6 +1027,12 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                         ProcessErrors(scope, data, status, null, { hdr: 'Error!',
                             msg: 'Call to ' + url + '. GET returned: ' + status });
                     });
+            }
+            else {
+                newActivePlay = null;
+                scope.search_all_plays.push(0);
+                scope.$emit('AllPlaysReady');
+            }
         });
 
         Rest.setUrl(url);
@@ -922,9 +1048,6 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
                         scope.search_all_tasks.sort();
                     }
                 }
-                else {
-                    scope.search_all_tasks.push(0);
-                }
                 scope.$emit('AllTasksReady');
             })
             .error(function(data, status) {

awx/ui/static/js/helpers/Jobs.js

@@ -22,7 +22,6 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
     function($location, Find, DeleteJob, RelaunchJob, LogViewer) {
         return function(params) {
             var scope = params.scope,
-                parent_scope = params.parent_scope,
                 iterator = (params.iterator) ? params.iterator : scope.iterator,
                 base = $location.path().replace(/^\//, '').split('/')[0];
 
@@ -61,10 +60,7 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
             };
 
             scope.refreshJobs = function() {
-                if (base === 'jobs') {
+                if (base !== 'jobs') {
-                    parent_scope.refreshJobs();
-                }
-                else {
                     scope.search(iterator);
                 }
 

awx/ui/static/lib/ansible/filters.js

@@ -43,4 +43,26 @@ angular.module('AWFilters', [])
             }
             return input;
         };
+    }])
+
+    .filter('FilterByField', [ function() {
+        return function(input, list) {
+            var fld, key, search = {}, results = {};
+            for (fld in list) {
+                if (list[fld]) {
+                    search[fld] = list[fld];
+                }
+            }
+            if (Object.keys(search).length > 0) {
+                for (fld in search) {
+                    for (key in input) {
+                        if (input[key][fld] === search[fld]) {
+                            results[key] = input[key];
+                        }
+                    }
+                }
+                return results;
+            }
+            return input;
+        };
     }]);

awx/ui/static/partials/job_detail.html

@@ -52,7 +52,7 @@
                                 </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 | filter:{ status : searchAllStatus }) track by play_id"
+                                <div class="row cursor-pointer" ng-repeat="(play_id, play) in playList = (plays | FilterById : search_all_plays | FilterByField: { status : searchAllStatus }) track by play_id"
                                         ng-class="play.playActiveClass" ng-click="selectPlay(play.id)">
                                      <!-- | FilterById : search_all_plays | filter:{ status : searchAllStatus} -->
 
@@ -65,7 +65,7 @@
                                         <i class="fa icon-job-{{ play.status }}"></i> {{ play.name }}</span>
                                     </div>
                                 </div>
-                                <div class="row" ng-show="!playList">
+                                <div class="row" ng-show="objectIsEmpty(playList)">
                                     <div class="col-lg-12">
                                         <div class="loading-info">No plays matched</div>
                                     </div>
@@ -85,9 +85,8 @@
                             </div>
                             <div id="tasks-table-detail" aw-custom-scroll class="table-detail">
                                 <div class="row cursor-pointer"
-                                    ng-repeat="(task_id, task) in taskList = (FilterById : search_all_tasks | filter:{ status : searchAllStatus}) track by task_id"
+                                    ng-repeat="(task_id, task) in tasks track by task_id"
                                     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>
                                     <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
@@ -101,7 +100,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="!taskList">
+                                <div class="row" ng-show="objectIsEmpty(tasks)">
                                     <div class="col-lg-12">
                                         <div class="loading-info">No tasks matched</div>
                                     </div>
@@ -121,7 +120,7 @@
                             <div id="hosts-table-detail" aw-custom-scroll data-on-total-scroll="HostDetailOnTotalScroll"
                                 data-on-total-scroll-back="HostDetailOnTotalScrollBack" class="table-detail">
                                 <div id="hosts-table-detail-inner">
-                                    <div class="row" ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus })">
+                                    <div class="row" ng-repeat="result in hostResults">
                                         <!-- ng-repeat="result in results = (hostResults | filter:{ status : searchAllStatus} })" -->
                                         <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
                                             <a href="" ng-click="viewEvent(result.id)" aw-tool-tip="Event Id: {{ result.id }} Status: {{ result.status }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
@@ -130,7 +129,7 @@
                                             {{ result.msg }}
                                         </div>
                                     </div>
-                                    <div class="row" ng-show="!results">
+                                    <div class="row" ng-show="hostResults.length == 0">
                                         <div class="col-lg-12">
                                             <div class="loading-info">No hosts matched</div>
                                         </div>
@@ -161,8 +160,8 @@
                                         <input type="text" class="input-sm form-control" id="search_all_hosts_name" ng-model="search_all_hosts_name"
                                             placeholder="Host Name" ng-disabled="searchAllDisabled" ng-keypress="allHostNameKeyPress($event)" />
                                         <div id="search-all-input-icons">
-                                            <a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllHosts()"><i class="fa fa-search"></i></a>
+                                            <a class="search-icon" ng-show="searchAllHostsEnabled" ng-click="searchAllByHost()"><i class="fa fa-search"></i></a>
-                                            <a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllHosts()"><i class="fa fa-times"></i></a>
+                                            <a class="search-icon" ng-show="!searchAllHostsEnabled" ng-click="search_all_hosts_name=''; searchAllByHost()"><i class="fa fa-times"></i></a>
                                         </div>
                                     </div>
                                 </div>