mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
fixed lintjs errors, added host status pie graph
This commit is contained in:
Jared Tabor
parent
0615bd5cb9
commit
39a5366237
@ -10,7 +10,7 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, DashboardCounts, HostGraph, JobStatusGraph, DashboardJobs,
|
||||
function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, DashboardCounts, HostGraph, JobStatusGraph, HostPieChart, DashboardJobs,
|
||||
ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button){
|
||||
|
||||
ClearScope('home');
|
||||
@ -96,6 +96,11 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
target: 'container4',
|
||||
dashboard: data
|
||||
});
|
||||
HostPieChart({
|
||||
scope: $scope,
|
||||
target: 'container5',
|
||||
dashboard: data
|
||||
});
|
||||
});
|
||||
|
||||
$scope.showActivity = function () {
|
||||
@ -122,7 +127,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
|
||||
}
|
||||
|
||||
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'DashboardCounts', 'HostGraph','JobStatusGraph', 'DashboardJobs',
|
||||
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'DashboardCounts', 'HostGraph','JobStatusGraph', 'HostPieChart', 'DashboardJobs',
|
||||
'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button'
|
||||
];
|
||||
|
||||
|
||||
@ -50,9 +50,9 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a><br><h6>Hosts</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/home/hosts id=\"failed-hosts\">"+dashboard.hosts.failed+"</a><br><h6>Failed Hosts</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a><br><h6>Inventories</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/inventories/?inventory_sources_with_failures id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a><br><h6>Inventory Sync Failure</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/inventories/?inventory_sources_with_failures id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a><br><h6>Inventory Sync Failures</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a><br><h6>Projects</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/projects id=\"failed-projects\">"+dashboard.projects.failed+"</a><br><h6>Project Sync Failure</h6></div>\n";
|
||||
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/projects id=\"failed-projects\">"+dashboard.projects.failed+"</a><br><h6>Project Sync Failures</h6></div>\n";
|
||||
// html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-lg-12 text-center\"><b>Hosts vs License Agreement</b></div>\n";
|
||||
html += "<div class=\"h6 col-xs-8 text-center\"><b>Hosts Count</b></div>\n";
|
||||
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
@ -16,199 +16,93 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
var scope = params.scope,
|
||||
target = params.target,
|
||||
// dashboard = params.dashboard,
|
||||
html, element, url,
|
||||
period="month",
|
||||
job_type="all";
|
||||
dashboard = params.dashboard,
|
||||
html, element, url;
|
||||
|
||||
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=\"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 += "Filter<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 += "<li><a class=\"j\" id=\"all\">Source</a></li>\n";
|
||||
// html += "<li><a class=\"j\" id=\"inv_sync\">Inventory</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 class=\"host-pie-chart\"><svg></svg></div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
// function success(){
|
||||
// alert('success');
|
||||
// }
|
||||
// //
|
||||
// // html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
// html += "</div>\n";
|
||||
function exampleData() {
|
||||
return [
|
||||
{
|
||||
"label": "Successful",
|
||||
"value" : dashboard.hosts.total
|
||||
} ,
|
||||
{
|
||||
"label": "Failed",
|
||||
"value" : dashboard.hosts.failed
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
// 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();
|
||||
url = GetBasePath('dashboard')+'graphs/inventory/';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function (data){
|
||||
scope.$emit('createHostPieChart', data.inventory);
|
||||
|
||||
|
||||
// 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
|
||||
// }
|
||||
// ];
|
||||
})
|
||||
.error(function (data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Failed to get: ' + url + ' GET returned: ' + status });
|
||||
});
|
||||
|
||||
// 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;
|
||||
|
||||
// },
|
||||
|
||||
// });
|
||||
|
||||
// });
|
||||
if (scope.removeCreateHostPieChart) {
|
||||
scope.removeCreateHostPieChart();
|
||||
}
|
||||
scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) {
|
||||
data = exampleData();
|
||||
nv.addGraph(function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/5,
|
||||
chart = nv.models.pieChart()
|
||||
.x(function(d) { return d.label; })
|
||||
.y(function(d) { return d.value; })
|
||||
.showLabels(true);
|
||||
|
||||
d3.select(".host-pie-chart svg")
|
||||
.datum(data)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.transition().duration(350)
|
||||
.call(chart);
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
]);
|
||||
]);
|
||||
|
||||
@ -62,12 +62,6 @@ 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";
|
||||
|
||||
html += "</div>\n";
|
||||
|
||||
function createGraph(){
|
||||
|
||||
@ -13,10 +13,11 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container2" class="left-side col-sm-6 col-xs-12"></div>
|
||||
<div id="container3" class="right-side col-sm-6 col-xs-12"></div>
|
||||
<div id="container5" class="right-side col-sm-6 col-xs-12"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container4" class="left-side col-sm-6 col-xs-12"></div>
|
||||
<div id="container3" class="right-side col-sm-6 col-xs-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -164,7 +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/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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user