From fb9596d00fd558459e54d2306f45bb0ed7449463 Mon Sep 17 00:00:00 2001 From: Jared Tabor Date: Fri, 11 Jul 2014 15:30:39 -0400 Subject: [PATCH] updated resizing for jobs widget. made host count graph widget hidden if user is not an admin --- awx/ui/static/js/controllers/Home.js | 19 ++-- awx/ui/static/js/widgets/DashboardCounts.js | 96 ++------------------- awx/ui/static/js/widgets/DashboardJobs.js | 39 +++------ awx/ui/static/js/widgets/HostGraph.js | 2 +- awx/ui/static/js/widgets/HostPieChart.js | 4 +- awx/ui/static/js/widgets/JobStatusGraph.js | 9 +- 6 files changed, 33 insertions(+), 136 deletions(-) diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index b8b2138986..92cba59584 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -48,7 +48,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb e.html(html); $compile(e)($scope); - waitCount = 3; + waitCount = 4; loadedCount = 0; 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 loadedCount++; if (loadedCount === waitCount) { + $(window).resize(); Wait('stop'); } }); @@ -90,6 +91,10 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb dashboard: data }); } + else{ + $('#container4').replaceWith("
"); + } + DashboardJobs({ scope: $scope, @@ -101,21 +106,9 @@ 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 diff --git a/awx/ui/static/js/widgets/DashboardCounts.js b/awx/ui/static/js/widgets/DashboardCounts.js index e600ddd74f..f1174fb851 100644 --- a/awx/ui/static/js/widgets/DashboardCounts.js +++ b/awx/ui/static/js/widgets/DashboardCounts.js @@ -19,116 +19,36 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities']) dashboard = params.dashboard, html, element; - // html = "
\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; - // html += "
\n"; - html = "
\n"; html = "
\n"; - html += "
" + dashboard.hosts.total+"
Hosts
\n"; + html += "
"+ dashboard.hosts.total+"
Hosts
\n"; html += "
"+dashboard.hosts.failed+"
Failed Hosts
\n"; - html += "
"+dashboard.inventories.total+"
Inventories
\n"; - html += "
"+dashboard.inventories.inventory_failed+"
Inventory Sync Failures
\n"; - html += "
"+dashboard.projects.total+"
Projects
\n"; - html += "
"+dashboard.projects.failed+"
Project Sync Failures
\n"; + html += "
"+dashboard.inventories.total+"
Inventories
\n"; + html += "
"+dashboard.inventories.inventory_failed+"
Inventory Sync Failures
\n"; + html += "
"+dashboard.projects.total+"
Projects
\n"; + html += "
"+dashboard.projects.failed+"
Project Sync Failures
\n"; // html += "
"+dashboard.users.total+"
\n"; html += "
\n"; - // html += "
\n"; - // html += "
Hosts
\n"; - // html += "
Failed Hosts
\n"; - // html += "
Inventories
\n"; - // html += "
Inventory Sync Failures
\n"; - // html += "
Projects
\n"; - // html += "
Project Sync Failures
\n"; - // // html += "
Users
\n"; - // html += "
\n"; html += "
\n"; - // html = "
\n"; - // // html+= "
\n"; - // html = "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - - // html += "\n"; - - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - - // html += "\n"; - // html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+"
HostsFailed HostsInventories
\n"; - // // html += "
\n"; - - // // html+= "
\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - - // html += "\n"; - - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - // html += "\n"; - - // html += "\n"; - // html += "
"+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
Inventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; - // // html += "
\n"; - // html += "
\n"; - - - - - element = angular.element(document.getElementById(target)); element.html(html); $compile(element)(scope); if(dashboard.hosts.failed>0 ){ - $('#failed-hosts').html(""+dashboard.hosts.failed+""); + $('#failed-hosts').replaceWith(""+dashboard.hosts.failed+""); } if(dashboard.inventories.inventory_failed>0 ){ - $('#failed-inventories').html(""+dashboard.inventories.inventory_failed+""); + $('#failed-inventories').replaceWith(""+dashboard.inventories.inventory_failed+""); } if(dashboard.projects.failed>0 ){ - $('#failed-projects').html(""+dashboard.projects.failed+""); + $('#failed-projects').replaceWith(""+dashboard.projects.failed+""); } scope.$emit('WidgetLoaded'); - - - }; } ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js index 9a7fefb0f2..cce96a2c1b 100644 --- a/awx/ui/static/js/widgets/DashboardJobs.js +++ b/awx/ui/static/js/widgets/DashboardJobs.js @@ -120,35 +120,20 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) // Set the height of each container and calc max number of rows containers can hold function setDashboardJobsHeight() { 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() - $('#count-container').outerHeight() - 93; + available_height, search_row, page_row, height, header, row_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)); - // }); + available_height = Math.floor(($(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93)/2); + $('.dashboard-jobs-list-container').height(available_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; + max_rows = Math.floor(height / row_height); - 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 -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' }); - }); + if(max_rows<5){ + $('.dashboard-jobs-list-container').height(header+page_row+search_row+30+(5*row_height)); + // $('.dashboard-jobs-list-container').height(500); max_rows = 5; } } diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js index 51b32629eb..cd85f2a151 100644 --- a/awx/ui/static/js/widgets/HostGraph.js +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -150,7 +150,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) // }); nv.utils.windowResize(chart.update); - scope.$emit('WidgetLoaded'); + return chart; }, diff --git a/awx/ui/static/js/widgets/HostPieChart.js b/awx/ui/static/js/widgets/HostPieChart.js index 601fa0787a..2eead89ba9 100644 --- a/awx/ui/static/js/widgets/HostPieChart.js +++ b/awx/ui/static/js/widgets/HostPieChart.js @@ -45,9 +45,6 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) } - - - element = angular.element(document.getElementById(target)); element.html(html); $compile(element)(scope); @@ -86,6 +83,7 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities']) .transition().duration(350) .call(chart); nv.utils.windowResize(chart.update); + scope.$emit('WidgetLoaded'); return chart; }); }); diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js index 476c95e189..3d3ad49887 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -95,7 +95,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) var timeFormat, graphData = [ { - "color": "#1778c3", + "color": "#00aa00", "key": "Successful", "values": data.jobs.successful }, @@ -180,14 +180,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) // console.log("graph-container height: "+$('.graph-container').height()); chart.update(); }); - //nv.utils.windowResize(chart.update); + // nv.utils.windowResize(chart.update); //On click, update with new data d3.selectAll(".n") .on("click", function() { period = this.getAttribute("id"); - $('#period-dropdown').text(this.text); + $('#period-dropdown').replaceWith(""+this.text+"\n"); + //$('#period-dropdown').text(this.text); // var title = $('#job-status-title').text(), // str = title.slice(0,title.search(","))+", "+this.innerHTML; // $('#job-status-title').html(""+str+" "); @@ -198,7 +199,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) d3.selectAll(".m") .on("click", function() { job_type = this.getAttribute("id"); - $('#type-dropdown').text(this.text); + $('#type-dropdown').replaceWith(""+this.text+"\n"); // var title = $('#job-status-title').text(), // str = title.slice(title.search(",")); // $('#job-status-title').html("Job Status for "+this.innerHTML+" Jobs"+str+" ");