AC-503 Latest cloud inventory changes.

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

@@ -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];
@@ -127,10 +128,13 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
       var type = node.attr('type');
       var url;
       
+      scope['nodeSelectValue'] = n;
       scope['selectedNode'] = node;
       scope['selectedNodeName'] = node.attr('name');
       scope['grpBtnDisable'] = false;
-      
+      scope['flashMessage'] = null;
+      scope['groupUpdateHide'] = true;
+
       $('#tree-view').jstree('open_node',node);
       
       if (type == 'group') {
@@ -145,11 +149,13 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
          
          // Load the form
          GroupsEdit({ "inventory_id": id, group_id: scope.group_id });
-         //scope.groupName = n.data;
+
-         //scope.groupTitle = '<h4>' + n.data + '</h4>';
+         // Slide in the group properties form
-         //scope.groupTitle += (node.attr('description')) ? '<p>' + node.attr('description') + '</p>' : '';
+         $('#tree-form').show();
+         $('input:first').focus();
       }
       else if (type == 'inventory') {
+         $('#tree-form').hide().empty();
          url = node.attr('hosts');
          scope.groupAddHide = true;
          scope.groupCreateHide = false; 
@@ -157,8 +163,6 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
          scope.inventoryEditHide=false;
          scope.groupDeleteHide = true;
          scope.createButtonShow = false;
-         //scope.groupName = 'All Hosts';
-         //scope.groupTitle = '<h4>All Hosts</h4>';
          scope.group_id = null;
       }
 
@@ -177,14 +181,7 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
 
   scope.editGroup = function() {
       // Slide in the group properties form
-      $('#tree-form').show('slide', {direction: 'up'}, 500);
+      $('#tree-form').show('slide', {direction: 'up'}, 500, function() {
-      
-      // Set the focust to the first form field
-      $('input:first').focus();
-
-      // Disable all the group related buttons
-      scope.grpBtnDisable = true;
-      setTimeout(function() {
           // Remove any tooltips that might be lingering
           $('.tooltip').each( function(index) {
               $(this).remove();
@@ -193,7 +190,19 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
               // remove lingering popover <div>. Seems to be a bug in TB3 RC1
               $(this).remove();
               });
-          }, 1000);
+          // Set the focust to the first form field
+          $('input:first').focus();
+          });   
+      
+      // Disable all the group related buttons
+      scope.grpBtnDisable = false;
+          
+      }
+
+  scope.closeForm = function() {
+      // Slide in the group properties form
+      $('#tree-form').hide('slide',{ direction: 'right' }, 500, function() { $('#tree-form').empty(); });
+      scope.grpBtnDisable = false;
       }
 
   scope.editInventory = function() {

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

@@ -238,54 +238,18 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       }
       };
 
-   // Related set: Add button
-   scope.add = function(set) {
-      $rootScope.flashMessage = null;
-      $location.path('/' + base + '/' + $routeParams.id + '/groups/' + scope.group_id + '/' + set + '/add');
-      };
-
-   // Related set: Edit button
-   scope.edit = function(set, id, name) {
-      $rootScope.flashMessage = null;
-      $location.path('/' + base + '/' + $routeParams.id + '/' + set + '/' + id);
-      };
-   
    if (scope.removeInventorySaved) {
       scope.removeInventorySaved();
    }
    scope.removeInventorySaved = scope.$on('inventorySaved', function() {
        $location.path('/inventories');
        });
+
    scope.formSave = function() {
       generator.clearApiErrors();
       SaveInventory({ scope: scope });
       }
 
-   // Related set: Delete button
-   scope['delete'] = function(set, itm_id, name, title) {
-      $rootScope.flashMessage = null;
-      
-      var action = function() {
-          var url = defaultUrl + id + '/' + set + '/';
-          Rest.setUrl(url);
-          Rest.post({ id: itm_id, disassociate: 1 })
-              .success( function(data, status, headers, config) {
-                  $('#prompt-modal').modal('hide');
-                  scope.search(form.related[set].iterator);
-                  })
-              .error( function(data, status, headers, config) {
-                  $('#prompt-modal').modal('hide');
-                  ProcessErrors(scope, data, status, null,
-                      { hdr: 'Error!', msg: 'Call to ' + url + ' failed. POST returned status: ' + status });
-                  });      
-          };
-
-       Prompt({ hdr: 'Delete', 
-                body: 'Are you sure you want to remove ' + name + ' from ' + scope.name + ' ' + title + '?',
-                action: action
-                });
-       
-      };
 }
 
 InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', 

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

@@ -11,21 +11,15 @@ angular.module('GroupFormDefinition', [])
     'GroupForm', {
         
         addTitle: 'Create Group',                            //Legend in add mode
-        editTitle: '{{ name }}',                             //Legend in edit mode
+        editTitle: 'Group Properties: {{ name }}',           //Legend in edit mode
+        showTitle: true,
+        cancelButton: false,
         name: 'group',                                       //Form name attribute
         well: false,                                         //Wrap the form with TB well
-        //formLabelSize: 'col-lg-3',
+        formLabelSize: 'col-lg-3',
-        //formFieldSize: 'col-lg-9',
+        formFieldSize: 'col-lg-9',
         
         fields: {
-            /*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',
@@ -44,11 +38,11 @@ angular.module('GroupFormDefinition', [])
                 addRequired: false,
                 editRequird: false, 
                 rows: 10,
-                "class": 'modal-input-xlarge',
+                'default': '---',
-                "default": "---",
                 dataTitle: 'Group Variables',
                 dataPlacement: 'left',
-                awPopOver: "<p>Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
+                awPopOver: "<p>Variables defined here apply to all child groups and hosts. Enter variables using either JSON or YAML syntax. Use the " +
+                    "radio button to toggle between the two.</p>" +
                     "JSON:<br />\n" +
                     "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
                     "YAML:<br />\n" +
@@ -56,10 +50,164 @@ angular.module('GroupFormDefinition', [])
                     '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
                     '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
                 dataContainer: 'body'
-                }
+                },
+            source: {
+                label: 'Source',
+                excludeModal: true,
+                type: 'select',
+                ngOptions: 'source.label for source in source_type_options',
+                ngChange: 'sourceChange()',
+                addRequired: false, 
+                editRequired: false,
+                'default': { label: 'Manual', value: null }
+                },
+            source_path: {
+                label: 'Script Path',
+                excludeModal: true,
+                ngShow: "source.value == 'file'",
+                type: 'text',
+                awRequiredWhen: {variable: "sourcePathRequired", init: "false" }
+                },
+            source_env: {
+                label: 'Script Environment Variables',
+                ngShow: "source.value == 'file'",
+                type: 'textarea',
+                addRequired: false,
+                editRequird: false, 
+                excludeModal: true,
+                rows: 10,
+                'default': '---',
+                parseTypeName: 'envParseType',
+                dataTitle: 'Script Environment Variables',
+                dataPlacement: 'left',
+                awPopOver: "<p>Define environment variables here that will be referenced by the inventory script at runtime. " +
+                    "Enter variables using either JSON or YAML syntax. Use the radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />\"somevar\": \"somevalue\",<br />\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
+                    '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
+                    '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
+                dataContainer: 'body',
+                awPopOverRight: true
+                },
+            source_username: {
+                labelBind: 'sourceUsernameLabel',
+                excludeModal: true,
+                type: 'text',
+                ngShow: "source.value == 'rackspace' || source.value == 'ec2'",
+                awRequiredWhen: {variable: "sourceUsernameRequired", init: "false" }
+                },
+            source_password: {
+                labelBind: 'sourcePasswordLabel',
+                excludeModal: true,
+                type: 'password',
+                ngShow: "source.value == 'rackspace' || source.value == 'ec2'",
+                editRequired: false,
+                addRequired: false,
+                ngChange: "clearPWConfirm('source_password_confirm')",
+                ask: true,
+                clear: true,
+                associated: 'source_password_confirm',
+                autocomplete: false
+                },
+            source_password_confirm: {
+                labelBind: 'sourcePasswordConfirmLabel',
+                type: 'password',
+                ngShow: "source.value == 'rackspace' || source.value == 'ec2'",
+                addRequired: false,
+                editRequired: false,
+                awPassMatch: true,
+                associated: 'source_password',
+                autocomplete: false
+                },
+            source_regions: {
+                label: 'Regions',
+                excludeModal: true,
+                type: 'text',
+                ngShow: "source.value == 'rackspace' || source.value == 'ec2'",
+                addRequired: false,
+                editRequired: false
+                },
+            source_tags: {
+                label: 'Tags',
+                excludeModal: true,
+                type: 'text',
+                ngShow: "source.value == 'rackspace' || source.value == 'ec2'",
+                addRequired: false,
+                editRequired: false
+                },
+            checkbox_group: {
+                label: 'Update Options',
+                type: 'checkbox_group',
+                ngShow: "source.value !== '' && source.value !== null",
+
+                fields: [
+                    {
+                        name: 'overwite_hosts',
+                        label: 'Overwrite Hosts',
+                        type: 'checkbox',
+                        ngShow: "source.value !== '' && source.value !== null",
+                        addRequired: false,
+                        editRequired: false,
+                        awPopOver: '<p>Replace AWX inventory hosts with cloud inventory hosts.</p>',
+                        dataTitle: 'Overwrite Hosts',
+                        dataContainer: 'body',
+                        dataPlacement: 'left',
+                        labelClass: 'checkbox-options',
+                        inline: false
+                        },
+                    {
+                        name: 'overwite_vars',
+                        label: 'Overwrite Variables',
+                        type: 'checkbox',
+                        ngShow: "source.value !== '' && source.value !== null",
+                        addRequired: false,
+                        editRequired: false,
+                        awPopOver: '<p></p>',
+                        dataTitle: 'Overwrite Variables',
+                        dataContainer: 'body',
+                        dataPlacement: 'left',
+                        labelClass: 'checkbox-options',
+                        inline: false
+                        },
+                    {
+                        name: 'keep_vars',
+                        label: 'Keep Variables',
+                        type: 'checkbox',
+                        ngShow: "source.value !== '' && source.value !== null",
+                        addRequired: false,
+                        editRequired: false,
+                        awPopOver: '<p></p>',
+                        dataTitle: 'Keep Variables',
+                        dataContainer: 'body',
+                        dataPlacement: 'left',
+                        labelClass: 'checkbox-options',
+                        inline: false
+                        },
+                    {
+                        name: 'update_on_launch',
+                        label: 'Update on Launch',
+                        type: 'checkbox',
+                        ngShow: "source.value !== '' && source.value !== null",
+                        addRequired: false,
+                        editRequired: false,
+                        awPopOver: '<p>Each time a job runs using this inventory, refresh the inventory from the selected source</p>',
+                        dataTitle: 'Update on Launch',
+                        dataContainer: 'body',
+                        dataPlacement: 'left',
+                        labelClass: 'checkbox-options',
+                        inline: false
+                        }
+                    ]
+                } 
             },
 
         buttons: { //for now always generates <button> tags 
+            
+            labelClass: 'col-lg-3',
+            controlClass: 'col-lg-5',
+
             save: { 
                 label: 'Save', 
                 icon: 'icon-ok',

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

@@ -76,8 +76,8 @@ angular.module('InventoryFormDefinition', [])
                     '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
                     '<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
                 dataTitle: 'Inventory Variables',
-                dataPlacement: 'bottom',
+                dataPlacement: 'left',
-                dataContainer: '#inventory'
+                dataContainer: 'body'
                 }
             },
 

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

@@ -12,6 +12,17 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                                  'InventoryHelper', 'SelectionHelper'
                                  ])
 
+    .factory('getSourceTypeOptions', [ function() {
+        return function() {
+            return [
+                { label: 'Manual', value: null },
+                { label: 'Amazon EC2', value: 'ec2' },
+                { label: 'Rackspace', value: 'rackspace' },
+                { label: 'Local script', value: 'file' }
+                ];
+        }
+        }])
+
     .factory('GroupsList', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupList', 'GenerateList', 
         'Prompt', 'SearchInit', 'PaginateInit', 'ProcessErrors', 'GetBasePath', 'GroupsAdd', 'RefreshTree', 'SelectionInit',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupList, GenerateList, Prompt, SearchInit, PaginateInit,
@@ -113,9 +124,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
 
     .factory('GroupsAdd', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree', 'ParseTypeChange',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree', 'ParseTypeChange', 'GroupsEdit',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshTree, ParseTypeChange) {
+        GetBasePath, RefreshTree, ParseTypeChange, GroupsEdit) {
     return function(params) {
 
         var inventory_id = params.inventory_id;
@@ -132,9 +143,14 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         scope.formModalHeader = 'Create New Group';
         scope.formModalCancelShow = true;
         scope.parseType = 'yaml';
+        scope.source = { label: 'Manual', value: null };
         ParseTypeChange(scope);
 
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
+        $('#form-modal').off('hide.bs.modal').on('hide.bs.modal', function() {
+            //GroupsEdit({ "inventory_id": scope['inventory_id'], group_id: scope['group_id'] });
+            scope.$emit('NodeSelect', scope['nodeSelectValue']);
+            });
 
         generator.reset();
         var master={};
@@ -218,9 +234,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
 
     .factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'getSourceTypeOptions',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshGroupName, ParseTypeChange) {
+        GetBasePath, RefreshGroupName, ParseTypeChange, getSourceTypeOptions) {
     return function(params) {
         
         var group_id = params.group_id;
@@ -229,27 +245,30 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         var form = GroupForm;
         var defaultUrl =  GetBasePath('groups') + group_id + '/';
         
-        $('#tree-form').hide('slide',{ direction: 'right' }, 500);
+        $('#tree-form').hide().empty();
-        $('#tree-form').empty();
+        
         var scope = generator.inject(form, { mode: 'edit', modal: false, related: false, id: 'tree-form', breadCrumbs: false });
-        //$('#tree-form').show('slide',{ direction: 'up' }, 500);
-        /*
-        var scope = generator.inject(form, { mode: 'edit', modal: true, related: false});
-        */
         generator.reset();
         var master = {};
         var relatedSets = {};
 
-        //scope.formModalActionLabel = 'Save';
+        scope.source_type_options = getSourceTypeOptions();
-        //scope.formModalHeader = 'Edit Group';
-        //scope.formModalCancelShow = true;
         scope.parseType = 'yaml';
+        scope[form.fields['source_env'].parseTypeName] = 'yaml';
+        scope.sourcePasswordRequired = false;
+        scope.sourceUsernameRequired = false;
+        scope.sourceUsernameLabel = 'Username';
+        scope.sourcePasswordLabel = 'Password';
+        scope.sourcePasswordConfirmLabel = 'Confirm Password';
+        scope.sourcePathRequired = false;
+        
         ParseTypeChange(scope);
+        ParseTypeChange(scope, 'source_env', form.fields['source_env'].parseTypeName);
 
         //$('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
         
         
-        // After the group record is loaded, retrieve any group variables
+        // After the group record is loaded, retrieve related data
         if (scope.groupLoadedRemove) {
            scope.groupLoadedRemove();
         }
@@ -258,6 +277,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                 scope.search(relatedSets[set].iterator);
             }
             if (scope.variable_url) {
+               // get group variables
                Rest.setUrl(scope.variable_url);
                Rest.get()
                    .success( function(data, status, headers, config) {
@@ -278,6 +298,65 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                scope.variables = "---";
             }
             master.variables = scope.variables;
+
+            if (scope.source_url) {
+               // get source data
+               Rest.setUrl(scope.source_url);
+               Rest.get()
+                   .success( function(data, status, headers, config) {
+                       for (var fld in form.fields) {
+                           if (fld == 'checkbox_group') {
+                              for (var i = 0; i < form.fields[fld].fields.length; i++) {
+                                  var flag = form.fields[fld].fields[i];
+                                  if (data[flag.name] !== undefined) {
+                                     scope[flag.name] = data[flag.name];
+                                     master[flag.name] = scope[flag.name];
+                                  }
+                              }
+                           }
+                           if (fld == 'source') {
+                              var found = false;
+                              if (data['source'] == '') { 
+                                 data['source'] = null; 
+                              }
+                              for (var i=0; i < scope.source_type_options.length; i++) {
+                                  if (scope.source_type_options[i].value == data['source']) {
+                                     scope['source'] = scope.source_type_options[i];
+                                     found = true;
+                                  }  
+                              }
+                              if (!found || scope['source'].value == null) {
+                                 scope['groupUpdateHide'] = true;
+                              }
+                              else {
+                                 scope['groupUpdateHide'] = false;
+                              }
+                              master['source'] = scope['source'];
+                           }
+                           else if (fld == 'source_env') {
+                              // Parse source_env, converting to YAML.  
+                              if ($.isEmptyObject(data.source_env) || data.source_env == "\{\}" || 
+                                  data.source_env == "null" || data.source_env == "") {
+                                 scope.source_env = "---";
+                              }
+                              else {
+                                 var json_obj = JSON.parse(data.extra_vars);
+                                 scope.source_env = jsyaml.safeDump(json_obj);
+                              }
+                              master.source_env = scope.variables;
+                           }
+                           else if (data[fld]) {
+                              scope[fld] = data[fld];
+                              master[fld] = scope[fld];
+                           }
+                       }           
+                       })
+                   .error( function(data, status, headers, config) {
+                       scope.source = null;
+                       ProcessErrors(scope, data, status, form,
+                           { hdr: 'Error!', msg: 'Failed to retrieve inventory source. GET status: ' + status });
+                       });
+            }
             });
 
         // Retrieve detail record and prepopulate the form
@@ -297,6 +376,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                     }
                 }
                 scope.variable_url = data.related.variable_data;
+                scope.source_url = data.related.inventory_source;
                 scope.$emit('groupLoaded');
                 })
             .error( function(data, status, headers, config) {
@@ -307,9 +387,73 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         if (!scope.$$phase) {
            scope.$digest();
         }
-        
+
+        if (scope.removeFormSaveSuccess) {
+           scope.removeFormSaveSuccess();
+        }
+        scope.removeFormSaveSuccess = scope.$on('formSaveSuccess', function(e, group_id) {
+            
+            var parseError = false;
+            var saveError = false;
+
+            if (scope.source.value !== null && scope.source.value !== '') {
+               var data = { group: group_id, 
+                   source: scope['source'].value,
+                   source_path: scope['source_path'],
+                   source_username: scope['source_username'],
+                   source_password: scope['source_password'],
+                   source_regions: scope['source_regions'],
+                   source_tags: scope['source_tags'],
+                   overwrite_hosts: scope['overwite_hosts'],
+                   overwrite_vars: scope['overwite_vars'],
+                   keep_vars: scope['keep_vars'],
+                   update_on_launch: scope['update_on_launch']
+                   };
+
+               if (scope['source'].value == 'file') {
+                  try {
+                       // Make sure we have valid variable data
+                       if (scope.envParseType == 'json') {
+                          var json_data = JSON.parse(scope.source_env);  //make sure JSON parses
+                       }
+                       else {
+                          var json_data = jsyaml.load(scope.source_env);  //parse yaml
+                       }
+                      
+                       // Make sure our JSON is actually an object
+                       if (typeof json_data !== 'object') {
+                          throw "failed to return an object!";
+                       }
+                       data.source_env = JSON.stringify(json_data, undefined, '\t');
+                  }
+                  catch(err) {
+                       parseError = true;
+                       Alert("Error", "Error parsing extra variables. Parser returned: " + err);     
+                  }
+               }
+
+               if (!parseError) {           
+                  Rest.setUrl(scope.source_url)
+                  Rest.put(data)
+                      .error( function(data, status, headers, config) {
+                          saveError = true;
+                          ProcessErrors(scope, data, status, form,
+                              { hdr: 'Error!', msg: 'Failed to update group inventory source. PUT status: ' + status });
+                          });
+               }
+            }
+
+            if (!saveError && !parseError) {
+               // Reset the form, adjust buttons and let user know changese saved
+               scope[form.name + '_form'].$setPristine();
+               scope['groupUpdateHide'] = (scope['source'].value !== null && scope['source'].value !== '') ? false : true;
+               Alert("Changes Saved", "Your changes to inventory group " + scope['name'] + " were successfully saved.", 'alert-info'); 
+            }
+
+            });
+
         // Save changes to the parent
-        scope.formModalAction = function() {
+        scope.formSave = function() {
             try {
                 var refreshHosts = false;
        
@@ -332,39 +476,19 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                 }
                 data['inventory'] = inventory_id;
                 
-                // Update hosts with new group name/description
-                if (master['description'] != data['description'] || 
-                    master['name'] != data['name']) {
-                    scope.groupTitle = '<h4>' + data['name'] + '</h4>';
-                    scope.groupTitle += '<p>' + data['description'] + '</p>';   
-                }
-
                 Rest.setUrl(defaultUrl);
                 Rest.put(data)
                     .success( function(data, status, headers, config) {
                         if (scope.variables) {
                            //update group variables
-                           Rest.setUrl(GetBasePath('groups') + data.id + '/variable_data/');
+                           Rest.setUrl(scope.variable_url);
                            Rest.put(json_data)
-                               .success( function(data, status, headers, config) {
-                                   $('#form-modal').modal('hide');
-                                   RefreshGroupName($('li[group_id="' + group_id + '"]'), scope['name'])
-                                   if (refreshHosts) {
-                                      scope.$emit('hostsReload');
-                                   }
-                               })
                                .error( function(data, status, headers, config) {
                                    ProcessErrors(scope, data, status, form,
-                                       { hdr: 'Error!', msg: 'Failed to update group varaibles. PUT returned status: ' + status });
+                                       { hdr: 'Error!', msg: 'Failed to update group varaibles. PUT status: ' + status });
                                    });
                         }
-                        else {
+                        scope.$emit('formSaveSuccess', data.id);
-                           $('#form-modal').modal('hide');
-                           RefreshGroupName($('li[group_id="' + group_id + '"]'), scope['name']);
-                           if (refreshHosts) {
-                              scope.$emit('hostsReload');
-                           }
-                        }
                         })
                     .error( function(data, status, headers, config) {
                         ProcessErrors(scope, data, status, form,
@@ -376,14 +500,79 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
             }
             };
 
+        scope.sourceChange = function() {
+            if (scope['source'].value == 'ec2' || scope['source'].value == 'rackspace') {
+               scope.sourcePasswordRequired = true;
+               scope.sourceUsernameRequired = true;
+               if (scope['source'].value == 'ec2') {
+                  scope.sourceUsernameLabel = 'Access Key ID';
+                  scope.sourcePasswordLabel = 'Secret Access Key';
+                  scope.sourcePasswordConfirmLabel = 'Confirm Secret Access Key';
+               }
+               else {
+                  scope.sourceUsernameLabel = 'Username';
+                  scope.sourcePasswordLabel = 'Password'; 
+                  scope.sourcePasswordConfirmLabel = 'Confirm Password';
+               }
+            }
+            else {
+               scope.sourcePasswordRequired = false;
+               scope.sourceUsernameRequired = false;
+               // reset fields
+               scope.source_password = ''; 
+               scope.source_password_confirm = '';
+               scope.source_username = ''; 
+               scope[form.name + '_form']['source_username'].$setValidity('required',true);
+            }
+            
+            if (scope['source'].value == 'file') {
+               scope.sourcePathRequired = true;
+            }
+            else {
+               scope.sourcePathRequired = false;
+               // reset fields
+               scope.source_path = '';
+               scope[form.name + '_form']['source_path'].$setValidity('required',true);
+            }
+            }
+
+        // Password change
+        scope.clearPWConfirm = function(fld) {
+            // If password value changes, make sure password_confirm must be re-entered
+            scope[fld] = '';
+            scope[form.name + '_form'][fld].$setValidity('awpassmatch', false);
+            }
+
+        // Respond to 'Ask at runtime?' checkbox
+        scope.ask = function(fld, associated) {
+            if (scope[fld + '_ask']) {
+               scope[fld] = 'ASK';
+               scope[associated] = '';
+               scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
+            }
+            else {
+               scope[fld] = '';
+               scope[associated] = '';
+               scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
+            }
+            }
+
+        // Click clear button
+        scope.clear = function(fld, associated) {
+            scope[fld] = '';
+            scope[associated] = '';
+            scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
+            scope[form.name + '_form'].$setDirty();
+            }
+
         // Cancel
         scope.formReset = function() {
-           generator.reset();
+            generator.reset();
-           for (var fld in master) {
+            for (var fld in master) {
-               scope[fld] = master[fld];
+                scope[fld] = master[fld];
-           }
+            }
-           scope.parseType = 'yaml';
+            scope.parseType = 'yaml';
-           }
+            }
         }
         }])
 

awx/ui/static/js/helpers/Parse.js

@@ -20,10 +20,10 @@ angular.module('ParseHelper', [])
         scope.blockParseTypeWatch = false; 
         scope.blockVariableDataWatch = false; 
 
-        if (scope.removeParseTypeWatch) {
+        if (scope['remove' + fld + 'Watch']) {
-           scope.removeParseTypeWatch();
+           scope['remove' + fld + 'Watch']();
         }
-        scope.removeParseTypeWatch = scope.$watch(pfld, function(newVal, oldVal) {
+        scope['remove' + fld + 'Watch'] = scope.$watch(pfld, function(newVal, oldVal) {
             if (newVal !== oldVal) {
                if (newVal == 'json') {
                   if ( scope[fld] && !/^---$/.test(scope[fld])) { 

awx/ui/static/js/lists/Inventories.js

@@ -28,8 +28,7 @@ angular.module('InventoriesListDefinition', [])
                 badgeTipPlacement: 'bottom'
                 },
             description: {
-                label: 'Description',
+                label: 'Description'
-                link: true
                 },
             organization: {
                 label: 'Organization',

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

@@ -318,6 +318,24 @@ a:hover {
   max-width: 100px;
 }
 
+.form-title { 
+  display: inline-block;
+  width: 100%;
+  vertical-align: middle;
+  font-weight: bold;
+  padding-left: 15px;
+  margin-bottom: 10px;
+}
+
+.form-cancel {
+   float: right;
+   margin-right: 10px;
+}
+
+.form-title-hr {
+   margin-bottom: 20px;
+}
+
 .form-horizontal .buttons {
   margin-top: 25px;  
 }
@@ -533,14 +551,10 @@ select.field-mini-height {
 }
 
 .checkbox-options {
-  padding-left: 40px;
+  font-weight: normal;
+  padding-right: 20px;
 }
 
-.checkbox-group .checkbox-options:first-child {
-  padding-left: 35px;
-}
-
-
 /* Display list actions next to search widget */
 /*
 .list-actions {
@@ -739,11 +753,15 @@ select.field-mini-height {
   }
 
   .tree-view-container {
-    padding: 0;
+    min-height: 650px;
+    padding: 0 0 10px 0;
+
+    .col-lg-4 {
+      padding-right: 10px;
+    }
   }
   
   .tree-form-container {
-    min-height: 800px;
     padding-left: 0;
     padding-right: 25px;
   }
@@ -753,32 +771,67 @@ select.field-mini-height {
     border-radius: 6px;
     background-color: #e3e3e3;
     padding-top: 10px;
+    margin-top: 10px;
+    min-height: 100px;
   }
-
+  
+  /*
+  #tree-form:before {
+    content: "";
+    border-color: transparent transparent #e3e3e3 transparent;
+    border-style: solid;
+    border-width: 15px;
+    width: 0;
+    height: 0;
+    position: relative; 
+    top: -34px;
+    left: 28px;
+  }
+  */
+  
   #tree-form {
     display: none;
-    margin-top: 15px;
+    padding: 15px 10px 0 10px;
+    margin-top: 10px;
     border: 1px solid #e3e3e3;
     background-color: #e3e3e3;
     border-radius: 6px;
-    padding-top: 15px;
+
+    .form-title {
+      color: #999;
+      padding-left: 10px;
+    }
+
+    hr {
+      background-color: #ccc;
+      height: 1px;
+      margin-top: 5px;
+      margin-bottom: 30px;
+    }
   }
 
   .tree-controls {
-    padding: 10px;
+    .btn-container{
-    border-bottom: 1px solid #e3e3e3;
+      padding-left: 0;
+    }
+
+    .btn-container-inner {
+      padding-top: 10px;
+    }
 
     .title {
-      display: inline-block;
+      padding-top: 15px;
-      width: 263px;
+      padding-left: 13px;
-      padding-top: 7px;
       color: @grey;
-      font-size: 14px;
       font-weight: bold;
-      padding-right: 5px;
     }
   }
 
+  .tree-control-divider {
+    width: 98%;
+    margin: 10px auto;
+  }
+
 /* Inventory-> Hosts */
 
   .hosts-well {
@@ -901,10 +954,6 @@ select.field-mini-height {
   margin-left: 3px;
 }
 
-#tree-view {
-  min-height: 100px;
-}
-
 .slider {
   display: inline-block;
   width: 100px;
@@ -1046,26 +1095,18 @@ tr td button i {
 
 @media (min-width: 1200px) {
    
-   .delete-btn {
+  .delete-btn {
-     /* Used on job page to make cancel and delete buttons have an equal width */
+    /* Used on job page to make cancel and delete buttons have an equal width */
-     width: 60px;
+    width: 60px;
-   }
-
-   #tree-form:before {
-    content:" ";
-    border-color: transparent transparent #e3e3e3 transparent;
-    border-style: solid;
-    border-width: 15px;
-    width: 0;
-    height: 0;
-    position: relative; 
-    top: -46px;
-    left: 28px;
   }
 
   #tree-view {
     margin-left: 10px;
-    margin-top: 16px;
+    margin-top: 10px;
+  }
+
+  .label-text {
+    text-align: right;
   }
 
 }
@@ -1081,8 +1122,17 @@ tr td button i {
   .tree-form-container {
     padding-left: 15px;
     padding-right: 15px;
+    
   }
 
+  .tree-view-container .col-lg-4 {
+      padding-right: 15px;
+  }
+
+  .tree-controls .btn-container {
+    padding-left: 15px;
+  }
+    
   #tree-view {
     margin-left: 0;
     margin-top: 10px;
@@ -1091,6 +1141,10 @@ tr td button i {
   #tree-form {
     margin-top: 10px;
   }
+
+  .label-text {
+    text-align: left;
+  }
  
 }
 
@@ -1131,4 +1185,16 @@ tr td button i {
     padding-right: 15px;
   }
 
+  .tree-view-container .col-lg-4 {
+      padding-right: 15px;
+  }
+
+  .tree-controls .btn-container {
+    padding-left: 15px;
+  }
+
+  .label-text {
+    text-align: left;
+  } 
+
 }

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

@@ -374,7 +374,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
 
        function buildCheckbox(form, field, fld, idx) {
            var html='';
-           html += "<label class=\"checkbox-inline"
+           html += "<label class=\"";
+           html += (field.inline == undefined || field.inline == true) ? "checkbox-inline" : "";
            html += (field.labelClass) ? " " + field.labelClass : "";
            html += "\">";
            html += "<input type=\"checkbox\" "; 
@@ -421,12 +422,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
 
           //text fields
           if (field.type == 'text' || field.type == 'password' || field.type == 'email') {
-             html += "<div class=\"text-right " + getLabelWidth();
+             html += "<div class=\"label-text " + getLabelWidth();
              html += (field.labelClass) ? " " + field.labelClass : "";
              html += "\" ";
              html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
              html += ">\n";
-             html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
+             html += (field.awPopOver && !field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
              html += "<label ";
              html += "class=\"control-label";
              html += "\" ";
@@ -434,6 +435,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              html += "for=\"" + fld + '">';
              html += (field.icon) ? this.icon(field.icon) : "";
              html += field.label + '</label>' + "\n";
+             html += (field.awPopOver && field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
              html += "</div>\n";
              html += "<div ";
              html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
@@ -472,6 +474,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                    "aw-tool-tip=\"Clear " + field.label + "\" id=\"" + fld + "-clear-btn\" ";
                 html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : "";
                 html += " ><i class=\"icon-undo\"></i></button>\n";
+                html += "</span>\n</div>\n";
                 if (field.ask) {
                    html += "<label class=\"checkbox-inline ask-checkbox\">";
                    html += "<input type=\"checkbox\" ng-model=\"" + 
@@ -479,7 +482,6 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                    html += "id=\"" + this.form.name + "_" + fld + "_ask_chbox\" ";
                    html += "> Ask at runtime?</label>";
                 }
-                html += "</span>\n</div>\n";
              }
              
              if (field.genMD5) {
@@ -552,14 +554,15 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
          if (field.type == 'textarea') { 
              
             if (field.label !== false) {
-               html += "<div class=\"text-right " + getLabelWidth();
+               html += "<div class=\"label-text " + getLabelWidth();
                html += (field.labelClass) ? " " + field.labelClass : "";
                html += "\" ";
                html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
                html += ">\n";
-               html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
+               html += (field.awPopOver && !field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
                html += "<label class=\"control-label\" for=\"" + fld + '">';
                html += field.label + '</label>' + "\n";
+               html += (field.awPopOver && field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
                html += "</div>\n";
                html += "<div ";
                html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : ""; 
@@ -567,13 +570,13 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
             }
 
             // Variable editing
-            if (fld == "variables" || fld == "extra_vars" || fld == 'inventory_variables') {
+            if (fld == "variables" || fld == "extra_vars" || fld == 'inventory_variables' || fld == 'source_env') {
               html += "<div class=\"parse-selection\" id=\"" + this.form.name + "_" + fld + "_parse_type\">Parse as: " +
                   "<input type=\"radio\" ng-model=\"";
-              html += (this.form.parseTypeName) ? this.form.parseTypeName : 'parseType'; 
+              html += (field.parseTypeName) ? field.parseTypeName : 'parseType'; 
               html += "\" value=\"yaml\"> <span class=\"parse-label\">YAML</span>\n";
               html += "<input type=\"radio\" ng-model=\"";
-              html += (this.form.parseTypeName) ? this.form.parseTypeName : 'parseType';
+              html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
               html += "\" value=\"json\"> <span class=\"parse-label\">JSON</span>\n</div>\n";
             }
 
@@ -604,7 +607,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
 
          //select field
          if (field.type == 'select') {
-            html += "<div class=\"text-right " + getLabelWidth();
+            html += "<div class=\"label-text " + getLabelWidth();
             html += (field.labelClass) ? " " + field.labelClass : "";
             html += "\" ";
             html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
@@ -702,7 +705,9 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
          if (field.type == 'checkbox_group') {
             html += "<label class=\"control-label " + getLabelWidth() + "\">" + 
                 field.label + "</label>\n";
-            html += "<div class=\"checkbox-group\" ";
+            html += "<div class=\"checkbox-group ";
+            html += getFieldWidth();
+            html += "\" ";
             html += "id=\"" + this.form.name + "_" + fld + "_chbox_group\" "; 
             html += ">\n";
             for (var i=0; i < field.fields.length; i++) {
@@ -770,7 +775,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
 
          //lookup type fields
          if (field.type == 'lookup' && (field.excludeMode == undefined || field.excludeMode != options.mode)) {
-            html += "<div class=\"text-right " + getLabelWidth();
+            html += "<div class=\"label-text " + getLabelWidth();
             html += (field.labelClass) ? " " + field.labelClass : "";
             html += "\" ";
             html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
@@ -818,7 +823,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
 
          //custom fields
          if (field.type == 'custom') {
-            html += "<div class=\"text-right " + getLabelWidth();
+            html += "<div class=\"label-text " + getLabelWidth();
             html += (field.labelClass) ? " " + field.labelClass : "";
             html += "\" ";
             html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
@@ -969,6 +974,18 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              html += "<div class=\"well\">\n";
           }
 
+          // Add a title and optionally a close button (used on Inventory->Groups)
+          if ( (!options.modal) && this.form.showTitle ) {
+             html += "<div class=\"form-title\">";
+             html += (options.mode == 'edit') ? this.form.editTitle : this.form.addTitle;
+             if (this.form.cancelButton) {
+                html += "<button type=\"button\" ng-click=\"closeForm()\" class=\"close form-cancel\" aria-hidden=\"true\">" + 
+                    "&times;</button>\n";
+             }
+             html += "</div>\n";
+             html += "<hr class=\"form-title-hr\">\n";
+          }
+
           html += "<form class=\"form-horizontal";
           html += (this.form['class']) ? ' ' + this.form['class'] : '';
           html += "\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "_form\" autocomplete=\"off\" novalidate>\n";
@@ -1001,31 +1018,30 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              var group = '';     
              for (var fld in this.form.fields) {
                  var field = this.form.fields[fld];
-                
+                 if  (!(options.modal && field.excludeModal)) {
-                 if (field.group && field.group != group) {
+                     if (field.group && field.group != group) {
-                    if (group !== '') {
+                        if (group !== '') {
-                       html += "</div>\n";
+                           html += "</div>\n";
-                    }
+                        }
-                    html += "<div class=\"well\">\n";
+                        html += "<div class=\"well\">\n";
-                    html += "<h5>" + field.group + "</h5>\n"; 
+                        html += "<h5>" + field.group + "</h5>\n"; 
-                    group = field.group;
+                        group = field.group;
+                     }
+                     if (field.section && field.section != section) {
+                        if (section !== '') {
+                           html += "</div>\n";
+                        }
+                        else {
+                            html += "</div>\n";
+                            html += "<div id=\"" + this.form.name + "-collapse\" class=\"jqui-accordion-modal\">\n";
+                        }
+                        var sectionShow = (this.form[field.section + 'Show']) ? " ng-show=\"" + this.form[field.section + 'Show'] + "\"" : "";
+                        html += "<h3" + sectionShow + ">" + field.section + "</h3>\n"; 
+                        html += "<div" + sectionShow + ">\n";
+                        section = field.section;
+                     }
+                     html += this.buildField(fld, field, options, this.form);
                  }
-
-                 if (field.section && field.section != section) {
-                    if (section !== '') {
-                       html += "</div>\n";
-                    }
-                    else {
-                        html += "</div>\n";
-                        html += "<div id=\"" + this.form.name + "-collapse\" class=\"jqui-accordion-modal\">\n";
-                    }
-                    var sectionShow = (this.form[field.section + 'Show']) ? " ng-show=\"" + this.form[field.section + 'Show'] + "\"" : "";
-                    html += "<h3" + sectionShow + ">" + field.section + "</h3>\n"; 
-                    html += "<div" + sectionShow + ">\n";
-                    section = field.section;
-                 }
-
-                 html += this.buildField(fld, field, options, this.form);
              }
              if (section !== '') {
                 html += "</div>\n</div>\n";
@@ -1038,44 +1054,53 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           //buttons
           if (!this.modal) {
              if (this.has('buttons')) {
+                
                 if (this.form.twoColumns) {
-                  html += "<div class=\"row\">\n";
+                   html += "<div class=\"row\">\n";
-                  html += "<div class=\"col-lg-12\">\n";
+                   html += "<div class=\"col-lg-12\">\n";
-                  html += "<hr />\n";
+                   html += "<hr />\n";
                 }
+                
                 html += "<div class=\"form-group buttons\" ";
                 html += "id=\"" + this.form.name + "_controls\" ";
                 html += ">\n";
-                html += "<label class=\"col-lg-2 control-label\"> </label>\n";
+                html += "<label class=\"";
-                html += "<div class=\"controls col-lg-6\">\n";
+                html += (this.form.buttons['labelClass']) ? this.form.buttons['labelClass'] : "col-lg-2";
+                html += " control-label\"> </label>\n";
+                html += "<div class=\"";
+                html += (this.form.buttons['controlClass']) ? this.form.buttons['controlClass'] : "col-lg-6"; 
+                html += " controls\">\n";
                 for (var btn in this.form.buttons) {
-                    var button = this.form.buttons[btn];
+                    if (typeof this.form.buttons[btn] == 'object') {
-                    //button
+                       var button = this.form.buttons[btn];
-                    html += "<button type=\"button\" ";
+                       //button
-                    html += "class=\"btn btn-sm";
+                       html += "<button type=\"button\" ";
-                    html += (button['class']) ? " " + button['class'] : "";
+                       html += "class=\"btn btn-sm";
-                    html += "\" ";
+                       html += (button['class']) ? " " + button['class'] : "";
-                    html += "id=\"" + this.form.name + "_" + btn + "_btn\" "; 
+                       html += "\" ";
-                    if (button.ngClick) {
+                       html += "id=\"" + this.form.name + "_" + btn + "_btn\" "; 
-                       html += this.attr(button,'ngClick');
+                       
-                    }
+                       if (button.ngClick) {
-                    if (button.ngDisabled) {
+                          html += this.attr(button,'ngClick');
-                       if (btn !== 'reset') {
-                          html += "ng-disabled=\"" + this.form.name + "_form.$pristine || " + this.form.name + "_form.$invalid";
-                          html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : ""; 
-                          html += "\" ";
                        }
-                       else {
+                       if (button.ngDisabled) {
-                          html += "ng-disabled=\"" + this.form.name + "_form.$pristine";
+                          if (btn !== 'reset') {
-                          html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : ""; 
+                             html += "ng-disabled=\"" + this.form.name + "_form.$pristine || " + this.form.name + "_form.$invalid";
-                          html += "\" ";   
+                             html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : ""; 
+                             html += "\" ";
+                          }
+                          else {
+                             html += "ng-disabled=\"" + this.form.name + "_form.$pristine";
+                             html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : ""; 
+                             html += "\" ";   
+                          }
                        }
+                       html += ">";
+                       if (button.icon) {
+                          html += this.icon(button.icon);
+                       }
+                       html += button.label + "</button>\n";
                     }
-                    html += ">";
-                    if (button.icon) {
-                       html += this.icon(button.icon);
-                    }
-                    html += button.label + "</button>\n";
                 } 
                 html += "</div>\n";
                 html += "</div>\n";
@@ -1180,22 +1205,33 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "<div class=\"row\">\n";
           html += "<div class=\"col-lg-12\">\n";
           html += "<div class=\"tree-view-container well\">\n";
-          html += "<div class=\"tree-controls\">\n";
+          html += "<div class=\"row tree-controls\">\n";
+          html += "<div class=\"col-lg-4\">\n";
           html += "<div class=\"title\" ng-bind=\"selectedNodeName\"></div>\n";
-          html += "<button type=\"button\" id=\"edit_group_btn\" class=\"btn btn-default btn-sm\" ng-click=\"editGroup()\" ng-hide=\"groupEditHide\" " +
+          html += "</div>\n";
+          html += "<div class=\"col-lg-8 btn-container\">\n";
+          html += "<div class=\"btn-container-inner\">\n";
+          /*html += "<button type=\"button\" id=\"edit_group_btn\" class=\"btn btn-default btn-sm\" ng-click=\"editGroup()\" ng-hide=\"groupEditHide\" " +
               "aw-tool-tip=\"Edit the selected group's properties\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-edit\"></i> " +
               "properties</button>\n";
+          */
           html += "<button type=\"button\" id=\"copy_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"addGroup()\" ng-hide=\"groupAddHide\" " +
               "aw-tool-tip=\"Copy existing groups to the selected group\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-check\"></i> Copy</button>\n";
           html += "<button type=\"button\" id=\"create_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
               "aw-tool-tip=\"Create a brand new group and add it to the selected group\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-plus\"></i> Create New</button>\n";
+          html += "<button type=\"button\" id=\"update_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"updateGroup()\" ng-hide=\"groupUpdateHide\" " +
+              "aw-tool-tip=\"Start the inventory update process, refreshing the group.\" " +
+              "data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-cloud-download\"></i> Update</button>\n";
           html += "<button type=\"button\" id=\"delete_group_btn\" class=\"btn btn-danger btn-sm\" ng-click=\"deleteGroup()\" ng-hide=\"groupDeleteHide\" " +
               "aw-tool-tip=\"Permanently delete the selected group. Any hosts in the group will still be available in All Hosts.\" " +
               "data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-trash\"></i> Delete</button>\n";
+          html += "</div>\n";
+          html += "</div>\n";
           html += "</div><!-- tree controls -->\n";
+          html += "<hr class=\"tree-control-divider\">\n";
           html += "<div class=\"row\">\n";
-          html += "<div class=\"col-lg-3\"><div id=\"tree-view\"></div></div>\n";
+          html += "<div class=\"col-lg-4\"><div id=\"tree-view\"></div></div>\n";
-          html += "<div class=\"col-lg-9 tree-form-container\">\n<div id=\"tree-form\">\n</div>\n</div>\n";
+          html += "<div class=\"col-lg-8 tree-form-container\">\n<div id=\"tree-form\">\n</div>\n</div>\n";
           html += "</div>\n";
           html += "</div><!-- well -->\n";
           html += "</div><!-- col-lg-12 -->\n";