mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 11:00:03 -03:30
added filter for job status graph widget
This commit is contained in:
Jared Tabor
parent
854e31e218
commit
38b7a6d413
@ -44,6 +44,10 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
toolbar: true
|
||||
});
|
||||
|
||||
String.prototype.capitalize = function() {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||
};
|
||||
|
||||
e = angular.element(document.getElementById('home-list-actions'));
|
||||
e.html(html);
|
||||
$compile(e)($scope);
|
||||
|
||||
@ -29,51 +29,48 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
html += "</div>\n";
|
||||
|
||||
|
||||
function getLicenseNumber(){
|
||||
Rest.setUrl(GetBasePath('config'));
|
||||
Rest.get()
|
||||
.success(function (data) {
|
||||
//$scope.$emit('dashboardReady', data);
|
||||
// console.log(data);
|
||||
license = data.license_info.available_instances;
|
||||
createGraph(license);
|
||||
|
||||
})
|
||||
.error(function (data, status) {
|
||||
//Wait('stWaitop');
|
||||
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
|
||||
});
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
|
||||
//return license;
|
||||
Rest.setUrl(GetBasePath('config'));
|
||||
Rest.get()
|
||||
.success(function (data){
|
||||
license = data.license_info.available_instances;
|
||||
scope.$emit('licenseCountReady', license);
|
||||
|
||||
})
|
||||
.error(function (data, status) {
|
||||
//Wait('stWaitop');
|
||||
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
|
||||
});
|
||||
|
||||
|
||||
if (scope.removeLicenseCountReady) {
|
||||
scope.removeLicenseCountReady();
|
||||
}
|
||||
|
||||
function createGraph(license){
|
||||
scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) {
|
||||
Rest.setUrl(GetBasePath('dashboard')+'graphs/');
|
||||
Rest.get()
|
||||
.success(function (data) {
|
||||
//$scope.$emit('dashboardReady', data);
|
||||
// console.log(data);
|
||||
//license = data.license_info.available_instances;
|
||||
|
||||
makeHostCountGraph(license, data);
|
||||
scope.$emit('hostDataReady', data, license);
|
||||
|
||||
})
|
||||
.error(function (data, status) {
|
||||
//Wait('stWaitop');
|
||||
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
|
||||
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get license info ' + status });
|
||||
});
|
||||
|
||||
//return license;
|
||||
});
|
||||
|
||||
if (scope.removeHostDataReady) {
|
||||
scope.removeHostDataReady();
|
||||
}
|
||||
scope.removeHostDataReady = scope.$on('hostDataReady', function (e, data, license) {
|
||||
|
||||
function makeHostCountGraph(license, data){
|
||||
url = GetBasePath('dashboard')+'graphs/';
|
||||
var graphData = [];
|
||||
|
||||
//d3.json("static/js/jobstatusdata.json",function(error,data) {
|
||||
//d3.json(url, function(error,data) {
|
||||
|
||||
graphData = [
|
||||
var graphData = [
|
||||
{
|
||||
"key" : "Hosts" ,
|
||||
"color" : "#1778c3",
|
||||
@ -153,19 +150,15 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
});
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
scope.$emit('WidgetLoaded');
|
||||
return chart;
|
||||
},
|
||||
|
||||
});
|
||||
//});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
getLicenseNumber();
|
||||
// makeHostCountGraph(license);
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
@ -17,12 +17,14 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
var scope = params.scope,
|
||||
target = params.target,
|
||||
// dashboard = params.dashboard,
|
||||
html, element, url;
|
||||
html, element, url,
|
||||
period="month",
|
||||
job_type="all";
|
||||
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-xs-8 text-center\"><b>Job Status</b></div>\n";
|
||||
html += "<div id=\"job-status-title\" class=\"h6 col-xs-8 text-center\"><b>Job Status for All Jobs, Past Month</b></div>\n";
|
||||
|
||||
html += "<div class=\"h6 col-xs-2 \">\n";
|
||||
html += "<div class=\"dropdown\">\n";
|
||||
@ -30,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
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 href=\"#\">All</a></li>\n";
|
||||
html += "<li><a href=\"#\">Inventory Sync</a></li>\n";
|
||||
html += "<li><a href=\"#\">SCM Update</a></li>\n";
|
||||
html += "<li><a href=\"#\">Playbook Runs</a></li>\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>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
@ -47,9 +49,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
html += " </a>\n";
|
||||
|
||||
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
|
||||
html += "<li><a href=\"#\">Past 24 Hours</a></li>\n";
|
||||
html += "<li><a href=\"#\">Past Week</a></li>\n";
|
||||
html += "<li><a href=\"#\">Past Month</a></li>\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>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n"; //end of filter div
|
||||
@ -66,121 +68,146 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
html += "</div>\n";
|
||||
|
||||
function createGraph(){
|
||||
url = GetBasePath('dashboard')+'graphs/';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function (data) {
|
||||
//$scope.$emit('dashboardReady', data);
|
||||
// console.log(data);
|
||||
// license = data.license_info.available_instances;
|
||||
makeJobStatusGraph(data);
|
||||
|
||||
})
|
||||
.error(function (data, status) {
|
||||
//Wait('stWaitop');
|
||||
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
|
||||
});
|
||||
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;
|
||||
|
||||
//return license;
|
||||
}
|
||||
|
||||
|
||||
//function makeHostCountGraph(license){
|
||||
|
||||
function makeJobStatusGraph(data){
|
||||
|
||||
var graphData = [];
|
||||
|
||||
//d3.json("static/js/jobstatusdata.json",function(error,data) {
|
||||
// d3.json(url, function(error,data) {
|
||||
//console.log(data);
|
||||
graphData = [
|
||||
{
|
||||
"color": "#1778c3",
|
||||
"key": "Successful",
|
||||
"values": data.jobs.successful
|
||||
},
|
||||
{
|
||||
"key" : "Failed" ,
|
||||
"color" : "#aa0000",
|
||||
"values": data.jobs.failed
|
||||
}
|
||||
];
|
||||
|
||||
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('%m/%d')(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);
|
||||
return chart;
|
||||
},
|
||||
|
||||
});
|
||||
// });
|
||||
})
|
||||
.error(function (data, status) {
|
||||
//Wait('stWaitop');
|
||||
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
|
||||
createGraph();
|
||||
//makeJobStatusGraph();
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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;
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
@ -73,8 +73,8 @@
|
||||
padding-left: 7px;
|
||||
}
|
||||
}
|
||||
.custon-carousel{
|
||||
width:150px;
|
||||
.custon-carousel{
|
||||
width:150px;
|
||||
height:200px;
|
||||
min-width:150px;
|
||||
min-height:100px;
|
||||
@ -84,4 +84,17 @@
|
||||
display:block;
|
||||
border:1px solid black;
|
||||
background-color: #A9A9A9;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
cursor: pointer;
|
||||
padding-left: 7px;
|
||||
height: 75px;
|
||||
width: 100px;
|
||||
}
|
||||
.status-dropdown{
|
||||
height: 100px;
|
||||
}
|
||||
.m, .n{
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user