shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 16:51:11 +03:00
Code Releases Activity

graph filter and dashboard widget resizing

Browse Source
This commit is contained in:
Jared Tabor 2014-07-11 09:12:20 -04:00
parent 1ce4396c2f
commit abf134b7ce
7 changed files with 104 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,8 +101,21 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
target: 'container5', target: 'container5',
dashboard: data dashboard: data
}); });
setDashboardHeights();
}); });
function setDashboardHeights(){
//var winWidth = $(window).width(),
var winHeight = $(window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
//console.log("available_height: " + available_height);
$('.graph-container').height(available_height/2);
// console.log("graph-container height: "+$('.graph-container').height());
}
$scope.showActivity = function () { $scope.showActivity = function () {
Stream({ Stream({
scope: $scope scope: $scope

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

@ -116,13 +116,13 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
element.html(html); element.html(html);
$compile(element)(scope); $compile(element)(scope);
if(dashboard.hosts.failed>0 ){ if(dashboard.hosts.failed>0 ){
$('#failed-hosts').html("<a style=\"color:red\" href=/#/home/hosts id=\"failed-hosts\">"+dashboard.hosts.failed+"</a>"); $('#failed-hosts').html("<a style=\"color:#aa0000\" href=/#/home/hosts id=\"failed-hosts\">"+dashboard.hosts.failed+"</a>");
} }
if(dashboard.inventories.inventory_failed>0 ){ if(dashboard.inventories.inventory_failed>0 ){
$('#failed-inventories').html("<a style=\"color:red\" href=/#/inventories/?inventory_sources_with_failures id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a>"); $('#failed-inventories').html("<a style=\"color:#aa0000\" href=/#/inventories/?inventory_sources_with_failures id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a>");
} }
if(dashboard.projects.failed>0 ){ if(dashboard.projects.failed>0 ){
$('#failed-projects').html("<a style=\"color:red\" href=/#/projects id=\"failed-projects\">"+dashboard.projects.failed+"</a>"); $('#failed-projects').html("<a style=\"color:#aa0000\" href=/#/projects id=\"failed-projects\">"+dashboard.projects.failed+"</a>");
} }
scope.$emit('WidgetLoaded'); scope.$emit('WidgetLoaded');

36
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=10, max_rows,
html, e; html, e;
html = ''; html = '';
@ -30,7 +30,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
html += "<li><a id=\"scheduled_jobs_link\" ng-click=\"toggleTab($event, 'scheduled_jobs_link', 'job_status_tabs')\"\n"; html += "<li><a id=\"scheduled_jobs_link\" ng-click=\"toggleTab($event, 'scheduled_jobs_link', 'job_status_tabs')\"\n";
html += "href=\"#scheduled-jobs-tab\" data-toggle=\"tab\">Schedule</a></li>\n"; html += "href=\"#scheduled-jobs-tab\" data-toggle=\"tab\">Schedule</a></li>\n";
html += "</ul>\n"; html += "</ul>\n";
html += "<div class=\"tab-content\">\n"; html += "<div id=\"dashboard-tab-content\" class=\"tab-content \">\n";
html += "<div class=\"tab-pane active\" id=\"active-jobs-tab\">\n"; html += "<div class=\"tab-pane active\" id=\"active-jobs-tab\">\n";
html += "<div class=\"row search-row\">\n"; html += "<div class=\"row search-row\">\n";
html += "<div class=\"col-lg-6 col-md-6 col-sm-6\" id=\"active-jobs-search-container\"></div>\n"; html += "<div class=\"col-lg-6 col-md-6 col-sm-6\" id=\"active-jobs-search-container\"></div>\n";
@ -84,7 +84,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
}); });
$(window).resize(_.debounce(function() { $(window).resize(_.debounce(function() {
resizeContainers(); resizeDashboardJobsWidget();
}, 500)); }, 500));
}); });
@ -94,7 +94,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(); setDashboardJobsHeight();
scope.$emit('buildJobsList'); scope.$emit('buildJobsList');
} }
}); });
@ -116,22 +116,30 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
}); });
// Set the height of each container and calc max number of rows containers can hold // Set the height of each container and calc max number of rows containers can hold
function setHeight() { function setDashboardJobsHeight() {
var docw = $(window).width(), var docw = $(window).width(),
//doch = $(window).height(), // //doch = $(window).height(),
available_height, available_height,
search_row, page_row, height, header, row_height; search_row, page_row, height, header, row_height;
if (docw > 1000) { if (docw > 1000) {
// customize the container height and # of rows based on available viewport height // // 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; // available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
$('.jobs-list-container').each(function() {
$(this).height(Math.floor(available_height / 2)); // 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));
// });
available_height = 500; // $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
// console.log("available_height: " + available_height);
$('.dashboard-jobs-list-container').height(500);
//console.log("dashboard-jobs-list-container height: "+$('.dashboard-jobs-list-container').height());
search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50); search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50);
page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33); page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
header = Math.max($('#completed_jobs_table thead').height(), 41); header = Math.max($('#completed_jobs_table thead').height(), 41);
height = Math.floor(available_height) - header - page_row ; height = Math.floor(available_height) - header - page_row -search_row-30 ;
row_height = (docw < 1415) ? 47 : 27; row_height = (docw < 1415) ? 47 : 27;
//$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded //$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded
max_rows = Math.floor(height / row_height); max_rows = Math.floor(height / row_height);
@ -146,8 +154,8 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
} }
// Set container height and return the number of allowed rows // Set container height and return the number of allowed rows
function resizeContainers() { function resizeDashboardJobsWidget() {
setHeight(); setDashboardJobsHeight();
// completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows; // completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows;
// completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator); // completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
// running_scope[RunningJobsList.iterator + '_page_size'] = max_rows; // running_scope[RunningJobsList.iterator + '_page_size'] = max_rows;

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

@ -21,9 +21,11 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
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>Hosts Count</b></div>\n"; html += "<div class=\"h6 col-xs-8 text-center\"><b>Host Count</b></div>\n";
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
html += "</div>\n"; html += "</div>\n";
html +="<div class=\"row\">\n";
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
html += "</div>\n"; html += "</div>\n";
@ -105,8 +107,8 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width/3, var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height/5, height = $('.graph-container').height()*0.8, //nv.utils.windowSize().height/5,
chart = nv.models.lineChart() chart = nv.models.lineChart()
.margin({top: 15, right: 75, bottom: 40, left: 85}) .margin({top: 15, right: 75, bottom: 40, left: 85})
.x(function(d,i) { return i ;}) .x(function(d,i) { return i ;})
@ -150,6 +152,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
scope.$emit('WidgetLoaded'); scope.$emit('WidgetLoaded');
return chart; return chart;
}, },
}); });

20
awx/ui/static/js/widgets/HostPieChart.js
View File

@ -24,21 +24,6 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
html +="<div class=\"row\">\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 id=\"job-status-title\" class=\"h6 col-xs-8 text-center\"><b>Host Status</b></div>\n";
html += "</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 += "Filter<span class=\"caret\"></span>\n";
// html += " </a>\n";
// html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\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=\"row\">\n"; html +="<div class=\"row\">\n";
html += "<div class=\"host-pie-chart\"><svg></svg></div>\n"; html += "<div class=\"host-pie-chart\"><svg></svg></div>\n";
@ -86,9 +71,10 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) { scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) {
data = exampleData(); data = exampleData();
nv.addGraph(function() { nv.addGraph(function() {
var width = nv.utils.windowSize().width/3, var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height/5, height = $('.graph-container').height()*0.85, //nv.utils.windowSize().height/5,
chart = nv.models.pieChart() chart = nv.models.pieChart()
.margin({top: 5, right: 75, bottom: 40, left: 85})
.x(function(d) { return d.label; }) .x(function(d) { return d.label; })
.y(function(d) { return d.value; }) .y(function(d) { return d.value; })
.showLabels(true); .showLabels(true);

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

@ -24,15 +24,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html = "<div class=\"graph-container\">\n"; html = "<div class=\"graph-container\">\n";
html +="<div class=\"row\">\n"; html +="<div class=\"row\">\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 id=\"job-status-title\" class=\"h6 col-xs-8 text-center\"><b>Job Status</b></div>\n"; // for All Jobs, Past Month
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";
html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n"; html += "<a id=\"type-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
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\" role=\"menu\" aria-labelledby=\"type-dropdown\">\n";
html += "<li><a class=\"m\" id=\"all\">All</a></li>\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=\"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=\"scm_update\">SCM Update</a></li>\n";
@ -44,11 +44,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
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";
html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n"; html += "<a id=\"period-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
html += "Period<span class=\"caret\"></span>\n"; html += "Period<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\" role=\"menu\" aria-labelledby=\"period-dropdown\">\n";
html += "<li><a class=\"n\" id=\"day\" >Past 24 Hours </a></li>\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=\"week\">Past Week</a></li>\n";
html += "<li><a class=\"n\" id=\"month\">Past Month</a></li>\n"; html += "<li><a class=\"n\" id=\"month\">Past Month</a></li>\n";
@ -91,6 +91,8 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
scope.removeGraphDataReady(); scope.removeGraphDataReady();
} }
scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) { scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) {
var timeFormat, graphData = [ var timeFormat, graphData = [
{ {
"color": "#1778c3", "color": "#1778c3",
@ -122,17 +124,17 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width/3, var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height/5, height = $('.graph-container').height()*0.8, //nv.utils.windowSize().height/5,
chart = nv.models.lineChart() chart = nv.models.lineChart()
.margin({top: 5, right: 75, bottom: 40, left: 85}) //Adjust chart margins to give the x-axis some breathing room. .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; }) .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) // .width(width)
// .height(height) // .height(height)
; ;
@ -168,18 +170,27 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "src": "url(/static/fonts/OpenSans-Regular.ttf)"
}); });
nv.utils.windowResize(function(){
nv.utils.windowResize(chart.update); // var winWidth = $(window).width(),
var winHeight = $(window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
// console.log("available_height: " + available_height);
$('.graph-container').height(available_height/2);
// console.log("graph-container height: "+$('.graph-container').height());
chart.update();
});
//nv.utils.windowResize(chart.update);
//On click, update with new data //On click, update with new data
d3.selectAll(".n") d3.selectAll(".n")
.on("click", function() { .on("click", function() {
period = this.getAttribute("id"); period = this.getAttribute("id");
// console.log(period); $('#period-dropdown').text(this.text);
var title = $('#job-status-title').text(), // var title = $('#job-status-title').text(),
str = title.slice(0,title.search(","))+", "+this.innerHTML; // str = title.slice(0,title.search(","))+", "+this.innerHTML;
$('#job-status-title').html("<b>"+str+" </b>"); // $('#job-status-title').html("<b>"+str+" </b>");
createGraph(); createGraph();
}); });
@ -187,10 +198,10 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
d3.selectAll(".m") d3.selectAll(".m")
.on("click", function() { .on("click", function() {
job_type = this.getAttribute("id"); job_type = this.getAttribute("id");
//console.log(job_type); $('#type-dropdown').text(this.text);
var title = $('#job-status-title').text(), // var title = $('#job-status-title').text(),
str = title.slice(title.search(",")); // str = title.slice(title.search(","));
$('#job-status-title').html("<b>Job Status for "+this.innerHTML+" Jobs"+str+" </b>"); // $('#job-status-title').html("<b>Job Status for "+this.innerHTML+" Jobs"+str+" </b>");
createGraph(); createGraph();
}); });
@ -199,6 +210,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
}, },
}); });
}); });

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

@ -7,9 +7,7 @@
* *
*/ */
#sync-failure {
color:red;
}
.job-status-graph, .host-count-graph{ .job-status-graph, .host-count-graph{
font: 10px sans-serif; font: 10px sans-serif;
@ -32,6 +30,7 @@
border: 1px solid @grey; border: 1px solid @grey;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 5px;
} }
.graph-container{ .graph-container{
@ -47,8 +46,20 @@
margin-right: 0px; margin-right: 0px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.carousel-control.left, .carousel-control.right {
background-image: none
#dashboard-tab-content{
padding-top: 5px;
}
#dashboard-tab-content .search-row #active-jobs-search-container{
height: 35px;
}
#dashboard-tab-content table{
margin-bottom: 10px;
} }
.dashboard-jobs-list-container { .dashboard-jobs-list-container {
@ -64,27 +75,20 @@
} }
} }
#container4{
padding-bottom: 15px;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.left-side { .left-side {
padding-right: 7px; padding-right: 7px;
} }
.right-side { .right-side {
padding-left: 7px; padding-left: 7px;
} }
} }
.period-dropdown{
height: 75px;
width: 100px;
cursor: pointer;
}
.status-dropdown{
height: 100px;
width: 100px;
cursor:pointer;
}
.m, .n{ .m, .n{
cursor:pointer; cursor:pointer;
} }