AC-369 Latest inventory changes.

awx/ui/static/js/controllers/Groups.js

@@ -10,7 +10,7 @@
 function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryGroupsForm,
                           GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, Prompt,
                           TreeInit, GetBasePath, GroupsList, GroupsAdd, GroupsEdit, LoadInventory,
-                          GroupsDelete, RefreshGroupName, EditInventory) 
+                          GroupsDelete, RefreshGroupName, EditInventory, SetShowGroupHelp) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -18,6 +18,7 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
    var generator = GenerateForm;
    var form = InventoryGroupsForm;
    var defaultUrl=GetBasePath('inventory');
+   $('#tree-view').empty();
    var scope = generator.inject(form, { mode: 'edit', related: true, buildTree: true });
    var base = $location.path().replace(/^\//,'').split('/')[0];
    var id = $routeParams.inventory_id;
@@ -31,6 +32,7 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
    scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
        LoadBreadCrumbs({ path: '/inventories/' + id, title: scope.inventory_name });
        TreeInit(scope.TreeParams);
+       SetShowGroupHelp({ scope: scope });
        if (!scope.$$phase) {
           scope.$digest();
        }
@@ -179,12 +181,15 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
   scope.deleteGroup = function() {
       GroupsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id });
       }
-
+  
+  scope.editHosts = function() {
+      $location.path('/inventories/' + scope.inventory_id + '/hosts');
+      }
 }
 
 InventoryGroups.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryGroupsForm',
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'Prompt',
                             'TreeInit', 'GetBasePath', 'GroupsList', 'GroupsAdd', 'GroupsEdit', 'LoadInventory',
-                            'GroupsDelete', 'RefreshGroupName', 'EditInventory'
+                            'GroupsDelete', 'RefreshGroupName', 'EditInventory', 'SetShowGroupHelp'
                             ]; 
   

awx/ui/static/js/controllers/Hosts.js

@@ -13,7 +13,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
                          RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
                          GetBasePath, HostsList, HostsAdd, HostsEdit, HostsDelete,
-                         HostsReload, LoadSearchTree, EditHostGroups) 
+                         HostsReload, LoadSearchTree, EditHostGroups, SetShowGroupHelp) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -35,6 +35,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
    }
    scope.loadBreadCrumbsRemove = scope.$on('buildAllGroups', function(e, inventory_name) {
        LoadBreadCrumbs({ path: '/inventories/' + id, title: inventory_name });
+       SetShowGroupHelp({ scope: scope });
        });
 
    // Sets up the search tree and loads All Hosts for the inventory
@@ -66,6 +67,10 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
   scope.editHost = function(host_id, host_name) {
       HostsEdit({ scope: scope, "inventory_id": id, group_id: scope.group_id, host_id: host_id, host_name: host_name });
       }
+  
+  scope.editGroups = function() {
+      $location.path('/inventories/' + scope.inventory_id + '/groups');
+      }
 
   scope.editHostGroups = function(host_id) {
       EditHostGroups({ inventory_id: id, host_id: host_id });
@@ -120,6 +125,6 @@ InventoryHosts.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$lo
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                             'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
                             'GetBasePath', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete',
-                            'HostsReload', 'LoadSearchTree', 'EditHostGroups'
+                            'HostsReload', 'LoadSearchTree', 'EditHostGroups', 'SetShowGroupHelp'
                             ]; 
   

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

@@ -165,7 +165,7 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
                       Rest.setUrl(data.related.variable_data);
                       Rest.put(json_data)
                           .success( function(data, status, headers, config) {
-                              $location.path('/inventories/' + inventory_id);           
+                              $location.path('/inventories/' + inventory_id + '/groups');           
                               })
                           .error( function(data, status, headers, config) {
                               ProcessErrors(scope, data, status, form,
@@ -173,7 +173,7 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
                           });
                    }
                    else {
-                      $location.path('/inventories/' + inventory_id);
+                      $location.path('/inventories/' + inventory_id + '/groups');
                    }
                    })
                .error( function(data, status, headers, config) {

awx/ui/static/js/controllers/Projects.js

@@ -122,6 +122,9 @@ function ProjectsAdd ($scope, $rootScope, $compile, $location, $log, $routeParam
       for (var fld in form.fields) {
           data[fld] = scope[fld];
       }
+      if (scope.scm_type) {
+         data.scm_type = scope.scm_type.value;
+      }
       var url = (base == 'teams') ? GetBasePath('teams') + $routeParams.team_id + '/projects/' : defaultUrl;
       Rest.setUrl(url);
       Rest.post(data)

awx/ui/static/js/forms/Groups.js

@@ -18,14 +18,14 @@ angular.module('GroupFormDefinition', [])
         formFieldSize: 'col-lg-9',
         
         fields: {
-            has_active_failures: {
+            /*has_active_failures: {
                 label: 'Status',
                 control: '<div class="job-failures-\{\{ has_active_failures \}\}">' +
                     '<i class="icon-exclamation-sign"></i> Contains hosts with failed jobs</div>',
                 type: 'custom',
                 ngShow: 'has_active_failures',
                 readonly: true
-                },
+                },*/
             name: {
                 label: 'Name',
                 type: 'text',

awx/ui/static/js/forms/InventoryHosts.js

@@ -35,7 +35,7 @@ angular.module('InventoryHostsFormDefinition', [])
                 type: 'DropDown',
                 searchable: false,
                 nosort: true,
-                label: 'View Jobs',
+                label: 'View',
                 "class": "btn-sm",
                 //ngDisabled: 'host.last_job == null',
                 options: [

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

@@ -380,8 +380,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
             };
         //Force binds to work. Not working usual way.
         $('#prompt-header').text('Delete Group');
-        $('#prompt-body').text('Are you sure you want to remove group ' + $(obj).attr('name') + 
+        $('#prompt-body').html('<p>Are you sure you want to permanently delete group <em>' + $(obj).attr('name') + '</em>?</p>');
-           ' from ' + $(parent).attr('name') + '?');
         $('#prompt-action-btn').addClass('btn-danger');
         scope.promptAction = action_to_take;  // for some reason this binds?
         $('#prompt-modal').modal({

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

@@ -636,7 +636,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         Rest.setUrl (GetBasePath('inventory') + inventory_id + '/');
         Rest.get()
              .success( function(data, status, headers, config) {
-                 html += "<div class=\"title\">Group Selector:</div>\n" +
+                 html += "<div class=\"title\"><i class=\"icon-sitemap\"></i> Group Selector:</div>\n" +
                    "<ul class=\"tree-root\">\n" +
                    "<li id=\"search-node-1000\" data-state=\"opened\" data-hosts=\"" + data.related.hosts + "\" " +
                    "data-description=\"" + data.description + "\" " + 

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

@@ -14,8 +14,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                                     'InventoryFormDefinition', 'ParseHelper'
                                     ]) 
 
-    .factory('LoadTreeData', ['Alert', 'Rest', 'Authorization', '$http',
+    .factory('LoadTreeData', ['Alert', 'Rest', 'Authorization', '$http', 'Wait',
-    function(Alert, Rest, Authorization, $http) {
+    function(Alert, Rest, Authorization, $http, Wait) {
     return function(params) {
 
         var scope = params.scope;
@@ -28,65 +28,23 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
         var has_active_failures = inventory.has_active_failures;
         var inventory_descr = inventory.description;
         var idx=0;
-        var treeData = [];
+        var treeData =
-
+            [{ 
-        // Ater inventory top-level hosts, load top-level groups
+                data: {
-        /*
+                    title: inventory_name
-        if (scope.inventoryLoadedRemove) {
+                    }, 
-            scope.inventoryLoadedRemove();
+                attr: {
-        }
+                    type: 'inventory',
-        scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
+                    id: 'inventory-node',
-            var url = groups + '?order_by=name';
+                    url: inventory_url,
-            Rest.setUrl(url);
+                    'inventory_id': inventory_id,
-            Rest.get()
+                    name: inventory_name,
-                .success( function(data, status, headers, config) {    
+                    description: inventory_descr,
-                    for (var i=0; i < data.results.length; i++) {
+                    "data-failures": inventory.has_active_failures
-                        treeData[0].children.push({
+                    },
-                           data: {
+                state: 'open',
-                               title: data.results[i].name
+                children:[] 
-                               },
+                }];
-                           attr: {
-                               id: idx,
-                               group_id: data.results[i].id,
-                               type: 'group',
-                               name: data.results[i].name, 
-                               description: data.results[i].description,
-                               inventory: data.results[i].inventory,
-                               all: data.results[i].related.all_hosts,
-                               children: data.results[i].related.children + '?order_by=name',
-                               hosts: data.results[i].related.hosts,
-                               variable: data.results[i].related.variable_data,
-                               "data-failures": data.results[i].has_active_failures
-                               },
-                           state: 'closed'
-                           });
-                        idx++;
-                    }
-                    scope.$emit('buildTree', treeData, idx);
-                    })
-                .error( function(data, status, headers, config) {
-                    Alert('Error', 'Failed to laod tree data. Url: ' + groups + ' GET status: ' + status);
-                    });
-            });
-          */
-
-          treeData =
-              [{ 
-              data: {
-                  title: inventory_name
-                  }, 
-              attr: {
-                  type: 'inventory',
-                  id: 'inventory-node',
-                  url: inventory_url,
-                  'inventory_id': inventory_id,
-                  name: inventory_name,
-                  description: inventory_descr,
-                  "data-failures": inventory.has_active_failures
-                  },
-              state: 'open',
-              children:[] 
-              }];
           
           function addNodes(tree, data) {
               for (var i=0; i < data.length; i++) {
@@ -329,8 +287,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                             { hdr: 'Error!', msg: 'Failed to lookup group ' + node.attr('name') + 
                             '. GET returned status: ' + status });
                         });
-                
-                //scope['treeLoading'] = true;
 
                 if (!scope.$$phase) {
                    scope.$digest();
@@ -342,9 +298,10 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                 scope.$emit('NodeSelect', data.inst.get_json()[0]);
                 });
             
+            Wait('stop');
             });
         
-        scope['treeLoading'] = true;
+        Wait('start');
         LoadTreeData(params);
         
         }
@@ -600,12 +557,17 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
         var defaultUrl=GetBasePath('inventory');
         var scope = params.scope
         
-        form.well = false,
+        form.well = false;
         form.formLabelSize = 'col-lg-3';
         form.formFieldSize = 'col-lg-9';
         
         generator.inject(form, {mode: 'edit', modal: true, related: false});
         
+        /* Reset form properties. Otherwise it screws up future requests of the Inventories detail page */
+        form.well = true;
+        delete form.formLabelSize;
+        delete form.formFieldSize;
+
         ParseTypeChange(scope,'inventory_variables', 'inventoryParseType');
 
         scope.inventoryParseType = 'yaml';
@@ -644,5 +606,28 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
         }
         
     }
+    }])
+
+    .factory('SetShowGroupHelp', ['Rest', 'ProcessErrors', 'GetBasePath', function(Rest, ProcessErrors, GetBasePath) {
+    return function(params) {
+        // Check if inventory has groups. If not, turn on hints to let user know groups are required
+        // before we can 
+        var scope = params.scope;
+        var url = GetBasePath('inventory') + scope.inventory_id + '/groups/';
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                if (data.results.length > 0) {
+                   scope.showGroupHelp = false;
+                }
+                else {
+                   scope.showGroupHelp = true;
+                }
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, form,
+                    { hdr: 'Error!', msg: 'Failed to retrieve inventory groups. GET returned status: ' + status });
+                });
+    }
     }]);
 

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

@@ -23,6 +23,9 @@ body {
   color: @black;
 }
 
+/* Helper Classes */
+.pad-right-sm { padding-right: 10px; }
+
 .spinny {
   display: none;
   position: absolute;
@@ -409,7 +412,7 @@ select.field-mini-height {
   .title {
     display: inline-block;
     font-weight: bold; 
-    margin-right: 10px;
+    margin-right: 25px;
   }
 }
 
@@ -703,9 +706,10 @@ select.field-mini-height {
     padding: 10px 3px 10px 3px;
 
     .title {
-      color: @black;
+      color: #888;
-      font-weight: bold;
+      font-weight: normal;
-      margin-bottom: 10px;
+      margin-left: 5px;
+      margin-bottom: 5px;
       margin-top: 0;
     }
 
@@ -820,6 +824,10 @@ tr td button i {
 .event-form {
   margin-top: 10px;
   margin-bottom: 5px;
+
+  label {
+    font-weight: normal;
+  }
 }
 
 .event-detail-host {

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

@@ -939,27 +939,29 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        var form = this.form;
        var itm = "groups";
 
-       
-       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.</p>";
-       html += "</div>\n";
-       
        var html = '';
+    
        html += this.breadCrumbs(options);
 
        if (form.type == 'groupsview') {
           // build the groups page
+          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 <a href=\"/#/inventories/\{\{ inventory_id \}\}/hosts\"><em>Inventories->Hosts</em></a> page to " +
+              "add hosts to the group.</p>";
+          html += "</div>\n";
           html += "<div class=\"tree-container\">\n";
           html += "<div class=\"tree-controls\">\n";
-          //html += "<div class=\"title\" ng-bind=\"selectedNodeName\"></div>\n";
+          html += "<div class=\"title\" ng-bind=\"selectedNodeName\"></div>\n";
           html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editInventory()\" ng-hide=\"inventoryEditHide\" " +
               "aw-tool-tip=\"Edit inventory properties\"  data-placement=\"bottom\"><i class=\"icon-edit\"></i> " +
-              "\{\{ selectedNodeName \}\} Properties</button>\n";
+              "Inventory Properties</button>\n";
           html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editGroup()\" ng-hide=\"groupEditHide\" " +
               "aw-tool-tip=\"Edit the selected group\" data-placement=\"bottom\"><i class=\"icon-edit\"></i> " +
-              "\{\{ selectedNodeName \}\} Properties</button>\n";
+              "Group Properties</button>\n";
+          html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editHosts()\" ng-hide=\"showGroupHelp\" " +
+              "aw-tool-tip=\"Modify and create inventory hosts\" data-placement=\"bottom\"><i class=\"icon-laptop\"></i> Hosts</button>\n";
           html += "<button type=\"button\" class=\"btn btn-success btn-xs\" ng-click=\"addGroup()\" ng-hide=\"groupAddHide\" " +
               "aw-tool-tip=\"Add an existing group\" data-placement=\"bottom\"><i class=\"icon-check\"></i> Add Existing Group</button>\n";
           html += "<button type=\"button\" class=\"btn btn-success btn-xs\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
@@ -971,12 +973,22 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "</div><!-- tree-container -->\n";
        }
        else {
-          // build the hosts page
+          // build the hosts page      
+          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 on the " + 
+              "<a href=\"/#/inventories/\{\{ inventory_id \}\}/groups\"><em>Inventories->Groups</em></a> page. After creating a group, " +
+              "return here and add hosts to the group.</p>";
+          html += "</div>\n";
           html += "<div class=\"row\">\n";
           html += "<div class=\"col-lg-3\" id=\"search-tree-target\">\n";
-          //html += "<div aw-tree=\"searchTree\"></div>\n";
+          html += "<div class=\"search-tree well\">\n";
-          html += "<div class=\"search-tree well\" id=\"search-tree-container\">\n</div>\n";
+          html += "<div id=\"search-tree-container\">\n</div><!-- search-tree-container -->\n";
-          html += "</div>\n";
+          html += "<div class=\"text-right pad-right-sm\"><button type=\"button\" class=\"btn btn-default btn-xs\" " +
+              "ng-click=\"editGroups()\" aw-tool-tip=\"Modify and create inventory groups\" data-placement=\"left\"> " +
+              "<i class=\"icon-sitemap\"></i> Groups</button></div>\n";
+          html += "</div><!-- search-tree well -->\n";
+          html += "</div><!-- col-lg-3 -->\n";
           html += "<div class=\"col-lg-9\">\n"; 
           html += "<div class=\"hosts-well well\">\n";
           
@@ -1055,7 +1067,9 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                  html += "<td>";
                  html += "<div class=\"input-group input-group-sm\">\n";
                  html += "<span class=\"input-group-btn\">\n";
-                 html += "<button class=\"btn btn-default\" type=\"button\" ng-click=\"editHostGroups({{ host.id }})\"><i class=\"icon-sitemap\"></i></button>\n";
+                 html += "<button class=\"btn btn-default\" type=\"button\" ng-click=\"editHostGroups({{ host.id }})\" " +
+                     "aw-tool-tip=\"Change group associations for this host\" data-placement=\"top\" >" + 
+                     "<i class=\"icon-sitemap\"></i></button>\n";
                  html += "</span>\n";
                  html += "<input type=\"text\" ng-model=\"host.groups\" class=\"form-control\" disabled=\"disabled\" >\n";
                  html += "</div>\n";