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

added functionality for resizing graphs/jobs table, and changed dummy data to better reflect actual expected server response

Browse Source
This commit is contained in:
Jared Tabor
2014-06-30 17:47:30 -04:00
parent 826f2b681f
commit 6e76ad4918
7 changed files with 132 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui/static/js/helpers/Jobs.js
View File

@@ -84,6 +84,10 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
list = scope.jobs; list = scope.jobs;
} }
job = Find({ list: list, key: 'id', val: id }); job = Find({ list: list, key: 'id', val: id });
<<<<<<< HEAD
=======
// console.log('job type: ' + job.type);
>>>>>>> added functionality for resizing graphs/jobs table, and changed dummy data to better reflect actual expected server response
if (job.type === 'job') { if (job.type === 'job') {
$location.url('/jobs/' + job.id); $location.url('/jobs/' + job.id);
} }

2
awx/ui/static/js/hostcount.json
View File

@@ -1,7 +1,7 @@
[ [
{ {
"key" : "Hosts" , "key" : "Hosts" ,
"color" : "#00aa00", "color" : "#1778c3",
"values" : [ "values" : [
[1340755200000 , 2] , [1340762400000 , 4] , [1340755200000 , 2] , [1340762400000 , 4] ,
[1340769600000 , 8] , [1340776800000 , 16] , [1340769600000 , 8] , [1340776800000 , 16] ,

21
awx/ui/static/js/jobstatusdata.json
View File

@@ -1,7 +1,7 @@
[ [
{ {
"key" : "OK" , "key" : "Successful" ,
"color" : "#00aa00", "color" : "#1778c3",
"values" : [ "values" : [
[1340755200000 , 100] , [1340762400000 , 101] , [1340755200000 , 100] , [1340762400000 , 101] ,
[1340769600000 , 102] , [1340776800000 , 103] , [1340769600000 , 102] , [1340776800000 , 103] ,
@@ -13,8 +13,8 @@
] ]
}, },
{ {
"key" : "Changed" , "key" : "Failed" ,
"color" : "#FF9900", "color" : "#aa0000",
"values" : [ "values" : [
[1340755200000 , 50] , [1340762400000 , 50] , [1340755200000 , 50] , [1340762400000 , 50] ,
[1340769600000 , 50] , [1340776800000 , 50] , [1340769600000 , 50] , [1340776800000 , 50] ,
@@ -24,19 +24,6 @@
[1340827200000 , 50] , [1340834400000 , 50] , [1340827200000 , 50] , [1340834400000 , 50] ,
[1343347200000 , 50] [1343347200000 , 50]
] ]
},
{
"key" : "Failed" ,
"color" : "#aa0000",
"values" : [
[1340755200000 , 15] , [1340762400000 , 15] ,
[1340769600000 , 15] , [1340776800000 , 15] ,
[1340784000000 , 15] , [1340791200000 , 15] ,
[1340798400000 , 15] , [1340805600000 , 15] ,
[1340812800000 , 15] , [1340820000000 , 15] ,
[1340827200000 , 15] , [1340834400000 , 15] ,
[1343347200000 , 15]
]
} }
] ]

186
awx/ui/static/js/widgets/DashboardCharts.js
View File

@@ -20,20 +20,21 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
html, element; html, element;
html = "<div class=\"panel panel-default\" style=\"border:none\">\n"; // html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
html += "<div class=\"panel-body \">\n"; html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n";
html += "<table class=\"table\">\n"; html += "<table class=\"table\" >\n";
html += "<tr>\n"; html += "<tr> \n";
html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Job Status Graph</td>\n"; html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n";
html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Hosts</td>\n"; html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n";
html += "</tr>\n"; html += "</tr>\n";
html += "<tr>\n"; html += "<tr>\n";
html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n"; html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n"; html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n";
html += "</tr>\n"; html += "</tr>\n";
html += "</table>\n"; html += "</table>\n";
html += "</div>\n";
// html += "</div>\n";
function makeJobStatusGraph(){ function makeJobStatusGraph(){
d3.json("static/js/jobstatusdata.json",function(error,data) { d3.json("static/js/jobstatusdata.json",function(error,data) {
@@ -45,61 +46,57 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width - 40, var width = nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height - 40, height = nv.utils.windowSize().height/4,
chart = nv.models.lineChart() chart = nv.models.lineChart()
// .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. .margin({top: 5, right: 75, bottom: 40, left: 80}) //Adjust chart margins to give the x-axis some breathing room.
.x(function(d,i) { return i; }) .x(function(d,i) { return i; })
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition? .transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series. .showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis .showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis .showXAxis(true) //Show the x-axis
// .width(width)
// .height(height)
; ;
chart.xAxis chart.xAxis
.axisLabel("time") .axisLabel("Tme").showMaxMin(true)
.tickFormat(function(d) { .tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d].x || 0; var dx = data[0].values[d] && data[0].values[d].x || 0;
return dx ? d3.time.format('%x')(new Date(dx)) : ''; return dx ? d3.time.format('%m/%d')(new Date(dx)) : '';
}); });
chart.yAxis //Chart y-axis settings chart.yAxis //Chart y-axis settings
.axisLabel('Jobs') .axisLabel('Jobs')
.tickFormat(d3.format('.f')); .tickFormat(d3.format('.f'));
d3.select('.job-status-graph svg') // d3.select('.job-status-graph svg')
.attr('width', width) // .attr('width', width)
.attr('height', height) // .attr('height', height)
.datum(data) // .datum(data)
.call(chart); // .call(chart);
d3.select('.job-status-graph svg')
.datum(data).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; return chart;
}, },
// callback: function(graph) {
// window.onresize = function() {
// var width = nv.utils.windowSize().width - 40,
// height = nv.utils.windowSize().height - 40,
// margin = graph.margin();
// if (width < margin.left + margin.right + 20)
// width = margin.left + margin.right + 20;
// if (height < margin.top + margin.bottom + 20)
// height = margin.top + margin.bottom + 20;
// graph
// .width(width)
// .height(height);
// d3.select('.job-status-graph svg')
// .attr('width', width)
// .attr('height', height)
// .call(graph);
// };
// }
}); });
}); });
} }
@@ -114,10 +111,10 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width - 40, var width = nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height - 40, height = nv.utils.windowSize().height/4,
chart = nv.models.lineChart() chart = nv.models.lineChart()
// .margin({top: 20, right: 80, bottom: 50, left: 50}) //Adjust chart margins to give the x-axis some breathing room. .margin({top: 15, right: 75, bottom: 40, left: 80})
.x(function(d,i) { return i ;}) .x(function(d,i) { return i ;})
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition? .transitionDuration(350) //how fast do you want the lines to transition?
@@ -126,93 +123,38 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
.showXAxis(true) //Show the x-axis .showXAxis(true) //Show the x-axis
; ;
chart.xAxis chart.xAxis
.axisLabel("time") .axisLabel("Time")
.tickFormat(function(d) { .tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d].x || 0; var dx = data[0].values[d] && data[0].values[d].x || 0;
return dx ? d3.time.format('%x')(new Date(dx)) : ''; return dx ? d3.time.format('%m/%d')(new Date(dx)) : '';
}); });
chart.yAxis //Chart y-axis settings chart.yAxis //Chart y-axis settings
.axisLabel('Jobs') .axisLabel('Hosts')
.tickFormat(d3.format('.f')); .tickFormat(d3.format('.f'));
d3.select('.host-count-graph svg') d3.select('.host-count-graph svg')
.attr('width', width) .datum(data).transition()
.attr('height', height) .attr('width', width)
.datum(data) .attr('height', height)
.call(chart); .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;
},
return chart;
},
// callback: function(graph) {
// window.onresize = function() {
// var width = nv.utils.windowSize().width - 40,
// height = nv.utils.windowSize().height - 40,
// margin = graph.margin();
// if (width < margin.left + margin.right + 20)
// width = margin.left + margin.right + 20;
// if (height < margin.top + margin.bottom + 20)
// height = margin.top + margin.bottom + 20;
// graph
// .width(width)
// .height(height);
// d3.select('.job-status-graph svg')
// .attr('width', width)
// .attr('height', height)
// .call(graph);
// };
// }
}); });
}); });
} }
// var chart = nv.models.lineChart()
// // .margin({top: 20, right: 80, bottom: 50, left: 50}) //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
// ;
// chart.width(($(window).width())/3);
// chart.height(($(window).height())/3);
// chart.xAxis
// .axisLabel("time")
// .tickFormat(function(d) {
// var dx = data[0].values[d] && data[0].values[d].x || 0;
// return dx ? d3.time.format('%x')(new Date(dx)) : '';
// });
// chart.yAxis //Chart y-axis settings
// .axisLabel('Jobs')
// .tickFormat(d3.format('.f'));
// /* Done setting the chart up? Time to render it!*/
// //var myData = sinAndCos(); //You need data...
// d3.select('.job-status-graph svg') //Select the <svg> element you want to render the chart in.
// .datum(data) //Populate the <svg> element with chart data...
// .call(chart); //Finally, render the chart!
// //Update the chart when window resizes.
// nv.utils.windowResize(function() { chart.update() });
// return chart;
// });
// });
// };
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
element.html(html); element.html(html);

11
awx/ui/static/js/widgets/DashboardCounts.js
View File

@@ -20,11 +20,8 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
html, element; html, element;
html = "<div class=\"panel panel-default\" style=\"border:none\">\n"; html = "<div id=\"count-container\" class=\"panel-body\" style=\"border:none\">\n";
//html += "<div class=\"panel-heading\">New Dashboard</div>\n";
html += "<div class=\"panel-body \">\n";
html += "<table>\n"; html += "<table>\n";
html += "<tr>\n"; html += "<tr>\n";
html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n"; html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n"; html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
@@ -45,10 +42,8 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n"; html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
html += "</tr>\n"; html += "</tr>\n";
html += "</table>\n"; html += "</table>\n";
html += "</div>\n";
html += "<hr>\n";
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
element.html(html); element.html(html);

56
awx/ui/static/js/widgets/DashboardJobs.js
View File

@@ -19,7 +19,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
listCount = 0, listCount = 0,
jobs_scope = scope.$new(true), jobs_scope = scope.$new(true),
scheduled_scope = scope.$new(true), scheduled_scope = scope.$new(true),
max_rows = 15, max_rows,
html, e; html, e;
html = ''; html = '';
@@ -80,6 +80,10 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
url: GetBasePath('schedules') + '?next_run__isnull=false', url: GetBasePath('schedules') + '?next_run__isnull=false',
pageSize: max_rows pageSize: max_rows
}); });
$(window).resize(_.debounce(function() {
resizeContainers();
}, 500));
}); });
if (scope.removeChoicesReady) { if (scope.removeChoicesReady) {
@@ -88,6 +92,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
scope.removeChoicesReady = scope.$on('choicesReady', function() { scope.removeChoicesReady = scope.$on('choicesReady', function() {
choicesCount++; choicesCount++;
if (choicesCount === 2) { if (choicesCount === 2) {
setHeight();
scope.$emit('buildJobsList'); scope.$emit('buildJobsList');
} }
}); });
@@ -107,5 +112,52 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
variable: 'type_choices', variable: 'type_choices',
callback: 'choicesReady' callback: 'choicesReady'
}); });
// Set the height of each container and calc max number of rows containers can hold
function setHeight() {
var docw = $(window).width(),
//doch = $(window).height(),
available_height,
search_row, page_row, height, header, row_height;
if (docw > 1000) {
// customize the container height and # of rows based on available viewport height
available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#graph-container').outerHeight() - $('#count-container').outerHeight() - 80;
$('.jobs-list-container').each(function() {
$(this).height(Math.floor(available_height / 2));
});
search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50);
page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
header = Math.max($('#completed_jobs_table thead').height(), 41);
height = Math.floor(available_height) - header - page_row - 15;
row_height = (docw < 1415) ? 47 : 27;
//$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded
max_rows = Math.floor(height / row_height);
}
else {
// when width < 1240px || height < 800px put things back to their default state
$('.jobs-list-container').each(function() {
$(this).css({ 'height': 'auto' });
});
max_rows = 5;
}
}
// Set container height and return the number of allowed rows
function resizeContainers() {
setHeight();
// completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows;
// completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
// running_scope[RunningJobsList.iterator + '_page_size'] = max_rows;
// running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator);
jobs_scope[JobsList.iterator + '_page_size'] = max_rows;
jobs_scope.changePageSize(JobsList.name, JobsList.iterator);
scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows;
scheduled_scope.changePageSize(ScheduledJobsList.name, ScheduledJobsList.iterator);
}
}; };
}]); }
]);

4
awx/ui/static/partials/home.html
View File

@@ -1,12 +1,12 @@
<div class="tab-pane" id="home"> <div class="tab-pane" id="home">
<div ng-cloak id="htmlTemplate"> <div ng-cloak id="htmlTemplate">
<div id="refresh-row" class="row"> <!--<div id="refresh-row" class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div id="home-list-actions" class="list-actions pull-right"></div> <div id="home-list-actions" class="list-actions pull-right"></div>
</div> </div>
</div> </div>
-->
<div class="row"> <div class="row">
<div id="container1" class="col-lg-12"></div> <div id="container1" class="col-lg-12"></div>
</div> </div>