diff --git a/awx/ui/client/features/output/details.directive.js b/awx/ui/client/features/output/details.directive.js
index 8a466371f6..b34a80982f 100644
--- a/awx/ui/client/features/output/details.directive.js
+++ b/awx/ui/client/features/output/details.directive.js
@@ -539,6 +539,7 @@ function AtDetailsController (
         vm.toggleLabels = toggleLabels;
 
         $scope.$watch('started', value => { vm.started = getStartDetails(value); });
+        $scope.$watch('status', value => { vm.status = getStatusDetails(value); });
         $scope.$watch('finished', value => { vm.finished = getFinishDetails(value); });
 
         $scope.$on(resource.ws.status, (e, data) => handleSocketEvent(data));
@@ -575,6 +576,7 @@ function atDetails () {
             finished: '=',
             started: '=',
             resource: '=',
+            status: '=',
         },
     };
 }
diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js
index 87d4c7be7a..51cfdeaea7 100644
--- a/awx/ui/client/features/output/index.controller.js
+++ b/awx/ui/client/features/output/index.controller.js
@@ -62,9 +62,9 @@ function JobsIndexController (
     // Panel
     vm.title = resource.model.get('name');
 
-    // Status Bar
-    vm.status = {
-        stats: statsEvent,
+    // Stats
+    vm.stats = {
+        event: statsEvent,
         elapsed: resource.model.get('elapsed'),
         download: resource.model.get('related.stdout'),
         running: Boolean(resource.model.get('started')) && !resource.model.get('finished'),
@@ -75,6 +75,7 @@ function JobsIndexController (
     // Details
     vm.details = {
         resource,
+        status: resource.model.get('status'),
         started: resource.model.get('started'),
         finished: resource.model.get('finished'),
     };
@@ -106,7 +107,7 @@ function JobsIndexController (
         up: scrollPageUp
     };
 
-    render.requestAnimationFrame(() => init(!vm.status.running));
+    render.requestAnimationFrame(() => init(!vm.stats.running));
 }
 
 function init (pageMode) {
@@ -134,15 +135,16 @@ function init (pageMode) {
             return shift().then(() => append(events, true));
         },
         onStart () {
-            vm.status.plays = 0;
-            vm.status.tasks = 0;
-            vm.status.running = true;
+            vm.stats.plays = 0;
+            vm.stats.tasks = 0;
+            vm.stats.running = true;
 
             vm.search.disabled = true;
+            vm.details.status = 'running';
         },
         onStop () {
-            vm.status.stats = statsEvent;
-            vm.status.running = false;
+            vm.stats.event = statsEvent;
+            vm.stats.running = false;
 
             vm.search.disabled = false;
 
@@ -166,7 +168,7 @@ function handleSocketEvent (scope, data) {
 
         vm.details.status = _.get(data, 'summary_fields.job.status');
 
-        vm.status.elapsed = moment(data.created)
+        vm.stats.elapsed = moment(data.created)
             .diff(resource.model.get('created'), 'seconds');
     }
 
@@ -175,11 +177,11 @@ function handleSocketEvent (scope, data) {
     }
 
     if (data.event === PLAY_START) {
-        vm.status.plays++;
+        vm.stats.plays++;
     }
 
     if (data.event === TASK_START) {
-        vm.status.tasks++;
+        vm.stats.tasks++;
     }
 
     if (data.event === JOB_END) {
diff --git a/awx/ui/client/features/output/index.view.html b/awx/ui/client/features/output/index.view.html
index 1e900cdfcc..1cac800a7d 100644
--- a/awx/ui/client/features/output/index.view.html
+++ b/awx/ui/client/features/output/index.view.html
@@ -4,7 +4,8 @@
             <at-details
                 resource="vm.details.resource"
                 started="vm.details.started"
-                finished="vm.details.finished">
+                finished="vm.details.finished"
+                status="vm.details.status">
             </at-details>
             <!-- <p><button class="btn" ng-click="vm.clear(true)">Page Mode</button></p> -->
         </at-panel>
@@ -14,13 +15,13 @@
         <at-panel class="at-Stdout">
             <div class="at-Panel-headingTitle">{{ vm.title }}</div>
             <at-stats
-                download="vm.status.download"
-                elapsed="vm.status.elapsed"
-                running="vm.status.running"
-                stats="vm.status.stats"
-                title="vm.status.title"
-                plays="vm.status.plays"
-                tasks="vm.status.tasks">
+                download="vm.stats.download"
+                elapsed="vm.stats.elapsed"
+                running="vm.stats.running"
+                event="vm.stats.event"
+                title="vm.stats.title"
+                plays="vm.stats.plays"
+                tasks="vm.stats.tasks">
             </at-stats>
             <!-- search ===================================================================================== -->
             <form ng-submit="vm.search.submitSearch()">
diff --git a/awx/ui/client/features/output/stats.directive.js b/awx/ui/client/features/output/stats.directive.js
index eb5eb288b4..06b100a646 100644
--- a/awx/ui/client/features/output/stats.directive.js
+++ b/awx/ui/client/features/output/stats.directive.js
@@ -48,7 +48,7 @@ function AtStatsController (strings) {
     };
 
     vm.init = scope => {
-        const { download, elapsed, running, stats, plays, tasks } = scope;
+        const { download, elapsed, running, event, plays, tasks } = scope;
 
         vm.download = download;
         vm.plays = plays;
@@ -56,18 +56,18 @@ function AtStatsController (strings) {
         vm.elapsed = elapsed;
         vm.running = running || false;
 
-        vm.setStats(stats);
+        vm.setStats(event);
 
         scope.$watch('elapsed', value => { vm.elapsed = value; });
         scope.$watch('running', value => { vm.running = value; });
         scope.$watch('plays', value => { vm.plays = value; });
         scope.$watch('tasks', value => { vm.tasks = value; });
 
-        scope.$watch('stats', vm.setStats);
+        scope.$watch('event', vm.setStats);
     };
 
-    vm.setStats = stats => {
-        const counts = getHostStatusCounts(stats);
+    vm.setStats = statsEvent => {
+        const counts = getHostStatusCounts(statsEvent);
 
         HOST_STATUS_KEYS.forEach(key => {
             const count = counts[key];
@@ -79,7 +79,7 @@ function AtStatsController (strings) {
         });
 
         vm.hosts = counts.hosts;
-        vm.statsAreAvailable = Boolean(stats);
+        vm.statsAreAvailable = Boolean(statsEvent);
     };
 }
 
@@ -98,7 +98,7 @@ function atStats () {
             download: '=',
             elapsed: '=',
             running: '=',
-            stats: '=',
+            event: '=',
             plays: '=',
             tasks: '=',
         },