Fix issue with graph modules causing vertical scroll

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) {

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();
+      });
+
+    };
+
+}]);

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]);
 

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>

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>