diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js
index a0e071a93a..570ec5f70c 100644
--- a/awx/ui/static/js/app.js
+++ b/awx/ui/static/js/app.js
@@ -95,7 +95,6 @@ angular.module('Tower', [
'SelectionHelper',
'HostGroupsFormDefinition',
'DashboardCountsWidget',
- 'HostGraphWidget',
'DashboardJobsWidget',
'PortalJobsWidget',
'StreamWidget',
diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js
index f46a59cadd..a931113e1c 100644
--- a/awx/ui/static/js/controllers/Home.js
+++ b/awx/ui/static/js/controllers/Home.js
@@ -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, DashboardJobs,
+function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, DashboardJobs,
ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button, graphData){
ClearScope('home');
@@ -84,7 +84,6 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
loadedCount++;
if (loadedCount === waitCount) {
$(window).resize(_.debounce(function() {
- $scope.$emit('ResizeHostGraph');
Wait('stop');
}, 500));
$(window).resize();
@@ -118,15 +117,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
$scope.graphData = graphData;
- if ($rootScope.user_is_superuser === true) {
- waitCount = 5;
- HostGraph({
- scope: $scope,
- target: 'dash-host-count-graph',
- dashboard: data
- });
- }
- else{
+ if ($rootScope.user_is_superuser !== true) {
$('#dash-host-count-graph').remove(); //replaceWith("");
}
DashboardJobs({
@@ -178,7 +169,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
}
-Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'DashboardJobs',
+Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'DashboardJobs',
'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button', 'graphData'
];
diff --git a/awx/ui/static/js/directives/host-count-graph.js b/awx/ui/static/js/directives/host-count-graph.js
new file mode 100644
index 0000000000..008b8aa6b8
--- /dev/null
+++ b/awx/ui/static/js/directives/host-count-graph.js
@@ -0,0 +1,148 @@
+angular.module('DashboardGraphs').
+ directive('hostCountGraph', ['GetBasePath', 'Rest', function(getBasePath, Rest) {
+
+ return {
+ restrict: 'E',
+ templateUrl: '/static/partials/host_count_graph.html',
+ link: link
+ };
+
+ function link(scope, element, attrs) {
+ var url, license, license_graph;
+
+ 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){
+ license = data.license_info.instance_count;
+ scope.$emit('licenseCountReady', license);
+ })
+ .error(function (data, status) {
+ ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+ msg: 'Failed to get: ' + url + ' GET returned: ' + status });
+ });
+
+ if (scope.removeLicenseCountReady) {
+ scope.removeLicenseCountReady();
+ }
+ scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) {
+ url = getBasePath('dashboard')+'graphs/inventory/';
+ Rest.setUrl(url);
+ Rest.get()
+ .success(function (data) {
+ scope.$emit('hostDataReady', data, license);
+ })
+ .error(function (data, status) {
+ ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+ msg: 'Failed to get: ' + url + ' GET returned: ' + status });
+ });
+
+ });
+
+ if (scope.removeHostDataReady) {
+ scope.removeHostDataReady();
+ }
+ scope.removeHostDataReady = scope.$on('hostDataReady', function (e, 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;
+
+ });
+
+ 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,
+ 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({
+ // 'width': width,
+ // 'height': height,
+ "font-family": 'Open Sans',
+ "font-style": "normal",
+ "font-weight":400,
+ "src": "url(/static/fonts/OpenSans-Regular.ttf)"
+ });
+
+
+ // nv.utils.windowResize(license_graph.update);
+ scope.$emit('WidgetLoaded');
+ return license_graph;
+
+ }
+ });
+ });
+ }
+}]);
diff --git a/awx/ui/static/js/directives/job-status-graph.js b/awx/ui/static/js/directives/job-status-graph.js
index 1d299c1eba..9d9f5d1849 100644
--- a/awx/ui/static/js/directives/job-status-graph.js
+++ b/awx/ui/static/js/directives/job-status-graph.js
@@ -1,6 +1,6 @@
angular.module('DashboardGraphs')
- .directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'jobStatusGraphData',
- function ($rootScope, $compile , $location, $window, Wait, jobStatusGraphData) {
+ .directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'adjustGraphSize', 'jobStatusGraphData',
+ function ($rootScope, $compile , $location, $window, Wait, adjustGraphSize, jobStatusGraphData) {
return {
restrict: 'E',
templateUrl: '/static/partials/job_status_graph.html',
@@ -35,43 +35,10 @@ angular.module('DashboardGraphs')
var w = angular.element($window);
- function adjustGraphSize() {
- var parentHeight = element.parent().parent().height();
- var toolbarHeight = element.find('.toolbar').height();
- var container = element.find('svg').parent();
- var margins = job_status_chart.margin();
- var newHeight = parentHeight - toolbarHeight - margins.bottom;
-
- $(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;
-
-
- job_status_chart.xRange([0, width]);
- job_status_chart.yRange([height, 0]);
-
- job_status_chart.xAxis.ticks(Math.max(width / 75, 2));
- job_status_chart.yAxis.ticks(Math.max(height / 50, 2));
-
- if (height < 160) {
- graph.select('.y.axis').select('.domain').style('display', 'none');
- graph.select('.y.axis').select('.domain').style('display', 'initial');
- }
-
- graph.select('.x.axis')
- .attr('transform', 'translate(0, ' + height + ')')
- .call(job_status_chart.xAxis);
-
- graph.selectAll('.line')
- .attr('d', job_status_chart.lines)
-
- job_status_chart.update();
- }
-
- $window.addEventListener('resize', adjustGraphSize);
+ $window.addEventListener('resize', function() {
+ adjustGraphSize(job_status_chart, element);
+ });
if (scope.removeGraphDataReady) {
scope.removeGraphDataReady();
@@ -168,7 +135,7 @@ angular.module('DashboardGraphs')
createGraph(period, job_type);
});
- adjustGraphSize();
+ adjustGraphSize(job_status_chart, element);
return job_status_chart;
diff --git a/awx/ui/static/js/services/adjust-graph-size.js b/awx/ui/static/js/services/adjust-graph-size.js
new file mode 100644
index 0000000000..f784cd4cda
--- /dev/null
+++ b/awx/ui/static/js/services/adjust-graph-size.js
@@ -0,0 +1,38 @@
+angular.module('DashboardGraphs').
+ factory('adjustGraphSize', function() {
+ 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 newHeight = parentHeight - toolbarHeight - margins.bottom;
+
+ $(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;
+
+
+ chartModel.xRange([0, width]);
+ chartModel.yRange([height, 0]);
+
+ chartModel.xAxis.ticks(Math.max(width / 75, 2));
+ chartModel.yAxis.ticks(Math.max(height / 50, 2));
+
+ if (height < 160) {
+ graph.select('.y.axis').select('.domain').style('display', 'none');
+ graph.select('.y.axis').select('.domain').style('display', 'initial');
+ }
+
+ graph.select('.x.axis')
+ .attr('transform', 'translate(0, ' + height + ')')
+ .call(chartModel.xAxis);
+
+ graph.selectAll('.line')
+ .attr('d', chartModel.lines)
+
+ chartModel.update();
+ }
+});
diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html
index ceb9ede175..a9155bc49d 100644
--- a/awx/ui/static/partials/home.html
+++ b/awx/ui/static/partials/home.html
@@ -25,7 +25,11 @@
diff --git a/awx/ui/static/partials/host_count_graph.html b/awx/ui/static/partials/host_count_graph.html
new file mode 100644
index 0000000000..3b154ab50a
--- /dev/null
+++ b/awx/ui/static/partials/host_count_graph.html
@@ -0,0 +1,12 @@
+
+
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 709b5fa822..60abfeef45 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -83,6 +83,7 @@
+