fixed the host status bar graph

awx/ui/client/src/job-results/host-status-bar/host-status-bar.block.less

@@ -1,39 +1,75 @@
 @import '../../shared/branding/colors.default.less';
 
-.JobResults-hostStatusBar{
+.HostStatusBar {
     display: flex;
-    flex: 1 0 auto;
+    flex: 0 0 auto;
     width: 100%;
     margin-top: 10px;
 }
 
-.JobResults-hostStatusBar--ok{
+.HostStatusBar-ok {
     background-color: @default-succ;
     display: flex;
-    flex: 1 0 auto;
+    flex: 0 0 auto;
     height: 5px;
 }
 
-.JobResults-hostStatusBar--changed{
+.HostStatusBar-changed {
     background-color: @default-warning;
-    flex: 1 0 auto;
+    flex: 0 0 auto;
     height: 5px;
 }
 
-.JobResults-hostStatusBar--unreachable{
+.HostStatusBar-unreachable {
     background-color: @default-unreachable;
-    flex: 1 0 auto;
+    flex: 0 0 auto;
     height: 5px;
 }
 
-.JobResults-hostStatusBar--failures{
+.HostStatusBar-failures {
     background-color: @default-err;
+    flex: 0 0 auto;
+    height: 5px;
+}
+
+.HostStatusBar-skipped {
+    background-color: @default-link;
+    flex: 0 0 auto;
+    height: 5px;
+}
+
+.HostStatusBar-noData {
+    background-color: @default-icon-hov;
     flex: 1 0 auto;
     height: 5px;
 }
 
-.JobResults-hostStatusBar--skipped{
-    background-color: @default-link;
-    flex: 1 0 auto;
-    height: 5px;
+.HostStatusBar-tooltipLabel {
+    text-transform: uppercase;
+    margin-right: 15px;
+}
+
+.HostStatusBar-tooltipBadge {
+    border-radius: 5px;
+}
+
+.HostStatusBar-tooltipBadge--ok {
+    background-color: @default-succ;
+}
+
+.HostStatusBar-tooltipBadge--unreachable {
+    background-color: @default-unreachable;
+}
+
+.HostStatusBar-tooltipBadge--skipped {
+    background-color: @default-link;
+}
+
+.HostStatusBar-tooltipBadge--changed {
+    background-color: @default-warning;
+}
+
+.HostStatusBar-tooltipBadge--failures {
+    background-color: @default-err;
+
 }

awx/ui/client/src/job-results/host-status-bar/host-status-bar.directive.js

@@ -8,15 +8,32 @@
 export default [ 'templateUrl',
     function(templateUrl) {
     return {
-        scope: {
-            jobData: '='
-        },
+        scope: true,
         templateUrl: templateUrl('job-results/host-status-bar/host-status-bar'),
         restrict: 'E',
         // controller: standardOutLogController,
         link: function(scope) {
-            // All of our DOM related stuff will go in here
+            // as count is changed by event data coming in,
+            // update the host status bar
+            scope.$watch('count', function(val) {
+                Object.keys(val).forEach(key => {
+                    // reposition the hosts status bar by setting the
+                    // various flex values to the count of those hosts
+                    $(`.HostStatusBar-${key}`)
+                        .css('flex', `${val[key]} 0 auto`);
 
+                    // set the tooltip to give how many hosts of each
+                    // type
+                    if (val[key] > 0) {
+                        scope[`${key}CountTip`] = `<span class='HostStatusBar-tooltipLabel'>${key}</span><span class='badge HostStatusBar-tooltipBadge HostStatusBar-tooltipBadge--${key}'>${val[key]}</span>`;
+                    }
+                });
+
+                // if there are any hosts that have finished, don't show
+                // default grey bar
+                scope.hostsFinished = (Object
+                    .keys(val).filter(key => (val[key] > 0)).length > 0);
+            });
         }
-    }
+    };
 }];

awx/ui/client/src/job-results/host-status-bar/host-status-bar.partial.html

@@ -1,7 +1,26 @@
-<div class="JobResults-hostStatusBar">
-    <div class="JobResults-hostStatusBar--ok"></div>
-    <div class="JobResults-hostStatusBar--changed"></div>
-    <div class="JobResults-hostStatusBar--failures"></div>
-    <div class="JobResults-hostStatusBar--unreachable"></div>
-    <div class="JobResults-hostStatusBar--skipped"></div>
+<div class="HostStatusBar">
+    <div class="HostStatusBar-ok"
+        data-placement="top"
+        aw-tool-tip="{{okCountTip}}"
+        data-tip-watch="okCountTip"></div>
+    <div class="HostStatusBar-changed"
+        data-placement="top"
+        aw-tool-tip="{{changedCountTip}}"
+        data-tip-watch="changedCountTip"></div>
+    <div class="HostStatusBar-failures"
+        data-placement="top"
+        aw-tool-tip="{{failuresCountTip}}"
+        data-tip-watch="failuresCountTip"></div>
+    <div class="HostStatusBar-unreachable"
+        data-placement="top"
+        aw-tool-tip="{{unreachableCountTip}}"
+        data-tip-watch="unreachableCountTip"></div>
+    <div class="HostStatusBar-skipped"
+        data-placement="top"
+        aw-tool-tip="{{skippedCountTip}}"
+        data-tip-watch="skippedCountTip"></div>
+    <div class="HostStatusBar-noData"
+        aw-tool-tip="NO HOSTS FINISHED"
+        ng-hide="hostsFinished"
+        data-placement="top"></div>
 </div>

awx/ui/client/src/job-results/job-results.controller.js

@@ -58,6 +58,9 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', '$scope', 'ParseTypeCh
         $scope.stdoutFullScreen = !$scope.stdoutFullScreen;
     };
 
+    // Initially set the count data to have no hosts as finsihed
+    $scope.count = {ok: 0, skipped: 0, unreachable: 0, failures: 0, changed: 0};
+
     $scope.deleteJob = function() {
         jobResultsService.deleteJob($scope.job);
     };
@@ -67,20 +70,17 @@ export default ['jobData', 'jobDataOptions', 'jobLabels', '$scope', 'ParseTypeCh
     };
 
     $rootScope.event_socket.on("job_events-" + $scope.job.id, function(data) {
-        console.log(data);
         if(data.event_name === "playbook_on_stats"){
             // get the data for populating the host status bar
-            jobResultsService.getHostStatusBarCounts(data.event_data);
+            $scope.count = jobResultsService
+                .getHostStatusBarCounts(data.event_data);
         }
 
     });
 
     $rootScope.$on('JobStatusChange-jobDetails', function(e, data) {
-        console.log(data);
         if (parseInt(data.unified_job_id, 10) === parseInt($scope.job.id,10)) {
             $scope.job.status = data.status;
-
-            // $scope.job.elapsed = data.elapsed;
         }
     });
 

awx/ui/client/src/job-results/job-results.service.js

@@ -5,7 +5,7 @@
 *************************************************/
 
 
-export default ['Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErrors', '$rootScope', function (Prompt, $filter, Wait, Rest, $state, ProcessErrors, $rootScope) {
+export default ['Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErrors', function (Prompt, $filter, Wait, Rest, $state, ProcessErrors) {
     var val = {
         getHostStatusBarCounts: function(event_data) {
             var hosts = {};
@@ -64,6 +64,12 @@ export default ['Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErrors',
                 })
             };
 
+            // turn the count into an actual count, rather than a list of host
+            // names
+            Object.keys(count).forEach(key => {
+                count[key] = count[key].length;
+            });
+
             return count;
         },
         deleteJob: function(job) {