diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index d19a6c914c..7cea399b3e 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -76,6 +76,7 @@ angular.module('Tower', [ 'HostGroupsFormDefinition', 'DashboardCountsWidget', 'JobStatusGraphWidget', + 'HostPieChartWidget', 'HostGraphWidget', 'DashboardJobsWidget', 'StreamWidget', diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index 37953c4efe..cd85f44f36 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -76,6 +76,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb target: 'container1', dashboard: data }); + JobStatusGraph({ scope: $scope, target: 'container2', diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js index 24296c623e..61931d3e01 100644 --- a/awx/ui/static/js/widgets/HostGraph.js +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -31,7 +31,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) element = angular.element(document.getElementById(target)); element.html(html); $compile(element)(scope); - + url = GetBasePath('config'); Rest.setUrl(url); @@ -49,7 +49,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) scope.removeLicenseCountReady(); } scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) { - url = GetBasePath('dashboard')+'graphs/'; + url = GetBasePath('dashboard')+'graphs/inventory/'; Rest.setUrl(url); Rest.get() .success(function (data) { diff --git a/awx/ui/static/js/widgets/HostPieChart.js b/awx/ui/static/js/widgets/HostPieChart.js new file mode 100644 index 0000000000..3727b12650 --- /dev/null +++ b/awx/ui/static/js/widgets/HostPieChart.js @@ -0,0 +1,214 @@ +/********************************************* + * Copyright (c) 2014 AnsibleWorks, Inc. + * + * HostPieChart.js + * + * file for the host status pie chart + * + */ + +'use strict'; + +angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) + .factory('HostPieChart', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', + function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors) { + return function (params) { + + var scope = params.scope, + target = params.target, + // dashboard = params.dashboard, + html, element, url, + period="month", + job_type="all"; + + html = "
\n"; + + html +="
\n"; + html += "
Host Status
\n"; + + // html += "
\n"; + // html += "
\n"; + // html += "\n"; + // html += "Job Type\n"; + // html += " \n"; + + // html += "\n"; + // html += "
\n"; + + // html += "
\n"; //end of filter div + + // html += "
\n"; + // html += "
\n"; + // html += "\n"; + // html += "Period\n"; + // html += " \n"; + + // html += "\n"; + // html += "
\n"; + // html += "
\n"; //end of filter div + + // html += "
\n"; // end of row + + html +="
\n"; + html += "
\n"; + html += "
\n"; + + // function success(){ + // alert('success'); + // } + // // + // // html += "
\n"; + + // html += "\n"; + + // function createGraph(){ + + // url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type; + // Rest.setUrl(url); + // Rest.get() + // .success(function (data){ + // scope.$emit('graphDataReady', data); + // return job_type, period; + + // }) + // .error(function (data, status) { + // ProcessErrors(scope, data, status, null, { hdr: 'Error!', + // msg: 'Failed to get: ' + url + ' GET returned: ' + status }); + // }); + // } + + element = angular.element(document.getElementById(target)); + element.html(html); + $compile(element)(scope); + + // createGraph(); + + + // if (scope.removeGraphDataReady) { + // scope.removeGraphDataReady(); + // } + // scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) { + // var timeFormat, graphData = [ + // { + // "color": "#1778c3", + // "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; + // }); + + // nv.addGraph({ + // generate: function() { + // var width = nv.utils.windowSize().width/3, + // height = nv.utils.windowSize().height/5, + // chart = nv.models.lineChart() + // .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! + // .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 + // // .width(width) + // // .height(height) + // ; + + // 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'))) : ''; + // }); + + // chart.yAxis //Chart y-axis settings + // .axisLabel('Jobs') + // .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') + // .datum(graphData).transition() + // .attr('width', width) + // .attr('height', height) + // .duration(500) + // .call(chart) + // .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(chart.update); + + + // //On click, update with new data + // d3.selectAll(".n") + // .on("click", function() { + // period = this.getAttribute("id"); + // // console.log(period); + // var title = $('#job-status-title').text(), + // str = title.slice(0,title.search(","))+", "+this.innerHTML; + // $('#job-status-title').html(""+str+" "); + // createGraph(); + // }); + + // //On click, update with new data + // d3.selectAll(".m") + // .on("click", function() { + // job_type = this.getAttribute("id"); + // //console.log(job_type); + // var title = $('#job-status-title').text(), + // str = title.slice(title.search(",")); + // $('#job-status-title').html("Job Status for "+this.innerHTML+" Jobs"+str+" "); + // createGraph(); + // }); + + scope.$emit('WidgetLoaded'); + // return chart; + + // }, + + // }); + + // }); + + }; + } + ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js index 52e7b16a27..e3d89704ad 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -32,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html += "Job Type\n"; html += " \n"; - html += "