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

updated resizing for jobs widget. made host count graph widget hidden if user is not an admin

Browse Source
This commit is contained in:
Jared Tabor
2014-07-11 15:30:39 -04:00
parent 3cd5c40dd5
commit fb9596d00f
6 changed files with 33 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,7 +48,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
e.html(html); e.html(html);
$compile(e)($scope); $compile(e)($scope);
waitCount = 3; waitCount = 4;
loadedCount = 0; loadedCount = 0;
if (!$routeParams.login) { if (!$routeParams.login) {
@@ -63,6 +63,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
// Once all the widgets report back 'loaded', turn off Wait widget // Once all the widgets report back 'loaded', turn off Wait widget
loadedCount++; loadedCount++;
if (loadedCount === waitCount) { if (loadedCount === waitCount) {
$(window).resize();
Wait('stop'); Wait('stop');
} }
}); });
@@ -90,6 +91,10 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
dashboard: data dashboard: data
}); });
} }
else{
$('#container4').replaceWith("<div id='container4' class='left-side col-sm-12 col-xs-12'></div>");
}
DashboardJobs({ DashboardJobs({
scope: $scope, scope: $scope,
@@ -101,21 +106,9 @@ 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

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

@@ -19,116 +19,36 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
dashboard = params.dashboard, dashboard = params.dashboard,
html, element; html, element;
// html = "<div id=\"count-container\" class=\"count-container row\">\n";
// html += "<table col-xs-12>\n";
// html += "<tr>\n";
// html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
// html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
// html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
// html += "<td class=\" h2 text-center\" id=\"sync-failure\" style=\"border:none\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
// html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
// html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
// html += "<td class=\" h2 text-center\" style=\"border:none\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
// html += "</tr>\n";
// html += "<tr>\n";
// html += "<td class=\" h6 text-center\" style=\"border:none\">Hosts</td>\n";
// html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Failed Hosts</td>\n";
// html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Inventories</td>\n";
// html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Inventory Sync Failures</td>\n";
// html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Projects</td>\n";
// html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Project Sync Failures</td>\n";
// html += "<td class=\" h6 col-lg-1 text-center\" style=\"border:none\">Users</td>\n";
// html += "</tr>\n";
// html += "</table>\n";
// html += "</div>\n";
html = "<div class=\"container\" >\n"; html = "<div class=\"container\" >\n";
html = "<div id=\"count-container\" class=\"count-container row\">\n"; html = "<div id=\"count-container\" class=\"count-container row\">\n";
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a><br><h6>Hosts</h6></div>\n"; html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/home/hosts\">"+ dashboard.hosts.total+"</a><br><h6>Hosts</h6></div>\n";
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/home/hosts/?has_active_failures=true\" id=\"failed-hosts\">"+dashboard.hosts.failed+"</a><br><h6>Failed Hosts</h6></div>\n"; html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/home/hosts/?has_active_failures=true\" id=\"failed-hosts\">"+dashboard.hosts.failed+"</a><br><h6>Failed Hosts</h6></div>\n";
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a><br><h6>Inventories</h6></div>\n"; html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/inventories\">"+dashboard.inventories.total+"</a><br><h6>Inventories</h6></div>\n";
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/inventories/?inventory_sources_with_failures id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a><br><h6>Inventory Sync Failures</h6></div>\n"; html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/inventories/?inventory_sources_with_failures\" id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a><br><h6>Inventory Sync Failures</h6></div>\n";
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a><br><h6>Projects</h6></div>\n"; html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/projects\">"+dashboard.projects.total+"</a><br><h6>Projects</h6></div>\n";
html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/projects id=\"failed-projects\">"+dashboard.projects.failed+"</a><br><h6>Project Sync Failures</h6></div>\n"; html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=\"/#/projects/?status=failed\" id=\"failed-projects\">"+dashboard.projects.failed+"</a><br><h6>Project Sync Failures</h6></div>\n";
// html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></div>\n"; // html += "<div class=\"h2 col-xs-4 col-sm-2 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></div>\n";
html += "</div>\n"; html += "</div>\n";
// html += "<div class=\"row\"> \n";
// html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Hosts</div>\n";
// html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Failed Hosts</div>\n";
// html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Inventories</div>\n";
// html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Inventory Sync Failures</div>\n";
// html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Projects</div>\n";
// html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Project Sync Failures</div>\n";
// // html += "<div class=\"h6 col-xs-4 col-sm-2 text-center\">Users</div>\n";
// html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
// html = "<div id=\"count-container\" class=\"row\">\n";
// // html+= "<div class=\"col-lg-6\">\n";
// html = "<table class=\"col-sm-6\">\n";
// html += "<tr>\n";
// html += "<td class=\"h2 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
// html += "<td class=\"h2 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
// html += "<td class=\"h2 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
// html += "</tr>\n";
// html += "<tr>\n";
// html += "<td class=\"h6 text-center\">Hosts</td>\n";
// html += "<td class=\"h6 text-center\">Failed Hosts</td>\n";
// html += "<td class=\"h6 text-center\">Inventories</td>\n";
// html += "</tr>\n";
// html += "</table>\n";
// // html += "</div>\n";
// // html+= "<div >\n";
// html += "<table class=\"col-sm-6\">\n";
// html += "<tr>\n";
// html += "<td class=\"h2 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
// html += "<td class=\"h2 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
// html += "<td class=\"h2 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
// html += "<td class=\"h2 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
// html += "</tr>\n";
// html += "<tr>\n";
// html += "<td class=\"h6 text-center\">Inventory Sync Failures</td>\n";
// html += "<td class=\"h6 text-center\">Projects</td>\n";
// html += "<td class=\"h6 text-center\">Project Sync Failures</td>\n";
// html += "<td class=\"h6 text-center\">Users</td>\n";
// html += "</tr>\n";
// html += "</table>\n";
// // html += "</div>\n";
// html += "</div>\n";
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
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:#aa0000\" href=\"/#/home/hosts/?has_active_failures=true\" id=\"failed-hosts\">"+dashboard.hosts.failed+"</a>"); $('#failed-hosts').replaceWith("<a style=\"color:#aa0000\" href=\"/#/home/hosts/?has_active_failures=true\" 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:#aa0000\" href=/#/inventories/?inventory_sources_with_failures id=\"failed-inventories\">"+dashboard.inventories.inventory_failed+"</a>"); $('#failed-inventories').replaceWith("<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:#aa0000\" href=\"/#/projects/?status=failed\" id=\"failed-projects\">"+dashboard.projects.failed+"</a>"); $('#failed-projects').replaceWith("<a style=\"color:#aa0000\" href=\"/#/projects/?status=failed\" id=\"failed-projects\">"+dashboard.projects.failed+"</a>");
} }
scope.$emit('WidgetLoaded'); scope.$emit('WidgetLoaded');
}; };
} }
]); ]);

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

@@ -120,35 +120,20 @@ 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 setDashboardJobsHeight() { function setDashboardJobsHeight() {
var docw = $(window).width(), var docw = $(window).width(),
// //doch = $(window).height(), available_height, search_row, page_row, height, header, row_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() - $('#count-container').outerHeight() - 93;
// available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#graph-container').outerHeight() - $('#count-container').outerHeight() - 80; available_height = Math.floor(($(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93)/2);
// $('.jobs-list-container').each(function() { $('.dashboard-jobs-list-container').height(available_height);
// $(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 - search_row -30 ;
row_height = (docw < 1415) ? 47 : 27;
max_rows = Math.floor(height / row_height);
available_height = 500; // $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93; if(max_rows<5){
// console.log("available_height: " + available_height); $('.dashboard-jobs-list-container').height(header+page_row+search_row+30+(5*row_height));
$('.dashboard-jobs-list-container').height(500); // $('.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 -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);
}
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; max_rows = 5;
} }
} }

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

@@ -150,7 +150,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
// }); // });
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
scope.$emit('WidgetLoaded');
return chart; return chart;
}, },

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

@@ -45,9 +45,6 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
} }
element = angular.element(document.getElementById(target)); element = angular.element(document.getElementById(target));
element.html(html); element.html(html);
$compile(element)(scope); $compile(element)(scope);
@@ -86,6 +83,7 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
.transition().duration(350) .transition().duration(350)
.call(chart); .call(chart);
nv.utils.windowResize(chart.update); nv.utils.windowResize(chart.update);
scope.$emit('WidgetLoaded');
return chart; return chart;
}); });
}); });

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

@@ -95,7 +95,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
var timeFormat, graphData = [ var timeFormat, graphData = [
{ {
"color": "#1778c3", "color": "#00aa00",
"key": "Successful", "key": "Successful",
"values": data.jobs.successful "values": data.jobs.successful
}, },
@@ -180,14 +180,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
// console.log("graph-container height: "+$('.graph-container').height()); // console.log("graph-container height: "+$('.graph-container').height());
chart.update(); chart.update();
}); });
//nv.utils.windowResize(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");
$('#period-dropdown').text(this.text); $('#period-dropdown').replaceWith("<a id=\"period-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n");
//$('#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>");
@@ -198,7 +199,7 @@ 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");
$('#type-dropdown').text(this.text); $('#type-dropdown').replaceWith("<a id=\"type-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n");
// 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>");