mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
graph filter and dashboard widget resizing
This commit is contained in:
Jared Tabor
parent
1ce4396c2f
commit
abf134b7ce
@ -101,8 +101,21 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
target: 'container5',
|
||||
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 () {
|
||||
Stream({
|
||||
scope: $scope
|
||||
|
||||
@ -116,13 +116,13 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
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 ){
|
||||
$('#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 ){
|
||||
$('#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');
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
listCount = 0,
|
||||
jobs_scope = scope.$new(true),
|
||||
scheduled_scope = scope.$new(true),
|
||||
max_rows=10,
|
||||
max_rows,
|
||||
html, e;
|
||||
|
||||
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 += "href=\"#scheduled-jobs-tab\" data-toggle=\"tab\">Schedule</a></li>\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=\"row search-row\">\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() {
|
||||
resizeContainers();
|
||||
resizeDashboardJobsWidget();
|
||||
}, 500));
|
||||
});
|
||||
|
||||
@ -94,7 +94,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
scope.removeChoicesReady = scope.$on('choicesReady', function() {
|
||||
choicesCount++;
|
||||
if (choicesCount === 2) {
|
||||
setHeight();
|
||||
setDashboardJobsHeight();
|
||||
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
|
||||
function setHeight() {
|
||||
function setDashboardJobsHeight() {
|
||||
var docw = $(window).width(),
|
||||
//doch = $(window).height(),
|
||||
// //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));
|
||||
});
|
||||
// // customize the container height and # of rows based on available viewport height
|
||||
// available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
|
||||
|
||||
// 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);
|
||||
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 ;
|
||||
height = Math.floor(available_height) - header - page_row -search_row-30 ;
|
||||
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);
|
||||
@ -146,8 +154,8 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
|
||||
}
|
||||
|
||||
// Set container height and return the number of allowed rows
|
||||
function resizeContainers() {
|
||||
setHeight();
|
||||
function resizeDashboardJobsWidget() {
|
||||
setDashboardJobsHeight();
|
||||
// completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows;
|
||||
// completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
|
||||
// running_scope[RunningJobsList.iterator + '_page_size'] = max_rows;
|
||||
|
||||
@ -21,9 +21,11 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-xs-8 text-center\"><b>Hosts Count</b></div>\n";
|
||||
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
|
||||
html += "<div class=\"h6 col-xs-8 text-center\"><b>Host Count</b></div>\n";
|
||||
html += "</div>\n";
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
|
||||
|
||||
html += "</div>\n";
|
||||
|
||||
|
||||
@ -105,8 +107,8 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/5,
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
height = $('.graph-container').height()*0.8, //nv.utils.windowSize().height/5,
|
||||
chart = nv.models.lineChart()
|
||||
.margin({top: 15, right: 75, bottom: 40, left: 85})
|
||||
.x(function(d,i) { return i ;})
|
||||
@ -150,6 +152,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
nv.utils.windowResize(chart.update);
|
||||
scope.$emit('WidgetLoaded');
|
||||
return chart;
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
@ -24,21 +24,6 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
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>\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=\"host-pie-chart\"><svg></svg></div>\n";
|
||||
@ -86,9 +71,10 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) {
|
||||
data = exampleData();
|
||||
nv.addGraph(function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/5,
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
height = $('.graph-container').height()*0.85, //nv.utils.windowSize().height/5,
|
||||
chart = nv.models.pieChart()
|
||||
.margin({top: 5, right: 75, bottom: 40, left: 85})
|
||||
.x(function(d) { return d.label; })
|
||||
.y(function(d) { return d.value; })
|
||||
.showLabels(true);
|
||||
|
||||
@ -24,15 +24,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
html = "<div class=\"graph-container\">\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=\"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 += " </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=\"inv_sync\">Inventory Sync</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=\"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 += " </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=\"week\">Past Week</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.$on('graphDataReady', function (e, data) {
|
||||
|
||||
|
||||
var timeFormat, graphData = [
|
||||
{
|
||||
"color": "#1778c3",
|
||||
@ -122,17 +124,17 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/5,
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
height = $('.graph-container').height()*0.8, //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.
|
||||
.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)
|
||||
// .width(width)
|
||||
// .height(height)
|
||||
;
|
||||
|
||||
@ -168,18 +170,27 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
"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
|
||||
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>");
|
||||
$('#period-dropdown').text(this.text);
|
||||
// var title = $('#job-status-title').text(),
|
||||
// str = title.slice(0,title.search(","))+", "+this.innerHTML;
|
||||
// $('#job-status-title').html("<b>"+str+" </b>");
|
||||
createGraph();
|
||||
});
|
||||
|
||||
@ -187,10 +198,10 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
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>");
|
||||
$('#type-dropdown').text(this.text);
|
||||
// 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();
|
||||
});
|
||||
|
||||
@ -199,6 +210,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -7,9 +7,7 @@
|
||||
*
|
||||
*/
|
||||
|
||||
#sync-failure {
|
||||
color:red;
|
||||
}
|
||||
|
||||
|
||||
.job-status-graph, .host-count-graph{
|
||||
font: 10px sans-serif;
|
||||
@ -32,6 +30,7 @@
|
||||
border: 1px solid @grey;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
|
||||
}
|
||||
|
||||
.graph-container{
|
||||
@ -47,8 +46,20 @@
|
||||
margin-right: 0px;
|
||||
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 {
|
||||
@ -64,27 +75,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
#container4{
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.left-side {
|
||||
padding-right: 7px;
|
||||
}
|
||||
.left-side {
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
padding-left: 7px;
|
||||
}
|
||||
.right-side {
|
||||
padding-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.period-dropdown{
|
||||
height: 75px;
|
||||
width: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-dropdown{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.m, .n{
|
||||
cursor:pointer;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user