External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-05 10:41:05 -03:30
Code Issues Packages Projects Releases Wiki Activity

added filter for job status graph widget

Browse Source
This commit is contained in:
Jared Tabor
2014-07-07 14:01:26 -04:00
parent 854e31e218
commit 38b7a6d413
4 changed files with 194 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/static/js/controllers/Home.js
View File

@@ -44,6 +44,10 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
toolbar: true toolbar: true
}); });
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
};
e = angular.element(document.getElementById('home-list-actions')); e = angular.element(document.getElementById('home-list-actions'));
e.html(html); e.html(html);
$compile(e)($scope); $compile(e)($scope);

67
awx/ui/static/js/widgets/HostGraph.js
View File

@@ -29,51 +29,48 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
html += "</div>\n"; 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);
}) element = angular.element(document.getElementById(target));
.error(function (data, status) { element.html(html);
//Wait('stWaitop'); $compile(element)(scope);
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
});
//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();
} }
scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) {
function createGraph(license){
Rest.setUrl(GetBasePath('dashboard')+'graphs/'); Rest.setUrl(GetBasePath('dashboard')+'graphs/');
Rest.get() Rest.get()
.success(function (data) { .success(function (data) {
//$scope.$emit('dashboardReady', data); scope.$emit('hostDataReady', data, license);
// console.log(data);
//license = data.license_info.available_instances;
makeHostCountGraph(license, data);
}) })
.error(function (data, status) { .error(function (data, status) {
//Wait('stWaitop'); //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/'; url = GetBasePath('dashboard')+'graphs/';
var graphData = []; var graphData = [
//d3.json("static/js/jobstatusdata.json",function(error,data) {
//d3.json(url, function(error,data) {
graphData = [
{ {
"key" : "Hosts" , "key" : "Hosts" ,
"color" : "#1778c3", "color" : "#1778c3",
@@ -153,19 +150,15 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
}); });
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
scope.$emit('WidgetLoaded');
return chart; return chart;
}, },
}); });
//}); //});
} });
element = angular.element(document.getElementById(target));
element.html(html);
$compile(element)(scope);
getLicenseNumber();
// makeHostCountGraph(license);
scope.$emit('WidgetLoaded');
}; };
} }

261
awx/ui/static/js/widgets/JobStatusGraph.js
View File

@@ -17,12 +17,14 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
var scope = params.scope, var scope = params.scope,
target = params.target, target = params.target,
// dashboard = params.dashboard, // dashboard = params.dashboard,
html, element, url; html, element, url,
period="month",
job_type="all";
html = "<div class=\"graph-container\">\n"; html = "<div class=\"graph-container\">\n";
html +="<div class=\"row\">\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=\"h6 col-xs-2 \">\n";
html += "<div class=\"dropdown\">\n"; html += "<div class=\"dropdown\">\n";
@@ -30,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html += "Job Type<span class=\"caret\"></span>\n"; html += "Job Type<span class=\"caret\"></span>\n";
html += " </a>\n"; html += " </a>\n";
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n"; html += "<ul class=\"dropdown-menu status-dropdown\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
html += "<li><a href=\"#\">All</a></li>\n"; html += "<li><div class=\"m\" id=\"all\">All</span></div></li>\n";
html += "<li><a href=\"#\">Inventory Sync</a></li>\n"; html += "<li><div class=\"m\" id=\"inv_sync\">Inventory Sync</div></li>\n";
html += "<li><a href=\"#\">SCM Update</a></li>\n"; html += "<li><div class=\"m\" id=\"scm_update\">SCM Update</div></li>\n";
html += "<li><a href=\"#\">Playbook Runs</a></li>\n"; html += "<li><div class=\"m\" id=\"playbook_run\">Playbook Run</div></li>\n";
html += "</ul>\n"; html += "</ul>\n";
html += "</div>\n"; html += "</div>\n";
@@ -47,9 +49,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html += " </a>\n"; html += " </a>\n";
html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n"; html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
html += "<li><a href=\"#\">Past 24 Hours</a></li>\n"; html += "<li><div class=\"n\" id=\"day\" >Past 24 Hours </div></li>\n";
html += "<li><a href=\"#\">Past Week</a></li>\n"; html += "<li><div class=\"n\" id=\"week\">Past Week</div></li>\n";
html += "<li><a href=\"#\">Past Month</a></li>\n"; html += "<li><div class=\"n\" id=\"month\">Past Month</div></li>\n";
html += "</ul>\n"; html += "</ul>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; //end of filter div html += "</div>\n"; //end of filter div
@@ -66,121 +68,146 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html += "</div>\n"; html += "</div>\n";
function createGraph(){ 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);
}) url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type;
.error(function (data, status) { Rest.setUrl(url);
//Wait('stWaitop'); Rest.get()
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status }); .success(function (data){
}); scope.$emit('graphDataReady', data);
return job_type, period;
//return license; })
} .error(function (data, status) {
//Wait('stWaitop');
ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
//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;
},
});
// });
} }
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
element.html(html); element.html(html);
$compile(element)(scope); $compile(element)(scope);
createGraph(); 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;
},
});
});
}; };
} }

19
awx/ui/static/less/new-dashboard.less
View File

@@ -73,8 +73,8 @@
padding-left: 7px; padding-left: 7px;
} }
} }
.custon-carousel{ .custon-carousel{
width:150px; width:150px;
height:200px; height:200px;
min-width:150px; min-width:150px;
min-height:100px; min-height:100px;
@@ -84,4 +84,17 @@
display:block; display:block;
border:1px solid black; border:1px solid black;
background-color: #A9A9A9; background-color: #A9A9A9;
} }
.dropdown-menu {
cursor: pointer;
padding-left: 7px;
height: 75px;
width: 100px;
}
.status-dropdown{
height: 100px;
}
.m, .n{
padding-bottom: 5px;
}