Latest UI Inventory updates

lib/ui/static/css/ansible-ui.css

@@ -222,3 +222,13 @@
  .ask-checkbox {
     margin-left: 10px;
  }
+
+ #tree-view {
+    padding: 0;
+    margin: 5px 0 15px 0;
+ }
+
+ .no-padding {
+    margin: 0;
+    padding: 0;
+ }

lib/ui/static/js/app.js

@@ -33,7 +33,6 @@ angular.module('ansible', [
     'AWFilters',
     'HostFormDefinition',
     'HostListDefinition',
-    'HostHelper',
     'GroupFormDefinition',
     'GroupListDefinition',
     'TeamsListDefinition',
@@ -72,6 +71,24 @@ angular.module('ansible', [
             when('/inventories/:inventory_id/groups/:id', { templateUrl: urlPrefix + 'partials/inventories.html',
                                                             controller: GroupsEdit }).
 
+            when('/inventories/:inventory_id/groups/:group_id/children',
+                { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsList }).
+
+            when('/inventories/:inventory_id/groups/:group_id/children/add',
+                { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsAdd }).
+
+            when('/inventories/:inventory_id/groups/:group_id/children/:id', 
+                { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsEdit }).
+
+            when('/inventories/:inventory_id/groups/:group_id/hosts',
+                { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsList }).
+
+            when('/inventories/:inventory_id/groups/:group_id/hosts/add',
+                { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsAdd }).
+
+            when('/inventories/:inventory_id/groups/:group_id/hosts/:id',
+                { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsEdit }).
+
             when('/organizations', { templateUrl: urlPrefix + 'partials/organizations.html',
                                      controller: OrganizationsList }).
 

lib/ui/static/js/controllers/Groups.js

@@ -12,16 +12,17 @@
 
 function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest, 
                      Alert, GroupList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit,
-                     PaginateInit, ReturnToCaller, ClearScope, ProcessErrors)
+                     PaginateInit, ReturnToCaller, ClearScope, ProcessErrors, GetBasePath)
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
 
     var list = GroupList;
-    var defaultUrl = '/api/v1/inventories/' + $routeParams.id + '/groups/';
+    var base = $location.path().replace(/^\//,'').split('/')[0];
+    var defaultUrl = GetBasePath('groups');
     var view = GenerateList;
-    var paths = $location.path().replace(/^\//,'').split('/');
+    
-    var scope = view.inject(GroupList, { mode: 'edit' });               // Inject our view
+    var scope = view.inject(GroupList, { mode: 'select' });               // Inject our view
     scope.selected = [];
   
     SearchInit({ scope: scope, set: 'groups', list: list, url: defaultUrl });
@@ -61,21 +62,90 @@ function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
                 });
        }
 
+    scope.finishSelection = function() {
+       var url = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/children/' :
+           GetBasePath('inventory') + $routeParams.inventory_id + '/groups/'; 
+       Rest.setUrl(url);
+       scope.queue = [];
+
+       if (scope.callFinishedRemove) {
+          scope.callFinishedRemove();
+       }
+       scope.callFinishedRemove = scope.$on('callFinished', function() {
+          // We call the API for each selected item. We need to hang out until all the api
+          // calls are finished.
+          if (scope.queue.length == scope.selected.length) {
+             // All the api calls finished
+             $('input[type="checkbox"]').prop("checked",false);
+             scope.selected = [];
+             var errors = 0;   
+             for (var i=0; i < scope.queue.length; i++) {
+                 if (scope.queue[i].result == 'error') {
+                    errors++;
+                 }
+             }
+             if (errors > 0) {
+                Alert('Error', 'There was an error while adding one or more of the selected groups.');  
+             }
+             else {
+                ReturnToCaller(1);
+             }
+          }
+          });
+
+       if (scope.selected.length > 0 ) {
+          var group;
+          for (var i=0; i < scope.selected.length; i++) {
+              group = null;
+              for (var j=0; j < scope.groups.length; j++) {
+                  if (scope.groups[j].id == scope.selected[i]) {
+                     group = scope.groups[j];
+                  }
+              }
+              if (group !== null) {
+                 Rest.post(group)
+                     .success( function(data, status, headers, config) {
+                         scope.queue.push({ result: 'success', data: data, status: status });
+                         scope.$emit('callFinished');
+                         })
+                     .error( function(data, status, headers, config) {
+                         scope.queue.push({ result: 'error', data: data, status: status, headers: headers });
+                         scope.$emit('callFinished');
+                         });
+              }
+          }
+       }
+       else {
+          ReturnToCaller(1);
+       }  
+       }
+
+    scope.toggle_group = function(idx) {
+       if (scope.selected.indexOf(idx) > -1) {
+          scope.selected.splice(scope.selected.indexOf(idx),1);
+       }
+       else {
+          scope.selected.push(idx);
+       }
+       }
+
 }
 
 GroupsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupList', 'GenerateList', 
-                       'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit'];
+                       'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
+                       'GetBasePath' ];
 
 
 function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, GroupForm, 
                    GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller,
-                   ClearScope, LookUpInventoryInit) 
+                   ClearScope, GetBasePath) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
    // Inject dynamic view
-   var defaultUrl = '/api/v1/inventories/';
+   var defaultUrl = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/children/' : 
+       GetBasePath('inventory') + $routeParams.inventory_id + '/';
    var form = GroupForm;
    var generator = GenerateForm;
    var scope = generator.inject(form, {mode: 'add', related: false});
@@ -84,30 +154,18 @@ function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
 
    LoadBreadCrumbs();
 
-   LookUpInventoryInit({ scope: scope });
-
-   // Load inventory lookup value
-   var url = defaultUrl + $routeParams.id + '/';
-   Rest.setUrl(url);
-   Rest.get()
-       .success( function(data, status, headers, config) {
-           scope['inventory'] = data.id;
-           master['inventory'] = data.id;
-           scope['inventory_name'] = data.name;
-           master['inventory_name'] = data.name;
-           })
-       .error( function(data, status, headers, config) {
-           ProcessErrors(scope, data, status, null,
-                         { hdr: 'Error!', msg: 'Failed to retrieve: ' + url + '. GET status: ' + status });
-           });
-
    // Save
    scope.formSave = function() {
-      Rest.setUrl(defaultUrl + $routeParams.id + '/groups/');
+      Rest.setUrl(defaultUrl);
       var data = {}
       for (var fld in form.fields) {
           data[fld] = scope[fld];   
       }
+      
+      if ($routeParams.group_id) {
+         data['inventory'] = $routeParams.inventory_id;
+      }
+
       Rest.post(data)
           .success( function(data, status, headers, config) {
               ReturnToCaller(1);
@@ -127,47 +185,38 @@ function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
 }
 
 GroupsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'GroupForm', 'GenerateForm', 
-                      'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 
+                      'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ]; 
 
 
 function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, GroupForm, 
                      GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
-                     RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInventoryInit) 
+                     RelatedPaginateInit, ReturnToCaller, ClearScope, GetBasePath) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
-   var defaultUrl='/api/v1/groups/';
    var generator = GenerateForm;
    var form = GroupForm;
+   var defaultUrl =  GetBasePath('groups') + $routeParams.id + '/';
    var scope = generator.inject(form, {mode: 'edit', related: true});
    generator.reset();
    var master = {};
    var id = $routeParams.id;
    var relatedSets = {};
 
-   LookUpInventoryInit({ scope: scope });
-
    // After the Organization is loaded, retrieve each related set
-   scope.$on('groupLoaded', function() {
+   if (scope.groupLoadedRemove) {
-       Rest.setUrl(scope['inventory_url']);
+      scope.groupLoadedRemove();
-       Rest.get()
+   }
-           .success( function(data, status, headers, config) {
+   scope.groupLoadedRemove = scope.$on('groupLoaded', function() {
-               scope['inventory_name'] = data.name;
-               master['inventory_name'] = data.name;
-               })
-           .error( function(data, status, headers, config) {
-               ProcessErrors(scope, data, status, null,
-                             { hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.orgnization_url + '. GET status: ' + status });
-               });
        for (var set in relatedSets) {
            scope.search(relatedSets[set].iterator);
        }
        });
 
    // Retrieve detail record and prepopulate the form
-   Rest.setUrl(defaultUrl + ':id/'); 
+   Rest.setUrl(defaultUrl); 
-   Rest.get({ params: {id: id} })
+   Rest.get()
        .success( function(data, status, headers, config) {
            LoadBreadCrumbs();
            for (var fld in form.fields) {
@@ -185,7 +234,6 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
            // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
            RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
            RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
-           scope['inventory_url'] = data.related.inventory;
            scope.$emit('groupLoaded');
            })
        .error( function(data, status, headers, config) {
@@ -195,7 +243,7 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
    
    // Save changes to the parent
    scope.formSave = function() {
-      Rest.setUrl(defaultUrl + id + '/');
+      Rest.setUrl(defaultUrl);
       var data = {}
       for (var fld in form.fields) {
           data[fld] = scope[fld];   
@@ -203,11 +251,11 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
       Rest.put(data)
           .success( function(data, status, headers, config) {
               var base = $location.path().replace(/^\//,'').split('/')[0];
-              (base == 'inventories') ? ReturnToCaller() : ReturnToCaller(1);
+              (base == 'groups') ? ReturnToCaller() : ReturnToCaller(1);
               })
           .error( function(data, status, headers, config) {
               ProcessErrors(scope, data, status, form,
-                            { hdr: 'Error!', msg: 'Failed to update host: ' + $routeParams.id + '. PUT status: ' + status });
+                            { hdr: 'Error!', msg: 'Failed to update group: ' + $routeParams.id + '. PUT status: ' + status });
               });
       };
 
@@ -221,7 +269,7 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
 
 }
 
-HostsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', 
+GroupsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', 
                       'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
-                      'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 
+                      'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ]; 
   

lib/ui/static/js/controllers/Hosts.js

@@ -12,23 +12,23 @@
 
 function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest, 
                     Alert, HostList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit,
-                    ReturnToCaller, ClearScope, ProcessErrors)
+                    ReturnToCaller, ClearScope, ProcessErrors, GetBasePath)
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
    
-    var list = HostList;
+    var list = HostList
-    var defaultUrl = '/api/v1/inventories/' + $routeParams.id + '/hosts/';
+    var base = $location.path().replace(/^\//,'').split('/')[0];
+    var defaultUrl = GetBasePath('hosts');
     var view = GenerateList;
-    var paths = $location.path().replace(/^\//,'').split('/');
+    var mode = (base == 'hosts') ? 'edit' : 'select';
-    var scope = view.inject(HostList, { mode: 'edit' });               // Inject our view
+    var scope = view.inject(list, { mode: mode });               // Inject our view
     scope.selected = [];
   
     SearchInit({ scope: scope, set: 'hosts', list: list, url: defaultUrl });
     PaginateInit({ scope: scope, list: list, url: defaultUrl });
     scope.search(list.iterator);
 
-
     LoadBreadCrumbs();
     
     scope.addHost = function() {
@@ -62,21 +62,89 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
                 });
        }
 
+    scope.finishSelection = function() {
+       var url = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/hosts/' :
+           GetBasePath('inventory') + $routeParams.inventory_id + '/hosts/'; 
+
+       Rest.setUrl(url);  // We're assuming the path matches the api path. 
+                                 // Will this always be true??
+       scope.queue = [];
+
+       scope.$on('callFinished', function() {
+          // We call the API for each selected item. We need to hang out until all the api
+          // calls are finished.
+          if (scope.queue.length == scope.selected.length) {
+             // All the api calls finished
+             $('input[type="checkbox"]').prop("checked",false);
+             scope.selected = [];
+             var errors = 0;   
+             for (var i=0; i < scope.queue.length; i++) {
+                 if (scope.queue[i].result == 'error') {
+                    errors++;
+                 }
+             }
+             if (errors > 0) {
+                Alert('Error', 'There was an error while adding one or more of the selected hosts.');  
+             }
+             else {
+                ReturnToCaller(1);
+             }
+          }
+          });
+
+       if (scope.selected.length > 0 ) {
+          var host;
+          for (var i=0; i < scope.selected.length; i++) {
+              host = null;
+              for (var j=0; j < scope.hosts.length; j++) {
+                  if (scope.hosts[j].id == scope.selected[i]) {
+                     host = scope.hosts[j];
+                  }
+              }
+              if (host !== null) {
+                 Rest.post(host)
+                     .success( function(data, status, headers, config) {
+                         scope.queue.push({ result: 'success', data: data, status: status });
+                         scope.$emit('callFinished');
+                         })
+                     .error( function(data, status, headers, config) {
+                         scope.queue.push({ result: 'error', data: data, status: status, headers: headers });
+                         scope.$emit('callFinished');
+                         });
+              }
+          }
+       }
+       else {
+          ReturnToCaller(1);
+       }  
+    }
+
+    scope.toggle_host = function(idx) {
+       if (scope.selected.indexOf(idx) > -1) {
+          scope.selected.splice(scope.selected.indexOf(idx),1);
+       }
+       else {
+          scope.selected.push(idx);
+       }
+    }
+
 }
 
 HostsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostList', 'GenerateList', 
-                      'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors' ];
+                      'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
+                      'GetBasePath' ];
 
 
 function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, HostForm, 
                    GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, 
-                   ClearScope, LookUpInventoryInit) 
+                   ClearScope, GetBasePath ) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
    // Inject dynamic view
-   var defaultUrl = '/api/v1/inventories/';
+   var defaultUrl = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/hosts/' : 
+       GetBasePath('inventory') + $routeParams.inventory_id + '/hosts/';
    var form = HostForm;
    var generator = GenerateForm;
    var scope = generator.inject(form, {mode: 'add', related: false});
@@ -85,30 +153,18 @@ function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
 
    LoadBreadCrumbs();
 
-   LookUpInventoryInit({ scope: scope });
-
-   // Load inventory lookup value
-   var url = defaultUrl + $routeParams.id + '/';
-   Rest.setUrl(url);
-   Rest.get()
-       .success( function(data, status, headers, config) {
-           scope['inventory'] = data.id;
-           master['inventory'] = data.id;
-           scope['inventory_name'] = data.name;
-           master['inventory_name'] = data.name;
-           })
-       .error( function(data, status, headers, config) {
-           ProcessErrors(scope, data, status, null,
-                         { hdr: 'Error!', msg: 'Failed to retrieve: ' + url + '. GET status: ' + status });
-           });
-  
    // Save
    scope.formSave = function() {
-      Rest.setUrl(defaultUrl + $routeParams.id + '/hosts/');
+      Rest.setUrl(defaultUrl);
       var data = {}
       for (var fld in form.fields) {
           data[fld] = scope[fld];   
       }
+      
+      if ($routeParams.group_id) {
+         data['inventory'] = $routeParams.inventory_id;
+      }
+
       Rest.post(data)
           .success( function(data, status, headers, config) {
               ReturnToCaller(1);
@@ -128,39 +184,28 @@ function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
 }
 
 HostsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', 'GenerateForm', 
-                     'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 
+                     'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ]; 
 
 
-function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, UserForm, 
+function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, HostForm, 
                     GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
-                    RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInventoryInit) 
+                    RelatedPaginateInit, ReturnToCaller, ClearScope, GetBasePath) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
-   var defaultUrl='/api/v1/hosts/';
+   var defaultUrl = GetBasePath('hosts');
    var generator = GenerateForm;
-   var form = UserForm;
+   var base = $location.path().replace(/^\//,'').split('/')[0];
+   var form = HostForm;
    var scope = generator.inject(form, {mode: 'edit', related: true});
    generator.reset();
    var master = {};
    var id = $routeParams.id;
    var relatedSets = {};
 
-   LookUpInventoryInit({ scope: scope });
-
    // After form data loads, load related sets and lookups
    scope.$on('hostLoaded', function() {
-       Rest.setUrl(scope['inventory_url']);
-       Rest.get()
-           .success( function(data, status, headers, config) {
-               scope['inventory_name'] = data.name;
-               master['inventory_name'] = data.name;
-               })
-           .error( function(data, status, headers, config) {
-               ProcessErrors(scope, data, status, null,
-                             { hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.inventory_url + '. GET status: ' + status });
-               });
        for (var set in relatedSets) {
            scope.search(relatedSets[set].iterator);
        }
@@ -186,7 +231,6 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
            // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
            RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
            RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
-           scope['inventory_url'] = data.related.inventory;
            scope.$emit('hostLoaded');
            })
        .error( function(data, status, headers, config) {
@@ -203,8 +247,7 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
       } 
       Rest.put(data)
           .success( function(data, status, headers, config) {
-              var base = $location.path().replace(/^\//,'').split('/')[0];
+              (base == 'hosts') ? ReturnToCaller() : ReturnToCaller(1);
-              (base == 'inventories') ? ReturnToCaller() : ReturnToCaller(1);
               })
           .error( function(data, status, headers, config) {
               ProcessErrors(scope, data, status, form,
@@ -224,5 +267,5 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
 
 HostsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', 
                       'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
-                      'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 
+                      'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ]; 
   

lib/ui/static/js/controllers/Inventories.js

@@ -12,7 +12,7 @@
 
 function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, InventoryList,
                           GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
-                          ClearScope, ProcessErrors, SetListeners)
+                          ClearScope, ProcessErrors)
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
@@ -24,7 +24,6 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
     var scope = view.inject(InventoryList, { mode: mode });          // Inject our view
     scope.selected = [];
   
-    SetListeners({ scope: scope, set: 'inventories', iterator: list.iterator });
     SearchInit({ scope: scope, set: 'inventories', list: list, url: defaultUrl });
     PaginateInit({ scope: scope, list: list, url: defaultUrl });
     scope.search(list.iterator);
@@ -86,13 +85,6 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
              for (var i=0; i < scope.queue.length; i++) {
                  if (scope.queue[i].result == 'error') {
                     errors++;
-                    // there is no way to know which user raised the error. no data comes
-                    // back from the api call. 
-                    //   $('td.username-column').each(function(index) {
-                    //      if ($(this).text() == scope.queue[i].username) {
-                    //         $(this).addClass("error");
-                    //      }
-                    //   });
                  }
              }
              if (errors > 0) {
@@ -141,13 +133,12 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
 }
 
 InventoriesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'InventoryList', 'GenerateList', 
-                            'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
+                            'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors' ];
-                            'SetListeners' ];
 
 
 function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm, 
                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope,
-                         GenerateList, OrganizationList, SearchInit, PaginateInit, LookUpOrganizationInit) 
+                         GenerateList, OrganizationList, SearchInit, PaginateInit, LookUpInit) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -159,7 +150,14 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
    var scope = generator.inject(form, {mode: 'add', related: false});
    generator.reset();
    LoadBreadCrumbs();
-   LookUpOrganizationInit({ scope: scope });
+   
+   LookUpInit({
+       scope: scope,
+       form: form,
+       current_item: ($routeParams.organization_id) ? $routeParams.organization_id : null,
+       list: OrganizationList, 
+       field: 'organization' 
+       });
    
    // Save
    scope.formSave = function() {
@@ -187,20 +185,20 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
 
 InventoriesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', 'GenerateForm', 
                            'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GenerateList',
-                           'OrganizationList', 'SearchInit', 'PaginateInit', 'LookUpOrganizationInit' ]; 
+                           'OrganizationList', 'SearchInit', 'PaginateInit', 'LookUpInit' ]; 
 
 
 function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm, 
                           GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
-                          RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpOrganizationInit, Prompt,
+                          RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
-                          TreeInit) 
+                          OrganizationList, TreeInit, GetBasePath) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
 
-   var defaultUrl='/api/v1/inventories/';
    var generator = GenerateForm;
    var form = InventoryForm;
+   var defaultUrl=GetBasePath('inventory');
    var scope = generator.inject(form, {mode: 'edit', related: true});
    generator.reset();
    var base = $location.path().replace(/^\//,'').split('/')[0];
@@ -208,20 +206,8 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    var id = $routeParams.id;
    var relatedSets = {}; 
   
-   LookUpOrganizationInit({ scope: scope });
-
    // After inventory is loaded, retrieve each related set and any lookups
    scope.$on('inventoryLoaded', function() {
-       Rest.setUrl(scope['organization_url']);
-       Rest.get()
-           .success( function(data, status, headers, config) {
-               scope['organization_name'] = data.name;
-               master['organization_name'] = data.name;
-               })
-           .error( function(data, status, headers, config) {
-               ProcessErrors(scope, data, status, null,
-                             { hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.orgnization_url + '. GET status: ' + status });
-               });
        for (var set in relatedSets) {
            scope.search(relatedSets[set].iterator);
        }     
@@ -237,7 +223,22 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                  scope[fld] = data[fld];
                  master[fld] = scope[fld];
               }
+              if (form.fields[fld].type == 'lookup' && data.summary_fields[form.fields[fld].sourceModel]) {
+                  scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] = 
+                      data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
+                  master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
+                      scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField];
               }
+           }
+
+           LookUpInit({
+               scope: scope,
+               form: form,
+               current_item: data.organization,
+               list: OrganizationList, 
+               field: 'organization' 
+               });
+
            var related = data.related;
            for (var set in form.related) {
                if (related[set]) {
@@ -246,12 +247,11 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
            }
            
            // Load the tree view
-           TreeInit(related.groups);
+           TreeInit({ scope: scope, inventory: data });
 
            // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
            RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
            RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
-           scope['organization_url'] = data.related.organization;
            scope.$emit('inventoryLoaded');
            })
        .error( function(data, status, headers, config) {
@@ -261,7 +261,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
 
    // Save changes to the parent
    scope.formSave = function() {
-      Rest.setUrl(defaultUrl + $routeParams.id);
+      Rest.setUrl(defaultUrl + $routeParams.id + '/');
       var data = {}
       for (var fld in form.fields) {
           data[fld] = scope[fld];   
@@ -321,12 +321,142 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                 action: action
                 });
        
+      };
+
+   function changePath(path) {
+      // For reasons unknown, calling $location.path(<new path>) from inside 
+      // treeController fails to work. This is the work-around.
+      window.location = '/#' + path;
+      };
+
+   scope.treeController = function($node) {
+      if ($($node).attr('type') == 'host') {
+         return {
+             edit: { 
+                 label: 'Edit Host',
+                 action: function(obj) { changePath($location.path() + '/hosts/' + $(obj).attr('id')); }
+                 },
+             delete: {
+                 label: 'Delete Host', 
+                 action: function(obj) { 
+                     var action_to_take = function() {
+                         var url = defaultUrl + $routeParams.id + '/hosts/';
+                         Rest.setUrl(url);
+                         Rest.post({ id: $(obj).attr('id'), disassociate: 1 })
+                             .success( function(data, status, headers, config) {
+                                 $('#prompt-modal').modal('hide');
+                                 $('#tree-view').jstree("delete_node",obj);
+                                 })
+                             .error( function(data, status, headers, config) {
+                                 $('#prompt-modal').modal('hide');
+                                 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');
+                     $('#prompt-body').text('Are you sure you want to delete host ' + $(obj).attr('name') + '?');
+                     $('#prompt-action-btn').addClass('btn-danger');
+                     scope.promptAction = action_to_take;  // for some reason this binds?
+                     $('#prompt-modal').modal({
+                         backdrop: 'static',
+                         keyboard: true,
+                         show: true
+                         });
+                     }
+                 },
+             vairables: {
+                 label: 'Host Variables',
+                 separator_before: true,
+                 "_disabled": true,
+                 action: function(obj) { }
+                 }
+             }
+      }
+      else if ($($node).attr('type') == 'inventory') {
+          return {
+              addGroup: {
+                  label: 'Add Group',
+                  action: function() { changePath($location.path() + '/groups'); }
+                  },
+              addHost: {
+                  label: 'Add Host',
+                  action: function() { changePath($location.path() + '/hosts'); }
+                  },
+              variables: {
+                 label: 'Inventory variables',
+                 action: function(obj) { },
+                 "_disabled": true,
+                 separator_before: true
+                 }   
+              }
+      }
+      else {
+         return {
+             addGroup: { 
+                label: 'Add Subgroup',
+                action: function(obj) { 
+                    LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('id'), title: $(obj).attr('name') });
+                    changePath($location.path() + '/groups/' + $(obj).attr('id') + '/children');    
+                    }
+                },
+             addHost: { 
+                 label: 'Add Host',
+                 action: function(obj) {
+                     LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('id'), title: $(obj).attr('name') });
+                     changePath($location.path() + '/groups/' + $(obj).attr('id') + '/hosts'); 
+                     }
+                 },
+             edit: { 
+                 label: 'Edit Group',
+                 action: function(obj) { changePath($location.path() + '/groups/' + $(obj).attr('id')); },
+                 separator_before: true
+                 },
+             delete: {
+                 label: 'Delete Group',
+                 action: function(obj) { 
+                     var action_to_take = function() {
+                         var url = defaultUrl + $routeParams.id + '/groups/';
+                         Rest.setUrl(url);
+                         Rest.post({ id: $(obj).attr('id'), disassociate: 1 })
+                             .success( function(data, status, headers, config) {
+                                 $('#prompt-modal').modal('hide');
+                                 $('#tree-view').jstree("delete_node",obj);
+                                 })
+                             .error( function(data, status, headers, config) {
+                                 $('#prompt-modal').modal('hide');
+                                 ProcessErrors(scope, data, status, null,
+                                          { hdr: 'Error!', msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status });
+                                 });      
+                         };
+                     //Force binds to work. Not working usual way.
+                     var parent = $.jstree._reference('#tree-view')._get_parent(obj);
+                     $('#prompt-header').text('Delete Group');
+                     $('#prompt-body').text('Are you sure you want to remove group ' + $(obj).attr('name') + 
+                         ' from ' + $(parent).attr('name') + '?');
+                     $('#prompt-action-btn').addClass('btn-danger');
+                     scope.promptAction = action_to_take;  // for some reason this binds?
+                     $('#prompt-modal').modal({
+                         backdrop: 'static',
+                         keyboard: true,
+                         show: true
+                         });
+                     }
+                 },
+             variables: {
+                 label: 'Group variables',
+                 action: function(obj) { },
+                 "_disabled": true,
+                 separator_before: true
+                 } 
+             }
+      }
       }
 
 }
 
 InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', 
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
-                            'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpOrganizationInit', 'Prompt',
+                            'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
-                            'TreeInit' ]; 
+                            'OrganizationList', 'TreeInit', 'GetBasePath']; 
   

lib/ui/static/js/controllers/Users.js

@@ -79,13 +79,6 @@ function UsersList ($scope, $rootScope, $location, $log, $routeParams, Rest,
              for (var i=0; i < scope.queue.length; i++) {
                  if (scope.queue[i].result == 'error') {
                     errors++;
-                    // there is no way to know which user raised the error. no data comes
-                    // back from the api call. 
-                    //   $('td.username-column').each(function(index) {
-                    //      if ($(this).text() == scope.queue[i].username) {
-                    //         $(this).addClass("error");
-                    //      }
-                    //   });
                  }
              }
              if (errors > 0) {

lib/ui/static/js/forms/Groups.js

@@ -30,12 +30,9 @@ angular.module('GroupFormDefinition', [])
                 },
             inventory: {
                 label: 'Inventory',
-                type: 'lookup',
+                type: 'hidden',
-                sourceModel: 'inventory',
+                includeOnEdit: true, 
-                sourceField: 'name',
+                includeOnAdd: true
-                addRequired: true,
-                editRequired: true,
-                ngClick: 'lookUpInventory()'
                 }
             },
 

lib/ui/static/js/forms/Hosts.js

@@ -29,14 +29,19 @@ angular.module('HostFormDefinition', [])
                 editRequired: false
                 },
             inventory: {
-                label: 'Inventory',
+                type: 'hidden',
-                type: 'lookup',
+                includeOnEdit: true, 
-                sourceModel: 'inventory',
+                includeOnAdd: true
-                sourceField: 'name',
-                addRequired: true,
-                editRequired: true,
-                ngClick: 'lookUpInventory()'
                 }
+            // inventory: {
+            //     label: 'Inventory',
+            //     type: 'lookup',
+            //     sourceModel: 'inventory',
+            //     sourceField: 'name',
+            //     addRequired: true,
+            //     editRequired: true,
+            //     ngClick: 'lookUpInventory()'
+            //     }
             },
 
         buttons: { //for now always generates <button> tags 

lib/ui/static/js/forms/Inventories.js

@@ -59,50 +59,53 @@ angular.module('InventoryFormDefinition', [])
 
         related: { //related colletions (and maybe items?)
 
-             hosts:  {
+             // hosts:  {
-                type: 'collection',
+             //    type: 'collection',
-                title: 'Hosts',
+             //    title: 'Hosts',
-                iterator: 'host',
+             //    iterator: 'host',
-                open: false,
+             //    open: false,
                 
-                actions: { 
+             //    actions: { 
-                    add: {
+             //        add: {
-                        ngClick: "add('hosts')",
+             //            ngClick: "add('hosts')",
-                        icon: 'icon-plus',
+             //            icon: 'icon-plus',
-                        awToolTip: 'Create a new host'
+             //            awToolTip: 'Create a new host'
-                        },
+             //            },
-                    },
+             //        },
                 
-                fields: {
+             //    fields: {
-                    name: {
+             //        name: {
-                        key: true,
+             //            key: true,
-                        label: 'Name'
+             //            label: 'Name'
-                        },
+             //            },
-                    description: {
+             //        description: {
-                        label: 'Description'
+             //            label: 'Description'
-                        }
+             //            }
-                    },
+             //        },
                 
-                fieldActions: {
+             //    fieldActions: {
-                    edit: {
+             //        edit: {
-                        ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
+             //            ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
-                        icon: 'icon-edit',
+             //            icon: 'icon-edit',
-                        awToolTip: 'Edit host'
+             //            awToolTip: 'Edit host'
-                        },
+             //            },
-                    delete: {
+             //        delete: {
-                        ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
+             //            ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
-                        icon: 'icon-remove',
+             //            icon: 'icon-remove',
-                        class: 'btn-danger',
+             //            class: 'btn-danger',
-                        awToolTip: 'Create a new host'
+             //            awToolTip: 'Create a new host'
-                        }
+             //            }
-                    }
+             //        }
-                },
+             //    
 
             groups: {
                 type: 'tree',
-                title: 'Groups',
+                title: "{{ name }} Children",
-                open: true
+                instructions: "Right click on a host or subgroup to make changes or add additional children.",
+                open: true,
+                actions: { }
                 }
             }
+
     }); //InventoryForm
 

lib/ui/static/js/helpers/Lookup.js

@@ -27,6 +27,7 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
         
         // Show pop-up to select user
         var name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
+
         scope['lookUp' + name] = function() {
             var listGenerator = GenerateList;
             var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select ' + name });
@@ -39,9 +40,13 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
                     if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") {
                        found = true;
                        scope[field] = listScope[list.name][i].id;
+                       if (form.fields[field] && form.fields[field].sourceModel) {
                           scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] = 
                               listScope[list.name][i][form.fields[field].sourceField];
+                       }
+                       if (scope[form.name + '_form']) {
                           scope[form.name + '_form'].$setDirty();
+                       }
                        listGenerator.hide();
                     }
                 } 
@@ -62,13 +67,14 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
                    listScope[list.iterator + "_" + id + "_class"] = "success";
                 }
                 }
-
             SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl });
             PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' });
-            scope.search(list.iterator);
+            listScope.search(list.iterator);
+            if (current_item) {
                listScope['toggle_' + list.iterator](current_item);
             }
             }
+        }
         }]);
 
 

lib/ui/static/js/helpers/hosts.js

@@ -1,58 +0,0 @@
-/*********************************************
- *  Copyright (c) 2013 AnsibleWorks, Inc.
- *
- *  Helper
- *  Routines shared amongst the hosts controllers 
- */
- 
-angular.module('HostHelper', [ 'RestServices', 'Utilities', 'OrganizationListDefinition',
-                               'SearchHelper', 'PaginateHelper', 'ListGenerator' ])
-
-    .factory('LookUpInventoryInit', ['Alert', 'Rest', 'InventoryList', 'GenerateList', 'SearchInit', 'PaginateInit', 
-    function(Alert, Rest, InventoryList, GenerateList, SearchInit, PaginateInit) {
-    return function(params) {
-        
-        var scope = params.scope;
-
-        // Show pop-up to select organization
-        scope.lookUpInventory = function() {
-            var list = InventoryList; 
-            var listGenerator = GenerateList;
-            var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select Inventory' });
-            var defaultUrl = '/api/v1/inventories';
-
-            listScope.selectAction = function() {
-                var found = false;
-                for (var i=0; i < listScope[list.name].length; i++) {
-                    if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") {
-                       found = true; 
-                       scope['inventory'] = listScope[list.name][i].id;
-                       scope['inventory_name'] = listScope[list.name][i].name;
-                       scope['host_form'].$setDirty();
-                       listGenerator.hide();
-                    }
-                } 
-                if (found == false) {
-                   Alert('No Selection', 'Click on a row to select an Inventory before clicking the Select button.');
-                }
-                }
-
-            listScope.toggle_inventory = function(id) {
-                // when user clicks a row, remove 'success' class from all rows except clicked-on row
-                if (listScope[list.name]) {
-                   for (var i=0; i < listScope[list.name].length; i++) {
-                       listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] = ""; 
-                   }
-                }
-                if (id != null && id != undefined) {
-                   listScope[list.iterator + "_" + id + "_class"] = "success";
-                }
-                }
-
-            SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl });
-            PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' });
-            scope.search(list.iterator);
-            listScope.toggle_inventory(scope.inventory);
-            }
-        }
-        }]);

lib/ui/static/js/helpers/inventory.js

@@ -6,123 +6,132 @@
  */
  
 angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationListDefinition',
-                                    'SearchHelper', 'PaginateHelper', 'ListGenerator' ])  
+                                    'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService'
-    .factory('SetListeners', ['Alert', 'Rest', function(Alert, Rest) {
+                                    ]) 
+
+    .factory('TreeInit', ['Alert', 'Rest', 'Authorization',
+    function(Alert, Rest, Authorization) {
     return function(params) {
 
         var scope = params.scope;
-        var set = params.set; 
+        var inventory = params.inventory;
-        var iterator = params.iterator; 
+        var groups = inventory.related.groups;
+        var hosts = inventory.related.hosts; 
+        var inventory_name = inventory.name; 
+        var inventory_url = inventory.url;
+        var inventory_id = inventory.id;
         
-        // Listeners to perform lookups after main inventory list loads
+        var treeData = [];
 
-        scope.$on('resultFound', function(e, results, lookup_results) {
+        if (scope.HostLoadedRemove) {
-            if ( lookup_results.length == results.length ) {
+            scope.HostLoadedRemove();
-               key = 'organization';
-               property = 'organization_name';
-               for (var i=0; i < results.length; i++) {
-                   for (var j=0; j < lookup_results.length; j++) {
-                       if (results[i][key] == lookup_results[j].id) {
-                          results[i][property] = lookup_results[j].value;
-                       }
-                   }
-               }
-               scope[iterator + 'SearchSpin'] = false;
-               scope[set] = results;
-            }
-            });
-
-        scope.$on('refreshFinished', function(e, results) {
-            // Loop through the result set (sent to us by the search helper) and
-            // lookup the id and name of each organization. After each lookup 
-            // completes, call resultFound.
-            
-            var lookup_results = [];
-            
-            for (var i = 0; i < results.length; i++) {
-                Rest.setUrl('/api/v1/organizations/' + results[i].organization + '/');
-                Rest.get()
-                   .success( function( data, status, headers, config) {
-                      lookup_results.push({ id: data.id, value: data.name });
-                      scope.$emit('resultFound', results, lookup_results);
-                      })
-                   .error( function( data, status, headers, config) {
-                      lookup_results.push({ id: 'error' });
-                      scope.$emit('resultFound', results, lookup_results);
-                      });
-            }
-            });
-        }
-        }])
-    
-    .factory('LookUpOrganizationInit', ['Alert', 'Rest', 'OrganizationList', 'GenerateList', 'SearchInit', 'PaginateInit', 
-    function(Alert, Rest, OrganizationList, GenerateList, SearchInit, PaginateInit) {
-    return function(params) {
-        
-        var scope = params.scope;
-
-        // Show pop-up to select organization
-        scope.lookUpOrganization = function() {
-            var list = OrganizationList; 
-            var listGenerator = GenerateList;
-            var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select Organization' });
-            var defaultUrl = '/api/v1/organizations';
-
-            listScope.selectAction = function() {
-                var found = false;
-                for (var i=0; i < listScope[list.name].length; i++) {
-                    if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") {
-                       found = true; 
-                       scope['organization'] = listScope[list.name][i].id;
-                       scope['organization_name'] = listScope[list.name][i].name;
-                       scope['inventory_form'].$setDirty();
-                       listGenerator.hide();
-                    }
-                } 
-                if (found == false) {
-                   Alert('No Selection', 'Click on a row to select an Organization before clicking the Select button.');
-                }
         }
        
-            listScope.toggle_organization = function(id) {
+        scope.HostLoadedRemove = scope.$on('hostsLoaded', function() {
-                // when user clicks a row, remove 'success' class from all rows except clicked-on row
+            Rest.setUrl(groups + '?order_by=name');
-                if (listScope[list.name]) {
-                   for (var i=0; i < listScope[list.name].length; i++) {
-                       listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] = ""; 
-                   }
-                }
-                if (id != null && id != undefined) {
-                   listScope[list.iterator + "_" + id + "_class"] = "success";
-                }
-                }
-
-            SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl });
-            PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' });
-            scope.search(list.iterator);
-            listScope.toggle_organization(scope.organization);
-            }
-        }
-        }])
-
-    .factory('TreeInit', ['Alert', 'Rest', function(Alert, Rest) {
-    return function(groups) {
-        Rest.setUrl(groups);
             Rest.get()
                 .success( function(data, status, headers, config) {    
-                var treeData = [];
                     for (var i=0; i < data.results.length; i++) {
-                    treeData.push({
+                        treeData[0].children.push({
-                       data: data.results[i].name,
+                           data: {
-                       state: 'closed',
+                               title: data.results[i].name
-                       attr: { id: data.results[i] }
+                               },
+                           attr: {
+                               id: data.results[i].id,
+                               type: 'group',
+                               name: data.results[i].name, 
+                               description: data.results[i].description,
+                               inventory: data.results[i].inventory,
+                               all: data.results[i].related.all_hosts,
+                               children: data.results[i].related.children,
+                               hosts: data.results[i].related.hosts,
+                               variable: data.results[i].related.variable_data
+                               },
+                           state: 'closed'
                            });
                     }
-                $('#tree-view').jstree({ "json_data": { data: treeData },
+                   
-                                         plugins: ['themes', 'json_data', 'ui'] });
+                    var tree_id = '#tree-view';
+                    //.bind("open_node.jstree close_node.jstree", function (e,data) {
+                    //    var currentNode = data.args[0];
+                    //    if (e.type === "open_node") {
+                            //var tree = $.jstree._reference(tree_id);
+                            //tree.refresh(currentNode);
+                    //    }
+                    //    })
+                    $(tree_id).jstree({
+                        "core": { "initially_open":['inventory-node'] },
+                        "plugins": ['themes', 'json_data', 'ui', 'contextmenu'],
+                        "json_data": {
+                            data: treeData,
+                            ajax: {
+                                url: function(node){
+                                    return $(node).attr('all');
+                                    },
+                                headers: { 'Authorization': 'Token ' + Authorization.getToken() },
+                                success: function(data) {
+                                    console.log(data);
+                                    },
+                                error: function() {
+                                    if (console) {
+                                       console.log('Error accessing node data!');
+                                    }
+                                    }
+                                }
+                            },
+                        "contextmenu": {
+                            items: scope.treeController
+                            }
+                        });
                     })
                 .error( function(data, status, headers, config) {
                     Alert('Error', 'Failed to laod tree data. Url: ' + groups + ' GET status: ' + status);
                     });
+            });
+
+        Rest.setUrl(hosts + '?order_by=name'); 
+        Rest.get()
+            .success ( function(data, status, headers, config) {
+                treeData = [];
+                treeData.push({ 
+                    data: {
+                        title: inventory_name,
+                        }, 
+                    attr: {
+                        type: 'inventory',
+                        id: 'inventory-node',
+                        url: inventory_url,
+                        'inventory_id': inventory_id,
+                        name: inventory_name
+                        },
+                    state: 'open',
+                    children:[] 
+                    });
+                for (var i=0; i < data.results.length; i++ ) {
+                    treeData[0].children.push({
+                        data: {
+                            title: data.results[i].name, 
+                            icon: '/'
+                            },
+                        attr: {
+                            id: data.results[i].id,
+                            type: 'host',
+                            name: data.results[i].name, 
+                            description: data.results[i].description,
+                            url: data.results[i].url, 
+                            variable_data: data.results[i].varaible_data,
+                            inventory: data.results[i].related.inventory,
+                            job_events: data.results[i].related.job_events
+                            },
+                        });
+                }
+                scope.$emit('hostsLoaded');
+            })
+            .error ( function(data, status, headers, config) {
+                Alert('Error', 'Failed to laod tree data. Url: ' + hosts + ' GET status: ' + status);
+            });
+
+   
         }
         }]);
 

lib/ui/static/js/helpers/refresh.js

@@ -25,6 +25,7 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
        
         url.replace(/page_size\=\d+/,'');  //stop repeatedly appending page_size
         url += scope[iterator + 'SearchParams'];
+        
         Rest.setUrl(url);
         Rest.get({ params: { page_size: scope[iterator + 'PageSize'] }})
             .success( function(data, status, headers, config) {
@@ -36,7 +37,7 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
                 scope[set] = data['results'];
                 })
             .error ( function(data, status, headers, config) {
-                scope[iterator + 'SearchSpin'] = true;
+                scope[iterator + 'SearchSpin'] = false;
                 Alert('Error!', 'Failed to retrieve ' + set + '. GET returned status: ' + status);
                 });
         }

lib/ui/static/js/lists/Groups.js

@@ -14,6 +14,7 @@ angular.module('GroupListDefinition', [])
         iterator: 'group',
         selectTitle: 'Add Group',
         editTitle: 'Groups',
+        selectInstructions: 'Check the Select checkbox next to each group to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new group.', 
         
         fields: {
             name: {

lib/ui/static/js/lists/Hosts.js

@@ -13,6 +13,7 @@ angular.module('HostListDefinition', [])
         name: 'hosts',
         iterator: 'host',
         selectTitle: 'Add Host',
+        selectInstructions: 'Check the Select checkbox next to each host to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new host.', 
         editTitle: 'Hosts',
         
         fields: {

lib/ui/static/js/lists/Inventories.js

@@ -26,7 +26,7 @@ angular.module('InventoriesListDefinition', [])
                 },
             organization: {
                 label: 'Organization',
-                ngBind: 'inventory.organization_name',
+                ngBind: 'inventory.summary_fields.organization.name',
                 sourceModel: 'organization',
                 sourceField: 'name'
                 }

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

@@ -34,6 +34,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
            case 'falseValue':
                result = "ng-false-value=\"" + obj[key] + "\" ";
                break;
+           case 'awToolTip':
+               result = "aw-tool-tip=\"" + obj[key] + "\" ";
+               break;
            default: 
                result = key + "=\"" + obj[key] + "\" ";
        }
@@ -53,14 +56,21 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
        // Use to inject the form as html into the view.  View MUST have an ng-bind for 'htmlTemplate'.
        // Returns scope of form.
        //
+       var element;
+       if (options.modal) {
+          element = angular.element(document.getElementById('form-modal-body'));
+       }
+       else {
           var element = angular.element(document.getElementById('htmlTemplate'));
+       }
+
        this.setForm(form);
        element.html(this.build(options));    // Inject the html
        this.scope = element.scope();  // Set scope specific to the element we're compiling, avoids circular reference
                                       // From here use 'scope' to manipulate the form, as the form is not in '$scope'
        $compile(element)(this.scope);
 
-       if (options.related) {
+       if ((!options.modal) && options.related) {
           this.addListeners();
        }
 
@@ -68,7 +78,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           this.applyDefaults();
        }
 
+       if (options.modal) {
+          (options.mode == 'add') ? scope.formHeader = form.addTitle : form.editTitle;
+          $('#form-modal').modal();
+       }
+
        this.mode = options.mode;
+       this.modal = (options.modal) ? true : false;
        
        return this.scope;
        },
@@ -130,6 +146,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
        //
        var html = '';
        
+       if (!this.modal) {
           //Breadcrumbs
           html += "<div class=\"nav-path\">\n";
           html += "<ul class=\"breadcrumb\">\n";
@@ -143,6 +160,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              html += this.form.addTitle; 
           }
           html += "</li>\n</ul>\n</div>\n";
+       }
 
        // Start the well
        if ( this.has('well') ) {
@@ -269,6 +287,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               }
            }
 
+           if (field.type == 'hidden') {
+              if ( (options.mode == 'edit' && field.includeOnEdit) ||
+                   (options.mode == 'add' && field.includeOnAdd) ) {
+                 html += "<input type=\"hidden\" ng-model=\"" + fld + "\" name=\"" + fld + "\" />";
+              }
+           }
+
            //lookup type fields
            if (field.type == 'lookup') {
               html += "<div class=\"control-group\""
@@ -300,6 +325,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
        }
 
        //buttons
+       if (!this.modal) {
           if (this.has('buttons')) {
              html += "<div class=\"control-group\">\n";
              html += "<div class=\"controls buttons\">\n";
@@ -332,18 +358,18 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               html += "</div>\n";
               html += "</div>\n";
            }
-
+       }
        html += "</form>\n";
 
        if ( this.has('well') ) {
           html += "</div>\n";
        }
        
-       if (options.related && this.form.related) {
+       if ((!this.modal) && options.related && this.form.related) {
           html += this.buildCollections();
        }
 
-       console.log(html);
+       //console.log(html);
 
        return html;
        
@@ -372,8 +398,29 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
               html += "\">\n";
               html += "<div class=\"accordion-inner\">\n";
 
+              if (form.related[itm].instructions) {
+                 html += "<div class=\"alert alert-info alert-block\">\n";
+                 html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
+                 html += "<strong>Hint: </strong>" + form.related[itm].instructions + "\n";
+                 html += "</div>\n"
+              }
+
               if (form.related[itm].type == 'tree') {
+                 html += "<div>\n";
+                 // Add actions(s)
+                 if (form.related[itm].actions && form.related[itm].actions.length > 0) {
+                    html += "<div class=\"text-right actions\">\n";
+                    for (var act in form.related[itm].actions) {
+                        var action = form.related[itm].actions[act];
+                        html += "<button class=\"btn btn-mini btn-success\" ";
+                        html += this.attr(action,'ngClick');
+                        html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";
+                        html += ">" + this.icon(action.icon) + "</button>\n";
+                    }
+                    html += "</div>\n";
+                 }
                  html += "<div id=\"tree-view\"></div>\n";
+                 html += "</div>\n";
               }
               else {
                   html += "<div class=\"well\">\n";

lib/ui/static/lib/ansible/list-generator.js

@@ -129,7 +129,6 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
        if (options.mode != 'lookup') {
           //actions
           base = $location.path().replace(/^\//,'').split('/')[0];
-          console.log('base: ' + base);
           html += "<div class=\"text-right\">\n";
           for (action in list.actions) {
               if (list.actions[action].mode == 'all' || list.actions[action].mode == options.mode) {
@@ -227,7 +226,6 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
        else {
           html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });  
        }
-       
        return html;
        
        }

lib/ui/static/lib/ansible/prompt-dialog.js

@@ -26,8 +26,8 @@ angular.module('PromptDialog', [])
         var cls = (params.class == null || params.class == undefined) ? 'btn-danger' : params.class;
         $('#prompt-action-btn').addClass(cls); //Use jquery because django template engine conflicts with Angular's
                                                // use of {{...}}
-        scope.id = params.id; 
+        //scope.id = params.id; 
-        scope.url = params.url; 
+        //scope.url = params.url; 
         scope.promptAction = params.action;
         $(dialog).modal({
             backdrop: 'static',

lib/ui/static/lib/ansible/rest-services.js

@@ -30,12 +30,12 @@ angular.module('RestServices',['ngCookies','AuthService'])
     
     get: function(args) {
         args = (args) ? args : {};
-        this.params = (args.params != null || args.params != undefined) ? args.params : null;
+        this.params = (args.params) ? args.params : null;
         this.pReplace();
         return $http({method: 'GET', 
                       url: this.url,
                       headers: this.auth,
-                      params: this.params,
+                      params: this.params
                       });
         },
     post: function(data) {

lib/ui/templates/ui/index.html

@@ -55,8 +55,6 @@
   <script src="{{ STATIC_URL }}js/helpers/search.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/paginate.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/inventory.js"></script>
-  <script src="{{ STATIC_URL }}js/helpers/hosts.js"></script>
-  <script src="{{ STATIC_URL }}js/helpers/teams.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/teams.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Lookup.js"></script>
   <script src="{{ STATIC_URL }}lib/ansible/directives.js"></script>
@@ -108,18 +106,18 @@
       </div>
     </div>
 
-    <!-- Generic Modal dialog. Use to confirming an action (i.e. Delete) -->
+    <!-- Confirmation Dialog -->
     <div id="prompt-modal" class="modal hide">
       <div class="modal-header">
         <button type="button" class="close" data-target="#prompt-modal" 
                         data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h3 ng-bind="promptHeader"></h3>
+        <h3 ng-bind="promptHeader" id="prompt-header"></h3>
       </div>
-      <div class="modal-body" ng-bind="promptBody">
+      <div class="modal-body" ng-bind="promptBody" id="prompt-body">
       </div>
       <div class="modal-footer">
         <a href="#" data-target="#prompt-modal" data-dismiss="modal" class="btn">No</a>
-        <a href="" ng-click="promptAction()" id="prompt-action-btn" class="btn">Yes</a> <!-- FIXME: Make sure the ng-bind works. -->
+        <a href="" ng-click="promptAction()" id="prompt-action-btn" class="btn">Yes</a>
       </div>
     </div>
 
@@ -137,7 +135,7 @@
       </div>
     </div>
 
-    <!-- Generic Modal dialog. Use for alerts/error handling -->
+    <!-- Alerts/error handling dialog -->
     <div id="alert-modal" class="modal hide">
       <div class="modal-header">
         <button type="button" class="close" data-target="#alert-modal"