Latest tree and Groups page modifications

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

@@ -10,241 +10,155 @@
 function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryGroupsForm,
                           GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, Prompt,
                           BuildTree, GetBasePath, GroupsList, GroupsAdd, GroupsEdit, LoadInventory,
-                          GroupsDelete, RefreshGroupName, EditInventory, InventoryStatus) 
+                          GroupsDelete, RefreshGroupName, EditInventory, InventoryStatus)
 {
-   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
+
+    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
-   var generator = GenerateForm;
+    var generator = GenerateForm;
-   var form = InventoryGroupsForm;
+    var form = InventoryGroupsForm;
-   var defaultUrl=GetBasePath('inventory');
+    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;
-   
-   scope.grpBtnDisable = false;
-   scope['inventory_id'] = id;
-   
-   // Retrieve each related sets and any lookups
-   if (scope.inventoryLoadedRemove) {
-      scope.inventoryLoadedRemove();
-   }
-   scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
-       LoadBreadCrumbs({ path: '/inventories/' + id, title: scope.inventory_name });
-       BuildTree({
-           scope: scope,
-           inventory_id: id,
-           emit_on_select: 'NodeSelect',
-           target_id: 'search-tree-container',
-           moveable: true
-           });
-       if (!scope.$$phase) {
-          scope.$digest();
-       }
-       });
 
-   LoadInventory({ scope: scope, doPostSteps: false });
+    $('#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;
 
-   scope.treeController = function($node) {
+    scope.grpBtnDisable = false;
+    scope['inventory_id'] = id;
 
-      var nodeType = $($node).attr('type');
+    // Retrieve each related sets and any lookups
-      if (nodeType == 'inventory') {
+    if (scope.inventoryLoadedRemove) {
-          return {
+        scope.inventoryLoadedRemove();
-              editInventory: {
+    }
-                  label: 'Inventory Properties',
+    scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
-                  action: function(obj) {
+        LoadBreadCrumbs({ path: '/inventories/' + id, title: scope.inventory_name });
-                      scope.group_id = null;
+        BuildTree({
-                      if (!scope.$$phase) {
+            scope: scope,
-                         scope.$digest();
+            inventory_id: id,
-                      }
+            emit_on_select: 'NodeSelect',
-                      EditInventory({ scope: scope, "inventory_id": id });
+            target_id: 'search-tree-container',
-                      },
+            refresh: false,
-                  separator_after: true
+            moveable: true
-                  },
+            });
-              addGroup: {
+        });
-                  label: 'Create New Group',
-                  action: function(obj) {
-                      scope.group_id = null;
-                      if (!scope.$$phase) {
-                         scope.$digest();
-                      }
-                      GroupsAdd({ "inventory_id": id, group_id: null });
-                      }
-                  }
-              }
-      }
-      else {
-         return {
-             edit: { 
-                 label: 'Group Properties',
-                 action: function(obj) {
-                     scope.group_id = $(obj).attr('group_id');
-                     if (!scope.$$phase) {
-                        scope.$digest();
-                     }
-                     GroupsEdit({ "inventory_id": id, group_id: $(obj).attr('group_id') }); 
-                     },
-                 separator_after: true
-                 },
 
-             addGroup: { 
+    LoadInventory({ scope: scope, doPostSteps: false });
-                 label: 'Add Existing Group',
-                 action: function(obj) {
-                     scope.group_id = $(obj).attr('group_id');
-                     if (!scope.$$phase) {
-                        scope.$digest();
-                     }
-                     GroupsList({ "inventory_id": id, group_id: $(obj).attr('group_id') });
-                     }    
-                 },
 
-             createGroup: { 
+    scope.$on('NodeSelect', function(e, id, group_id, name) {
-                 label: 'Create New Group',
-                 action: function(obj) {
-                     scope.group_id = $(obj).attr('group_id');
-                     if (!scope.$$phase) {
-                        scope.$digest();
-                     }
-                     GroupsAdd({ "inventory_id": id, group_id: $(obj).attr('group_id') });
-                     }    
-                 },
-
-             "delete": {
-                 label: 'Delete Group',
-                 action: function(obj) {
-                     scope.group_id = $(obj).attr('group_id');
-                     if (!scope.$$phase) {
-                        scope.$digest();
-                     }
-                     GroupsDelete({ scope: scope, "inventory_id": id, group_id: $(obj).attr('group_id') });
-                     }
-                 }
-             }
-      }
-      }
-  
-  scope.$on('NodeSelect', function(e, id, group_id, name) {
       
-      // Respond to user clicking on a tree node
+        // Respond to user clicking a tree node
 
-      var node = $('#' + id);
+        var node = $('#' + id);
-      var parent = node.parent().parent();
+        var parent = node.parent().parent();
-      var type = (group_id == null) ? 'inventory' : 'group';
+        var type = (group_id == null) ? 'inventory' : 'group';
-      var url;
+        var url;
+
+        scope['selectedNode'] = node;
+        scope['selectedNodeName'] = name
+        scope['grpBtnDisable'] = false;
+        scope['flashMessage'] = null;
+        scope['groupUpdateHide'] = true;
+
+        if (type == 'group') {
+            //url = node.attr('all');
+            scope.groupAddHide = false;
+            scope.groupCreateHide = false;
+            scope.groupEditHide = false;
+            scope.inventoryEditHide = true;
+            scope.groupDeleteHide = false;
+            scope.createButtonShow = true;
+            scope.group_id = group_id;
+            scope.addGroupHelp = "Copy an existing group into " + name;
+            scope.createGroupHelp = "Create a new group, adding it to " + name;
+            scope.updateGroupHelp = "Start the inventory update process, refreshing " + name;
+            if (parent.attr('id') == 'inventory-root-node') {
+                scope.deleteGroupHelp = "Remove " + name + " from " + parent.attr('data-name') + 
+                " Inventory. Any hosts will still be available in All Hosts."; 
+            }
+            else {
+                scope.deleteGroupHelp = "Remove " + name + " from " + parent.attr('data-name') + 
+                ". Any hosts will still be available in " + parent.attr('data-name') + "."; 
+            }
+
+            // Load the form
+            GroupsEdit({ "inventory_id": scope['inventory_id'], group_id: scope['group_id'] });
+
+            // Slide in the group properties form
+            $('#tree-form').show();
+            $('input:first').focus();
+        }
+        else if (type == 'inventory') {
+            //url = node.attr('hosts');
+            scope.groupAddHide = true;
+            scope.groupCreateHide = false; 
+            scope.groupEditHide =true;
+            scope.inventoryEditHide=false;
+            scope.groupDeleteHide = true;
+            scope.createButtonShow = false;
+            scope.group_id = null;
+            scope.inventory_name = name;
+            InventoryStatus({ scope: scope });
+            $('#tree-form').show();
+        }
+
+        if (!scope.$$phase) {
+           scope.$digest();
+        }
+        });
+
+    scope.addGroup = function() {
+        GroupsList({ "inventory_id": id, group_id: scope.group_id });
+        }
+
+    scope.createGroup = function() {
+        GroupsAdd({ "inventory_id": id, group_id: scope.group_id });
+        }
+
+    scope.editGroup = function() {
+        // Slide in the group properties form
+        $('#tree-form').show('slide', {direction: 'up'}, 500,
+            function() {
+                // Remove any tooltips that might be lingering
+                $('.tooltip').each( function(index) {
+                    $(this).remove();
+                    });
+                $('.popover').each(function(index) {
+                    // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+                   $(this).remove();
+                   });
+                // Set the focust to the first form field
+                $('input:first').focus();
+                });   
       
-      /*if ($rootScope.timer) {
+        // Disable all the group related buttons
-         // Kill any lingering timers from the inventory summary page
+        scope.grpBtnDisable = false;   
-         clearInterval($rootScope.timer);
+        }
-         $rootScope.timer = null;
-      }*/
 
-      scope['selectedNode'] = node;
+    scope.closeForm = function() {
-      scope['selectedNodeName'] = name
+        // Slide in the group properties form
-      scope['grpBtnDisable'] = false;
+        $('#tree-form').hide('slide',{ direction: 'right' }, 500, function() { $('#tree-form').empty(); });
-      scope['flashMessage'] = null;
+        scope.grpBtnDisable = false;
-      scope['groupUpdateHide'] = true;
+        }
 
-      //$('#tree-view').jstree('open_node',node);
+    scope.editInventory = function() {
-      
+        EditInventory({ scope: scope, inventory_id: id });
-      if (type == 'group') {
+        }
-         //url = node.attr('all');
-         scope.groupAddHide = false;
-         scope.groupCreateHide = false;
-         scope.groupEditHide = false;
-         scope.inventoryEditHide = true;
-         scope.groupDeleteHide = false;
-         scope.createButtonShow = true;
-         scope.group_id = group_id;
-         scope.addGroupHelp = "Copy an existing group into " + name;
-         scope.createGroupHelp = "Create a new group, adding it to " + name;
-         scope.updateGroupHelp = "Start the inventory update process, refreshing " + name;
-         if (parent.attr('id') == 'inventory-root-node') {
-            scope.deleteGroupHelp = "Remove " + name + " from " + parent.attr('data-name') + 
-             " Inventory. Any hosts will still be available in All Hosts."; 
-         }
-         else {
-            scope.deleteGroupHelp = "Remove " + name + " from " + parent.attr('data-name') + 
-             ". Any hosts will still be available in " + parent.attr('name') + " and All Hosts."; 
-         }
-         
-         // Load the form
-         GroupsEdit({ "inventory_id": scope['inventory_id'], group_id: scope['group_id'] });
 
-         // Slide in the group properties form
+    scope.deleteGroup = function() {
-         $('#tree-form').show();
+        GroupsDelete({ scope: scope, "inventory_id": id, group_id: scope.group_id });
-         $('input:first').focus();
+        }
-      }
-      else if (type == 'inventory') {
-         //url = node.attr('hosts');
-         scope.groupAddHide = true;
-         scope.groupCreateHide = false; 
-         scope.groupEditHide =true;
-         scope.inventoryEditHide=false;
-         scope.groupDeleteHide = true;
-         scope.createButtonShow = false;
-         scope.group_id = null;
-         scope.inventory_name = name;
-         InventoryStatus({ scope: scope });
-         $('#tree-form').show();
-      }
 
-      if (!scope.$$phase) {
+    scope.editHosts = function() {
-         scope.$digest();
+        $location.path('/inventories/' + scope.inventory_id + '/hosts');
-      }
+        }
-      });
-
-  scope.addGroup = function() {
-      GroupsList({ "inventory_id": id, group_id: scope.group_id });
-      }
-
-  scope.createGroup = function() {
-      GroupsAdd({ "inventory_id": id, group_id: scope.group_id });
-      }
-
-  scope.editGroup = function() {
-      // Slide in the group properties form
-      $('#tree-form').show('slide', {direction: 'up'}, 500, function() {
-          // Remove any tooltips that might be lingering
-          $('.tooltip').each( function(index) {
-              $(this).remove();
-              });
-          $('.popover').each(function(index) {
-              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
-              $(this).remove();
-              });
-          // 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() {
-      EditInventory({ scope: scope, inventory_id: id });
-      }
-
-  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',
+InventoryGroups.$inject = [ 
-                            'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'Prompt',
+    '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryGroupsForm',
-                            'BuildTree', 'GetBasePath', 'GroupsList', 'GroupsAdd', 'GroupsEdit', 'LoadInventory',
+    'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'Prompt',
-                            'GroupsDelete', 'RefreshGroupName', 'EditInventory', 'InventoryStatus'
+    'BuildTree', 'GetBasePath', 'GroupsList', 'GroupsAdd', 'GroupsEdit', 'LoadInventory',
-                            ]; 
+    'GroupsDelete', 'RefreshGroupName', 'EditInventory', 'InventoryStatus'
+    ]; 
   

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

@@ -103,7 +103,7 @@ angular.module('GroupFormDefinition', [])
                 ngChange: 'sourceChange()',
                 addRequired: false, 
                 editRequired: false,
-                'default': { label: 'Manual', value: null }
+                'default': { label: 'Manual', value: '' }
                 },
             source_path: {
                 label: 'Script Path',
@@ -177,8 +177,7 @@ angular.module('GroupFormDefinition', [])
                     "<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',
+                dataContainer: 'body'
-                awPopOverRight: true
                 },
             update_interval: {
                 label: 'Update Interval',

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

@@ -13,13 +13,26 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                                  'PromptDialog', 'InventorySummaryHelpDefinition', 'TreeSelector'
                                  ])
 
-    .factory('GetSourceTypeOptions', [ function() {
+    .factory('GetSourceTypeOptions', [ 'Rest', 'ProcessErrors', 'GetBasePath', function(Rest, ProcessErrors, GetBasePath) {
-        return function() {
+        return function(params) {
-            return [
+            // Lookup options for source and build an array of drop-down choices
-                { label: 'none', value: null },
+            var scope = params.scope;
-                { label: 'ec2', value: 'ec2' },
+            var variable = params.variable;
-                { label: 'rackspace', value: 'rackspace' }
+            if (scope[variable] == undefined) {
-                ];
+                scope[variable] = [];
+                Rest.setUrl(GetBasePath('inventory_sources'));
+                Rest.options()
+                    .success( function(data, status, headers, config) { 
+                        var choices = data.actions.GET.source.choices
+                        for (var i=0; i < choices.length; i++) {
+                            scope[variable].push({ label: [ (choices[i][0] == "") ? 'Manual' : choices[i][1] ], value: choices[i][0] });
+                        }
+                        })
+                    .error( function(data, status, headers, config) { 
+                        ProcessErrors(scope, data, status, null,
+                            { hdr: 'Error!', msg: 'Failed to retrieve options for inventory_sources.source. OPTIONS status: ' + status });
+                    });
+            }
         }
         }])
 
@@ -175,9 +188,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
     .factory('InventoryStatus', [ '$rootScope', '$routeParams', 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary',
         'GenerateList', 'ClearScope', 'SearchInit', 'PaginateInit', 'Refresh', 'InventoryUpdate', 'GroupsEdit', 'ShowUpdateStatus', 'HelpDialog',
-        'ShowGroupHelp', 'InventorySummaryHelp', 'BuildTree',
+        'ShowGroupHelp', 'InventorySummaryHelp', 'BuildTree', 'ClickNode',
     function($rootScope, $routeParams, Rest, Alert, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope, SearchInit, 
-        PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp, BuildTree) {
+        PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp, BuildTree, ClickNode) {
     return function(params) {
         //Build a summary of a given inventory
         
@@ -361,12 +374,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         // Click on group name
         scope.GroupsEdit = function(group_id) {
             // On the tree, select the first occurrance of the requested group
-            var node = $('#tree-view').find("li[group_id='" + group_id + "']").first();
+            ClickNode({ selector: '#inventory-tree li[data-group-id="' + group_id + '"]' });
-            var selected = $('#tree-view').jstree('get_selected');
-            selected.each(function(idx) {
-                $('#tree-view').jstree('deselect_node', $(this));
-                });
-            $('#tree-view').jstree('select_node', node);
             }
 
         if (scope.removeCancelUpdate) {
@@ -515,9 +523,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
 
     .factory('GroupsAdd', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'ParseTypeChange', 'GroupsEdit', 'BuildTree',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'ParseTypeChange', 'GroupsEdit', 'BuildTree', 'ClickNode',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, ParseTypeChange, GroupsEdit, BuildTree) {
+        GetBasePath, ParseTypeChange, GroupsEdit, BuildTree, ClickNode) {
     return function(params) {
 
         var inventory_id = params.inventory_id;
@@ -529,20 +537,22 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         var form = GroupForm;
         var generator = GenerateForm;
         var scope = generator.inject(form, {mode: 'add', modal: true, related: false});
+        var groupCreated = false;
         
         scope.formModalActionLabel = 'Save';
         scope.formModalHeader = 'Create New Group';
         scope.formModalCancelShow = true;
         scope.parseType = 'yaml';
-        scope.source = { label: 'Manual', value: null };
+        scope.source = null;
         ParseTypeChange(scope);
 
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
-        $('#form-modal').off('hide.bs.modal').on('hide.bs.modal', function() {
+        $('#form-modal').on('hidden.bs.modal', function () {
-            //GroupsEdit({ "inventory_id": scope['inventory_id'], group_id: scope['group_id'] });
+            if (!groupCreated) {
-            scope.$emit('NodeSelect', scope['nodeSelectValue']);
+               ClickNode({ selector: '#' + scope['selectedNode'].attr('id') });
+            } 
             });
-
+        
         generator.reset();
         var master={};
 
@@ -551,9 +561,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         }
 
         // Save
-        scope.formModalAction  = function() {
+        scope.formModalAction = function() {
            try { 
-               
                scope.formModalActionDisabled = true;
 
                // Make sure we have valid variable data
@@ -579,14 +588,17 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                if (inventory_id) {
                   data['inventory'] = inventory_id;
                }
-               
+
-               data.variables = json_data; 
+               if (json_data) {
+                  data['variables'] = JSON.stringify(json_data, undefined, '\t');
+               }
 
                Rest.setUrl(defaultUrl);
                Rest.post(data)
                    .success( function(data, status, headers, config) {
-                       var id = data.id;
+                       groupCreated = true;
-                       scope.showGroupHelp = false;  // get rid of the Hint
+                       scope.formModalActionDisabled = false;
+                       scope.showGroupHelp = false;  //get rid of the Hint
                        $('#form-modal').modal('hide');
                        BuildTree({
                            scope: scope,
@@ -595,7 +607,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                            target_id: 'search-tree-container',
                            refresh: true,
                            moveable: true,
-                           group_id: id
+                           group_id: data.id
                            });
                        }) 
                    .error( function(data, status, headers, config) {
@@ -638,9 +650,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         generator.reset();
         var master = {};
         var relatedSets = {};
-
+        
-        scope.source_type_options = GetSourceTypeOptions();
+        GetSourceTypeOptions({ scope: scope, variable: 'source_type_options' });
         scope.update_interval_options = GetUpdateIntervalOptions();
+        scope.source = null;
         scope.parseType = 'yaml';
         scope[form.fields['source_vars'].parseTypeName] = 'yaml';
         scope.sourcePasswordRequired = false;
@@ -652,9 +665,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         
         ParseTypeChange(scope);
         ParseTypeChange(scope, 'source_vars', form.fields['source_vars'].parseTypeName);
-
-        //$('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
-        
         
         // After the group record is loaded, retrieve related data
         if (scope.groupLoadedRemove) {
@@ -704,16 +714,13 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                            }
                            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) {
+                              if (!found || scope['source'].value == "") {
                                  scope['groupUpdateHide'] = true;
                               }
                               else {
@@ -749,10 +756,11 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                               master[fld] = scope[fld];
                            }
                        }
-                       scope['group_update_url'] = data.related['update'];           
+                       scope['group_update_url'] = data.related['update'];    
+                       scope.sourceChange();
                        })
                    .error( function(data, status, headers, config) {
-                       scope.source = null;
+                       scope.source = "";
                        ProcessErrors(scope, data, status, form,
                            { hdr: 'Error!', msg: 'Failed to retrieve inventory source. GET status: ' + status });
                        });
@@ -1027,20 +1035,21 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
 
     .factory('GroupsDelete', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshTree', 'Wait',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'BuildTree', 'Wait', 'ClickNode',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshTree, Wait) {
+        GetBasePath, BuildTree, Wait, ClickNode) {
     return function(params) {
         // Delete the selected group node. Disassociates it from its parent.
         var scope = params.scope;
         var group_id = params.group_id; 
         var inventory_id = params.inventory_id;
-        var obj = $('#tree-view li[group_id="' + group_id + '"]');
+        var obj = scope['selectedNode'];
-        var parent = (obj.parent().last().prop('tagName') == 'LI') ? obj.parent().last() : obj.parent().parent().last();
+        var parent = obj.parent().parent();
+        //var parent = (obj.parent().last().prop('tagName') == 'LI') ? obj.parent().last() : obj.parent().parent().last();
         var url; 
         
-        if (parent.attr('type') == 'group') {
+        if (parent.attr('data-group-id')) {
-           url = GetBasePath('base') + 'groups/' + parent.attr('group_id') + '/children/';
+           url = GetBasePath('base') + 'groups/' + parent.attr('data-group-id') + '/children/';
         }
         else {
            url = GetBasePath('inventory') + inventory_id + '/groups/';
@@ -1051,20 +1060,28 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
             Rest.setUrl(url);
             Rest.post({ id: group_id, disassociate: 1 })
                .success( function(data, status, headers, config) {
-                   scope.selectedNode = scope.selectedNode.parent().parent();
+                   //DeleteNode({ selector: '#' + obj.attr('id') });
-                   RefreshTree({ scope: scope });
+                   BuildTree({
+                       scope: scope,
+                       inventory_id: scope['inventory_id'],
+                       emit_on_select: 'NodeSelect',
+                       target_id: 'search-tree-container',
+                       refresh: true,
+                       id: parent.attr('id'),
+                       moveable: true
+                       });
+                   Wait('stop');
                    })
                .error( function(data, status, headers, config) {
-                   //$('#prompt-modal').modal('hide');
+                   Wait('stop');
-                   RefreshTree({ scope: scope });
                    ProcessErrors(scope, data, status, null,
                        { hdr: 'Error!', msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status });
                    });      
             };
         //Force binds to work. Not working usual way.
         $('#prompt-header').text('Delete Group');
-        $('#prompt-body').html('<p>Are you sure you want to remove group <em>' + $(obj).attr('name') + '</em> from group <em>' +
+        $('#prompt-body').html('<p>Are you sure you want to remove group <em>' + $(obj).attr('data-name') + '</em> from group <em>' +
-            parent.attr('name') + '</em>?</p>');
+            parent.attr('data-name') + '</em>?</p>');
         $('#prompt-action-btn').addClass('btn-danger');
         scope.promptAction = action_to_take;  // for some reason this binds?
         $('#prompt-modal').modal({

awx/ui/static/js/helpers/JobSubmission.js

@@ -385,8 +385,8 @@ angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'Credential
 
     // Sumbit Inventory Update request
     .factory('InventoryUpdate',['PromptPasswords', '$compile', 'Rest', '$location', 'GetBasePath', 'ProcessErrors', 'Alert', 
-        'GroupForm', 'InventorySummary',
+        'GroupForm', 'BuildTree',
-    function(PromptPasswords, $compile, Rest, $location, GetBasePath, ProcessErrors, Alert, GroupForm, InventorySummary) { 
+    function(PromptPasswords, $compile, Rest, $location, GetBasePath, ProcessErrors, Alert, GroupForm, BuildTree) { 
     return function(params) {
         
         var scope = params.scope; 
@@ -404,13 +404,21 @@ angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'Credential
                // Refresh the project list after update request submitted
                Alert('Update Started', 'The request to start the inventory update process was submitted. Monitor progress from the inventory summary screen. ' +
                    'The screen will refresh every 10 seconds, or refresh manually by clicking the <em>Refresh</em> button.', 'alert-info');
-               var node = $('#inventory-node')
+               //var node = $('#inventory-node')
-               var selected = $('#tree-view').jstree('get_selected');
+               //var selected = $('#tree-view').jstree('get_selected');
-               scope['inventorySummaryGroup'] = null; 
+               //scope['inventorySummaryGroup'] = null; 
-               selected.each(function(idx) {
+               //selected.each(function(idx) {
-                   $('#tree-view').jstree('deselect_node', $(this));
+               //    $('#tree-view').jstree('deselect_node', $(this));
+               //    });
+               //$('#tree-view').jstree('select_node', node);
+               BuildTree({
+                   scope: scope,
+                   inventory_id: scope['inventory_id'],
+                   emit_on_select: 'NodeSelect',
+                   target_id: 'search-tree-container',
+                   refresh: false,
+                   moveable: true
                    });
-               $('#tree-view').jstree('select_node', node);
             }
             });
         

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

@@ -997,18 +997,13 @@ select.field-mini-height {
       list-style-type: none;
       padding-left: 16px;
     }
-    
+  
-    li {
-      padding-top: 3px;
-    }
-
     .tree-root {
       padding-left: 0;
     }
 
     .activate {
-      padding-left: 3px;
+      padding: 3px;
-      padding-right: 3px;
     }
 
     .activate:hover {
@@ -1027,11 +1022,7 @@ select.field-mini-height {
     .badge-container,
     .title-container {
       display: inline-block;
-      vertical-align: top;
+      vertical-align: middle;
-    }
-
-    .badge-container,
-    .title-container {
       border-bottom: 2px solid @well;
     }
 
@@ -1040,6 +1031,12 @@ select.field-mini-height {
       text-align: center;
     }
 
+    .badge-container {
+      vertical-align: none;
+      margin-bottom: 3px;
+      padding-bottom: 2px;
+    }
+
     #root-expand-container {
       width: 20px;
       text-align: left;
@@ -1053,6 +1050,10 @@ select.field-mini-height {
       word-break: break-all;
     }
 
+    #root-title-container {
+      margin-left: 5px;
+    }
+    
     .expand-container:hover {
       background-color: #ddd;
     }
@@ -1060,7 +1061,7 @@ select.field-mini-height {
     .field-badge {
       font-size: 10px;
       line-height: normal;
-      vertical-align: baseline;
+      /*vertical-align: baseline;*/
     }
 
   }

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

@@ -19,6 +19,7 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
             var refresh_tree = (params.refresh == undefined || params.refresh == false) ? false : true;
             var moveable = (params.moveable == undefined || params.moveable == false) ? false : true;
             var group_id = params.group_id;
+            var id = params.id;
 
             var html = '';
             var toolTip = 'Hosts have failed jobs?';
@@ -110,6 +111,7 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
                 var variables;
 
                 function cleanUp(state) {
+                    /*
                     if (state !== 'fail') {
                         // Visually move the element. Elment will be appended to the
                         // end of target element list
@@ -150,6 +152,11 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
                         setExpander(parent);
                     }
                     Wait('stop');
+                    */
+                    // Reload the tree
+                    html = '';
+                    idx = 0;
+                    loadTreeData();
                     }
 
                 // disassociate the group from the original parent
@@ -238,7 +245,15 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
                 }
 
                 if (refresh_tree && group_id !== undefined) {
-                   $('li[data-group-id="' + group_id + '"]').first().click();
+                   // pick a specific node on the tree
+                   $('li[data-group-id="' + group_id + '"] .activate').first().click();
+                }
+                else if (refresh_tree && id !== undefined) {
+                   $('#' + id + ' .activate').first().click();
+                }
+                else if (!refresh_tree) {
+                   // default to the root node
+                   $('#inventory-root-node .activate').first().click();
                 }
                  
                 // Attempt to stop the title from dropping to the next 
@@ -259,7 +274,7 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
                         helper: 'clone',
                         start: function (e, ui) {
                             var txt = '[ ' + ui.helper.text() + ' ]';
-                            ui.helper.css({ 'font-weight': 'normal', 'color': '#A9A9A9', 'background-color': '#f5f5f5' }).text(txt);
+                            ui.helper.css({ 'font-weight': 'normal', 'color': '#171717', 'background-color': '#f5f5f5' }).text(txt);
                             }
                         })
                         .droppable({
@@ -269,11 +284,11 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
                                 var p = $(this).parent().parent(); 
                                 p.find('div').each(function(idx) {
                                     if (idx > 0 && idx < 3) {
-                                       $(this).css({ 'border-bottom': '2px solid #A9A9A9' });
+                                       $(this).css({ 'border-bottom': '2px solid #171717' });
                                     }
                                 });
                                 var c = p.find('.expand-container').first();
-                                c.empty().html('<i class="icon-arrow-right" style="color: #A9A9A9;"></i>');
+                                c.empty().html('<i class="icon-circle-arrow-right" style="color: #171717;"></i>');
                                 },
                             out: function (e, ui) {
                                 var p = $(this).parent().parent();
@@ -388,39 +403,39 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
                     });
                 });
 
-            Wait('start');
+           
+            function loadTreeData() {
+                // Load the inventory root node
+                Wait('start');
+                Rest.setUrl (GetBasePath('inventory') + inventory_id + '/');
+                Rest.get()
+                    .success( function(data, status, headers, config) {
+                        html += "<div class=\"title\">Group Selector:</div>\n" +
+                            "<div id=\"selector-tree\">\n" +
+                            "<ul id=\"inventory-tree\" class=\"tree-root\">\n" +
+                            "<li id=\"inventory-root-node\" data-state=\"opened\" data-hosts=\"" + data.related.hosts + "\" " +
+                            "data-description=\"" + data.description + "\" " + 
+                            "data-failures=\"" + data.has_active_failures + "\" " +
+                            "data-groups=\"" + data.related.groups + "\" " + 
+                            "data-name=\"" + data.name + "\" " +
+                            "data-inventory=\"" + data.id + "\"" +
+                            ">" +
+                            "<div class=\"expand-container\" id=\"root-expand-container\"><i class=\"icon-sitemap\"></i></div>" +
+                            "<div class=\"badge-container\"><i class=\"field-badge icon-failures-" + data.has_active_failures + "\" " +
+                            "aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i></div>" +
+                            "<div class=\"title-container\" id=\"root-title-container\"><a class=\"activate\">" + data.name + "</a></div>";
+                         
+                        scope.$emit('buildAllGroups', data.name, data.related.tree, data.related.groups);
+                         
+                        })
+                    .error( function(data, status, headers, config) {
+                        ProcessErrors(scope, data, status, null,
+                            { hdr: 'Error!', msg: 'Failed to get inventory: ' + inventory_id + '. GET returned: ' + status });
+                        });
+                }
 
-            // Load the inventory root node
+            loadTreeData();
-            Rest.setUrl (GetBasePath('inventory') + inventory_id + '/');
-            Rest.get()
-                 .success( function(data, status, headers, config) {
-                     html += "<div class=\"title\">Group Selector:</div>\n" +
-                       "<div id=\"selector-tree\">\n" +
-                       "<ul id=\"inventory-tree\" class=\"tree-root\">\n" +
-                       "<li id=\"inventory-root-node\" data-state=\"opened\" data-hosts=\"" + data.related.hosts + "\" " +
-                       "data-description=\"" + data.description + "\" " + 
-                       "data-failures=\"" + data.has_active_failures + "\" " +
-                       "data-groups=\"" + data.related.groups + "\" " + 
-                       "data-name=\"" + data.name + "\" " +
-                       ">"+
-                       "<div class=\"expand-container\" id=\"root-expand-container\"><i class=\"icon-sitemap\"></i></div>" +
-                       "<div class=\"badge-container\"><i class=\"field-badge icon-failures-" + data.has_active_failures + "\" " +
-                       "aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i></div>" +
-                       "<div class=\"title-container\"><a class=\"activate\">" + data.name + "</a></div>";
-                     
-                     scope.$emit('buildAllGroups', data.name, data.related.tree, data.related.groups);
-                     
-                     if (!refresh_tree) {
-                        // if caller requests with refresh true, let caller handle next steps / node selection
-                        // otherwise, we're refreshing to summary page
-                        scope.$emit(emit_on_select, 'inventory-root-node', null, 'All Hosts');
-                     }
 
-                     })
-                 .error( function(data, status, headers, config) {
-                     ProcessErrors(scope, data, status, null,
-                         { hdr: 'Error!', msg: 'Failed to get inventory: ' + inventory_id + '. GET returned: ' + status });
-                     });
             }
             }])
 
@@ -452,8 +467,14 @@ angular.module('TreeSelector', ['Utilities', 'RestServices'])
             var selector = params.selector;   //jquery selector string to find the correct <li>
             $(selector + ' .activate').first().click();
             }
+            }])
+
+    .factory('DeleteNode', [ function() {
+        return function(params) {
+            var selector = params.selector;   //jquery selector string to find the correct <li>
+            $(selector).first().detach();
+            }
             }]);
 
 
 
-

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

@@ -973,7 +973,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           }
           
           // Start the well
-          if ( this.has('well') ) {
+          if ( !this.modal && this.has('well') ) {
              html += "<div class=\"well\">\n";
           }
 
@@ -1118,7 +1118,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           }
           html += "</form>\n";
           
-          if ( this.has('well') ) {
+          if ( !this.modal && this.has('well') ) {
              html += "</div>\n";
           }
 
@@ -1190,49 +1190,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                 icon: 'icon-sitemap'
                 }
             };
-    
        
        if (form.type == 'groupsview') {
-
           navigation.inventory.active = false; 
           navigation.hosts.active = false;
           navigation.groups.active = true; 
-          
           html += this.breadCrumbs(options, navigation);
-
-          // 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 " +
-          //    "go to the <a href=\"/#/inventories/\{\{ inventory_id \}\}/hosts\"><em>Hosts</em></a> page to " +
-          //    "add hosts to the group.</p>";
-          //html += "</div>\n";
-
-          /*
-          html += "<div class=\"row\">\n";
-          html += "<div class=\"col-lg-12\">\n";
-          html += "<div class=\"tree-view-container well\">\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 += "</div>\n";
-          html += "<div class=\"col-lg-8 btn-container\">\n";
-          html += "<div class=\"btn-container-inner\">\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 to refresh 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-4\">\n" +
                   "<div class=\"search-tree well\">\n" +
@@ -1242,35 +1205,14 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "<div class=\"col-lg-8 tree-form-container\">\n";
           html += "<div id=\"tree-form\">\n</div>\n";
           html += "</div>\n";
-          //html += "</div><!-- well -->\n";
-          //html += "</div><!-- col-lg-12 -->\n";
           html += "</div><!-- row -->\n";
-       
        }
        else {
           // build the hosts page
-
           navigation.inventory.active = false; 
           navigation.hosts.active = true;
           navigation.groups.active = false; 
-          
           html += this.breadCrumbs(options, navigation);
-  
-          // Hint text
-         /*
-          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 ng-show=\"group_id == null && !showGroupHelp && helpCount < 2\" 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> To add hosts to the inventory, select a group using the Group Selector.</p>";
-          html += "</div>\n";
-          */
-
           html += "<div class=\"row\">\n";
           html += "<div class=\"col-lg-4\" id=\"search-tree-target\">\n";
           html += "<div class=\"search-tree well\">\n";
@@ -1278,38 +1220,18 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "</div><!-- search-tree well -->\n";
           html += "</div><!-- col-lg-4 -->\n";
           html += "<div class=\"col-lg-8\">\n"; 
-
           html += "<div class=\"hosts-well well\">\n";
-
           html += SearchWidget({ iterator: form.iterator, template: form, mini: true, size: 'col-md-5 col-lg-5'});
-          
           html += "<div class=\"col-md-6 col-lg-6\">\n"
           html += "<div class=\"list-actions\">\n";
+          
           // Add actions(s)
           for (var action in form.actions) {
-              /*html += "<button type=\"button\" class=\"btn ";
-              html += (form.actions[action]['class']) ? form.actions[action]['class'] : "btn-success";
-              html += "\" ";
-              if (form['actions'][action].id) {
-                 html += this.attr(form['actions'][action],'id');
-              }
-              else {
-                 html += "id=\"" + action + "_btn\" ";
-              }
-              html += this.attr(form['actions'][action],'ngClick');
-              html += (form['actions'][action].awToolTip) ? this.attr(form['actions'][action],'awToolTip') : "";
-              html += (form['actions'][action].awToolTip && form['actions'][action].dataPlacement) ? 
-                  this.attr(form['actions'][action], 'dataPlacement') : "data-placement=\"top\" ";
-              html += (form['actions'][action].ngHide) ? this.attr(form['actions'][action],'ngHide') : "";
-              html += "><i class=\"" + form['actions'][action].icon + "\"></i>";
-              html += (form['actions'][action].label) ?  " " + form['actions'][action].label : ""; 
-              html += "</button>\n";*/
               html += this.button(form.actions[action], action);
           }
           html += "</div><!-- list-actions -->\n";
           html += "</div>\n";
           html += "</div><!-- row -->\n";
-          
           html += "<div class=\"title\" ng-bind=\"groupTitle\"></div>\n";
           
           // Start the list