Added custom scroll bar to inventory groups container. Moved group container auto-resize and height calc function to helper methods. Now using full window height, pushing footer off the page. Changed custom sroll directive to use the dark-thin theme.

awx/ui/static/js/controllers/Inventories.js

@@ -7,15 +7,15 @@
  *  Controller functions for the Inventory model.
  *
  */
- 
+
 'use strict';
 
 function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $compile, $filter, Rest, Alert, InventoryList, GenerateList,
     LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, ClearScope, ProcessErrors, GetBasePath, Wait, Stream,
     EditInventoryProperties, Find, Empty, LogViewer) {
-    
+
     //ClearScope();
-  
+
     var list = InventoryList,
         defaultUrl = GetBasePath('inventory'),
         view = GenerateList,
@@ -60,7 +60,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com
         list: list,
         url: defaultUrl
     });
-    
+
     PaginateInit({
         scope: $scope,
         list: list,
@@ -168,7 +168,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com
         $scope.removeHostSummaryReady();
     }
     $scope.removeHostSummaryReady = $scope.$on('HostSummaryReady', function(e, event, data) {
-        
+
         var html, title = "Recent Jobs";
         Wait('stop');
         if (data.count > 0) {
@@ -182,7 +182,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com
             html += "</tr>\n";
             html += "</thead>\n";
             html += "<tbody>\n";
-            
+
             data.results.forEach(function(row) {
                 html += "<tr>\n";
                 html += "<td><a ng-click=\"viewJob('" + row.url + "')\" " + "aw-tool-tip=\"" + row.status.charAt(0).toUpperCase() + row.status.slice(1) +
@@ -210,7 +210,7 @@ function InventoriesList($scope, $rootScope, $location, $log, $routeParams, $com
     }
     $scope.removeGroupSummaryReady = $scope.$on('GroupSummaryReady', function(e, event, inventory, data) {
         var html, title;
-        
+
         Wait('stop');
 
         // Build the html for our popover
@@ -367,7 +367,7 @@ InventoriesList.$inject = ['$scope', '$rootScope', '$location', '$log', '$routeP
 function InventoriesAdd($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm, GenerateForm, Rest,
     Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, GenerateList, OrganizationList, SearchInit, PaginateInit,
     LookUpInit, GetBasePath, ParseTypeChange, Wait) {
-    
+
     ClearScope();
 
     // Inject dynamic view
@@ -380,10 +380,10 @@ function InventoriesAdd($scope, $rootScope, $compile, $location, $log, $routePar
     form.formFieldSize = null;
 
     generator.inject(form, { mode: 'add', related: false, scope: $scope });
-    
+
     generator.reset();
     LoadBreadCrumbs();
-    
+
     $scope.inventoryParseType = 'yaml';
     ParseTypeChange({ scope: $scope, variable: 'inventory_variables', parse_variable: 'inventoryParseType',
         field_id: 'inventory_inventory_variables' });
@@ -476,7 +476,7 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
     InventoryUpdate, Alert, ToggleChildren, ViewUpdateStatus, GroupsCancelUpdate, Find, EditInventoryProperties, HostsEdit,
     HostsDelete, ToggleHostEnabled, CopyMoveGroup, CopyMoveHost, Stream, GetBasePath, ShowJobSummary, ApplyEllipsis, WatchInventoryWindowResize,
     HelpDialog, InventoryGroupsHelp, Store, ViewJob) {
-    
+
     ClearScope();
 
     var generator = GenerateList,
@@ -709,7 +709,7 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
         var group = Find({ list: $scope.groups, key: 'id', val: id });
         if (group) {
             if (Empty(group.source)) {
-                // if no source, do nothing. 
+                // if no source, do nothing.
             } else if (group.status === 'updating') {
                 Alert('Update in Progress', 'The inventory update process is currently running for group <em>' +
                     group.name + '</em>. Use the Refresh button to monitor the status.', 'alert-info');

awx/ui/static/js/helpers/inventory.js

@@ -14,26 +14,31 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
     'InventoryHelper', 'InventoryFormDefinition', 'ParseHelper', 'SearchHelper', 'VariablesHelper',
 ])
 
-.factory('WatchInventoryWindowResize', ['ApplyEllipsis',
+.factory('GetContainerHeight', [ function() {
-    function (ApplyEllipsis) {
+    return function() {
+        return $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() -
+            $('.site-footer').outerHeight() - $('#groups-container .list-actions').outerHeight() - $('#groups-table-header').height() - 15;
+    };
+}])
+
+.factory('SetGroupContainerHeight', [ 'GetContainerHeight', function(GetContainerHeight) {
+    return function() {
+        var height;
+        if ($(window).width() > 1210) {
+            height = GetContainerHeight();
+            $('#groups-container .list-table-container').height(height);
+        }
+        else {
+            $('#groups-container .list-table-container').height('auto');
+        }
+        $('#groups-container .list-table-container').mCustomScrollbar("update");
+    };
+}])
+.factory('WatchInventoryWindowResize', ['ApplyEllipsis', 'SetGroupContainerHeight',
+    function (ApplyEllipsis, SetGroupContainerHeight) {
         return function () {
             // Call to set or restore window resize
-
+            SetGroupContainerHeight();
-            function setGroupsHeight() {
-                // Attempt to set the group height
-                var height;
-                if ($(window).width() > 1210) {
-                    height = $(window).height() - $('.main-menu').outerHeight() - $('#main_tabs').outerHeight() - $('#breadcrumbs').outerHeight() -
-                        ($('.site-footer').outerHeight() * 2) - $('#groups-container .list-actions').outerHeight() - $('#groups-table-header').height() - 20;
-                    $('#groups-container .list-table-container').height(height);
-                }
-                else {
-                    $('#groups-container .list-table-container').height('auto');
-                }
-            }
-
-            setGroupsHeight();
-
             $(window).resize(_.debounce(function() {
                 // Hack to stop group-name div slipping to a new line
                 $('#groups_table .name-column').each(function () {
@@ -46,7 +51,7 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
                 });
                 ApplyEllipsis('#groups_table .group-name a');
                 ApplyEllipsis('#hosts_table .host-name a');
-                setGroupsHeight();
+                SetGroupContainerHeight();
             }, 500));
         };
     }

awx/ui/static/js/lists/InventoryGroups.js

@@ -17,6 +17,7 @@ angular.module('InventoryGroupsDefinition', [])
         hasChildren: true,
         filterBy: '{ show: true }',
         'class': 'table-no-border',
+        awCustomScroll: true,
 
         fields: {
             name: {
@@ -64,6 +65,7 @@ angular.module('InventoryGroupsDefinition', [])
         fieldActions: {
 
             columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
+            label: false,
 
             sync_status: {
                 mode: 'all',

awx/ui/static/lib/ansible/directives.js

@@ -729,7 +729,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                 scrollButtons: {
                     enable: true
                 },
-                theme: 'dark-thick',
+                theme: 'dark-thin',
                 mouseWheel: true,
                 scrollInertia: 300,
                 callbacks: {
@@ -761,7 +761,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
                     $(this).find('.btn').toggleClass('btn-info');
                 }
                 $(this).find('.btn').toggleClass('btn-default');
-                
+
                 // Add data-after-toggle="functionName" to the btn-group, and we'll
                 // execute here. The newly active choice is passed as a parameter.
                 if ($(this).attr('data-after-toggle')) {

awx/ui/static/lib/ansible/list-generator.js

@@ -63,15 +63,15 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                 } else {
                     element = angular.element(document.getElementById('htmlTemplate'));
                 }
-                
+
                 this.setOptions(options);
                 this.setList(list);
                 element.html(this.build(options)); // Inject the html
-                
+
                 if (options.prepend) {
                     element.prepend(options.prepend);
                 }
-                
+
                 if (options.append) {
                     element.append(options.append);
                 }
@@ -84,10 +84,10 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
 
                 $compile(element)(this.scope);
 
-                // Reset the scope to prevent displaying old data from our last visit to this list 
+                // Reset the scope to prevent displaying old data from our last visit to this list
                 //this.scope[list.name] = null;
                 this.scope[list.iterator] = [];
-                
+
                 // Remove any lingering tooltip and popover <div> elements
                 $('.tooltip').each(function() {
                     $(this).remove();
@@ -102,7 +102,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                 try {
                     $('#help-modal').empty().dialog('destroy');
                 } catch (e) {
-                    //ignore any errors should the dialog not be initialized 
+                    //ignore any errors should the dialog not be initialized
                 }
 
                 /*if (options.mode === 'lookup') {
@@ -126,8 +126,8 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
 
             build: function (options) {
                 //
-                // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML 
+                // Generate HTML. Do NOT call this function directly. Called by inject(). Returns an HTML
-                // string to be injected into the current view. 
+                // string to be injected into the current view.
                 //
                 var html = '',
                     list = this.list,
@@ -178,7 +178,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                     html += "</div>\n";
                     html += "</div>\n";
                 }
-                
+
                 if (options.showSearch=== undefined || options.showSearch === true) {
                     html += "<div class=\"row\">\n";
                     if (list.name !== 'groups') {
@@ -285,9 +285,11 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                     html += (options.mode === 'edit' || options.mode === 'summary') ? list.editTitle : list.addTitle;
                     html += "</div>\n";
                 }
-                
+
                 // table header row
-                html += "<div class=\"list-table-container\">\n";
+                html += "<div class=\"list-table-container\"";
+                html += (list.awCustomScroll) ? " aw-custom-scroll " : "";
+                html += ">\n";
                 html += "<table id=\"" + list.name + "_table\" ";
                 html += "class=\"table table-condensed";
                 html += (list['class']) ? " " + list['class'] : "";
@@ -297,7 +299,7 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                 html += (options.mode === 'summary') ? ' table-summary' : '';
                 html += "\" ";
                 html += ">\n";
-                
+
                 if (!options.skipTableHead) {
                     html += this.buildHeader(options);
                 }
@@ -435,11 +437,11 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
             buildHeader: function(options) {
                 var list = this.list,
                     fld, html;
-                
+
                 if (options === undefined) {
                     options = this.options;
                 }
-                
+
                 html = "<thead>\n";
                 html += "<tr>\n";
                 if (list.index) {
@@ -473,7 +475,8 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                 }
                 if (options.mode === 'select' || options.mode === 'lookup') {
                     html += "<th>Select</th>";
-                } else if (options.mode === 'edit' && list.fieldActions) {
+                } else if (options.mode === 'edit' && list.fieldActions &&
+                    (list.fieldActions.label === undefined || list.fieldActions.label)) {
                     html += "<th class=\"actions-column";
                     html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
                     html += "\">Actions</th>\n";