mirror of
https://github.com/ansible/awx.git
synced 2026-01-17 12:41:19 -03:30
added functionality for resizing graphs/jobs table, and changed dummy data to better reflect actual expected server response
This commit is contained in:
Jared Tabor
parent
826f2b681f
commit
6e76ad4918
@ -84,6 +84,10 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
|
||||
list = scope.jobs;
|
||||
}
|
||||
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') {
|
||||
$location.url('/jobs/' + job.id);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
[
|
||||
{
|
||||
"key" : "Hosts" ,
|
||||
"color" : "#00aa00",
|
||||
"color" : "#1778c3",
|
||||
"values" : [
|
||||
[1340755200000 , 2] , [1340762400000 , 4] ,
|
||||
[1340769600000 , 8] , [1340776800000 , 16] ,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
[
|
||||
{
|
||||
"key" : "OK" ,
|
||||
"color" : "#00aa00",
|
||||
"key" : "Successful" ,
|
||||
"color" : "#1778c3",
|
||||
"values" : [
|
||||
[1340755200000 , 100] , [1340762400000 , 101] ,
|
||||
[1340769600000 , 102] , [1340776800000 , 103] ,
|
||||
@ -13,8 +13,8 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"key" : "Changed" ,
|
||||
"color" : "#FF9900",
|
||||
"key" : "Failed" ,
|
||||
"color" : "#aa0000",
|
||||
"values" : [
|
||||
[1340755200000 , 50] , [1340762400000 , 50] ,
|
||||
[1340769600000 , 50] , [1340776800000 , 50] ,
|
||||
@ -24,19 +24,6 @@
|
||||
[1340827200000 , 50] , [1340834400000 , 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]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -20,20 +20,21 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html, element;
|
||||
|
||||
html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
|
||||
html += "<div class=\"panel-body \">\n";
|
||||
// html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
|
||||
html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n";
|
||||
|
||||
html += "<table class=\"table\">\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\">Hosts</td>\n";
|
||||
html += "<table class=\"table\" >\n";
|
||||
html += "<tr> \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 vs License Agreement</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "<tr>\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 += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
|
||||
html += "</div>\n";
|
||||
// html += "</div>\n";
|
||||
|
||||
function makeJobStatusGraph(){
|
||||
d3.json("static/js/jobstatusdata.json",function(error,data) {
|
||||
@ -45,61 +46,57 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/4,
|
||||
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; })
|
||||
.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")
|
||||
.axisLabel("Tme").showMaxMin(true)
|
||||
.tickFormat(function(d) {
|
||||
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
|
||||
.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')
|
||||
// .attr('width', width)
|
||||
// .attr('height', height)
|
||||
// .datum(data)
|
||||
// .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;
|
||||
},
|
||||
// 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({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/4,
|
||||
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 ;})
|
||||
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
|
||||
.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
|
||||
;
|
||||
|
||||
chart.xAxis
|
||||
.axisLabel("time")
|
||||
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)) : '';
|
||||
});
|
||||
var dx = data[0].values[d] && data[0].values[d].x || 0;
|
||||
return dx ? d3.time.format('%m/%d')(new Date(dx)) : '';
|
||||
});
|
||||
|
||||
chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Jobs')
|
||||
chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Hosts')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
d3.select('.host-count-graph svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(data)
|
||||
.call(chart);
|
||||
d3.select('.host-count-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);
|
||||
// };
|
||||
// }
|
||||
});
|
||||
});
|
||||
}
|
||||
// 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.html(html);
|
||||
|
||||
@ -20,11 +20,8 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html, element;
|
||||
|
||||
html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
|
||||
//html += "<div class=\"panel-heading\">New Dashboard</div>\n";
|
||||
html += "<div class=\"panel-body \">\n";
|
||||
html = "<div id=\"count-container\" class=\"panel-body\" style=\"border:none\">\n";
|
||||
html += "<table>\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-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 += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
|
||||
|
||||
|
||||
|
||||
html += "</div>\n";
|
||||
html += "<hr>\n";
|
||||
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
|
||||
@ -19,7 +19,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
listCount = 0,
|
||||
jobs_scope = scope.$new(true),
|
||||
scheduled_scope = scope.$new(true),
|
||||
max_rows = 15,
|
||||
max_rows,
|
||||
html, e;
|
||||
|
||||
html = '';
|
||||
@ -80,6 +80,10 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
url: GetBasePath('schedules') + '?next_run__isnull=false',
|
||||
pageSize: max_rows
|
||||
});
|
||||
|
||||
$(window).resize(_.debounce(function() {
|
||||
resizeContainers();
|
||||
}, 500));
|
||||
});
|
||||
|
||||
if (scope.removeChoicesReady) {
|
||||
@ -88,6 +92,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
scope.removeChoicesReady = scope.$on('choicesReady', function() {
|
||||
choicesCount++;
|
||||
if (choicesCount === 2) {
|
||||
setHeight();
|
||||
scope.$emit('buildJobsList');
|
||||
}
|
||||
});
|
||||
@ -107,5 +112,52 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
variable: 'type_choices',
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
};
|
||||
}]);
|
||||
}
|
||||
]);
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
|
||||
<div class="tab-pane" id="home">
|
||||
<div ng-cloak id="htmlTemplate">
|
||||
<div id="refresh-row" class="row">
|
||||
<!--<div id="refresh-row" class="row">
|
||||
<div class="col-lg-12">
|
||||
<div id="home-list-actions" class="list-actions pull-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
<div class="row">
|
||||
<div id="container1" class="col-lg-12"></div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user