changed url for new graph endpoints in api

This commit is contained in:
Jared Tabor 2014-07-08 11:48:29 -04:00
parent 54799c57e6
commit 93986d0fd8
8 changed files with 246 additions and 13 deletions

View File

@ -76,6 +76,7 @@ angular.module('Tower', [
'HostGroupsFormDefinition',
'DashboardCountsWidget',
'JobStatusGraphWidget',
'HostPieChartWidget',
'HostGraphWidget',
'DashboardJobsWidget',
'StreamWidget',

View File

@ -76,6 +76,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
target: 'container1',
dashboard: data
});
JobStatusGraph({
scope: $scope,
target: 'container2',

View File

@ -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) {

View File

@ -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 = "<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 class=\"h6 col-xs-2 \">\n";
// html += "<div class=\"dropdown\">\n";
// html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
// html += "Job Type<span class=\"caret\"></span>\n";
// html += " </a>\n";
// html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
// html += "<li><a class=\"m\" id=\"all\">All</a></li>\n";
// html += "<li><a class=\"m\" id=\"inv_sync\">Inventory Sync</a></li>\n";
// html += "<li><a class=\"m\" id=\"scm_update\">SCM Update</a></li>\n";
// html += "<li><a class=\"m\" id=\"playbook_run\">Playbook Run</a></li>\n";
// html += "</ul>\n";
// html += "</div>\n";
// html += "</div>\n"; //end of filter div
// html += "<div class=\"h6 col-xs-2 \">\n";
// html += "<div class=\"dropdown\">\n";
// html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
// html += "Period<span class=\"caret\"></span>\n";
// html += " </a>\n";
// html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
// html += "<li><a class=\"n\" id=\"day\" >Past 24 Hours </a></li>\n";
// html += "<li><a class=\"n\" id=\"week\">Past Week</a></li>\n";
// html += "<li><a class=\"n\" id=\"month\">Past Month</a></li>\n";
// html += "</ul>\n";
// html += "</div>\n";
// html += "</div>\n"; //end of filter div
// html += "</div>\n"; // end of row
html +="<div class=\"row\">\n";
html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
html += "</div>\n";
// function success(){
// alert('success');
// }
// //
// // html += "</div>\n";
// html += "</div>\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("<b>"+str+" </b>");
// 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("<b>Job Status for "+this.innerHTML+" Jobs"+str+" </b>");
// createGraph();
// });
scope.$emit('WidgetLoaded');
// return chart;
// },
// });
// });
};
}
]);

View File

@ -32,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html += "Job Type<span class=\"caret\"></span>\n";
html += " </a>\n";
html += "<ul class=\"dropdown-menu status-dropdown\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
html += "<li><div class=\"m\" id=\"all\">All</span></div></li>\n";
html += "<li><div class=\"m\" id=\"inv_sync\">Inventory Sync</div></li>\n";
html += "<li><div class=\"m\" id=\"scm_update\">SCM Update</div></li>\n";
html += "<li><div class=\"m\" id=\"playbook_run\">Playbook Run</div></li>\n";
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
html += "<li><a class=\"m\" id=\"all\">All</a></li>\n";
html += "<li><a class=\"m\" id=\"inv_sync\">Inventory Sync</a></li>\n";
html += "<li><a class=\"m\" id=\"scm_update\">SCM Update</a></li>\n";
html += "<li><a class=\"m\" id=\"playbook_run\">Playbook Run</a></li>\n";
html += "</ul>\n";
html += "</div>\n";
@ -48,10 +48,10 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html += "Period<span class=\"caret\"></span>\n";
html += " </a>\n";
html += "<ul class=\"dropdown-menu period-dropdown\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
html += "<li><div class=\"n\" id=\"day\" >Past 24 Hours </div></li>\n";
html += "<li><div class=\"n\" id=\"week\">Past Week</div></li>\n";
html += "<li><div class=\"n\" id=\"month\">Past Month</div></li>\n";
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
html += "<li><a class=\"n\" id=\"day\" >Past 24 Hours </a></li>\n";
html += "<li><a class=\"n\" id=\"week\">Past Week</a></li>\n";
html += "<li><a class=\"n\" id=\"month\">Past Month</a></li>\n";
html += "</ul>\n";
html += "</div>\n";
html += "</div>\n"; //end of filter div
@ -62,6 +62,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
html += "</div>\n";
function success(){
alert('success');
}
//
// html += "</div>\n";
@ -69,7 +72,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
function createGraph(){
url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type;
url = GetBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+job_type;
Rest.setUrl(url);
Rest.get()
.success(function (data){

View File

@ -86,5 +86,5 @@
cursor:pointer;
}
.m, .n{
padding-bottom: 5px;
cursor:pointer;
}

View File

@ -0,0 +1,13 @@
{
"name": "nvd3",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.3.0",
"grunt-contrib-watch": "~0.3.1",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-concat": "~0.2.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-cssmin": "~0.6.2"
}
}

View File

@ -164,6 +164,7 @@
<script src="{{ STATIC_URL }}js/helpers/HostEventsViewer.js"></script>
<script src="{{ STATIC_URL }}js/widgets/JobStatus.js"></script>
<script src="{{ STATIC_URL }}js/widgets/DashboardCounts.js"></script>
<script src="{{ STATIC_URL }}js/widgets/HostPIeChart.js"></script>
<script src="{{ STATIC_URL }}js/widgets/HostGraph.js"></script>
<script src="{{ STATIC_URL }}js/widgets/JobStatusGraph.js"></script>
<script src="{{ STATIC_URL }}js/widgets/DashboardJobs.js"></script>