AC-331 Continued cleanup from Bootstrap upgrade and Inventory changes.

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

@@ -12,7 +12,7 @@
 
 function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, InventoryList,
                           GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
-                          ClearScope, ProcessErrors, GetBasePath)
+                          ClearScope, ProcessErrors, GetBasePath, Wait)
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
@@ -43,14 +43,16 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
        
        var action = function() {
            var url = defaultUrl + id + '/';
+           $('#prompt-modal').modal('hide');
+           Wait('start');
            Rest.setUrl(url);
            Rest.destroy()
                .success( function(data, status, headers, config) {
-                   $('#prompt-modal').modal('hide');
                    scope.search(list.iterator);
+                   Wait('stop');
                    })
                .error( function(data, status, headers, config) {
-                   $('#prompt-modal').modal('hide');
+                   Wait('stop');
                    ProcessErrors(scope, data, status, null,
                             { hdr: 'Error!', msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status });
                    });      
@@ -79,7 +81,7 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
 
 InventoriesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'InventoryList', 'GenerateList', 
                             'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
-                            'GetBasePath' ];
+                            'GetBasePath', 'Wait' ];
 
 
 function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm, 
@@ -219,6 +221,23 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
        LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
        TreeInit(scope.TreeParams);
+       Rest.setUrl(scope.inventoryGroupsUrl);
+       Rest.get()
+           .success(function(data, status, headers, config) {
+               if (data.results.length == 0) {
+                  // No groups exist yet, activate the groups tab 
+                  scope.showGroupHelp = true;
+                  $('#inventory-tabs a[href="#inventory-groups"]').tab('show')
+               }
+               else {
+                  scope.showGroupHelp =  false;
+                  $('#inventory-tabs a[href="#inventory-hosts"]').tab('show')
+               }
+               })
+           .error(function(data, status, headers, config) {
+               ProcessErrors(scope, data, status, null,
+                   { hdr: 'Error!', msg: 'Failed to get inventory groups. GET returned status: ' + status });
+               });
        if (!scope.$$phase) {
           scope.$digest();
        }
@@ -236,13 +255,14 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
        });
 
    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();
        }
-       });
+       });    
 
    scope.filterInventory = function() {
       $rootScope.hostFailureFilter = scope.hostFailureFilter;

awx/ui/static/js/forms/Inventories.js

@@ -122,6 +122,7 @@ angular.module('InventoryFormDefinition', [])
                     dropdown: {
                         type: 'DropDown',
                         label: 'View',
+                        ngDisabled: 'host.last_job == null',
                         options: [
                             { ngClick: 'viewJobs(\{\{ host.id \}\})', label: 'Jobs' },
                             { ngClick: "viewLastEvents(\{\{ host.id \}\}, '\{\{ host.last_job \}\}', '\{\{ host.name \}\}', " +

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

@@ -138,6 +138,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                Rest.setUrl(defaultUrl);
                Rest.post(data)
                    .success( function(data, status, headers, config) {
+                       scope.showGroupHelp = false;  // get rid of the Hint
                        if (scope.variables) {
                           Rest.setUrl(data.related.variable_data);
                           Rest.put(json_data)

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

@@ -349,7 +349,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                           scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField];
                   }
                 }
-
+                
+                scope.inventoryGroupsUrl = data.related.groups; 
                 scope.TreeParams = { scope: scope, inventory: data };
                 scope.variable_url = data.related.variable_data;
                 scope.relatedSets['hosts'] = { url: data.related.hosts, iterator: 'host' };

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

@@ -481,8 +481,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
             html += "class=\"" + getFieldWidth() + "\">\n";
             // Use 'text' rather than 'number' so that our integer directive works correctly
             html += (field.slider) ? "<div class=\"slider\" id=\"" + fld + "-slider\"></div>\n" : "";
-            html += "<input type=\""; 
+            html += "<input "; 
-            html += (field.spinner) ? "spinner" : "text";
+            html += (field.spinner) ? "" : "type=\"text\" ";
             html += "\" value=\"" + field['default'] + "\" ";
             html += "class=\"form-control";
             html += (field['class']) ? " " + field['class'] : "";
@@ -808,7 +808,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                     var button = this.form.buttons[btn];
                     //button
                     html += "<button type=\"button\" ";
-                    html += "class=\"btn btn-small";
+                    html += "class=\"btn btn-sm";
                     html += (button['class']) ? " " + button['class'] : "";
                     html += "\" ";
                     if (button.ngClick) {
@@ -919,6 +919,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        html += "<div class=\"tab-content\">\n";
        html += "<div class=\"tab-pane active\" id=\"inventory-groups\">\n";
        
+       html += "<div ng-show=\"showGroupHelp\" class=\"alert alert-dismissable alert-info\">\n";
+       html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>\n";
+       html += "<p><strong>Hint:</strong> Get started building your inventory by adding a group. After creating a group, " +
+           "use the Hosts tab to add hosts to the group."
+       html += "</div>\n";
+
        // build the groups tab
        html += "<div class=\"navbar groups-menu\">\n"; 
        html += "<a class=\"navbar-brand\" ng-bind-html-unsafe=\"selectedNodeName\" href=\"\"></a>\n"; 
@@ -935,15 +941,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 += "<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 += "</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\">";
+       
-       //html += "<input ng-model=\"inventoryFailureFilter\" ng-change=\"filterInventory()\" type=\"checkbox\"" +
-       //    ">Show only groups with failures</label></span></div>\n";
        html += "</div><!-- inventory-groups -->\n";
 
        // build the hosts tab
@@ -976,7 +977,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
 
        // Add actions(s)
        for (var action in form.related[itm].actions) {
-           html += "<button type=\"button\" class=\"btn btn-mini ";
+           html += "<button type=\"button\" class=\"btn btn-sm ";
            html += (form.related[itm].actions[action]['class']) ? form.related[itm].actions[action]['class'] : "btn-success";
            html += "\" ";
            html += (form.related[itm]['actions'][action].id) ? this.attr(form.related[itm]['actions'][action],'id') : "";
@@ -1130,7 +1131,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
               html += "<div class=\"col-lg-7\">\n";
               for (var act in form.related[itm].actions) {
                  var action = form.related[itm].actions[act];
-                 html += "<button type=\"button\" class=\"btn btn-mini ";
+                 html += "<button type=\"button\" class=\"btn btn-sm ";
                  html += (form.related[itm].actions[act]['class']) ? form.related[itm].actions[act]['class'] : "btn-success";
                  html += "\" ";
                  html += this.attr(action,'ngClick');
@@ -1193,7 +1194,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
               html += "<td class=\"actions\">";
               for (act in form.related[itm].fieldActions) {
                  var action = form.related[itm].fieldActions[act];
-                 html += "<button type=\"button\" class=\"btn btn-mini"; 
+                 html += "<button type=\"button\" class=\"btn btn-xs"; 
                  html += (action['class']) ? " " + action['class'] : "";
                  html += "\" " + this.attr(action,'ngClick');
                  html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";

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

@@ -103,13 +103,17 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
         
         html = "<td>\n";
         html += "<div class=\"btn-group btn-group-sm\">\n";
-        html += "<button type=\"button\" class=\"btn btn-default btn-mini dropdown-toggle\" data-toggle=\"dropdown\">";
+        html += "<button type=\"button\" ";
+        html += (field.ngDisabled) ? "ng-disabled=\"" + field.ngDisabled + "\" " : "";
+        html += "class=\"btn btn-default btn-mini dropdown-toggle\" data-toggle=\"dropdown\">";
         html += field.label;
         html += " <span class=\"caret\"></span></button>\n";
         html += "<ul class=\"dropdown-menu pull-right\" role=\"menu\" aria-labelledby=\"dropdownMenu1\">\n";
         for (var i=0; i < field.options.length; i++) {
             html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" "; 
             html += "ng-click=\"" + field.options[i].ngClick + "\" ";
+            html += (field.options[i].ngShow) ? "ng-show=\"" + field.options[i].ngShow + "\" " : "";
+            html += (field.options[i].ngHide) ? "ng-hide=\"" + field.options[i].ngHide + "\" " : "";
             html += "href=\"\">" + field.options[i].label + "</a></li>\n";
         }
         html += "</ul>\n";