From f2dbf7a559ac1ef75ff6e0e17ec3918aae5dbcca Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Wed, 28 Jan 2015 12:06:10 -0500
Subject: [PATCH] Fix issue with graph modules causing vertical scroll

---
 awx/ui/static/js/controllers/Home.js          |  7 ++---
 .../static/js/directives/auto-size-module.js  | 31 +++++++++++++++++++
 .../static/js/services/adjust-graph-size.js   |  1 -
 awx/ui/static/partials/home.html              |  6 ++--
 awx/ui/templates/ui/index.html                |  1 +
 5 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 awx/ui/static/js/directives/auto-size-module.js

diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js
index d6a2778ca2..4fb44d07d4 100644
--- a/awx/ui/static/js/controllers/Home.js
+++ b/awx/ui/static/js/controllers/Home.js
@@ -86,17 +86,14 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
             "margin-bottom": "15px"};
         $('.graph-container').css(borderStyles);
 
-        var winHeight = $(window).height(),
-        available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
-        $('.graph-container').height(available_height/2);
-        // // chart.update();
-
         DashboardCounts({
             scope: $scope,
             target: 'dash-counts',
             dashboard: data
         });
 
+        // // chart.update();
+
         $scope.graphData = graphData;
 
         if ($rootScope.user_is_superuser !== true) {
diff --git a/awx/ui/static/js/directives/auto-size-module.js b/awx/ui/static/js/directives/auto-size-module.js
new file mode 100644
index 0000000000..daaec6442e
--- /dev/null
+++ b/awx/ui/static/js/directives/auto-size-module.js
@@ -0,0 +1,31 @@
+angular.module('DashboardGraphs')
+  .directive('autoSizeModule', ['$window', function($window) {
+
+    // Adjusts the size of the module so that all modules
+    // fit into a single a page; assumes there are 2 rows
+    // of modules, with the available height being offset
+    // by the navbar & the count summaries module
+    return function(scope, element, attr) {
+
+      function adjustSize() {
+        var winHeight = $($window).height(),
+        available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
+        element.height(available_height/2);
+      }
+
+      $($window).resize(adjustSize);
+
+      element.on('$destroy', function() {
+        $($window).off('resize', adjustSize);
+      });
+
+      // This makes sure count-container div is loaded
+      // by controllers/Home.js before we use it
+      // to determine the available window height
+      scope.$on('dashboardReady', function() {
+        adjustSize();
+      });
+
+    };
+
+}]);
diff --git a/awx/ui/static/js/services/adjust-graph-size.js b/awx/ui/static/js/services/adjust-graph-size.js
index 0e361b4858..497955adcb 100644
--- a/awx/ui/static/js/services/adjust-graph-size.js
+++ b/awx/ui/static/js/services/adjust-graph-size.js
@@ -14,7 +14,6 @@ angular.module('DashboardGraphs').
         var width = parseInt(graph.style('width')) - margins.left - margins.right;
         var height = parseInt(graph.style('height')) - margins.top - margins.bottom;
 
-
         chartModel.xRange([0, width]);
         chartModel.yRange([height, 0]);
 
diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html
index c4df41acb2..5b0e035011 100644
--- a/awx/ui/static/partials/home.html
+++ b/awx/ui/static/partials/home.html
@@ -13,12 +13,12 @@
       </div>
       <div class="row">
         <div class="left-side col-sm-6 col-xs-12">
-          <div  id="dash-job-status-graph" class="graph-container">
+          <div  id="dash-job-status-graph" auto-size-module class="graph-container">
             <job-status-graph data="graphData.jobStatus" period="month" job-type="all"></job-status-graph>
           </div>
         </div>
          <div  class="right-side col-sm-6 col-xs-12">
-           <div id="dash-host-status-graph" class="graph-container">
+           <div id="dash-host-status-graph" auto-size-module class="graph-container">
              <host-status-graph data="dashboardData"></host-status-graph>
            </div>
          </div>
@@ -26,7 +26,7 @@
       <div class="row">
          <div id="dash-jobs-list" class="left-side col-sm-6 col-xs-12"></div>
          <div class="right-side col-sm-6 col-xs-12">
-           <div id="dash-host-count-graph" class="graph-container">
+           <div id="dash-host-count-graph" auto-size-module class="graph-container">
              <host-count-graph data="graphData.hostCounts"></host-count-graph>
            </div>
          </div>
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 3893bcc93b..a59c5d69a4 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -86,6 +86,7 @@
     <script src="{{ STATIC_URL }}js/services/job-status-graph-data.js"></script>
     <script src="{{ STATIC_URL }}js/directives/dashboard-graphs.js"></script>
     <script src="{{ STATIC_URL }}js/services/adjust-graph-size.js"></script>
+    <script src="{{ STATIC_URL }}js/directives/auto-size-module.js"></script>
     <script src="{{ STATIC_URL }}js/directives/job-status-graph.js"></script>
     <script src="{{ STATIC_URL }}js/directives/host-status-graph.js"></script>
     <script src="{{ STATIC_URL }}js/directives/host-count-graph.js"></script>