diff --git a/awx/ui/client/src/job-results/host-event/host-event.controller.js b/awx/ui/client/src/job-results/host-event/host-event.controller.js
index 6015dd3a63..e6c5fc71c7 100644
--- a/awx/ui/client/src/job-results/host-event/host-event.controller.js
+++ b/awx/ui/client/src/job-results/host-event/host-event.controller.js
@@ -6,10 +6,10 @@
 
 
  export default
-    ['$stateParams', '$scope', '$state', 'Wait', 'JobDetailService', 'hostEvent', 'hostResults',
-    function($stateParams, $scope, $state, Wait, JobDetailService, hostEvent, hostResults){
+    ['$stateParams', '$scope', '$state', 'Wait', 'jobResultsService', 'hostEvent', 'hostResults',
+    function($stateParams, $scope, $state, Wait, jobResultsService, hostEvent, hostResults){
 
-        $scope.processEventStatus = JobDetailService.processEventStatus;
+        $scope.processEventStatus = jobResultsService.processEventStatus;
         $scope.hostResults = [];
         // Avoid rendering objects in the details fieldset
         // ng-if="processResults(value)" via host-event-details.partial.html
diff --git a/awx/ui/client/src/job-results/host-event/host-event.route.js b/awx/ui/client/src/job-results/host-event/host-event.route.js
index 23d5fe2451..eb796fa7df 100644
--- a/awx/ui/client/src/job-results/host-event/host-event.route.js
+++ b/awx/ui/client/src/job-results/host-event/host-event.route.js
@@ -13,14 +13,14 @@ var hostEventModal = {
     templateUrl: templateUrl('job-results/host-event/host-event-modal'),
     'abstract': false,
     resolve: {
-        hostEvent: ['JobDetailService', '$stateParams', function(JobDetailService, $stateParams) {
-            return JobDetailService.getRelatedJobEvents($stateParams.id, {
+        hostEvent: ['jobResultsService', '$stateParams', function(jobResultsService, $stateParams) {
+            return jobResultsService.getRelatedJobEvents($stateParams.id, {
                 id: $stateParams.eventId
             }).then(function(res) {
                 return res.data.results[0]; });
         }],
-        hostResults: ['JobDetailService', '$stateParams', function(JobDetailService, $stateParams) {
-            return JobDetailService.getJobEventChildren($stateParams.taskId).then(res => res.data.results);
+        hostResults: ['jobResultsService', '$stateParams', function(jobResultsService, $stateParams) {
+            return jobResultsService.getJobEventChildren($stateParams.taskId).then(res => res.data.results);
         }]
     },
     onExit: function() {
diff --git a/awx/ui/client/src/job-results/job-results.service.js b/awx/ui/client/src/job-results/job-results.service.js
index cb51dc8864..3817a922b8 100644
--- a/awx/ui/client/src/job-results/job-results.service.js
+++ b/awx/ui/client/src/job-results/job-results.service.js
@@ -5,8 +5,8 @@
 *************************************************/
 
 
-export default ['$q', 'Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErrors', 'InitiatePlaybookRun', 'GetBasePath', 'Alert',
-function ($q, Prompt, $filter, Wait, Rest, $state, ProcessErrors, InitiatePlaybookRun, GetBasePath, Alert) {
+export default ['$q', 'Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErrors', 'InitiatePlaybookRun', 'GetBasePath', 'Alert', '$rootScope',
+function ($q, Prompt, $filter, Wait, Rest, $state, ProcessErrors, InitiatePlaybookRun, GetBasePath, Alert, $rootScope) {
     var val = {
         // the playbook_on_stats event returns the count data in a weird format.
         // format to what we need!
@@ -190,6 +190,100 @@ function ($q, Prompt, $filter, Wait, Rest, $state, ProcessErrors, InitiatePlaybo
                 });
 
             return val.promise;
+        },
+        // Generate a helper class for job_event statuses
+        // the stack for which status to display is
+        // unreachable > failed > changed > ok
+        // uses the API's runner events and convenience properties .failed .changed to determine status.
+        // see: job_event_callback.py for more filters to support
+        processEventStatus: function(event){
+            if (event.event === 'runner_on_unreachable'){
+                return {
+                    class: 'HostEvents-status--unreachable',
+                    status: 'unreachable'
+                };
+            }
+            // equiv to 'runner_on_error' && 'runner on failed'
+            if (event.failed){
+                return {
+                    class: 'HostEvents-status--failed',
+                    status: 'failed'
+                };
+            }
+            // catch the changed case before ok, because both can be true
+            if (event.changed){
+                return {
+                    class: 'HostEvents-status--changed',
+                    status: 'changed'
+                };
+            }
+            if (event.event === 'runner_on_ok' || event.event === 'runner_on_async_ok'){
+                return {
+                    class: 'HostEvents-status--ok',
+                    status: 'ok'
+                };
+            }
+            if (event.event === 'runner_on_skipped'){
+                return {
+                    class: 'HostEvents-status--skipped',
+                    status: 'skipped'
+                };
+            }
+        },
+        // GET events related to a job run
+        // e.g.
+        // ?event=playbook_on_stats
+        // ?parent=206&event__startswith=runner&page_size=200&order=host_name,counter
+        getRelatedJobEvents: function(id, params){
+            var url = GetBasePath('jobs');
+            url = url + id + '/job_events/?' + this.stringifyParams(params);
+            Rest.setUrl(url);
+            return Rest.get()
+                .success(function(data){
+                    return data;
+                })
+                .error(function(data, status) {
+                    ProcessErrors($rootScope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        },
+        getJobEventChildren: function(id){
+            var url = GetBasePath('job_events');
+            url = url + id + '/children/?order_by=host_name';
+            Rest.setUrl(url);
+            return Rest.get()
+                .success(function(data){
+                    return data;
+                })
+                .error(function(data, status) {
+                    ProcessErrors($rootScope, data, status, null, { hdr: 'Error!',
+                        msg: 'Call to ' + url + '. GET returned: ' + status });
+                });
+        },
+        stringifyParams: function(params){
+            return  _.reduce(params, (result, value, key) => {
+                return result + key + '=' + value + '&';
+            }, '');
+        },
+        // the the API passes through Ansible's event_data response
+        // we need to massage away the verbose & redundant stdout/stderr properties
+        processJson: function(data){
+            // configure fields to ignore
+            var ignored = [
+            'type',
+            'event_data',
+            'related',
+            'summary_fields',
+            'url',
+            'ansible_facts',
+            ];
+            // remove ignored properties
+            var result = _.chain(data).cloneDeep().forEach(function(value, key, collection){
+                if (ignored.indexOf(key) > -1){
+                    delete collection[key];
+                }
+            }).value();
+            return result;
         }
     };
     return val;