diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less index c35ecba302..3ef1d00c45 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less +++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.block.less @@ -14,62 +14,22 @@ .DashboardGraphs-headerSection{ display: flex; - // align-items: baseline; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } -.DashboardGraphs-tab { - color: @btn-txt; - background-color: @btn-bg; - font-size: 12px; - border: 1px solid @btn-bord; - height: 30px; - border-radius: 5px; - margin-right: 20px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 5px; - padding-top: 5px; - transition: background-color 0.2s; - text-transform: uppercase; - text-align: center; +.DashboardGraphs-headerText { + flex: 1; + margin: 0px; + font-size: 14px; + font-weight: bold; + color: @default-interface-txt; white-space: nowrap; -} - -.DashboardGraphs-tab--firstTab { - width: 90px; -} - -.DashboardGraphs-tab--lastTab { - width:100px; margin-right: auto; } -.DashboardGraphs-tab:hover { - color: @btn-txt; - background-color: @btn-bg-hov; - cursor: pointer; -} - -.DashboardGraphs-tab:active { - color: @btn-txt-sel; - background-color: @btn-bg-sel; - cursor: pointer; -} - -.DashboardGraphs-tab:focus { - color: @btn-txt-sel; -} - -.DashboardGraphs-tab.is-selected { - color: @btn-txt-sel; - background-color: @btn-bg-sel; - border-color: @btn-bord-sel; -} - .DashboardGraphs-graphSection { display: block; flex: 1; @@ -218,11 +178,3 @@ .DashboardGraphs-statusFilterIcon{ padding-right: 5px; } - -.DashboardGraphs-hostStatusLabel--successful{ - text-anchor: start !important; -} - -.DashboardGraphs-hostStatusLabel--failed{ - text-anchor: end !important; -} diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.directive.js b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.directive.js index 9d5405b473..64fb391738 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.directive.js +++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.directive.js @@ -1,67 +1,22 @@ /* jshint unused: vars */ -export default - [ 'templateUrl', - function(templateUrl) { - return { - restrict: 'E', - scope: true, - templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'), - link: function(scope, element, attrs) { - function clearGraphs() { - scope.jobStatusSelected = false; - scope.hostStatusSelected = false; - } +export default ['templateUrl', + function(templateUrl) { + return { + restrict: 'E', + scope: true, + templateUrl: templateUrl('dashboard/graphs/dashboard-graphs'), + link: function(scope, element, attrs) { - function clearStatus() { - scope.isSuccessful = true; - scope.isFailed = true; - } - - scope.toggleGraphStatus = function (graphType) { - clearGraphs(); - if (graphType === "jobStatus") { - scope.jobStatusSelected = true; - } else if (graphType === "hostStatus") { - scope.hostStatusSelected = true; - } - scope.$broadcast("resizeGraphs"); - }; - - scope.toggleJobStatusGraph = function (status) { - if (status === "successful") { - scope.isSuccessful = !scope.isSuccessful; - if(!scope.isSuccessful && scope.isFailed){ - status = 'successful'; - } - else if(scope.isSuccessful && scope.isFailed){ - status = 'both'; - } - else if(!scope.isSuccessful && !scope.isFailed){ - status = 'successful'; - scope.isFailed = true; - } - } else if (status === "failed") { - scope.isFailed = !scope.isFailed; - if(scope.isSuccessful && scope.isFailed){ - status = 'both'; - } - if(scope.isSuccessful && !scope.isFailed){ - status = 'failed'; - } - else if(!scope.isSuccessful && !scope.isFailed){ - status = 'failed'; - scope.isSuccessful = true; - } - - } - scope.$broadcast("jobStatusChange", status); - }; - - // initially toggle jobStatus graph - clearStatus(); - clearGraphs(); - scope.toggleGraphStatus("jobStatus"); + function clearStatus() { + scope.isSuccessful = true; + scope.isFailed = true; } - }; - } - ]; + + clearStatus(); + scope.jobStatusSelected = true; + scope.$broadcast("resizeGraphs"); + + } + }; + } +]; diff --git a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html index f7bb5bd7b7..663a53b8ff 100644 --- a/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html +++ b/awx/ui/client/src/dashboard/graphs/dashboard-graphs.partial.html @@ -1,15 +1,8 @@
-
- Job Status -
-
- Host Status -
+

+ JOB STATUS +

Period
@@ -20,7 +13,6 @@ class="DashboardGraphs-filterDropdownText"> Past Month -
-
- - +
View
+
+ + All + + +
@@ -83,13 +84,5 @@ data="graphData.jobStatus" period="month" job-type="all">
-
- - -
diff --git a/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js b/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js deleted file mode 100644 index 87e2a82764..0000000000 --- a/awx/ui/client/src/dashboard/graphs/host-status/host-status-graph.directive.js +++ /dev/null @@ -1,164 +0,0 @@ -/************************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * All Rights Reserved - *************************************************/ - - export default - [ '$compile', - '$window', - 'adjustGraphSize', - 'templateUrl', - HostStatusGraph, - ]; - -function HostStatusGraph($compile, $window, adjustGraphSize, templateUrl) { - return { - restrict: 'E', - link: link, - templateUrl: templateUrl('dashboard/graphs/host-status/host_status_graph') - }; - - function link(scope, element, attr) { - var host_pie_chart; - - scope.$watch(attr.data, function(data) { - if (data && data.hosts) { - scope.data = data; - createGraph(); - } - }); - - function adjustHostGraphSize() { - if (angular.isUndefined(host_pie_chart)) { - return; - } - var parentHeight = element.parent().parent().height(); - var toolbarHeight = element.find('.toolbar').height(); - var container = element.find('svg').parent(); - var margins = host_pie_chart.margin(); - - var newHeight = parentHeight - toolbarHeight - margins.bottom; - - $(container).height(newHeight); - - host_pie_chart.update(); - } - - angular.element($window).on('resize', adjustHostGraphSize); - $(".DashboardGraphs-graph--hostStatusGraph").resize(adjustHostGraphSize); - - element.on('$destroy', function() { - angular.element($window).off('resize', adjustHostGraphSize); - $(".DashboardGraphs-graph--hostStatusGraph").removeResize(adjustHostGraphSize); - }); - - function createGraph() { - var data, colors, color; - if(scope.data.hosts.total+scope.data.hosts.failed>0){ - if(scope.status === "successful"){ - data = [ - { "label": "SUCCESSFUL", - "color": "#3CB878", - "value" : scope.data.hosts.total - scope.data.hosts.failed - }]; - colors = ['#3cb878']; - } - else if (scope.status === "failed"){ - data = [{ "label": "FAILED", - "color" : "#ff5850", - "value" : scope.data.hosts.failed - }]; - colors = ['#ff5850']; - } - else { - data = [ - { "label": "SUCCESSFUL", - "color": "#3CB878", - "value" : scope.data.hosts.total - scope.data.hosts.failed - } , - { "label": "FAILED", - "color" : "#ff5850", - "value" : scope.data.hosts.failed - } - ]; - colors = ['#3cb878', '#ff5850']; - } - - host_pie_chart = nv.models.pieChart() - .margin({bottom: 15}) - .x(function(d) { - return d.label +': '+ Math.round((d.value/scope.data.hosts.total)*100) + "%"; - }) - .y(function(d) { return d.value; }) - .showLabels(true) - .showLegend(false) - .growOnHover(false) - .labelThreshold(0.01) - .tooltipContent(function(x, y) { - return '

'+x+'

'+ '

' + Math.floor(y.replace(',','')) + ' HOSTS ' + '

'; - }) - .color(colors); - - d3.select(element.find('svg')[0]) - .datum(data) - .transition().duration(350) - .call(host_pie_chart) - .style({ - "font-family": 'Open Sans', - "font-style": "normal", - "font-weight":400, - "src": "url(/static/assets/OpenSans-Regular.ttf)" - }); - if(scope.status === "failed"){ - color = "#ff5850"; - } - else{ - color = "#3CB878"; - } - - d3.select(element.find(".nv-label text")[0]) - .attr("class", "DashboardGraphs-hostStatusLabel--successful") - .style({ - "font-family": 'Open Sans', - "text-anchor": "start", - "font-size": "16px", - "text-transform" : "uppercase", - "fill" : color, - "src": "url(/static/assets/OpenSans-Regular.ttf)" - }); - d3.select(element.find(".nv-label text")[1]) - .attr("class", "DashboardGraphs-hostStatusLabel--failed") - .style({ - "font-family": 'Open Sans', - "text-anchor" : "end !imporant", - "font-size": "16px", - "text-transform" : "uppercase", - "fill" : "#ff5850", - "src": "url(/static/assets/OpenSans-Regular.ttf)" - }); - - adjustGraphSize(); - return host_pie_chart; - } - else{ - // This should go in a template or something - // but I'm at the end of a card and need to get this done. - // We definitely need to refactor this, I'm letting - // good enough be good enough for right now. - var notFoundContainer = $('
'); - notFoundContainer.css({ - 'text-align': 'center', - 'width': '100%', - 'padding-top': '2em' - }); - - notFoundContainer.text('No host data'); - - element.find('svg').replaceWith(notFoundContainer); - } - - - } - } - } diff --git a/awx/ui/client/src/dashboard/graphs/host-status/host_status_graph.partial.html b/awx/ui/client/src/dashboard/graphs/host-status/host_status_graph.partial.html deleted file mode 100644 index 4f7c406a66..0000000000 --- a/awx/ui/client/src/dashboard/graphs/host-status/host_status_graph.partial.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/awx/ui/client/src/dashboard/graphs/host-status/main.js b/awx/ui/client/src/dashboard/graphs/host-status/main.js deleted file mode 100644 index c097a79fdb..0000000000 --- a/awx/ui/client/src/dashboard/graphs/host-status/main.js +++ /dev/null @@ -1,5 +0,0 @@ -import HostStatusGraphDirective from './host-status-graph.directive'; -import DashboardGraphHelpers from '../graph-helpers/main'; - -export default angular.module('HostStatusGraph', [DashboardGraphHelpers.name]) - .directive('hostStatusGraph', HostStatusGraphDirective); diff --git a/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js b/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js index f2fc2dae0b..e9f9b03cae 100644 --- a/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js +++ b/awx/ui/client/src/dashboard/graphs/job-status/job-status-graph.directive.js @@ -140,6 +140,14 @@ function JobStatusGraph($rootScope, $compile , $location, $window, Wait, adjustG scope.$parent.isSuccessful = true; recreateGraph(period, job_type); }); + + $('.o').on('click', function() { + var job_status = this.getAttribute('id'); + $('#status-dropdown').replaceWith(""+this.text+ + "\n"); + scope.$broadcast("jobStatusChange", job_status); + }); + adjustGraphSize(job_status_chart, element); } diff --git a/awx/ui/client/src/dashboard/graphs/main.js b/awx/ui/client/src/dashboard/graphs/main.js index e6a3a0d21b..705f2986b8 100644 --- a/awx/ui/client/src/dashboard/graphs/main.js +++ b/awx/ui/client/src/dashboard/graphs/main.js @@ -1,7 +1,6 @@ -import hostStatus from './host-status/main'; import jobStatus from './job-status/main'; import dashboardGraphsDirective from './dashboard-graphs.directive'; export default - angular.module('DashboardGraphModules', [hostStatus.name, jobStatus.name]) + angular.module('DashboardGraphModules', [jobStatus.name]) .directive('dashboardGraphs', dashboardGraphsDirective);