AC-331 Latest changes to Inventories Hosts tab. Hosts is now the lead tab. Added menu bar. Added select checkbox for each row.

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

@@ -199,7 +199,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    
    ParseTypeChange(scope,'inventory_variables', 'inventoryParseType');
    
-   $('#inventory-tabs a:first').tab('show');  //activate the groups tab
+   $('#inventory-tabs a:first').tab('show');  //activate the hosts tab
 
    scope['inventoryParseType'] = 'yaml';
    scope['inventory_id'] = id;
@@ -210,11 +210,16 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       scope.inventoryLoadedRemove();
    }
    scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
+       LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
        TreeInit(scope.TreeParams);
+       if (!scope.$$phase) {
+          scope.$digest();
+       }
        });
 
    LoadInventory({ scope: scope, doPostSteps: true });
    $('#inventory-tabs a[href="#inventory-hosts"]').on('show.bs.tab', function() { 
+       scope['hosts'] = null;
        LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
        if (!scope.$$phase) {
           scope.$digest();
@@ -402,9 +407,6 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       if (!scope.$$phase) {
          scope.$digest();
       }
-
-      //HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] });
-      
       });
 
   scope.addGroup = function() {
@@ -423,7 +425,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       GroupsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id });
       }
   
-  scope.selectHost = function() {
+  scope.addHost = function() {
       HostsList({ scope: scope, "inventory_id": id, group_id: scope.group_id });
       }
 
@@ -440,10 +442,10 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
           request: 'delete' });
       }
 
-  scope.removeHost = function(host_id, host_name) {
+ /* scope.removeHost = function(host_id, host_name) {
       HostsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id, host_id: host_id, host_name: host_name,
           request: 'remove' });
-      }
+      } */
 
   scope.showEvents = function(host_name, last_job) {
       // When click on !Failed Events link, redirect to latest job/job_events for the host
@@ -463,6 +465,16 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
   scope.$on('refreshHost', function(e, group, title) {
       scope.groupTitle = title;
       scope.group_id = group;
+      if (scope.group_id == null) {
+         scope.hostAddHide = true;
+         scope.hostCreateHide = true; 
+         scope.hostDeleteHide = true;
+      }
+      else {
+         scope.hostAddHide = false;
+         scope.hostCreateHide = false; 
+         scope.hostDeleteHide = false;
+      }
       HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: group });
       });
 

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

@@ -199,41 +199,41 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                 });
 
             $(tree_id).bind('move_node.jstree', function(e, data) {
-                // When user drags-n-drops a node, update the API
+                // When user drags-n-drops a node, update the API 
+                
                 Wait('start');
+
                 var node, target, url, parent, inv_id, variables;
                 node = $('#tree-view li[id="' + data.rslt.o[0].id + '"]');  // node being moved
                 parent = $('#tree-view li[id="' + data.args[0].op[0].id + '"]');  //node moving from
                 target = $('#tree-view li[id="' + data.rslt.np[0].id + '"]');  // node moving to
                 inv_id = inventory_id;
+                
+                function cleanUp() {
+                    Wait('stop');
+                    if (!scope.$$phase) {
+                       scope.$digest();
+                    } 
+                }
 
                 if (scope.removeCopyVariables) {
                    scope.removeCopyVariables();
                 }
                 scope.removeCopyVariables = scope.$on('copyVariables', function(e, id, url) {
-                    
-                    function showSuccessMsg() {
-                        var parent_descr = (parent.attr('type') == 'inventory') ? 'the inventory root' : parent.attr('name');
-                        var target_descr = (target.attr('type') == 'inventory') ? 'the inventory root' : target.attr('name');
-                        Wait('stop');
-                        if (!scope.$$phase) {
-                           scope.$digest();
-                        } 
-                    }
-
                     if (variables) {
                        Rest.setUrl(url); 
                        Rest.put(variables)
                            .success(function(data, status, headers, config) {
-                               showSuccessMsg();
+                               cleanUp();
                                })
                            .error(function(data, status, headers, config) {
+                               cleanUp();
                                ProcessErrors(scope, data, status, null,
                                    { hdr: 'Error!', msg: 'Failed to update variables. PUT returned status: ' + status });
                                });
                     }
                     else {
-                       showSuccessMsg();
+                       cleanUp();
                     }
                     }); 
                 
@@ -263,6 +263,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                            scope.$emit('copyVariables', data.id, data.related.variable_data);
                            })
                        .error( function(data, status, headers, config) {
+                           cleanUp();
                            ProcessErrors(scope, data, status, null,
                               { hdr: 'Error!', msg: 'Failed to add ' + node.attr('name') + ' to ' + 
                               target.attr('name') + '. POST returned status: ' + status });
@@ -282,6 +283,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                             scope.$emit('addToTarget');
                             })
                         .error( function(data, status, headers, config) {
+                            cleanUp();
                             ProcessErrors(scope, data, status, null,
                                 { hdr: 'Error!', msg: 'Failed to remove ' + node.attr('name') + ' from ' + 
                                   parent.attr('name') + '. POST returned status: ' + status });
@@ -296,6 +298,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                         scope.$emit('removeGroup');
                         })
                     .error( function(data, status, headers, config) {
+                        cleanUp();
                         ProcessErrors(scope, data, status, null,
                             { hdr: 'Error!', msg: 'Failed to lookup group ' + node.attr('name') + 
                             '. GET returned status: ' + status });

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

@@ -546,7 +546,7 @@ input[type="text"].job-successful {
     border-radius: 6px;
   }
 
-  .groups-menu {
+  .groups-menu, .hosts-menu {
     min-height: 30px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
@@ -634,27 +634,28 @@ input[type="text"].job-successful {
       list-style-type: none;
       padding-left: 13px;
     }
+    
     ul:first-child {
       padding-left: 0;
     }
-  }
+    
+    .activate:hover {
+      background-color: #ddd; 
+    }
 
-  .search-tree .active {
+    .active {
-    /*background-color: #ddd;
+      font-weight: bold;
-    padding: 1px 1px 1px 0;
+      color: #000;
-    border: 1px solid #ddd;
+    }
-    border-radius: 4px;*/
-    font-weight: bold;
-    color: #000;
-  }
 
-  .search-tree .expand {
+    .expand {
-    padding: 3px;
+      padding: 3px;
-  }
+    }
 
-  .search-tree .expand:hover {
+    .expand:hover {
-    background-color: #ddd;
+      background-color: #ddd;
-    border: 1px solid #ddd;
+      border: 1px solid #ddd;
+    }
   }
 
 .parse-selection {

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

@@ -317,8 +317,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
         }
         }])
 
-    .directive('awTree', ['Rest', 'ProcessErrors', 'Authorization', '$compile', '$rootScope',
+    .directive('awTree', ['Rest', 'ProcessErrors', 'Authorization', '$compile', '$rootScope', 'Wait',
-        function(Rest, ProcessErrors, Authorization, $compile, $rootScope) {
+        function(Rest, ProcessErrors, Authorization, $compile, $rootScope, Wait) {
         return {
         //require: 'ngModel',
         
@@ -354,12 +354,12 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                 var group, title;
                 if (parent.attr('data-group-id')) {
                    group = parent.attr('data-group-id');
-                   title = '<h4>' + parent.attr('data-name') + '</h4>';
+                   title = parent.attr('data-name');
-                   title += (parent.attr('data-description') !== "") ? '<p>' + parent.attr('data-description') + '</p>' : ''; 
+                   //title += (parent.attr('data-description') !== "") ? '<p>' + parent.attr('data-description') + '</p>' : ''; 
                 }
                 else {
                    group = null;
-                   title = '<h4>All Hosts</h4>'
+                   title = 'All Hosts'
                 } 
                 scope.$emit('refreshHost', group, title);
                 }
@@ -502,6 +502,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                         scope.$emit('childrenLoaded');
                         },
                     error: function(data, status) {
+                        Wait('stop');
                         ProcessErrors(scope, data, status, null,
                         { hdr: 'Error!', msg: 'Failed to get child groups for ' + elm.attr('name') + 
                            '. GET returned: ' + status });
@@ -521,6 +522,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                $rootScope.hostTabInitRemove();
             }
             $rootScope.hostTabInitRemove = $rootScope.$on('hostTabInit', function(e) {
+               Wait('start');
                var container = angular.element(document.getElementById('search-tree-container'));
                container.empty();
                var html = "<ul>\n" +
@@ -540,7 +542,8 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                setTimeout(function() {
                    $('#search-node-1000 .expand').click();
                    $('#search-node-1000 .activate').click();
-                   }, 500);  
+                   Wait('stop');
+                   }, 1000);  
                });
 
             }

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

@@ -905,8 +905,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        html += "<div class=\"inventory-content\">\n";
 
        html += "<ul class=\"nav nav-tabs\" id=\"inventory-tabs\">\n";
-       html += "<li><a href=\"#inventory-groups\" data-toggle=\"tab\">Groups</a></li>\n";
        html += "<li><a href=\"#inventory-hosts\" data-toggle=\"tab\">Hosts</a></li>\n";
+       html += "<li><a href=\"#inventory-groups\" data-toggle=\"tab\">Groups</a></li>\n"; 
        html += "</ul>\n";
 
        html += "<div class=\"tab-content\">\n";
@@ -928,10 +928,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
            "aw-tool-tip=\"Delete the selected group\" data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete Group</a></li>\n";
        html += "<li><a class=\"status\" ng-show=\"treeLoading\" href=\"\"><i class=\"icon-spinner icon-spin icon-large\"></i> Loading...</a></li>\n";
        html += "</ul>\n";
-       html += "<form class=\"navbar-form\">\n";
+       /*html += "<form class=\"navbar-form\">\n";
        html += "<label class=\"checkbox-inline\"><input type=\"checkbox\" ng-model=\"inventoryFailureFilter\" ng-change=\"filterInventory()\" > Only show groups with failed hosts" +
            "</label>\n";
-       html += "</form>\n"; 
+       html += "</form>\n"; */
        html += "</div><!-- navbar -->\n";  
        html += "<div id=\"tree-view\" class=\"tree-container\"></div>\n";
        //html += "<span ng-show=\"has_active_failures == true\"><label class=\"checkbox inline\">";
@@ -947,8 +947,24 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        html += "<div aw-tree=\"searchTree\"></div>\n";
        html += "</div>\n";
        html += "<div class=\"col-lg-9\">\n";
+       html += "<div class=\"navbar hosts-menu\">\n"; 
+       html += "<a class=\"navbar-brand\" ng-bind-html-unsafe=\"" + form.related[itm].title + "\" href=\"\"></a>\n"; 
+       html += "<ul class=\"nav navbar-nav\">\n";
+       html += "<li><a href=\"\" ng-click=\"addHost()\" ng-hide=\"hostAddHide\" " +
+           "aw-tool-tip=\"Add an existing host\" data-placement=\"bottom\"><i class=\"icon-check\"></i> Add Existing Host</a></li>\n";
+       html += "<li><a href=\"\" ng-click=\"createHost()\" ng-hide=\"hostCreateHide\" " +
+           "aw-tool-tip=\"Create a new host\" data-placement=\"bottom\"><i class=\"icon-plus\"></i> Create New Host</a></li>\n";
+       html += "<li><a href=\"\" ng-click=\"deleteHost()\" ng-hide=\"hostDeleteHide\" " +
+           "aw-tool-tip=\"Delete selected hosts\" data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete Hosts</a></li>\n";
+       html += "<li><a class=\"status\" ng-show=\"treeLoading\" href=\"\"><i class=\"icon-spinner icon-spin icon-large\"></i> Loading...</a></li>\n";
+       html += "</ul>\n";
+       html += "<form class=\"navbar-form\">\n";
+       html += "<label class=\"checkbox-inline\"><input type=\"checkbox\" ng-model=\"hostFailureFilter\" ng-change=\"filterInventory()\" > Only show hosts with failed jobs" +
+           "</label>\n";
+       html += "</form>\n"; 
+       html += "</div><!-- navbar -->\n";  
+       
        html += "<div class=\"hosts-well well\">\n";             
-       html += "<div class=\"hosts-title\" ng-bind-html-unsafe=\"" + form.related[itm].title + "\"></div>\n";
        html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true, size: 'col-lg-6'});
 
        // Add actions(s)
@@ -973,6 +989,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        html += "<thead>\n";
        html += "<tr>\n";
        html += "<th>#</th>\n";
+       html += "<th><input type=\"checkbox\" ng-click=\"toggle_all()\" aw-tool-tip=\"Select all hosts\" data-placement=\"top\"></th>\n";
+       
        for (var fld in form.related[itm].fields) {
            html += "<th class=\"list-header\" id=\"" + form.related[itm].iterator + '-' + fld + "-header\" " +
                "ng-click=\"sort('" + form.related[itm].iterator + "', '" + fld + "')\">" +
@@ -991,14 +1009,23 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
            }
            html += "\"></i></a></th>\n";
       }
+
       html += "<th></th>\n";
       html += "</tr>\n";
       html += "</thead>";
       html += "<tbody>\n";
             
       html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
+      
+      // Row counter
       html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " + 
        form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
+      
+      // Select checkbox
+      html += "<td><input type=\"checkbox\" ng-model=\"" + form.related[itm].iterator + ".checked\" name=\"check_{{" + 
+              form.related[itm].iterator + ".id }}\" ng-click=\"toggle_" + form.related[itm].iterator +"({{ " + form.related[itm].iterator + ".id }}, true)\" ng-true-value=\"1\" " +
+              "ng-false-value=\"0\" id=\"check_{{" + form.related[itm].iterator + ".id}}\" /></td>";
+      
       var cnt = 1;
       var rfield;
       var base = (form.related[itm].base) ? form.related[itm].base : itm;

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

@@ -226,7 +226,7 @@ angular.module('Utilities',[])
           $('.overlay').css({
               width: $('html').width(),
               height: $(document).height() + 200
-              }).fadeIn(500);
+              }).fadeIn();
           $('.spinny').css({
               top: y, 
               left: x,