diff --git a/awx/ui/client/src/job-results/host-status-bar/host-status-bar.block.less b/awx/ui/client/src/job-results/host-status-bar/host-status-bar.block.less index 9e85b992a6..36895a6b5b 100644 --- a/awx/ui/client/src/job-results/host-status-bar/host-status-bar.block.less +++ b/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; + } diff --git a/awx/ui/client/src/job-results/host-status-bar/host-status-bar.directive.js b/awx/ui/client/src/job-results/host-status-bar/host-status-bar.directive.js index e1268336a4..3a889b0ba8 100644 --- a/awx/ui/client/src/job-results/host-status-bar/host-status-bar.directive.js +++ b/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`] = `${key}${val[key]}`; + } + }); + + // 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); + }); } - } + }; }]; diff --git a/awx/ui/client/src/job-results/host-status-bar/host-status-bar.partial.html b/awx/ui/client/src/job-results/host-status-bar/host-status-bar.partial.html index bc27f817fb..24a9170bcd 100644 --- a/awx/ui/client/src/job-results/host-status-bar/host-status-bar.partial.html +++ b/awx/ui/client/src/job-results/host-status-bar/host-status-bar.partial.html @@ -1,7 +1,26 @@ -
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/awx/ui/client/src/job-results/job-results.controller.js b/awx/ui/client/src/job-results/job-results.controller.js index 65b7d86080..69a9ac8056 100644 --- a/awx/ui/client/src/job-results/job-results.controller.js +++ b/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; } }); 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 57016653c4..5e311ca579 100644 --- a/awx/ui/client/src/job-results/job-results.service.js +++ b/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) {