diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index 2fb009685c..c03cffe8af 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -57,6 +57,8 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb Wait('start'); } + + if ($scope.removeWidgetLoaded) { $scope.removeWidgetLoaded(); } @@ -64,6 +66,12 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb // Once all the widgets report back 'loaded', turn off Wait widget loadedCount++; if (loadedCount === waitCount) { + $(window).resize(_.debounce(function() { + Wait('start'); + $scope.$emit('ResizeJobGraph'); + $scope.$emit('ResizeHostGraph'); + $scope.$emit('ResizeHostPieGraph'); + }, 500)); $(window).resize(); Wait('stop'); } @@ -100,6 +108,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb }); if ($rootScope.user_is_superuser === true) { + waitCount = 5; HostGraph({ scope: $scope, target: 'dash-host-count-graph', diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js index f1c55106fd..6b8eb5c8ef 100644 --- a/awx/ui/static/js/widgets/HostGraph.js +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -16,7 +16,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) var scope = params.scope, target = params.target, - html, element, url, license; + html, element, url, license, license_graph; // html = "
\n"; @@ -36,6 +36,21 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) url = GetBasePath('config'); + if (scope.removeResizeHostGraph) { + scope.removeResizeHostGraph(); + } + scope.removeResizeHostGraph= scope.$on('ResizeHostGraph', function () { + if($(window).width()<500){ + $('.graph-container').height(300); + } + else{ + var winHeight = $(window).height(), + available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120; + $('.graph-container').height(available_height/2); + license_graph.update(); + } + }); + Rest.setUrl(url); Rest.get() .success(function (data){ @@ -108,8 +123,8 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) nv.addGraph({ generate: function() { var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, - height = $('.graph-container').height()*0.6, //nv.utils.windowSize().height/5, - chart = nv.models.lineChart() + height = $('.graph-container').height()*0.6; //nv.utils.windowSize().height/5, + license_graph = nv.models.lineChart() .margin({top: 15, right: 75, bottom: 40, left: 85}) .x(function(d,i) { return i ;}) .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! @@ -119,14 +134,14 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) .showXAxis(true) //Show the x-axis ; - chart.xAxis + license_graph.xAxis .axisLabel("Time") .tickFormat(function(d) { var dx = graphData[0].values[d] && graphData[0].values[d].x || 0; return dx ? d3.time.format('%m/%d')(new Date(Number(dx+'000'))) : ''; }); - chart.yAxis //Chart y-axis settings + license_graph.yAxis //Chart y-axis settings .axisLabel('Hosts') .tickFormat(d3.format('.f')); @@ -135,7 +150,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) .attr('width', width) .attr('height', height) .duration(500) - .call(chart) + .call(license_graph) .style({ // 'width': width, // 'height': height, @@ -145,13 +160,10 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) "src": "url(/static/fonts/OpenSans-Regular.ttf)" }); - // d3.selectAll(".nv-line").on("click", function () { - // alert("clicked"); - // }); - nv.utils.windowResize(chart.update); - - return chart; + // nv.utils.windowResize(license_graph.update); + scope.$emit('WidgetLoaded'); + return license_graph; }, diff --git a/awx/ui/static/js/widgets/HostPieChart.js b/awx/ui/static/js/widgets/HostPieChart.js index ceb7dab65d..da5d615dfb 100644 --- a/awx/ui/static/js/widgets/HostPieChart.js +++ b/awx/ui/static/js/widgets/HostPieChart.js @@ -20,7 +20,7 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) target = params.target, dashboard = params.dashboard, html, element, data, - canvas, context, winHeight, available_height; + canvas, context, winHeight, available_height, host_pie_chart; // html = "
\n"; @@ -38,6 +38,21 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) element.html(html); $compile(element)(scope); + if (scope.removeResizeHostPieGraph) { + scope.removeResizeHostPieGraph(); + } + scope.removeResizeHostPieGraph= scope.$on('ResizeHostPieGraph', function () { + if($(window).width()<500){ + $('.graph-container').height(300); + } + else{ + var winHeight = $(window).height(), + available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120; + $('.graph-container').height(available_height/2); + host_pie_chart.update(); + } + }); + if(dashboard.hosts.total+dashboard.hosts.failed>0){ data = [ { @@ -54,8 +69,8 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) nv.addGraph(function() { var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, - height = $('.graph-container').height()*0.7, //nv.utils.windowSize().height/5, - chart = nv.models.pieChart() + height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5, + host_pie_chart = nv.models.pieChart() .margin({top: 5, right: 75, bottom: 40, left: 85}) .x(function(d) { return d.label; }) .y(function(d) { return d.value; }) @@ -66,23 +81,23 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) }) .color(['#00aa00', '#aa0000']); - chart.pie.pieLabelsOutside(true).labelType("percent"); + host_pie_chart.pie.pieLabelsOutside(true).labelType("percent"); d3.select(".host-pie-chart svg") .datum(data) .attr('width', width) .attr('height', height) .transition().duration(350) - .call(chart) + .call(host_pie_chart) .style({ "font-family": 'Open Sans', "font-style": "normal", "font-weight":400, "src": "url(/static/fonts/OpenSans-Regular.ttf)" }); - nv.utils.windowResize(chart.update); + // nv.utils.windowResize(host_pie_chart.update); scope.$emit('WidgetLoaded'); - return chart; + return host_pie_chart; }); } else{ diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js index c4381dd05c..2612973663 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -17,7 +17,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) var scope = params.scope, target = params.target, // dashboard = params.dashboard, - html, element, url, + html, element, url, job_status_chart, period="month", job_type="all"; @@ -86,6 +86,20 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) createGraph(); + if (scope.removeResizeJobGraph) { + scope.removeResizeJobGraph(); + } + scope.removeResizeJobGraph= scope.$on('ResizeJobGraph', function () { + if($(window).width()<500){ + $('.graph-container').height(300); + } + else{ + var winHeight = $(window).height(), + available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120; + $('.graph-container').height(available_height/2); + job_status_chart.update(); + } + }); if (scope.removeGraphDataReady) { scope.removeGraphDataReady(); @@ -125,8 +139,8 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) nv.addGraph({ generate: function() { var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, - height = $('.graph-container').height()*0.7, //nv.utils.windowSize().height/5, - chart = nv.models.lineChart() + height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5, + job_status_chart = nv.models.lineChart() .margin({top: 5, right: 75, bottom: 80, left: 85}) //Adjust chart margins to give the x-axis some breathing room. .x(function(d,i) { return i; }) .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! @@ -138,29 +152,23 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) // .height(height) ; - chart.xAxis + job_status_chart.xAxis .axisLabel("Time")//.showMaxMin(true) .tickFormat(function(d) { var dx = graphData[0].values[d] && graphData[0].values[d].x || 0; return dx ? d3.time.format(timeFormat)(new Date(Number(dx+'000'))) : ''; }); - chart.yAxis //Chart y-axis settings + job_status_chart.yAxis //Chart y-axis settings .axisLabel('Jobs') .tickFormat(d3.format('.f')); - // d3.select('.job-status-graph svg') - // .attr('width', width) - // .attr('height', height) - // .datum(data) - // .call(chart); - d3.select('.job-status-graph svg') .datum(graphData).transition() .attr('width', width) .attr('height', height) .duration(1000) - .call(chart) + .call(job_status_chart) .style({ // 'width': width, // 'height': height, @@ -170,29 +178,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) "src": "url(/static/fonts/OpenSans-Regular.ttf)" }); - nv.utils.windowResize(function(){ - if($(window).width()<500){ - $('.graph-container').height(300); - } - else{ - var winHeight = $(window).height(), - available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120; - $('.graph-container').height(available_height/2); - chart.update(); - } - }); - // nv.utils.windowResize(chart.update); - - //On click, update with new data d3.selectAll(".n") .on("click", function() { period = this.getAttribute("id"); $('#period-dropdown').replaceWith(""+this.text+"\n"); - //$('#period-dropdown').text(this.text); - // var title = $('#job-status-title').text(), - // str = title.slice(0,title.search(","))+", "+this.innerHTML; - // $('#job-status-title').html(""+str+" "); + createGraph(); }); @@ -201,14 +192,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) .on("click", function() { job_type = this.getAttribute("id"); $('#type-dropdown').replaceWith(""+this.text+"\n"); - // var title = $('#job-status-title').text(), - // str = title.slice(title.search(",")); - // $('#job-status-title').html("Job Status for "+this.innerHTML+" Jobs"+str+" "); + createGraph(); }); scope.$emit('WidgetLoaded'); - return chart; + return job_status_chart; },