External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-02 01:08:48 -03:30
Code Issues Packages Projects Releases Wiki Activity

added empty circle for blank pie chart, and fixed sizing issue for iphone sized browsers. Added percentage for pie chart

Browse Source
This commit is contained in:
Jared Tabor
2014-07-14 12:05:32 -04:00
parent 1cd3caa986
commit 82ad3c01c2
4 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui/static/js/widgets/DashboardJobs.js
View File

@@ -132,7 +132,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
max_rows = Math.floor(height / row_height); max_rows = Math.floor(height / row_height);
if(max_rows<5){ if(max_rows<5){
$('.dashboard-jobs-list-container').height(header+page_row+search_row+30+(5*row_height)); $('.dashboard-jobs-list-container').height(header+page_row+search_row+40+(5*row_height));
// $('.dashboard-jobs-list-container').height(500); // $('.dashboard-jobs-list-container').height(500);
max_rows = 5; max_rows = 5;
} }
@@ -141,10 +141,6 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
// Set container height and return the number of allowed rows // Set container height and return the number of allowed rows
function resizeDashboardJobsWidget() { function resizeDashboardJobsWidget() {
setDashboardJobsHeight(); setDashboardJobsHeight();
// completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows;
// completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
// running_scope[RunningJobsList.iterator + '_page_size'] = max_rows;
// running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator);
jobs_scope[JobsList.iterator + '_page_size'] = max_rows; jobs_scope[JobsList.iterator + '_page_size'] = max_rows;
jobs_scope.changePageSize(JobsList.name, JobsList.iterator); jobs_scope.changePageSize(JobsList.name, JobsList.iterator);
scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows; scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows;

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

@@ -10,14 +10,17 @@
'use strict'; 'use strict';
angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
.factory('HostPieChart', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', .factory('HostPieChart', ['$rootScope', '$compile',
function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors) { //'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
function ($rootScope, $compile){
//, Rest, GetBasePath, ProcessErrors) {
return function (params) { return function (params) {
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, data,
canvas, context, winHeight, available_height;
html = "<div class=\"graph-container\">\n"; html = "<div class=\"graph-container\">\n";
@@ -26,55 +29,42 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
html += "</div>\n"; html += "</div>\n";
html +="<div class=\"row\">\n"; html +="<div class=\"row\">\n";
html += "<div class=\"host-pie-chart\"><svg></svg></div>\n"; html += "<div class=\"host-pie-chart text-center\"><svg></svg></div>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
function exampleData() {
return [
{
"label": "Successful",
"value" : dashboard.hosts.total
} ,
{
"label": "Failed",
"value" : dashboard.hosts.failed
}
];
}
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
element.html(html); element.html(html);
$compile(element)(scope); $compile(element)(scope);
url = GetBasePath('dashboard')+'graphs/inventory/'; if(dashboard.hosts.total+dashboard.hosts.failed>0){
Rest.setUrl(url); data = [
Rest.get() {
.success(function (data){ "label": "Successful",
scope.$emit('createHostPieChart', data.inventory); "color": "#00aa00",
"value" : dashboard.hosts.total
} ,
{
"label": "Failed",
"color" : "#aa0000",
"value" : dashboard.hosts.failed
}
];
})
.error(function (data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Failed to get: ' + url + ' GET returned: ' + status });
});
if (scope.removeCreateHostPieChart) {
scope.removeCreateHostPieChart();
}
scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) {
data = exampleData();
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.85, //nv.utils.windowSize().height/5, height = $('.graph-container').height(), //nv.utils.windowSize().height/5,
chart = nv.models.pieChart() 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; })
.showLabels(true); .showLabels(true)
.color(['#00aa00', '#aa0000']);
chart.pie.pieLabelsOutside(true).labelType("percent");
d3.select(".host-pie-chart svg") d3.select(".host-pie-chart svg")
.datum(data) .datum(data)
@@ -86,7 +76,25 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
scope.$emit('WidgetLoaded'); scope.$emit('WidgetLoaded');
return chart; return chart;
}); });
}); }
else{
winHeight = $(window).height();
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
$('.graph-container:eq(1)').height(available_height/2);
$('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="100" height="100"></canvas>');
canvas = document.getElementById("circlecanvas");
context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
//context.beginPath();
context.globalAlpha = 0.4;
context.fillStyle = '#A9A9A9';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#1778c3';
context.stroke();
scope.$emit('WidgetLoaded');
}
}; };
} }
]); ]);

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

@@ -171,14 +171,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
}); });
nv.utils.windowResize(function(){ nv.utils.windowResize(function(){
if($(window).width()<500){
// var winWidth = $(window).width(), $('.graph-container').height(300);
var winHeight = $(window).height(), }
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93; else{
// console.log("available_height: " + available_height); var winHeight = $(window).height(),
$('.graph-container').height(available_height/2); available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
// console.log("graph-container height: "+$('.graph-container').height()); $('.graph-container').height(available_height/2);
chart.update(); chart.update();
}
}); });
// nv.utils.windowResize(chart.update); // nv.utils.windowResize(chart.update);

6
awx/ui/static/less/new-dashboard.less
View File

@@ -47,6 +47,12 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
#replacementImg{
align:center;
width: 100px:
height: 100px;
}
#dashboard-tab-content{ #dashboard-tab-content{
padding-top: 5px; padding-top: 5px;