mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 20:00:43 -03:30
Fix jshint errors in my updates
This commit is contained in:
Joe Fiorini
parent
ffc12c3065
commit
2464d68b38
@ -400,12 +400,12 @@ angular.module('Tower', [
|
||||
templateUrl: urlPrefix + 'partials/home.html',
|
||||
controller: 'Home',
|
||||
resolve: {
|
||||
graphData: function($q, jobStatusGraphData, hostCountGraphData) {
|
||||
return $q.all({
|
||||
jobStatus: jobStatusGraphData.get("month", "all"),
|
||||
hostCounts: hostCountGraphData.get()
|
||||
});
|
||||
}
|
||||
graphData: function($q, jobStatusGraphData, hostCountGraphData) {
|
||||
return $q.all({
|
||||
jobStatus: jobStatusGraphData.get("month", "all"),
|
||||
hostCounts: hostCountGraphData.get()
|
||||
});
|
||||
}
|
||||
}
|
||||
}).
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
|
||||
|
||||
ClearScope('home');
|
||||
|
||||
var buttons, html, e, borderStyles, jobs_scope, schedule_scope;
|
||||
var buttons, html, e, borderStyles;
|
||||
|
||||
// Add buttons to the top of the Home page. We're using lib/ansible/generator_helpers.js-> Buttons()
|
||||
// to build buttons dynamically and insure all styling and icons match the rest of the application.
|
||||
@ -111,13 +111,13 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
|
||||
Wait('start');
|
||||
Rest.setUrl(GetBasePath('dashboard'));
|
||||
Rest.get()
|
||||
.success(function (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 });
|
||||
});
|
||||
.success(function (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 });
|
||||
});
|
||||
};
|
||||
|
||||
$scope.refresh();
|
||||
|
||||
@ -1,52 +1,52 @@
|
||||
angular.module('DashboardGraphs')
|
||||
.directive('autoSizeModule', ['$window', '$timeout', function($window, $timeout) {
|
||||
.directive('autoSizeModule', ['$window', '$timeout', function($window, $timeout) {
|
||||
|
||||
// Adjusts the size of the module so that all modules
|
||||
// fit into a single a page; assumes there are 2 rows
|
||||
// of modules, with the available height being offset
|
||||
// by the navbar & the count summaries module
|
||||
return function(scope, element, attr) {
|
||||
return function(scope, element) {
|
||||
|
||||
// We need to trigger a resize on the first call
|
||||
// to this when the view things load; but we don't want
|
||||
// to trigger a global window resize for everything that
|
||||
// has an auto resize, since they'll all pick it up with
|
||||
// a single call
|
||||
var triggerResize =
|
||||
_.throttle(function() {
|
||||
$($window).resize();
|
||||
// We need to trigger a resize on the first call
|
||||
// to this when the view things load; but we don't want
|
||||
// to trigger a global window resize for everything that
|
||||
// has an auto resize, since they'll all pick it up with
|
||||
// a single call
|
||||
var triggerResize =
|
||||
_.throttle(function() {
|
||||
$($window).resize();
|
||||
}, 1000);
|
||||
|
||||
function adjustSizeInitially() {
|
||||
adjustSize();
|
||||
triggerResize();
|
||||
}
|
||||
function adjustSizeInitially() {
|
||||
adjustSize();
|
||||
triggerResize();
|
||||
}
|
||||
|
||||
function adjustSize() {
|
||||
var winHeight = $($window).height(),
|
||||
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
|
||||
element.height(available_height/2);
|
||||
}
|
||||
function adjustSize() {
|
||||
var winHeight = $($window).height(),
|
||||
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
|
||||
element.height(available_height/2);
|
||||
}
|
||||
|
||||
$($window).resize(adjustSize);
|
||||
$($window).resize(adjustSize);
|
||||
|
||||
element.on('$destroy', function() {
|
||||
$($window).off('resize', adjustSize);
|
||||
});
|
||||
element.on('$destroy', function() {
|
||||
$($window).off('resize', adjustSize);
|
||||
});
|
||||
|
||||
// Wait a second or until dashboardReady triggers,
|
||||
// whichever comes first. The timeout handles cases
|
||||
// where dashboardReady never fires.
|
||||
// Wait a second or until dashboardReady triggers,
|
||||
// whichever comes first. The timeout handles cases
|
||||
// where dashboardReady never fires.
|
||||
|
||||
var dashboardReadyTimeout = $timeout(adjustSizeInitially, 500);
|
||||
var dashboardReadyTimeout = $timeout(adjustSizeInitially, 500);
|
||||
|
||||
// This makes sure count-container div is loaded
|
||||
// by controllers/Home.js before we use it
|
||||
// to determine the available window height
|
||||
scope.$on('dashboardReady', function() {
|
||||
$timeout.cancel(dashboardReadyTimeout);
|
||||
adjustSizeInitially();
|
||||
});
|
||||
// This makes sure count-container div is loaded
|
||||
// by controllers/Home.js before we use it
|
||||
// to determine the available window height
|
||||
scope.$on('dashboardReady', function() {
|
||||
$timeout.cancel(dashboardReadyTimeout);
|
||||
adjustSizeInitially();
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,116 +1,126 @@
|
||||
angular.module('DashboardGraphs').
|
||||
directive('hostCountGraph', ['GetBasePath', 'Rest', 'adjustGraphSize', '$window', function(getBasePath, Rest, adjustGraphSize, $window) {
|
||||
directive('hostCountGraph', ['GetBasePath', 'Rest', 'adjustGraphSize', '$window', function(getBasePath, Rest, adjustGraphSize, $window) {
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: '/static/partials/host_count_graph.html',
|
||||
link: link
|
||||
};
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: '/static/partials/host_count_graph.html',
|
||||
link: link
|
||||
};
|
||||
|
||||
function link(scope, element, attr) {
|
||||
var url, license, license_graph;
|
||||
function link(scope, element, attr) {
|
||||
var license_graph;
|
||||
|
||||
scope.$watch(attr.data, function(data) {
|
||||
if(!data) return;
|
||||
createGraph(data.hosts, data.license);
|
||||
});
|
||||
scope.$watch(attr.data, function(data) {
|
||||
|
||||
function onResize() {
|
||||
if(!license_graph) return;
|
||||
adjustGraphSize(license_graph, element);
|
||||
}
|
||||
if(!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
angular.element($window).on('resize', function(e) {
|
||||
if(!license_graph) return;
|
||||
adjustGraphSize(license_graph, element);
|
||||
});
|
||||
createGraph(data.hosts, data.license);
|
||||
});
|
||||
|
||||
element.on('$destroy', function() {
|
||||
angular.element($window).off('resize', onResize);
|
||||
});
|
||||
function onResize() {
|
||||
|
||||
if(!license_graph) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
function createGraph(data, license) {
|
||||
//url = getBasePath('dashboard')+'graphs/';
|
||||
var graphData = [
|
||||
{
|
||||
"key" : "Hosts" ,
|
||||
"color" : "#1778c3",
|
||||
"values": data.hosts
|
||||
},
|
||||
{
|
||||
"key" : "License" ,
|
||||
"color" : "#171717",
|
||||
"values": data.hosts
|
||||
}
|
||||
];
|
||||
|
||||
graphData.map(function(series) {
|
||||
if(series.key==="Hosts"){
|
||||
series.values = series.values.map(function(d) {
|
||||
return {
|
||||
x: d[0],
|
||||
y: d[1]
|
||||
};
|
||||
});
|
||||
adjustGraphSize(license_graph, element);
|
||||
}
|
||||
if(series.key==="License"){
|
||||
series.values = series.values.map(function(d) {
|
||||
return {
|
||||
x: d[0],
|
||||
y: license
|
||||
};
|
||||
});
|
||||
|
||||
angular.element($window).on('resize', function() {
|
||||
|
||||
if(!license_graph) {
|
||||
return;
|
||||
}
|
||||
|
||||
adjustGraphSize(license_graph, element);
|
||||
});
|
||||
|
||||
element.on('$destroy', function() {
|
||||
angular.element($window).off('resize', onResize);
|
||||
});
|
||||
|
||||
|
||||
|
||||
function createGraph(data, license) {
|
||||
//url = getBasePath('dashboard')+'graphs/';
|
||||
var graphData = [
|
||||
{ "key" : "Hosts" ,
|
||||
"color" : "#1778c3",
|
||||
"values": data.hosts
|
||||
},
|
||||
{ "key" : "License" ,
|
||||
"color" : "#171717",
|
||||
"values": data.hosts
|
||||
}
|
||||
];
|
||||
|
||||
graphData.map(function(series) {
|
||||
if(series.key==="Hosts"){
|
||||
series.values = series.values.map(function(d) {
|
||||
return {
|
||||
x: d[0],
|
||||
y: d[1]
|
||||
};
|
||||
});
|
||||
}
|
||||
if(series.key==="License"){
|
||||
series.values = series.values.map(function(d) {
|
||||
return {
|
||||
x: d[0],
|
||||
y: license
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
return series;
|
||||
|
||||
});
|
||||
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
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!
|
||||
.transitionDuration(350) //how fast do you want the lines to transition?
|
||||
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
|
||||
.showYAxis(true) //Show the y-axis
|
||||
.showXAxis(true) //Show the x-axis
|
||||
;
|
||||
|
||||
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'))) : '';
|
||||
});
|
||||
|
||||
license_graph.yAxis //Chart y-axis settings
|
||||
.axisLabel('Hosts')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
d3.select(element.find('svg')[0])
|
||||
.datum(graphData).transition()
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.duration(500)
|
||||
.call(license_graph)
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"font-weight":400,
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
adjustGraphSize(license_graph, element);
|
||||
|
||||
return license_graph;
|
||||
|
||||
}
|
||||
return series;
|
||||
|
||||
});
|
||||
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
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!
|
||||
.transitionDuration(350) //how fast do you want the lines to transition?
|
||||
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
|
||||
.showYAxis(true) //Show the y-axis
|
||||
.showXAxis(true) //Show the x-axis
|
||||
;
|
||||
|
||||
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'))) : '';
|
||||
});
|
||||
|
||||
license_graph.yAxis //Chart y-axis settings
|
||||
.axisLabel('Hosts')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
d3.select(element.find('svg')[0])
|
||||
.datum(graphData).transition()
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.duration(500)
|
||||
.call(license_graph)
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"font-weight":400,
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
adjustGraphSize(license_graph, element);
|
||||
|
||||
return license_graph;
|
||||
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -1,106 +1,102 @@
|
||||
angular.module('DashboardGraphs')
|
||||
.directive('hostStatusGraph', ['$compile', '$window',
|
||||
function ($compile, $window) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
link: link,
|
||||
templateUrl: '/static/partials/host_status_graph.html'
|
||||
};
|
||||
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;
|
||||
function link(scope, element, attr) {
|
||||
var host_pie_chart;
|
||||
|
||||
scope.$watch(attr.data, function(data) {
|
||||
if (data && data.hosts) {
|
||||
createGraph(data);
|
||||
}
|
||||
});
|
||||
scope.$watch(attr.data, function(data) {
|
||||
if (data && data.hosts) {
|
||||
createGraph(data);
|
||||
}
|
||||
});
|
||||
|
||||
function adjustGraphSize() {
|
||||
function adjustGraphSize() {
|
||||
|
||||
if (angular.isUndefined(host_pie_chart)) {
|
||||
return;
|
||||
}
|
||||
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 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;
|
||||
var newHeight = parentHeight - toolbarHeight - margins.bottom;
|
||||
|
||||
$(container).height(newHeight);
|
||||
$(container).height(newHeight);
|
||||
|
||||
host_pie_chart.update();
|
||||
}
|
||||
|
||||
angular.element($window).on('resize', adjustGraphSize);
|
||||
|
||||
element.on('$destroy', function() {
|
||||
angular.element($window).off('resize', adjustGraphSize);
|
||||
});
|
||||
|
||||
function createGraph(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
|
||||
host_pie_chart.update();
|
||||
}
|
||||
];
|
||||
|
||||
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: 25, 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']);
|
||||
angular.element($window).on('resize', adjustGraphSize);
|
||||
|
||||
host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
|
||||
|
||||
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/fonts/OpenSans-Regular.ttf)"
|
||||
element.on('$destroy', function() {
|
||||
angular.element($window).off('resize', adjustGraphSize);
|
||||
});
|
||||
|
||||
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 = $('<div></div>');
|
||||
notFoundContainer.css({
|
||||
'text-align': 'center',
|
||||
'width': '100%',
|
||||
'padding-top': '2em'
|
||||
});
|
||||
function createGraph(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
|
||||
}
|
||||
];
|
||||
|
||||
notFoundContainer.text('No host data');
|
||||
host_pie_chart = nv.models.pieChart()
|
||||
.margin({top: 5, right: 75, bottom: 25, 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']);
|
||||
|
||||
element.find('svg').replaceWith(notFoundContainer);
|
||||
}
|
||||
host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
|
||||
|
||||
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/fonts/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 = $('<div></div>');
|
||||
notFoundContainer.css({
|
||||
'text-align': 'center',
|
||||
'width': '100%',
|
||||
'padding-top': '2em'
|
||||
});
|
||||
|
||||
notFoundContainer.text('No host data');
|
||||
|
||||
element.find('svg').replaceWith(notFoundContainer);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}]);
|
||||
}]);
|
||||
|
||||
@ -1,129 +1,120 @@
|
||||
angular.module('DashboardGraphs')
|
||||
.directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'adjustGraphSize', 'jobStatusGraphData',
|
||||
function ($rootScope, $compile , $location, $window, Wait, adjustGraphSize, jobStatusGraphData) {
|
||||
function ($rootScope, $compile , $location, $window, Wait, adjustGraphSize) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: '/static/partials/job_status_graph.html',
|
||||
link: link
|
||||
restrict: 'E',
|
||||
templateUrl: '/static/partials/job_status_graph.html',
|
||||
link: link
|
||||
};
|
||||
|
||||
function link(scope, element, attr) {
|
||||
var html;
|
||||
var url;
|
||||
var job_status_chart = nv.models.lineChart();
|
||||
var cleanup = angular.noop;
|
||||
function link(scope, element, attr) {
|
||||
var job_type, job_status_chart = nv.models.lineChart();
|
||||
|
||||
scope.period="month";
|
||||
scope.jobType="all";
|
||||
scope.period="month";
|
||||
scope.jobType="all";
|
||||
|
||||
var data;
|
||||
scope.$watch(attr.data, function(value) {
|
||||
if (value) {
|
||||
createGraph(value, scope.period, scope.jobType);
|
||||
}
|
||||
});
|
||||
scope.$watch(attr.data, function(value) {
|
||||
if (value) {
|
||||
createGraph(value, scope.period, scope.jobType);
|
||||
}
|
||||
});
|
||||
|
||||
function createGraph(data, period, jobtype){
|
||||
function createGraph(data, period, jobtype){
|
||||
|
||||
scope.period = period;
|
||||
scope.jobType = jobtype;
|
||||
scope.period = period;
|
||||
scope.jobType = jobtype;
|
||||
|
||||
var timeFormat, graphData = [
|
||||
{
|
||||
"color": "#00aa00",
|
||||
"key": "Successful",
|
||||
"values": data.jobs.successful
|
||||
},
|
||||
{
|
||||
"key" : "Failed" ,
|
||||
"color" : "#aa0000",
|
||||
"values": data.jobs.failed
|
||||
var timeFormat, graphData = [
|
||||
{ "color": "#00aa00",
|
||||
"key": "Successful",
|
||||
"values": data.jobs.successful
|
||||
},
|
||||
{ "key" : "Failed" ,
|
||||
"color" : "#aa0000",
|
||||
"values": data.jobs.failed
|
||||
}
|
||||
];
|
||||
|
||||
if(period==="day") {
|
||||
timeFormat="%H:%M";
|
||||
}
|
||||
else {
|
||||
timeFormat = '%m/%d';
|
||||
}
|
||||
graphData.map(function(series) {
|
||||
series.values = series.values.map(function(d) {
|
||||
return {
|
||||
x: d[0],
|
||||
y: d[1]
|
||||
};
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
job_status_chart
|
||||
.margin({top: 5, right: 75, bottom: 40, 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!
|
||||
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
|
||||
.showYAxis(true) //Show the y-axis
|
||||
.showXAxis(true); //Show the x-axis
|
||||
|
||||
|
||||
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'))) : '';
|
||||
});
|
||||
|
||||
job_status_chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Jobs')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
d3.select(element.find('svg')[0])
|
||||
.datum(graphData)
|
||||
.call(job_status_chart)
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"font-weight":400,
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
// when the Period drop down filter is used, create a new graph based on the
|
||||
d3.selectAll(element.find(".n"))
|
||||
.on("click", function() {
|
||||
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");
|
||||
|
||||
createGraph(data, period, job_type);
|
||||
});
|
||||
|
||||
//On click, update with new data
|
||||
d3.selectAll(element.find(".m"))
|
||||
.on("click", function() {
|
||||
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");
|
||||
|
||||
createGraph(data, period, job_type);
|
||||
});
|
||||
|
||||
adjustGraphSize(job_status_chart, element);
|
||||
}
|
||||
];
|
||||
|
||||
if(period==="day") {
|
||||
timeFormat="%H:%M";
|
||||
function onResize() {
|
||||
adjustGraphSize(job_status_chart, element);
|
||||
}
|
||||
else {
|
||||
timeFormat = '%m/%d';
|
||||
|
||||
angular.element($window).on('resize', onResize);
|
||||
|
||||
element.on('$destroy', function() {
|
||||
angular.element($window).off('resize', onResize);
|
||||
});
|
||||
|
||||
if (scope.removeGraphDataReady) {
|
||||
scope.removeGraphDataReady();
|
||||
}
|
||||
graphData.map(function(series) {
|
||||
series.values = series.values.map(function(d) {
|
||||
return {
|
||||
x: d[0],
|
||||
y: d[1]
|
||||
};
|
||||
});
|
||||
return series;
|
||||
});
|
||||
|
||||
job_status_chart
|
||||
.margin({top: 5, right: 75, bottom: 40, 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!
|
||||
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
|
||||
.showYAxis(true) //Show the y-axis
|
||||
.showXAxis(true); //Show the x-axis
|
||||
|
||||
|
||||
var width = $('.graph-container').width(); // nv.utils.windowSize().width/3,
|
||||
var height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
|
||||
|
||||
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'))) : '';
|
||||
});
|
||||
|
||||
job_status_chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Jobs')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
d3.select(element.find('svg')[0])
|
||||
.datum(graphData)
|
||||
.call(job_status_chart)
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"font-weight":400,
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
// when the Period drop down filter is used, create a new graph based on the
|
||||
d3.selectAll(element.find(".n"))
|
||||
.on("click", function() {
|
||||
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");
|
||||
|
||||
createGraph(data, period, job_type);
|
||||
});
|
||||
|
||||
//On click, update with new data
|
||||
d3.selectAll(element.find(".m"))
|
||||
.on("click", function() {
|
||||
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");
|
||||
|
||||
createGraph(data, period, job_type);
|
||||
});
|
||||
|
||||
adjustGraphSize(job_status_chart, element);
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
adjustGraphSize(job_status_chart, element);
|
||||
}
|
||||
|
||||
angular.element($window).on('resize', onResize);
|
||||
|
||||
element.on('$destroy', function() {
|
||||
angular.element($window).off('resize', onResize);
|
||||
});
|
||||
|
||||
if (scope.removeGraphDataReady) {
|
||||
scope.removeGraphDataReady();
|
||||
}
|
||||
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -1,90 +1,90 @@
|
||||
angular.module('DashboardGraphs').
|
||||
factory('adjustGraphSize', function() {
|
||||
factory('adjustGraphSize', function() {
|
||||
|
||||
|
||||
// Adjusts the size of graphs based on the current height
|
||||
// of the outer parent (see auto-size-module directive).
|
||||
//
|
||||
// Since the graph's svg element is set to width & height of 100%,
|
||||
// it will automatically size itself when the size of its container
|
||||
// changes. Since boxes in HTML automatically fill the width of their
|
||||
// parent, we don't have to change the container's width. However,
|
||||
// since the makers HTML never heard of vertical rhythm,
|
||||
// we have to manually set a new height on the container.
|
||||
//
|
||||
// ## Calculating the container's new height
|
||||
//
|
||||
// newHeight is the height we assign to the graph's immediate parent.
|
||||
// This is calculated as the height of the graph-container (the
|
||||
// outer parent), offset by the height of the toolbar row
|
||||
// (the contains the title and/or any filters) and the
|
||||
// bottom margin.
|
||||
//
|
||||
// ## Responsive Graph Stuff
|
||||
//
|
||||
// Letting the svg element automatically scale only solves part of
|
||||
// the responsive graph problem. d3 draws graphs as paths, with static
|
||||
// positioning of all elements. Therefore, we need to tell the graph how
|
||||
// to adjust itself so that it can resize properly.
|
||||
//
|
||||
// ### Resizing the axes
|
||||
//
|
||||
// First we get the width & height of the chart after it has been modified
|
||||
// by setting the height on its parent (see Calculating the New Container's
|
||||
// Height above). Note that we need to offset the width/height by the margins
|
||||
// to make sure we keep all the spacing intact.
|
||||
//
|
||||
// Next, we update the range for x & y to take the new width & height into
|
||||
// account. d3 uses this range to map domain values (the actual data) onto
|
||||
// pixels.
|
||||
//
|
||||
// After that we adjust the number of ticks on the axes. This makes sure we
|
||||
// will never have overlapping ticks. If that does become a problem, try
|
||||
// changing the divisor in the calculations to a different number until you
|
||||
// find something that helps. For example, (width / 75) should make the x
|
||||
// axis only ever display 1 tick per every 75 pixels.
|
||||
//
|
||||
// ### Redrawing the line
|
||||
//
|
||||
// Since this is a line graph, now that we've changed the range & ticks,
|
||||
// we need to instruct d3 to repaint (redraw) the actual lines representing
|
||||
// the data. We do this by setting the "d" attribute of the path element
|
||||
// that represents the line to the line function on the chart model. This
|
||||
// function triggers the mapping of domain to range, and plots the chart.
|
||||
// Calling chartModel.update() at the end instructs nv to process our changes.
|
||||
//
|
||||
// Adjusts the size of graphs based on the current height
|
||||
// of the outer parent (see auto-size-module directive).
|
||||
//
|
||||
// Since the graph's svg element is set to width & height of 100%,
|
||||
// it will automatically size itself when the size of its container
|
||||
// changes. Since boxes in HTML automatically fill the width of their
|
||||
// parent, we don't have to change the container's width. However,
|
||||
// since the makers HTML never heard of vertical rhythm,
|
||||
// we have to manually set a new height on the container.
|
||||
//
|
||||
// ## Calculating the container's new height
|
||||
//
|
||||
// newHeight is the height we assign to the graph's immediate parent.
|
||||
// This is calculated as the height of the graph-container (the
|
||||
// outer parent), offset by the height of the toolbar row
|
||||
// (the contains the title and/or any filters) and the
|
||||
// bottom margin.
|
||||
//
|
||||
// ## Responsive Graph Stuff
|
||||
//
|
||||
// Letting the svg element automatically scale only solves part of
|
||||
// the responsive graph problem. d3 draws graphs as paths, with static
|
||||
// positioning of all elements. Therefore, we need to tell the graph how
|
||||
// to adjust itself so that it can resize properly.
|
||||
//
|
||||
// ### Resizing the axes
|
||||
//
|
||||
// First we get the width & height of the chart after it has been modified
|
||||
// by setting the height on its parent (see Calculating the New Container's
|
||||
// Height above). Note that we need to offset the width/height by the margins
|
||||
// to make sure we keep all the spacing intact.
|
||||
//
|
||||
// Next, we update the range for x & y to take the new width & height into
|
||||
// account. d3 uses this range to map domain values (the actual data) onto
|
||||
// pixels.
|
||||
//
|
||||
// After that we adjust the number of ticks on the axes. This makes sure we
|
||||
// will never have overlapping ticks. If that does become a problem, try
|
||||
// changing the divisor in the calculations to a different number until you
|
||||
// find something that helps. For example, (width / 75) should make the x
|
||||
// axis only ever display 1 tick per every 75 pixels.
|
||||
//
|
||||
// ### Redrawing the line
|
||||
//
|
||||
// Since this is a line graph, now that we've changed the range & ticks,
|
||||
// we need to instruct d3 to repaint (redraw) the actual lines representing
|
||||
// the data. We do this by setting the "d" attribute of the path element
|
||||
// that represents the line to the line function on the chart model. This
|
||||
// function triggers the mapping of domain to range, and plots the chart.
|
||||
// Calling chartModel.update() at the end instructs nv to process our changes.
|
||||
//
|
||||
return function adjustGraphSize(chartModel, element) {
|
||||
var parentHeight = element.parent().parent().height();
|
||||
var toolbarHeight = element.find('.toolbar').height();
|
||||
var container = element.find('svg').parent();
|
||||
var margins = chartModel.margin();
|
||||
var parentHeight = element.parent().parent().height();
|
||||
var toolbarHeight = element.find('.toolbar').height();
|
||||
var container = element.find('svg').parent();
|
||||
var margins = chartModel.margin();
|
||||
|
||||
var newHeight = parentHeight - toolbarHeight - margins.bottom;
|
||||
var newHeight = parentHeight - toolbarHeight - margins.bottom;
|
||||
|
||||
$(container).height(newHeight);
|
||||
$(container).height(newHeight);
|
||||
|
||||
var graph = d3.select(element.find('svg')[0]);
|
||||
var width = parseInt(graph.style('width')) - margins.left - margins.right;
|
||||
var height = parseInt(graph.style('height')) - margins.top - margins.bottom;
|
||||
var graph = d3.select(element.find('svg')[0]);
|
||||
var width = parseInt(graph.style('width')) - margins.left - margins.right;
|
||||
var height = parseInt(graph.style('height')) - margins.top - margins.bottom;
|
||||
|
||||
chartModel.xRange([0, width]);
|
||||
chartModel.yRange([height, 0]);
|
||||
chartModel.xRange([0, width]);
|
||||
chartModel.yRange([height, 0]);
|
||||
|
||||
chartModel.xAxis.ticks(Math.max(width / 75, 2));
|
||||
chartModel.yAxis.ticks(Math.max(height / 50, 2));
|
||||
chartModel.xAxis.ticks(Math.max(width / 75, 2));
|
||||
chartModel.yAxis.ticks(Math.max(height / 50, 2));
|
||||
|
||||
if (height < 160) {
|
||||
graph.select('.y.nv-axis').select('.domain').style('display', 'none');
|
||||
graph.select('.y.nv-axis').select('.domain').style('display', 'initial');
|
||||
}
|
||||
if (height < 160) {
|
||||
graph.select('.y.nv-axis').select('.domain').style('display', 'none');
|
||||
graph.select('.y.nv-axis').select('.domain').style('display', 'initial');
|
||||
}
|
||||
|
||||
graph.select('.x.nv-axis')
|
||||
graph.select('.x.nv-axis')
|
||||
.attr('transform', 'translate(0, ' + height + ')')
|
||||
.call(chartModel.xAxis);
|
||||
|
||||
graph.selectAll('.line')
|
||||
.attr('d', chartModel.lines)
|
||||
graph.selectAll('.line')
|
||||
.attr('d', chartModel.lines);
|
||||
|
||||
chartModel.update();
|
||||
}
|
||||
chartModel.update();
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,47 +1,47 @@
|
||||
angular.module('DataServices')
|
||||
.service('hostCountGraphData',
|
||||
["Rest",
|
||||
"GetBasePath",
|
||||
"ProcessErrors",
|
||||
"$q",
|
||||
HostCountGraphData]);
|
||||
.service('hostCountGraphData',
|
||||
["Rest",
|
||||
"GetBasePath",
|
||||
"ProcessErrors",
|
||||
"$q",
|
||||
HostCountGraphData]);
|
||||
|
||||
function HostCountGraphData(Rest, getBasePath, processErrors, $q) {
|
||||
|
||||
function pluck(property, promise) {
|
||||
return promise.then(function(value) {
|
||||
return value[property];
|
||||
});
|
||||
}
|
||||
|
||||
function getLicenseData() {
|
||||
url = getBasePath('config');
|
||||
Rest.setUrl(url);
|
||||
return Rest.get()
|
||||
.then(function (data){
|
||||
license = data.data.license_info.instance_count;
|
||||
return license;
|
||||
})
|
||||
}
|
||||
|
||||
function getHostData() {
|
||||
url = getBasePath('dashboard')+'graphs/inventory/';
|
||||
Rest.setUrl(url);
|
||||
return pluck('data', Rest.get());
|
||||
}
|
||||
|
||||
return {
|
||||
get: function() {
|
||||
return $q.all({
|
||||
license: getLicenseData(),
|
||||
hosts: getHostData()
|
||||
}).catch(function (response) {
|
||||
var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
|
||||
processErrors(null, response.data, response.status, null, { hdr: 'Error!',
|
||||
msg: errorMessage
|
||||
});
|
||||
return response;
|
||||
function pluck(property, promise) {
|
||||
return promise.then(function(value) {
|
||||
return value[property];
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function getLicenseData() {
|
||||
var url = getBasePath('config');
|
||||
Rest.setUrl(url);
|
||||
return Rest.get()
|
||||
.then(function (data){
|
||||
var license = data.data.license_info.instance_count;
|
||||
return license;
|
||||
});
|
||||
}
|
||||
|
||||
function getHostData() {
|
||||
var url = getBasePath('dashboard')+'graphs/inventory/';
|
||||
Rest.setUrl(url);
|
||||
return pluck('data', Rest.get());
|
||||
}
|
||||
|
||||
return {
|
||||
get: function() {
|
||||
return $q.all({
|
||||
license: getLicenseData(),
|
||||
hosts: getHostData()
|
||||
}).catch(function (response) {
|
||||
var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
|
||||
processErrors(null, response.data, response.status, null, { hdr: 'Error!',
|
||||
msg: errorMessage
|
||||
});
|
||||
return response;
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,62 +1,59 @@
|
||||
angular.module('DataServices')
|
||||
.service('jobStatusGraphData',
|
||||
["Rest",
|
||||
"GetBasePath",
|
||||
"ProcessErrors",
|
||||
"$rootScope",
|
||||
"$q",
|
||||
JobStatusGraphData]);
|
||||
.service('jobStatusGraphData',
|
||||
["Rest",
|
||||
"GetBasePath",
|
||||
"ProcessErrors",
|
||||
"$rootScope",
|
||||
JobStatusGraphData]);
|
||||
|
||||
function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope, $q) {
|
||||
var callbacks = {};
|
||||
var currentCallbackId = 0;
|
||||
function JobStatusGraphData(Rest, getBasePath, processErrors, $rootScope) {
|
||||
|
||||
function pluck(property, promise) {
|
||||
return promise.then(function(value) {
|
||||
return value[property];
|
||||
});
|
||||
}
|
||||
function pluck(property, promise) {
|
||||
return promise.then(function(value) {
|
||||
return value[property];
|
||||
});
|
||||
}
|
||||
|
||||
function getData(period, jobType) {
|
||||
var url = getBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+jobType;
|
||||
Rest.setUrl(url);
|
||||
var result = Rest.get()
|
||||
.catch(function(response) {
|
||||
var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
|
||||
function getData(period, jobType) {
|
||||
var url = getBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+jobType;
|
||||
Rest.setUrl(url);
|
||||
var result = Rest.get()
|
||||
.catch(function(response) {
|
||||
var errorMessage = 'Failed to get: ' + response.url + ' GET returned: ' + response.status;
|
||||
|
||||
processErrors(null,
|
||||
response.data,
|
||||
response.status,
|
||||
null, {
|
||||
hdr: 'Error!',
|
||||
msg: errorMessage
|
||||
});
|
||||
return response;
|
||||
});
|
||||
processErrors(null,
|
||||
response.data,
|
||||
response.status,
|
||||
null, {
|
||||
hdr: 'Error!',
|
||||
msg: errorMessage
|
||||
});
|
||||
return response;
|
||||
});
|
||||
|
||||
return pluck('data', result);
|
||||
}
|
||||
return pluck('data', result);
|
||||
}
|
||||
|
||||
return {
|
||||
destroyWatcher: angular.noop,
|
||||
setupWatcher: function(period, jobType) {
|
||||
this.destroyWatcher =
|
||||
$rootScope.$on('JobStatusChange', function() {
|
||||
getData(period, jobType).then(function(result) {
|
||||
$rootScope.
|
||||
$broadcast('DataReceived:JobStatusGraph',
|
||||
result);
|
||||
return result;
|
||||
});
|
||||
});
|
||||
},
|
||||
get: function(period, jobType) {
|
||||
return {
|
||||
destroyWatcher: angular.noop,
|
||||
setupWatcher: function(period, jobType) {
|
||||
this.destroyWatcher =
|
||||
$rootScope.$on('JobStatusChange', function() {
|
||||
getData(period, jobType).then(function(result) {
|
||||
$rootScope.
|
||||
$broadcast('DataReceived:JobStatusGraph',
|
||||
result);
|
||||
return result;
|
||||
});
|
||||
});
|
||||
},
|
||||
get: function(period, jobType) {
|
||||
|
||||
this.destroyWatcher();
|
||||
this.setupWatcher(period, jobType);
|
||||
this.destroyWatcher();
|
||||
this.setupWatcher(period, jobType);
|
||||
|
||||
return getData(period, jobType);
|
||||
return getData(period, jobType);
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user