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

Move HostPieChart into directive

Browse Source
This commit is contained in:
Joe Fiorini
2015-01-26 10:57:20 -05:00
parent 42fbcf3454
commit 1c4b8c0676
9 changed files with 132 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
awx/ui/static/js/app.js
View File

@@ -33,7 +33,7 @@ angular.module('Tower', [
'ngCookies',
'RestServices',
'DataServices',
'GraphDirectives',
'DashboardGraphs',
'AuthService',
'Utilities',
'LicenseHelper',
@@ -95,7 +95,6 @@ angular.module('Tower', [
'SelectionHelper',
'HostGroupsFormDefinition',
'DashboardCountsWidget',
'HostPieChartWidget',
'HostGraphWidget',
'DashboardJobsWidget',
'PortalJobsWidget',

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

@@ -25,7 +25,7 @@
* Host count graph should only be loaded if the user is a super user
*
*/
function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, HostGraph, HostPieChart, DashboardJobs,
function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, HostGraph, DashboardJobs,
ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button, graphData){
ClearScope('home');
@@ -84,9 +84,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
loadedCount++;
if (loadedCount === waitCount) {
$(window).resize(_.debounce(function() {
$scope.$emit('ResizeJobGraph');
$scope.$emit('ResizeHostGraph');
$scope.$emit('ResizeHostPieGraph');
Wait('stop');
}, 500));
$(window).resize();
@@ -97,6 +95,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
$scope.removeDashboardReady();
}
$scope.removeDashboardReady = $scope.$on('dashboardReady', function (e, data) {
nv.dev=false;
@@ -135,11 +134,6 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
target: 'dash-jobs-list',
dashboard: data
});
HostPieChart({
scope: $scope,
target: 'dash-host-status-graph',
dashboard: data
});
});
@@ -172,7 +166,8 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
Rest.setUrl(GetBasePath('dashboard'));
Rest.get()
.success(function (data) {
$scope.$emit('dashboardReady', data);
$scope.dashboardData = data;
$scope.$emit('dashboardReady', data);
})
.error(function (data, status) {
ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard: ' + status });
@@ -183,7 +178,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
}
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'HostPieChart', 'DashboardJobs',
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'DashboardJobs',
'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button', 'graphData'
];

1
awx/ui/static/js/directives/dashboard-graphs.js Normal file
View File

@@ -0,0 +1 @@
angular.module('DashboardGraphs', []);

104
awx/ui/static/js/directives/host-status-graph.js Normal file
View File

@@ -0,0 +1,104 @@
angular.module('DashboardGraphs')
.directive('hostStatusGraph', ['$compile', '$window',
function ($compile, $window) {
return {
restrict: 'E',
link: link,
templateUrl: '/static/partials/host_status_graph.html'
};
function link(scope, element, attr) {
var html, canvas, context, winHeight, available_height, host_pie_chart;
scope.$watch(attr.data, function(data) {
if (data && data.hosts) {
buildGraph(data);
}
});
function adjustGraphSize() {
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);
if(host_pie_chart){
host_pie_chart.update();
}
}
}
$window.addEventListener('resize', adjustGraphSize);
element.on('$destroy', function() {
$window.removeEventListener('resize', adjustGraphSize);
});
function buildGraph(data) {
if(data.hosts.total+data.hosts.failed>0){
data = [
{
"label": "Successful",
"color": "#00aa00",
"value" : data.hosts.total
} ,
{
"label": "Failed",
"color" : "#aa0000",
"value" : data.hosts.failed
}
];
nv.addGraph(function() {
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
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; })
.showLabels(true)
.labelThreshold(0.01)
.tooltipContent(function(x, y) {
return '<b>'+x+'</b>'+ '<p>' + Math.floor(y.replace(',','')) + ' Hosts ' + '</p>';
})
.color(['#00aa00', '#aa0000']);
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(host_pie_chart)
.style({
"font-family": 'Open Sans',
"font-style": "normal",
"font-weight":400,
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
});
// nv.utils.windowResize(host_pie_chart.update);
scope.$emit('WidgetLoaded');
return host_pie_chart;
});
}
else{
winHeight = $($window).height();
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
$('.graph-container:eq(1)').height(available_height/2);
$('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="120" height="120"></canvas>');
canvas = document.getElementById("circlecanvas");
context = canvas.getContext("2d");
context.arc(55, 55, 50, 0, Math.PI * 2, false);
context.lineWidth = 1;
context.strokeStyle = '#1778c3';
context.stroke();
context.font = "12px Open Sans";
context.fillText("No Host data",18,55);
}
}
}
}]);

3
awx/ui/static/js/directives/job-status-graph.js
View File

@@ -1,4 +1,4 @@
angular.module('GraphDirectives', [])
angular.module('DashboardGraphs')
.directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'jobStatusGraphData',
function ($rootScope, $compile , $location, $window, Wait, jobStatusGraphData) {
return {
@@ -8,7 +8,6 @@ angular.module('GraphDirectives', [])
};
function link(scope, element, attr) {
var html, url, job_status_chart,
period="month",
job_type="all";

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

@@ -1,128 +0,0 @@
/*********************************************
* Copyright (c) 2014 AnsibleWorks, Inc.
*/
/**
* @ngdoc function
* @name widgets.function:HostPieChart
* @description
* HostPieChart.js
*
* file for the host status pie chart
*
*/
'use strict';
angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
.factory('HostPieChart', ['$rootScope', '$compile',
//'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
function ($rootScope, $compile){
//, Rest, GetBasePath, ProcessErrors) {
return function (params) {
var scope = params.scope,
target = params.target,
dashboard = params.dashboard,
html, element, data,
canvas, context, winHeight, available_height, host_pie_chart;
// html = "<div class=\"graph-container\">\n";
html ="<div class=\"row\">\n";
html += "<div id=\"job-status-title\" class=\"h6 col-xs-8 text-center\"><b>Host Status</b></div>\n";
html += "</div>\n";
html +="<div class=\"row\">\n";
html += "<div class=\"host-pie-chart text-center\"><svg></svg></div>\n";
html += "</div>\n";
// html += "</div>\n";
element = angular.element(document.getElementById(target));
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);
if(host_pie_chart){
host_pie_chart.update();
}
}
});
if(dashboard.hosts.total+dashboard.hosts.failed>0){
data = [
{
"label": "Successful",
"color": "#00aa00",
"value" : dashboard.hosts.total
} ,
{
"label": "Failed",
"color" : "#aa0000",
"value" : dashboard.hosts.failed
}
];
nv.addGraph(function() {
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
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; })
.showLabels(true)
.labelThreshold(0.01)
.tooltipContent(function(x, y) {
return '<b>'+x+'</b>'+ '<p>' + Math.floor(y.replace(',','')) + ' Hosts ' + '</p>';
})
.color(['#00aa00', '#aa0000']);
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(host_pie_chart)
.style({
"font-family": 'Open Sans',
"font-style": "normal",
"font-weight":400,
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
});
// nv.utils.windowResize(host_pie_chart.update);
scope.$emit('WidgetLoaded');
return host_pie_chart;
});
}
else{
winHeight = $(window).height();
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
$('.graph-container:eq(1)').height(available_height/2);
$('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="120" height="120"></canvas>');
canvas = document.getElementById("circlecanvas");
context = canvas.getContext("2d");
context.arc(55, 55, 50, 0, Math.PI * 2, false);
context.lineWidth = 1;
context.strokeStyle = '#1778c3';
context.stroke();
context.font = "12px Open Sans";
context.fillText("No Host data",18,55);
scope.$emit('WidgetLoaded');
}
};
}
]);

12
awx/ui/static/partials/home.html
View File

@@ -12,8 +12,16 @@
<div id="dash-counts" class="col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div class="left-side col-sm-6 col-xs-12"><div id="dash-job-status-graph" class="graph-container"><job-status-graph data="graphData.jobStatus" period="month" job-type="all"></job-status-graph> </div></div>
<div class="right-side col-sm-6 col-xs-12"><div id="dash-host-status-graph" class="graph-container"></div></div>
<div class="left-side col-sm-6 col-xs-12">
<div id="dash-job-status-graph" class="graph-container">
<job-status-graph data="graphData.jobStatus" period="month" job-type="all"></job-status-graph>
</div>
</div>
<div class="right-side col-sm-6 col-xs-12">
<div id="dash-host-status-graph" class="graph-container">
<host-status-graph data="dashboardData"></host-status-graph>
</div>
</div>
</div>
<div class="row">
<div id="dash-jobs-list" class="left-side col-sm-6 col-xs-12"></div>

8
awx/ui/static/partials/host_status_graph.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="row">
<div id="job-status-title" class="h6 col-xs-8 text-center"><b>Host Status</b></div>
</div>
<div class="row">
<div class="host-pie-chart text-center"><svg></svg></div>
</div>

2
awx/ui/templates/ui/index.html
View File

@@ -82,7 +82,9 @@
<script src="{{ STATIC_URL }}js/controllers/Schedules.js"></script>
<script src="{{ STATIC_URL }}js/controllers/Sockets.js"></script>
<script src="{{ STATIC_URL }}js/services/job-status-graph-data.js"></script>
<script src="{{ STATIC_URL }}js/directives/dashboard-graphs.js"></script>
<script src="{{ STATIC_URL }}js/directives/job-status-graph.js"></script>
<script src="{{ STATIC_URL }}js/directives/host-status-graph.js"></script>
<script src="{{ STATIC_URL }}js/forms/Users.js"></script>
<script src="{{ STATIC_URL }}js/forms/Organizations.js"></script>
<script src="{{ STATIC_URL }}js/forms/Inventories.js"></script>