Got our custom tree working on both the Groups page and the Hosts page.

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

@@ -33,7 +33,6 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
    }
    scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
        LoadBreadCrumbs({ path: '/inventories/' + id, title: scope.inventory_name });
-       //TreeInit(scope.TreeParams);
        BuildTree({
            scope: scope,
            inventory_id: id,

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

@@ -13,10 +13,10 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
                          RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
                          GetBasePath, HostsList, HostsAdd, HostsEdit, HostsDelete,
-                         HostsReload, LoadSearchTree, EditHostGroups, InventoryHostsHelp, HelpDialog)
+                         HostsReload, BuildTree, EditHostGroups, InventoryHostsHelp, HelpDialog)
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
-                                //scope.
+                                 //scope.
 
     var generator = GenerateForm;
     var form = InventoryHostsForm;
@@ -31,6 +31,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
     scope['hosts'] = null;
     scope['helpCount'] = 0;
 
+    // buildAllGroups emits from TreeSelector.js after the inventory object is ready
     if (scope.loadBreadCrumbsRemove) {
       scope.loadBreadCrumbsRemove();
     }
@@ -38,10 +39,6 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
        LoadBreadCrumbs({ path: '/inventories/' + id, title: inventory_name });
        });
 
-    // Sets up the search tree and loads All Hosts for the inventory
-    LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
-
-
     scope.filterHosts = function() {
         HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] });
         }
@@ -112,11 +109,11 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
         HelpDialog({ defn: InventoryHostsHelp });
         }
 
-    // Respond to the scope.$emit from awTree directive
+    // Refresh host is emitted each time a group on the selector tree is clicked
     if (scope.refreshHostRemove) {
        scope.refreshHostRemove();
     } 
-    scope.refreshHostRemove = scope.$on('refreshHost', function(e, group, title) {
+    scope.refreshHostRemove = scope.$on('refreshHost', function(e, id, group, title) {
         scope.groupTitle = title;
         scope.group_id = group;
         scope.helpCount++;
@@ -135,12 +132,21 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
         scope['hostDeleteDisabledClass'] = 'disabled';
         HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: group });
         });
+
+    // Load the tree. See TreeSelector.js
+    BuildTree({
+           scope: scope,
+           inventory_id: id,
+           emit_on_select: 'refreshHost',
+           target_id: 'search-tree-container'
+           });
+
 }
 
 InventoryHosts.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryHostsForm', 
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                             'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
                             'GetBasePath', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete',
-                            'HostsReload', 'LoadSearchTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog'
+                            'HostsReload', 'BuildTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog'
                             ]; 
   

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

@@ -10,7 +10,7 @@
 angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
                                  'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService', 'GroupsHelper',
                                  'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper', 'RefreshHelper',
-                                 'PromptDialog', 'InventorySummaryHelpDefinition'
+                                 'PromptDialog', 'InventorySummaryHelpDefinition', 'TreeSelector'
                                  ])
 
     .factory('GetSourceTypeOptions', [ function() {
@@ -175,9 +175,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', 'RefreshTree',
+        'ShowGroupHelp', 'InventorySummaryHelp', 'BuildTree',
     function($rootScope, $routeParams, Rest, Alert, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope, SearchInit, 
-        PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp, RefreshTree) {
+        PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp, BuildTree) {
     return function(params) {
         //Build a summary of a given inventory
         
@@ -449,10 +449,18 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
         // Respond to refresh button
         scope.refresh = function() {
-            scope['groupSearchSpin'] = true;
+            
-            scope['groupLoading'] = false;
+            //scope['groupSearchSpin'] = true;
-            RefreshTree({ scope: scope });
+            //scope['groupLoading'] = false;
-            //setTimeout( function () { Refresh({ scope: scope, set: 'groups', iterator: 'group', url: scope['current_url'] }); }, 500);
+            scope.search(list.iterator, false, true);
+
+            BuildTree({
+                scope: scope,
+                inventory_id: scope['inventory_id'],
+                emit_on_select: 'NodeSelect',
+                target_id: 'search-tree-container',
+                refresh: true
+                });
             }
 
         // Start the update process
@@ -615,10 +623,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         }])
 
     .factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'GetSourceTypeOptions', 'InventoryUpdate',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'SetNodeName', 'ParseTypeChange', 'GetSourceTypeOptions', 'InventoryUpdate',
-        'GetUpdateIntervalOptions',
+        'GetUpdateIntervalOptions', 'ClickNode',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshGroupName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, GetUpdateIntervalOptions) {
+        GetBasePath, SetNodeName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, GetUpdateIntervalOptions, ClickNode) {
     return function(params) {
         
         var group_id = params.group_id;
@@ -787,11 +795,13 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
            scope.removeSaveComplete();
         }
         scope.removeSaveComplete = scope.$on('SaveComplete', function(e, error) {
-           if (!error) {
+            if (!error) {
                // Reset the form, adjust buttons and let user know changese saved
-               scope[form.name + '_form'].$setPristine();
+               //scope[form.name + '_form'].$setPristine();
-               scope['groupUpdateHide'] = (scope['source'].value !== null && scope['source'].value !== '') ? false : true;
+               //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'); 
+               //Alert("Changes Saved", "Your changes to inventory group " + scope['name'] + " were successfully saved.", 'alert-info');
+               scope['flashMessage'] = 'Your changes to ' + scope['name'] + ' were saved.';
+               ClickNode({ selector: '#inventory-root-node' });
             }
             });
 
@@ -802,6 +812,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
             
             var parseError = false;
             var saveError = false;
+            
+            // Update the selector tree with new group name, descr
+            SetNodeName({ scope: scope['selectedNode'], group_id: group_id,
+                name: scope.name, description: scope.description });
 
             if (scope.source.value !== null && scope.source.value !== '') {
                var data = { group: group_id, 
@@ -853,6 +867,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                           });
                }
             }
+            else {
+               // No source value
+               scope.$emit('SaveComplete', false);
+            }
             });
 
         // Save changes to the parent
@@ -891,7 +909,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                                        { hdr: 'Error!', msg: 'Failed to update group variables. PUT status: ' + status });
                                    });
                         }
-                        RefreshGroupName(scope['selectedNode'], data.name, data.description);
                         scope.$emit('formSaveSuccess', data.id);
                         })
                     .error( function(data, status, headers, config) {

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

@@ -982,12 +982,16 @@ select.field-mini-height {
     padding: 10px 3px 10px 10px;
 
     .title {
-      color: #888;
+      color: @grey;
       font-weight: normal;
       margin-bottom: 5px;
       margin-top: 0;
     }
 
+    .icon-sitemap {
+      color: @grey;
+    }
+
     ul {
       list-style-type: none;
       padding-left: 16px;

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

@@ -7,7 +7,7 @@
  *
  */
 
- angular.module('TreeSelector', ['Utilities', 'RestServices'])
+angular.module('TreeSelector', ['Utilities', 'RestServices'])
     .factory('BuildTree', ['Rest', 'GetBasePath', 'ProcessErrors', '$compile', '$rootScope', 'Wait', 'SortNodes',
         function(Rest, GetBasePath, ProcessErrors, $compile, $rootScope, Wait, SortNodes) {
         return function(params) {
@@ -16,6 +16,7 @@
             var inventory_id = params.inventory_id;
             var emit_on_select = params.emit_on_select;
             var target_id = params.target_id;
+            var refresh_tree = (params.refresh == undefined || params.refresh == false) ? false : true;
 
             var html = '';
             var toolTip = 'Hosts have failed jobs?';
@@ -207,7 +208,7 @@
             Rest.get()
                  .success( function(data, status, headers, config) {
                      html += "<div class=\"title\">Group Selector:</div>\n" +
-                       "<ul class=\"tree-root\">\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 + "\" " +
@@ -216,12 +217,53 @@
                        ">" +
                        "<i class=\"icon-sitemap\"></i> " +
                        "<a href=\"\" class=\"activate active\">" + data.name + "</a>";
+                     
                      scope.$emit('buildAllGroups', data.name, data.related.tree, data.related.groups);
-                     scope.$emit(emit_on_select, 'inventory-root-node', null, 'All Hosts');
+                     
+                     if (!refresh_tree) {
+                        // if caller requests refresh, let caller handle next steps / node selection
+                        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 });
                      });
             }
-            }])
+            }])
+
+    // Set node name and description after an update to Group properties.
+    .factory('SetNodeName', [ function() {
+        return function(params) {
+            var scope = params.scope;
+            var name = params.name; 
+            var descr = params.description; 
+            var group_id = (params.group_id !== undefined) ? params.group_id : null;
+            var inventory_id = (params.inventory_id != undefined) ? params.inventory_id : null; 
+
+            if (group_id !== null) {
+                $('#inventory-tree').find('li [data-group-id="' + group_id + '"]').each(function(idx) {
+                    $(this).attr('data-name',name);
+                    $(this).attr('data-description',descr);
+                    $(this).find('.activate').first().text(name); 
+                    });
+            }
+
+            if (inventory_id !== null) {
+                $('#inventory-root-node').attr('data-name', name).attr('data-description', descr).find('.activate').first().text(name);
+            }
+
+            }
+            }])
+
+    .factory('ClickNode', [ function() {
+        return function(params) {
+            var selector = params.selector;   //jquery selector string to find the correct <li>
+            $(selector + ' .activate').first().click();
+            }
+            }]);
+
+
+
+