AC-1292 Host container on inventory edit page now automatically resizes and adjusts rows per page.

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

@@ -475,7 +475,7 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
     GetSyncStatusMsg, InjectHosts, HostsReload, GroupsEdit, GroupsDelete, Breadcrumbs, LoadBreadCrumbs, Empty, Rest, ProcessErrors,
     InventoryUpdate, Alert, ToggleChildren, ViewUpdateStatus, GroupsCancelUpdate, Find, EditInventoryProperties, HostsEdit,
     HostsDelete, ToggleHostEnabled, CopyMoveGroup, CopyMoveHost, Stream, GetBasePath, ShowJobSummary, ApplyEllipsis, WatchInventoryWindowResize,
-    HelpDialog, InventoryGroupsHelp, Store, ViewJob) {
+    HelpDialog, InventoryGroupsHelp, Store, ViewJob, SetContainerHeights) {
 
     ClearScope();
 
@@ -564,6 +564,9 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
             $scope.selected_group_id = null;
         }
 
+        // Resize the containers based on viewport width/height
+        SetContainerHeights({ scope: $scope, reloadHosts: false });
+
         // Add hosts view
         $scope.show_failures = false;
         InjectHosts({
@@ -590,7 +593,7 @@ function InventoriesEdit($scope, $location, $routeParams, $compile, $log, $rootS
             ApplyEllipsis('#groups_table .group-name a');
             ApplyEllipsis('#hosts_table .host-name a');
         }, 2500); //give the window time to display
-        WatchInventoryWindowResize();
+        WatchInventoryWindowResize({ scope: $scope });
 
         inventoryAutoHelp = Store('inventoryAutoHelp');
         if (inventoryAutoHelp !== 'off' && $scope.autoShowGroupHelp) {
@@ -859,5 +862,5 @@ InventoriesEdit.$inject = ['$scope', '$location', '$routeParams', '$compile', '$
     'LoadBreadCrumbs', 'Empty', 'Rest', 'ProcessErrors', 'InventoryUpdate', 'Alert', 'ToggleChildren', 'ViewUpdateStatus', 'GroupsCancelUpdate',
     'Find', 'EditInventoryProperties', 'HostsEdit', 'HostsDelete', 'ToggleHostEnabled', 'CopyMoveGroup', 'CopyMoveHost',
     'Stream', 'GetBasePath', 'ShowJobSummary', 'ApplyEllipsis', 'WatchInventoryWindowResize', 'HelpDialog', 'InventoryGroupsHelp', 'Store',
-    'ViewJob'
+    'ViewJob', 'SetContainerHeights'
 ];

awx/ui/static/js/helpers/Groups.js

@@ -615,11 +615,11 @@ function($compile, SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize, Sched
 
 .factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', '$compile', 'Rest', 'Alert', 'GroupForm', 'GenerateForm',
     'Prompt', 'ProcessErrors', 'GetBasePath', 'SetNodeName', 'ParseTypeChange', 'GetSourceTypeOptions', 'InventoryUpdate',
-    'LookUpInit', 'Empty', 'Wait', 'GetChoices', 'UpdateGroup', 'SourceChange', 'Find','WatchInventoryWindowResize',
+    'LookUpInit', 'Empty', 'Wait', 'GetChoices', 'UpdateGroup', 'SourceChange', 'Find',
     'ParseVariableString', 'ToJSON', 'GroupsScheduleListInit', 'SourceForm', 'SetSchedulesInnerDialogSize', 'BuildTree',
     function ($rootScope, $location, $log, $routeParams, $compile, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
         GetBasePath, SetNodeName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, LookUpInit, Empty, Wait,
-        GetChoices, UpdateGroup, SourceChange, Find, WatchInventoryWindowResize, ParseVariableString, ToJSON, GroupsScheduleListInit,
+        GetChoices, UpdateGroup, SourceChange, Find, ParseVariableString, ToJSON, GroupsScheduleListInit,
         SourceForm, SetSchedulesInnerDialogSize, BuildTree) {
         return function (params) {
 
@@ -1044,7 +1044,7 @@ function($compile, SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize, Sched
                 } else {
                     Wait('stop');
                 }
-                WatchInventoryWindowResize();
+                //WatchInventoryWindowResize();
                 parent_scope.removeAddTreeRefreshed();
                 if (modal_scope.searchCleanUp) {
                     modal_scope.searchCleanup();
@@ -1178,9 +1178,9 @@ function($compile, SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize, Sched
                 //if (modal_scope.searchCleanup) {
                 //    modal_scope.searchCleanup();
                 //}
-                if (base === 'inventories') {
+                //if (base === 'inventories') {
-                    WatchInventoryWindowResize();
+                //    WatchInventoryWindowResize();
-                }
+                //}
             };
 
             // Save
@@ -1469,9 +1469,9 @@ function($compile, SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize, Sched
 ])
 
 .factory('ShowUpdateStatus', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GenerateForm',
-    'Prompt', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventoryStatusForm', 'Wait', 'Empty', 'WatchInventoryWindowResize',
+    'Prompt', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventoryStatusForm', 'Wait',
     function ($rootScope, $location, $log, $routeParams, Rest, Alert, GenerateForm, Prompt, ProcessErrors, GetBasePath,
-        FormatDate, InventoryStatusForm, Wait, Empty, WatchInventoryWindowResize) {
+        FormatDate, InventoryStatusForm, Wait) {
         return function (params) {
 
             var group_name = params.group_name,
@@ -1563,7 +1563,7 @@ function($compile, SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize, Sched
                         });
                         $('#status-modal-dialog').dialog('destroy');
                         $('#inventory-modal-container').empty();
-                        WatchInventoryWindowResize();
+                        //WatchInventoryWindowResize();
                     },
                     open: function () {
                         Wait('stop');

awx/ui/static/js/helpers/Hosts.js

@@ -161,16 +161,15 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 }])
 
 .factory('HostsReload', [ '$routeParams', 'Empty', 'InventoryHosts', 'GetBasePath', 'SearchInit', 'PaginateInit', 'Wait',
-    'SetHostStatus', 'SetStatus', 'ApplyEllipsis',
+    'SetHostStatus', 'SetStatus', 'ApplyEllipsis', 'SetContainerHeights', 'GetHostContainerRows',
 function($routeParams, Empty, InventoryHosts, GetBasePath, SearchInit, PaginateInit, Wait, SetHostStatus, SetStatus,
-    ApplyEllipsis) {
+    ApplyEllipsis, SetContainerHeights) {
     return function(params) {
 
         var scope = params.scope,
             group_id = params.group_id,
             inventory_id = params.inventory_id,
             list = InventoryHosts,
-            
             url = ( !Empty(group_id) ) ? GetBasePath('groups') + group_id + '/all_hosts/' :
                 GetBasePath('inventory') + inventory_id + '/hosts/';
 
@@ -191,6 +190,9 @@ function($routeParams, Empty, InventoryHosts, GetBasePath, SearchInit, PaginateI
             scope.$emit('HostReloadComplete');
         });
 
+        // Size containers based on viewport
+        SetContainerHeights({ scope: scope, reloadHosts: false });
+
         SearchInit({ scope: scope, set: 'hosts', list: list, url: url });
         PaginateInit({ scope: scope, list: list, url: url });
 
@@ -334,10 +336,10 @@ function($rootScope, $location, $log, $routeParams, Rest, Alert, HostList, Gener
 
 
 .factory('HostsCreate', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostForm', 'GenerateForm',
-    'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload', 'ParseTypeChange', 'Wait', 'WatchInventoryWindowResize',
+    'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload', 'ParseTypeChange', 'Wait',
     'ToJSON',
 function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, GenerateForm, Prompt, ProcessErrors,
-    GetBasePath, HostsReload, ParseTypeChange, Wait, WatchInventoryWindowResize, ToJSON) {
+    GetBasePath, HostsReload, ParseTypeChange, Wait, ToJSON) {
     return function(params) {
 
         var parent_scope = params.scope,
@@ -388,7 +390,7 @@ function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, Gener
                 inventory_id: parent_scope.inventory_id
             });
 
-            WatchInventoryWindowResize();
+            //WatchInventoryWindowResize();
         });
 
         // Save
@@ -426,7 +428,7 @@ function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, Gener
         };
 
         scope.cancelModal = function() {
-            WatchInventoryWindowResize();
+            // WatchInventoryWindowResize();
         };
 
     };
@@ -435,9 +437,9 @@ function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, Gener
 
 .factory('HostsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostForm', 'GenerateForm',
     'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload', 'ParseTypeChange', 'Wait', 'Find', 'SetStatus', 'ApplyEllipsis',
-    'WatchInventoryWindowResize', 'ToJSON', 'ParseVariableString', 'CreateDialog', 'TextareaResize', 'Empty',
+    'ToJSON', 'ParseVariableString', 'CreateDialog', 'TextareaResize', 'Empty',
 function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, GenerateForm, Prompt, ProcessErrors,
-    GetBasePath, HostsReload, ParseTypeChange, Wait, Find, SetStatus, ApplyEllipsis, WatchInventoryWindowResize, ToJSON,
+    GetBasePath, HostsReload, ParseTypeChange, Wait, Find, SetStatus, ApplyEllipsis, ToJSON,
     ParseVariableString, CreateDialog, TextareaResize, Empty) {
     return function(params) {
 
@@ -488,7 +490,6 @@ function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, Gener
                 Wait('stop');
                 scope.codeMirror.destroy();
                 $('#host-modal-dialog').empty();
-                WatchInventoryWindowResize();
             },
             onResizeStop: function() {
                 TextareaResize({
@@ -638,7 +639,7 @@ function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, Gener
             }
 
             // Restore ellipsis response to window resize
-            WatchInventoryWindowResize();
+            //WatchInventoryWindowResize();
         });
 
         // Save changes to the parent

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

@@ -21,26 +21,49 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
     };
 }])
 
-.factory('SetContainerHeights', [ 'GetGroupContainerHeight', function(GetGroupContainerHeight) {
+.factory('GetHostContainerRows', [ function() {
     return function() {
-        var height;
+        var height = $('#hosts-container .well').height() - $('#hosts-constainer .well .row').height() - $('#hosts_table thead').height();
+        return Math.floor(height / 27) - 1;
+    };
+}])
+
+.factory('SetContainerHeights', [ 'GetGroupContainerHeight', 'GetHostContainerRows', function(GetGroupContainerHeight, GetHostContainerRows) {
+    return function(params) {
+        var scope = (params && params.scope) ? params.scope : null,
+            reloadHosts = (params && params.reloadHosts) ? true : false,
+            height, rows;
         if ($(window).width() > 1210) {
             height = GetGroupContainerHeight();
             $('#groups-container .list-table-container').height(height);
+            $('#hosts-container .well').height( $('#groups-container').height() - 49 );
         }
         else {
             $('#groups-container .list-table-container').height('auto');
+            $('#hosts-container .well').height('auto');
         }
         $('#groups-container .list-table-container').mCustomScrollbar("update");
-        $('#hosts-container .well').height( $('#groups-container').height() - 39 );
+
+        if (reloadHosts) {
+            // we need ro recalc the the page size
+            if ($(window).width() > 1210) {
+                rows = GetHostContainerRows();
+                scope.host_page_size = rows;
+            }
+            else {
+                // on small screens we go back to the default
+                scope.host_page_size = 20;
+            }
+            scope.changePageSize('hosts', 'host');
+        }
     };
 }])
 
 .factory('WatchInventoryWindowResize', ['ApplyEllipsis', 'SetContainerHeights',
     function (ApplyEllipsis, SetContainerHeights) {
-        return function () {
+        return function (params) {
             // Call to set or restore window resize
-            SetContainerHeights();
+            var scope = params.scope;
             $(window).resize(_.debounce(function() {
                 // Hack to stop group-name div slipping to a new line
                 $('#groups_table .name-column').each(function () {
@@ -53,7 +76,7 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
                 });
                 ApplyEllipsis('#groups_table .group-name a');
                 ApplyEllipsis('#hosts_table .host-name a');
-                SetContainerHeights();
+                SetContainerHeights({ scope: scope, reloadHosts: true });
             }, 500));
         };
     }

awx/ui/static/less/ansible-ui.less

@@ -1342,6 +1342,9 @@ input[type="checkbox"].checkbox-no-label {
           position: relative;
           top: -15px;
       }
+      .well {
+          margin-bottom: 8px;
+      }
   }
 
   #inventories_table i[class*="icon-job-"],