shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

fixed dashboard graph resizing defect

Browse Source
This commit is contained in:
Jared Tabor 2014-07-28 13:47:14 -04:00 committed by Luke Sneeringer
parent 90a0c6c8ed
commit 8d3c4c5e9a
4 changed files with 78 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
awx/ui/static/js/controllers/Home.js
View File

@ -57,6 +57,8 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
Wait('start'); Wait('start');
} }
if ($scope.removeWidgetLoaded) { if ($scope.removeWidgetLoaded) {
$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 // Once all the widgets report back 'loaded', turn off Wait widget
loadedCount++; loadedCount++;
if (loadedCount === waitCount) { if (loadedCount === waitCount) {
$(window).resize(_.debounce(function() {
Wait('start');
$scope.$emit('ResizeJobGraph');
$scope.$emit('ResizeHostGraph');
$scope.$emit('ResizeHostPieGraph');
}, 500));
$(window).resize(); $(window).resize();
Wait('stop'); Wait('stop');
} }
@ -100,6 +108,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
}); });
if ($rootScope.user_is_superuser === true) { if ($rootScope.user_is_superuser === true) {
waitCount = 5;
HostGraph({ HostGraph({
scope: $scope, scope: $scope,
target: 'dash-host-count-graph', target: 'dash-host-count-graph',

36
awx/ui/static/js/widgets/HostGraph.js
View File

@ -16,7 +16,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
var scope = params.scope, var scope = params.scope,
target = params.target, target = params.target,
html, element, url, license; html, element, url, license, license_graph;
// html = "<div class=\"graph-container\">\n"; // html = "<div class=\"graph-container\">\n";
@ -36,6 +36,21 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
url = GetBasePath('config'); 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.setUrl(url);
Rest.get() Rest.get()
.success(function (data){ .success(function (data){
@ -108,8 +123,8 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
height = $('.graph-container').height()*0.6, //nv.utils.windowSize().height/5, height = $('.graph-container').height()*0.6; //nv.utils.windowSize().height/5,
chart = nv.models.lineChart() license_graph = nv.models.lineChart()
.margin({top: 15, right: 75, bottom: 40, left: 85}) .margin({top: 15, right: 75, bottom: 40, left: 85})
.x(function(d,i) { return i ;}) .x(function(d,i) { return i ;})
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .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 .showXAxis(true) //Show the x-axis
; ;
chart.xAxis license_graph.xAxis
.axisLabel("Time") .axisLabel("Time")
.tickFormat(function(d) { .tickFormat(function(d) {
var dx = graphData[0].values[d] && graphData[0].values[d].x || 0; var dx = graphData[0].values[d] && graphData[0].values[d].x || 0;
return dx ? d3.time.format('%m/%d')(new Date(Number(dx+'000'))) : ''; 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') .axisLabel('Hosts')
.tickFormat(d3.format('.f')); .tickFormat(d3.format('.f'));
@ -135,7 +150,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.duration(500) .duration(500)
.call(chart) .call(license_graph)
.style({ .style({
// 'width': width, // 'width': width,
// 'height': height, // 'height': height,
@ -145,13 +160,10 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "src": "url(/static/fonts/OpenSans-Regular.ttf)"
}); });
// d3.selectAll(".nv-line").on("click", function () {
// alert("clicked");
// });
nv.utils.windowResize(chart.update); // nv.utils.windowResize(license_graph.update);
scope.$emit('WidgetLoaded');
return chart; return license_graph;
}, },

29
awx/ui/static/js/widgets/HostPieChart.js
View File

@ -20,7 +20,7 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
target = params.target, target = params.target,
dashboard = params.dashboard, dashboard = params.dashboard,
html, element, data, html, element, data,
canvas, context, winHeight, available_height; canvas, context, winHeight, available_height, host_pie_chart;
// html = "<div class=\"graph-container\">\n"; // html = "<div class=\"graph-container\">\n";
@ -38,6 +38,21 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
element.html(html); element.html(html);
$compile(element)(scope); $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){ if(dashboard.hosts.total+dashboard.hosts.failed>0){
data = [ data = [
{ {
@ -54,8 +69,8 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
nv.addGraph(function() { nv.addGraph(function() {
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
height = $('.graph-container').height()*0.7, //nv.utils.windowSize().height/5, height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
chart = nv.models.pieChart() host_pie_chart = nv.models.pieChart()
.margin({top: 5, right: 75, bottom: 40, left: 85}) .margin({top: 5, right: 75, bottom: 40, left: 85})
.x(function(d) { return d.label; }) .x(function(d) { return d.label; })
.y(function(d) { return d.value; }) .y(function(d) { return d.value; })
@ -66,23 +81,23 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
}) })
.color(['#00aa00', '#aa0000']); .color(['#00aa00', '#aa0000']);
chart.pie.pieLabelsOutside(true).labelType("percent"); host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
d3.select(".host-pie-chart svg") d3.select(".host-pie-chart svg")
.datum(data) .datum(data)
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.transition().duration(350) .transition().duration(350)
.call(chart) .call(host_pie_chart)
.style({ .style({
"font-family": 'Open Sans', "font-family": 'Open Sans',
"font-style": "normal", "font-style": "normal",
"font-weight":400, "font-weight":400,
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "src": "url(/static/fonts/OpenSans-Regular.ttf)"
}); });
nv.utils.windowResize(chart.update); // nv.utils.windowResize(host_pie_chart.update);
scope.$emit('WidgetLoaded'); scope.$emit('WidgetLoaded');
return chart; return host_pie_chart;
}); });
} }
else{ else{

57
awx/ui/static/js/widgets/JobStatusGraph.js
View File

@ -17,7 +17,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
var scope = params.scope, var scope = params.scope,
target = params.target, target = params.target,
// dashboard = params.dashboard, // dashboard = params.dashboard,
html, element, url, html, element, url, job_status_chart,
period="month", period="month",
job_type="all"; job_type="all";
@ -86,6 +86,20 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
createGraph(); 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) { if (scope.removeGraphDataReady) {
scope.removeGraphDataReady(); scope.removeGraphDataReady();
@ -125,8 +139,8 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
height = $('.graph-container').height()*0.7, //nv.utils.windowSize().height/5, height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
chart = nv.models.lineChart() 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. .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; }) .x(function(d,i) { return i; })
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
@ -138,29 +152,23 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
// .height(height) // .height(height)
; ;
chart.xAxis job_status_chart.xAxis
.axisLabel("Time")//.showMaxMin(true) .axisLabel("Time")//.showMaxMin(true)
.tickFormat(function(d) { .tickFormat(function(d) {
var dx = graphData[0].values[d] && graphData[0].values[d].x || 0; var dx = graphData[0].values[d] && graphData[0].values[d].x || 0;
return dx ? d3.time.format(timeFormat)(new Date(Number(dx+'000'))) : ''; 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') .axisLabel('Jobs')
.tickFormat(d3.format('.f')); .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') d3.select('.job-status-graph svg')
.datum(graphData).transition() .datum(graphData).transition()
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.duration(1000) .duration(1000)
.call(chart) .call(job_status_chart)
.style({ .style({
// 'width': width, // 'width': width,
// 'height': height, // 'height': height,
@ -170,29 +178,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "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 //On click, update with new data
d3.selectAll(".n") d3.selectAll(".n")
.on("click", function() { .on("click", function() {
period = this.getAttribute("id"); period = this.getAttribute("id");
$('#period-dropdown').replaceWith("<a id=\"period-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n"); $('#period-dropdown').replaceWith("<a id=\"period-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n");
//$('#period-dropdown').text(this.text);
// var title = $('#job-status-title').text(),
// str = title.slice(0,title.search(","))+", "+this.innerHTML;
// $('#job-status-title').html("<b>"+str+" </b>");
createGraph(); createGraph();
}); });
@ -201,14 +192,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
.on("click", function() { .on("click", function() {
job_type = this.getAttribute("id"); job_type = this.getAttribute("id");
$('#type-dropdown').replaceWith("<a id=\"type-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n"); $('#type-dropdown').replaceWith("<a id=\"type-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n");
// var title = $('#job-status-title').text(),
// str = title.slice(title.search(","));
// $('#job-status-title').html("<b>Job Status for "+this.innerHTML+" Jobs"+str+" </b>");
createGraph(); createGraph();
}); });
scope.$emit('WidgetLoaded'); scope.$emit('WidgetLoaded');
return chart; return job_status_chart;
}, },