Inventory detail page changes. Added accordion. Added custom theme to tree. Fixed tooltips. Added button labels.

ansibleworks/ui/static/css/ansible-ui.css

@@ -325,3 +325,11 @@
  }
 
  /* End Jobs Page */
+
+ /* Inventory detail */
+ 
+ .inventory-title {
+    margin-top: 15px;
+    color: #0088cc;
+    font-weight: bold;
+ }

ansibleworks/ui/static/js/controllers/Hosts.js

@@ -19,16 +19,25 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
    
     var list = HostList
     var base = $location.path().replace(/^\//,'').split('/')[0];
+    var base2 = $location.path().replace(/^\//,'').split('/')[2];
     var defaultUrl = GetBasePath('hosts');
     var view = GenerateList;
-    var mode = (base == 'hosts') ? 'edit' : 'select';
+    var mode = (base == 'hosts' || base2 == 'hosts') ? 'edit' : 'select';
     var scope = view.inject(list, { mode: mode });               // Inject our view
     scope.selected = [];
-  
+
+    scope['inventory_id'] = $routeParams.inventory_id;
+    
+    if (base == 'hosts' || base2 == 'hosts') {
+       scope['showAddButton'] = false;
+    }
+    else {
+       scope['showAddButton'] = true;  
+    }
+
     SearchInit({ scope: scope, set: 'hosts', list: list, url: defaultUrl });
     PaginateInit({ scope: scope, list: list, url: defaultUrl });
     scope.search(list.iterator);
-
     LoadBreadCrumbs();
     
     scope.addHost = function() {
@@ -36,7 +45,7 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
        }
 
     scope.editHost = function(id) {
-       $location.path($location.path() + '/' + id);
+       $location.path('/inventories/' + $routeParams.inventory_id + '/hosts/' + id);
        }
  
     scope.deleteHost = function(id, name) {

ansibleworks/ui/static/js/controllers/Inventories.js

@@ -216,7 +216,20 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    var base = $location.path().replace(/^\//,'').split('/')[0];
    var master = {};
    var id = $routeParams.id;
-   var relatedSets = {}; 
+   var relatedSets = {};
+   var hostsUrl;
+
+   scope['inventory_id'] = id;
+
+   // Retrieve each related set and any lookups
+   if (scope.inventoryLoadedRemove) {
+      scope.inventoryLoadedRemove();
+   }
+   scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
+       scope.groupName = 'All Hosts';
+       scope.createButtonShow = false;
+       scope.search(relatedSets['hosts'].iterator);
+       });
   
    // Retrieve detail record and prepopulate the form
    Rest.setUrl(defaultUrl + ':id/'); 
@@ -244,19 +257,12 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                field: 'organization' 
                });
 
-           var related = data.related;
-           for (var set in form.related) {
-               if (related[set]) {
-                  relatedSets[set] = { url: related[set], iterator: form.related[set].iterator };
-               }
-           }
-           
            // Load the tree view
            TreeInit({ scope: scope, inventory: data });
-
+           hostsUrl = data.related.hosts;
-           // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
+           relatedSets['hosts'] = { url: hostsUrl, iterator: 'host' };
-           //RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
+           RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
-           //RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
+           RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
            scope.$emit('inventoryLoaded');
            })
        .error( function(data, status, headers, config) {
@@ -293,7 +299,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
    // Related set: Add button
    scope.add = function(set) {
       $rootScope.flashMessage = null;
-      $location.path('/' + base + '/' + $routeParams.id + '/' + set + '/add');
+      $location.path('/' + base + '/' + $routeParams.id + '/groups/' + scope.group_id + '/' + set + '/add');
       };
 
    // Related set: Edit button
@@ -391,14 +397,14 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                     },
                 "_disabled": (nodeType == 'all-hosts-group') ? true : false
                 },
-             addHost: { 
+             // addHost: { 
-                 label: 'Add Host',
+             //     label: 'Add Host',
-                 action: function(obj) {
+             //     action: function(obj) {
-                     LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('id'), title: $(obj).attr('name') });
+             //         LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('id'), title: $(obj).attr('name') });
-                     changePath($location.path() + '/groups/' + $(obj).attr('id') + '/hosts'); 
+             //         changePath($location.path() + '/groups/' + $(obj).attr('id') + '/hosts'); 
-                     },
+             //         },
-                 "_disabled": (nodeType == 'all-hosts-group') ? true : false
+             //     "_disabled": (nodeType == 'all-hosts-group') ? true : false
-                 },
+             //     },
              edit: { 
                  label: 'Edit Group',
                  action: function(obj) { changePath($location.path() + '/groups/' + $(obj).attr('id')); },
@@ -440,11 +446,39 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
              }
       }
       }
-
+  
+  scope.$on('NodeSelect', function(e, n) {
+      var node = $('li[name="' + n.data + '"]');
+      var type = node.attr('type');
+      var url;
+      $('#tree-view').jstree('open_node',node);
+      if (type == 'group') {
+         url = node.attr('all');
+         scope.createButtonShow = true;
+         scope.group_id = node.attr('id');
+         scope.groupName = n.data;
+      }
+      else if (type == 'all-hosts-group') {
+         url = node.attr('url');
+         scope.createButtonShow = false;
+         scope.groupName = 'All Hosts';
+      }
+      else if (type == 'inventory-node') {
+         url = node.attr('hosts');
+         scope.createButtonShow = false;
+         scope.groupName = 'All Hosts';
+      }
+      relatedSets['hosts'] = { url: url, iterator: 'host' };
+      RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
+      RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
+      scope.search('host');
+      scope.$digest();
+      });
 }
 
 InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', 
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                             'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
-                            'OrganizationList', 'TreeInit', 'GetBasePath']; 
+                            'OrganizationList', 'TreeInit', 'GetBasePath'
+                            ]; 
   

ansibleworks/ui/static/js/controllers/Teams.js

@@ -230,7 +230,10 @@ function TeamsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
    TeamLookUpOrganizationInit({ scope: scope });
 
    // Retrieve each related set and any lookups
-   scope.$on('teamLoaded', function() {
+   if (scope.teamLoadedRemove) {
+      scope.teamLoadedRemove();
+   }
+   scope.teamLoadedRemove = scope.$on('teamLoaded', function() {
        Rest.setUrl(scope['organization_url']);
        Rest.get()
            .success( function(data, status, headers, config) {

ansibleworks/ui/static/js/forms/Inventories.js

@@ -14,6 +14,9 @@ angular.module('InventoryFormDefinition', [])
         editTitle: '{{ name }}',                                  //Legend in edit mode
         name: 'inventory',
         well: true,
+        collapse: true,
+        collapseTitle: 'Edit Inventory',
+        collapseMode: 'edit',
 
         fields: {
             name: {
@@ -56,53 +59,56 @@ angular.module('InventoryFormDefinition', [])
                 }
             },
 
-        related: { //related colletions (and maybe items?)
+        related: {
-
-             // hosts:  {
-             //    type: 'collection',
-             //    title: 'Hosts',
-             //    iterator: 'host',
-             //    open: false,
-                
-             //    actions: { 
-             //        add: {
-             //            ngClick: "add('hosts')",
-             //            icon: 'icon-plus',
-             //            awToolTip: 'Create a new host'
-             //            },
-             //        },
-                
-             //    fields: {
-             //        name: {
-             //            key: true,
-             //            label: 'Name'
-             //            },
-             //        description: {
-             //            label: 'Description'
-             //            }
-             //        },
-                
-             //    fieldActions: {
-             //        edit: {
-             //            ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
-             //            icon: 'icon-edit',
-             //            awToolTip: 'Edit host'
-             //            },
-             //        delete: {
-             //            ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
-             //            icon: 'icon-remove',
-             //            class: 'btn-danger',
-             //            awToolTip: 'Create a new host'
-             //            }
-             //        }
-             //    
 
             groups: {
                 type: 'tree',
-                title: "{{ name }} Children",
-                instructions: "Right click on a host or subgroup to make changes or add additional children.",
                 open: true,
-                actions: { }
+                actions: { 
+                    }
+                },
+
+            hosts: {
+                type: 'treeview',
+                title: "{{ groupName }}",
+                iterator: 'host',
+                actions: { 
+                    add: {
+                        ngClick: "add('hosts')",
+                        icon: 'icon-plus',
+                        label: 'Add',
+                        awToolTip: 'Create a new host',
+                        ngHide: 'createButtonShow == false'
+                        },
+                    },
+                
+                fields: {
+                    name: {
+                        key: true,
+                        label: 'Name',
+                        linkTo: "/inventories/\{\{ inventory_id \}\}/hosts/\{\{ host.id \}\}"
+                        },
+                    description: {
+                        label: 'Description'
+                        }
+                    },
+                
+                fieldActions: {
+                    edit: {
+                        ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
+                        icon: 'icon-edit',
+                        label: 'Edit',
+                        class: 'btn-success',
+                        awToolTip: 'Edit host'
+                        },
+                    delete: {
+                        ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
+                        icon: 'icon-remove',
+                        label: 'Delete',
+                        class: 'btn-danger',
+                        awToolTip: 'Remove host'
+                        }
+                    }    
                 }
             }
 

ansibleworks/ui/static/js/helpers/inventory.js

@@ -74,6 +74,12 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             $(tree_id).jstree({
                 "core": { "initially_open":['inventory-node'] },
                 "plugins": ['themes', 'json_data', 'ui', 'contextmenu'],
+                "themes": {
+                    "theme": "ansible",
+                    "dots": false,
+                    "icons": true
+                    },
+                "ui": { "initially_select": [ 'all-hosts-group' ]},
                 "json_data": {
                     data: treeData,
                     ajax: {
@@ -96,14 +102,14 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                                        description: data.results[i].description,
                                        inventory: data.results[i].inventory,
                                        all: data.results[i].related.all_hosts,
-                                       children: data.results[i].related.children,
+                                       children: data.results[i].related.children + '?order_by=name',
                                        hosts: data.results[i].related.hosts,
                                        variable: data.results[i].related.variable_data
                                        },
                                     state: 'closed'
                                     });
                             }
-                            scope.$emit('loadHosts');
+                            //scope.$emit('loadHosts');
                             return response;
                             }
                         }
@@ -112,9 +118,21 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                     items: scope.treeController
                     }
                 });
+            
+            // When user clicks on a group, display the related hosts in the list view
+            $(tree_id).bind("select_node.jstree", function(evt, data){
+                //selected node object: data.inst.get_json()[0];
+                //selected node text: data.inst.get_json()[0].data
+                //console.log( data.inst.get_json()[0].data + ', ' + data.inst.get_json()[0].attr.id );
+                if (data.inst.get_json()[0].attr.id != 'inventory-node') {
+                   scope.$emit('NodeSelect',data.inst.get_json()[0]);   
+                }
+                else {
+                   $('#all-hosts-group a').click(); 
+                }
+                });
             });
         
-
         // Ater inventory top-level hosts, load top-level groups
         if (scope.HostLoadedRemove) {
             scope.HostLoadedRemove();
@@ -163,6 +181,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                         id: 'inventory-node',
                         url: inventory_url,
                         'inventory_id': inventory_id,
+                        hosts: hosts,
                         name: inventory_name
                         },
                     state: 'open',
@@ -176,30 +195,33 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                     attr: {
                         type: 'all-hosts-group',
                         id: 'all-hosts-group',
-                        url: hosts + '?order_by=name',
+                        url: hosts,
                         name: 'All Hosts'
                         },
                     state: 'closed',
                     children: []
                     };
-                for (var i=0; i < data.results.length; i++ ) {
+                //
-                    all_hosts_node.children.push({
+                // No longer loading hosts inside the tree. Instead, we'll show hosts in the list view. 
-                        data: {
+                //
-                            title: data.results[i].name, 
+                // for (var i=0; i < data.results.length; i++ ) {
-                            icon: '/'
+                //     all_hosts_node.children.push({
-                            },
+                //         data: {
-                        attr: {
+                //             title: data.results[i].name, 
-                            id: data.results[i].id,
+                //             icon: '/'
-                            type: 'host',
+                //             },
-                            name: data.results[i].name, 
+                //         attr: {
-                            description: data.results[i].description,
+                //             id: data.results[i].id,
-                            url: data.results[i].url, 
+                //             type: 'host',
-                            variable_data: data.results[i].varaible_data,
+                //             name: data.results[i].name, 
-                            inventory: data.results[i].related.inventory,
+                //             description: data.results[i].description,
-                            job_events: data.results[i].related.job_events
+                //             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
+                //             },
+                //         });
+                // }
                 treeData[0].children.push(all_hosts_node);
                 scope.$emit('hostsLoaded');
             })
@@ -207,8 +229,5 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                 Alert('Error', 'Failed to laod tree data. Url: ' + hosts + ' GET status: ' + status);
             });
 
-   
         }
         }]);
-
-

ansibleworks/ui/static/js/helpers/search.js

@@ -93,9 +93,6 @@ angular.module('SearchHelper', ['RestServices', 'Utilities', 'RefreshHelper'])
            }
 
         scope.search = function(iterator) {
-           //
-           // need to be able to search by related set. Ex: /api/v1/inventories/?organization__name__icontains=
-           //
            scope[iterator + 'SearchSpin'] = true;
            scope[iterator + 'Loading'] = true;
            scope[iterator + 'SearchParms'] = '';

ansibleworks/ui/static/js/lists/Hosts.js

@@ -20,7 +20,8 @@ angular.module('HostListDefinition', [])
         fields: {
             name: {
                 key: true,
-                label: 'Name'
+                label: 'Name',
+                linkTo: "/inventories/\{\{ inventory_id \}\}/hosts/\{\{ host.id \}\}"
                 },
             description: {
                 label: 'Description'
@@ -33,6 +34,7 @@ angular.module('HostListDefinition', [])
                 label: 'Add',
                 mode: 'all',             // One of: edit, select, all
                 ngClick: 'addHost()',
+                ngHide: 'showAddButton == false',
                 class: 'btn-success btn-small',
                 awToolTip: 'Create a new host'
                 }
@@ -42,8 +44,8 @@ angular.module('HostListDefinition', [])
             edit: {
                 label: 'Edit',
                 ngClick: "editHost(\{\{ host.id \}\})",
-                icon: 'icon-edit btn-success',
+                icon: 'icon-edit',
-                class: 'btn-small',
+                class: 'btn-small btn-success',
                 awToolTip: 'View/Edit host'
                 },
 

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

@@ -31,6 +31,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
            case 'ngShow':
                result = "ng-show=\"" + obj[key] + "\" ";
                break;
+           case 'ngHide':
+               result = "ng-hide=\"" + obj[key] + "\" ";
+               break;
            case 'trueValue':
                result = "ng-true-value=\"" + obj[key] + "\" ";
                break;
@@ -473,6 +476,17 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           html += "</div>\n";
        }
        else { 
+          
+          if ( this.form.collapse && this.form.collapseMode == options.mode) {
+             html += "<div class=\"accordion-group\">\n";
+             html += "<div class=\"accordion-heading\">\n";
+             html += "<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\">";
+             html += "<i class=\"icon-angle-down icon-white\"></i>" + this.form.collapseTitle + "</a>\n";
+             html += "</div>\n";
+             html += "<div id=\"collapse1\" class=\"accordion-body collapse\">\n";
+             html += "<div class=\"accordion-inner\">\n";
+          }
+          
           // Start the well
           if ( this.has('well') ) {
              html += "<div class=\"well\">\n";
@@ -558,8 +572,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           if ( this.has('well') ) {
              html += "</div>\n";
           }
-       }
 
+          if ( this.form.collapse && this.form.collapseMode == options.mode ) {
+             html += "</div>\n";
+             html += "</div>\n";
+             html += "</div>\n";  
+          }
+       }
 
        if ((!this.modal && this.form.items)) {
           for (itm in this.form.items) {
@@ -590,14 +609,146 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
           }
        }
        
-       if ((!this.modal) && options.related && this.form.related) {
+       if (this.form.name == 'inventory') {
-          html += this.buildCollections();
+          html += this.buildTree();
        }
-       
+       else {
+          if ((!this.modal) && options.related && this.form.related) {
+             html += this.buildCollections();
+          }
+       }
+
        return html;
      
        },
 
+    buildTree: function() {
+       //
+       // Used to create the inventory detail view
+       //
+       var idx = 1;
+       var form = this.form;
+       
+       var html = "<div class=\"accordion-group\">\n";
+       html += "<div class=\"accordion-heading\">\n";
+       html += "<a class=\"accordion-toggle\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse2\">";
+       html += "<i class=\"icon-angle-up icon-white\"></i>Inventory Content</a>\n";
+       html += "</div>\n";
+       html += "<div id=\"collapse2\" class=\"accordion-body collapse in\">\n";
+       html += "<div class=\"accordion-inner\">\n";
+       
+       for (var itm in form.related) {
+           if (form.related[itm].type == 'tree') {
+              html += "<div id=\"tree-view\" class=\"span5\"></div>\n";
+           }
+           else {
+              html += "<div id=\"group-view\" class=\"span7\">\n";
+              html += "<div class=\"well\">\n";
+              html += "<h5>" + form.related[itm].title + "</h5>\n";
+              html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true });
+
+              // Add actions(s)
+              html += "<div class=\"list-actions\">\n";
+              for (var action in form.related[itm].actions) {
+                  html += "<button class=\"btn btn-mini btn-success\" ";
+                  html += (form.related[itm]['actions'][action].id) ? this.attr(form.related[itm]['actions'][action],'id') : "";
+                  html += this.attr(form.related[itm]['actions'][action],'ngClick');
+                  html += (form.related[itm]['actions'][action].awToolTip) ? this.attr(form.related[itm]['actions'][action],'awToolTip') : "";
+                  html += (form.related[itm]['actions'][action].awToolTip) ? "data-placement=\"top\" " : "";
+                  html += (form.related[itm]['actions'][action].ngHide) ? this.attr(form.related[itm]['actions'][action],'ngHide') : "";
+                  html += "><i class=\"" + form.related[itm]['actions'][action].icon + "\"></i>";
+                  html += (form.related[itm]['actions'][action].label) ?  " " + form.related[itm]['actions'][action].label : ""; 
+                  html += "</button>\n";
+              }
+              html += "</div>\n";
+             
+              // Start the list
+              html += "<div class=\"list\">\n";
+              html += "<table class=\"table table-condensed\">\n";
+              html += "<thead>\n";
+              html += "<tr>\n";
+              html += "<th>#</th>\n";
+              for (var fld in form.related[itm].fields) {
+                  html += "<th>" + form.related[itm]['fields'][fld].label + "</th>\n";
+              }
+              html += "<th></th>\n";
+              html += "</tr>\n";
+              html += "</thead>";
+              html += "<tbody>\n";
+            
+              html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
+              html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " + 
+                 form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
+              var cnt = 1;
+              var rfield;
+              var base = (form.related[itm].base) ? form.related[itm].base : itm;
+              base = base.replace(/^\//,'');
+              for (var fld in form.related[itm].fields) {
+                  cnt++;
+                  rfield = form.related[itm].fields[fld];
+                  html += "<td>";
+                  if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
+                     if (rfield.linkTo) {
+                        html += "<a href=\"#" + rfield.linkTo + "\">";
+                     }
+                     else if (rfield.ngClick) {
+                        html += "<a href=\"\"" + this.attr(rfield, 'ngClick') + "\">";
+                     }
+                     else {
+                        html += "<a href=\"#/" + base + "/{{" + form.related[itm].iterator + ".id }}\">";
+                     }
+                  }
+                  html += "{{ " + form.related[itm].iterator + "." + fld + " }}";
+                  if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
+                     html += "</a>";
+                  }
+                  html += "</td>\n";
+              }
+             
+              // Row level actions
+              html += "<td class=\"actions\">";
+              for (action in form.related[itm].fieldActions) {
+                  html += "<button class=\"btn btn-mini"; 
+                  html += (form.related[itm]['fieldActions'][action].class) ?
+                      " " + form.related[itm]['fieldActions'][action].class : "";
+                  html += "\" ";
+                  html += (form.related[itm]['fieldActions'][action].awToolTip) ? this.attr(form.related[itm]['fieldActions'][action],'awToolTip') : "";
+                  html += this.attr(form.related[itm]['fieldActions'][action],'ngClick') +
+                      ">" + this.icon(form.related[itm]['fieldActions'][action].icon);
+                  html += (form.related[itm].fieldActions[action].label) ?  " " + form.related[itm].fieldActions[action].label : ""; 
+                  html += "</button> ";
+              }
+              html += "</td>";
+              html += "</tr>\n";
+              
+              // Message for when a related collection is empty
+              html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
+              html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">No records matched your search.</div></td>\n";
+              html += "</tr>\n";
+
+              // Message for loading
+              html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == true\">\n";
+              html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">Loading...</div></td>\n";
+              html += "</tr>\n";
+
+              // End List
+              html += "</tbody>\n";
+              html += "</table>\n";
+              html += "</div>\n";    // close well
+              html += "</div>\n";    // close group-view
+
+              html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true });      
+           }
+           idx++;
+       }
+       
+       html += "</div>\n";
+       html += "</div>\n";
+       html += "</div>\n"; 
+       
+       return html; 
+       },
+
     buildCollections: function() {
        //
        // Create TB accordians with imbedded lists for related collections
@@ -638,110 +789,111 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                         html += "<button class=\"btn btn-small btn-success\" ";
                         html += this.attr(action,'ngClick');
                         html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";
+                        html += (action.awToolTip) ? "data-placement=\"top\" " : "";
                         html += ">" + this.icon(action.icon) + "</button>\n";
                     }
                     html += "</div>\n";
                  }
-                 html += "<div id=\"tree-view\"></div>\n";
+                 html += "<div id=\"tree-view\" class=\"span6\"></div>\n";
+                 html += "<div id=\"group-view\" class=\"span6\"></div>\n";
                  html += "</div>\n";
               }
               else {
-                  html += "<div class=\"well\">\n";
+                 html += "<div class=\"well\">\n";
-                  
+                 html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: false });
-                  html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: false });
 
-                  // Add actions(s)
+                 // Add actions(s)
-                  html += "<div class=\"list-actions\">\n";
+                 html += "<div class=\"list-actions\">\n";
-                  for (var action in form.related[itm].actions) {
+                 for (var action in form.related[itm].actions) {
-                      html += "<button class=\"btn btn-small btn-success\" ";
+                     html += "<button class=\"btn btn-small btn-success\" ";
-                      html += this.attr(form.related[itm]['actions'][action],'ngClick');
+                     html += this.attr(form.related[itm]['actions'][action],'ngClick');
-                      html += "><i class=\"" + form.related[itm]['actions'][action].icon + "\"></i></button>\n";
+                     html += "><i class=\"" + form.related[itm]['actions'][action].icon + "\"></i></button>\n";
-                  }
+                 }
-                  html += "</div>\n";
+                 html += "</div>\n";
-                  
+                
-                  // Start the list
+                 // Start the list
-                  html += "<div class=\"list\">\n";
+                 html += "<div class=\"list\">\n";
-                  html += "<table class=\"table table-condensed\">\n";
+                 html += "<table class=\"table table-condensed\">\n";
-                  html += "<thead>\n";
+                 html += "<thead>\n";
-                  html += "<tr>\n";
+                 html += "<tr>\n";
-                  html += "<th>#</th>\n";
+                 html += "<th>#</th>\n";
-                  for (var fld in form.related[itm].fields) {
+                 for (var fld in form.related[itm].fields) {
-                      html += "<th>" + form.related[itm]['fields'][fld].label + "</th>\n";
+                     html += "<th>" + form.related[itm]['fields'][fld].label + "</th>\n";
-                  }
+                 }
-                  html += "<th></th>\n";
+                 html += "<th></th>\n";
-                  html += "</tr>\n";
+                 html += "</tr>\n";
-                  html += "</thead>";
+                 html += "</thead>";
-                  html += "<tbody>\n";
+                 html += "<tbody>\n";
-                  
+                
-                  html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
+                 html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
-                  html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " + 
+                 html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " + 
-                          form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
+                         form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
-                  var cnt = 1;
+                 var cnt = 1;
-                  var rfield;
+                 var rfield;
-                  var base = (form.related[itm].base) ? form.related[itm].base : itm;
+                 var base = (form.related[itm].base) ? form.related[itm].base : itm;
-                  base = base.replace(/^\//,'');
+                 base = base.replace(/^\//,'');
-                  for (var fld in form.related[itm].fields) {
+                 for (var fld in form.related[itm].fields) {
-                      cnt++;
+                     cnt++;
-                      rfield = form.related[itm].fields[fld];
+                     rfield = form.related[itm].fields[fld];
-                      html += "<td>";
+                     html += "<td>";
-                      if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
+                     if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
-                         if (rfield.linkTo) {
+                        if (rfield.linkTo) {
-                            html += "<a href=\"#" + rfield.linkTo + "\">";
+                           html += "<a href=\"#" + rfield.linkTo + "\">";
-                         }
+                        }
-                         else if (rfield.ngClick) {
+                        else if (rfield.ngClick) {
-                            html += "<a href=\"\"" + this.attr(rfield, 'ngClick') + "\">";
+                           html += "<a href=\"\"" + this.attr(rfield, 'ngClick') + "\">";
-                         }
+                        }
-                         else {
+                        else {
-                            html += "<a href=\"#/" + base + "/{{" + form.related[itm].iterator + ".id }}\">";
+                           html += "<a href=\"#/" + base + "/{{" + form.related[itm].iterator + ".id }}\">";
-                         }
+                        }
-                      }
+                     }
-                      html += "{{ " + form.related[itm].iterator + "." + fld + " }}";
+                     html += "{{ " + form.related[itm].iterator + "." + fld + " }}";
-                      if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
+                     if ((rfield.key || rfield.link || rfield.linkTo || rfield.ngClick )) {
-                         html += "</a>";
+                        html += "</a>";
-                      }
+                     }
-                      html += "</td>\n";
+                     html += "</td>\n";
-                  }
+                 }
-                  
+                 
-                  // Row level actions
+                 // Row level actions
-                  html += "<td class=\"actions\">";
+                 html += "<td class=\"actions\">";
-                  for (action in form.related[itm].fieldActions) {
+                 for (action in form.related[itm].fieldActions) {
-                      html += "<button class=\"btn btn-small"; 
+                     html += "<button class=\"btn btn-small"; 
-                      html += (form.related[itm]['fieldActions'][action].class) ?
+                     html += (form.related[itm]['fieldActions'][action].class) ?
-                          " " + form.related[itm]['fieldActions'][action].class : "";
+                         " " + form.related[itm]['fieldActions'][action].class : "";
-                      html += "\" " + this.attr(form.related[itm]['fieldActions'][action],'ngClick') +
+                     html += "\" " + this.attr(form.related[itm]['fieldActions'][action],'ngClick') +
-                          ">" + this.icon(form.related[itm]['fieldActions'][action].icon);
+                         ">" + this.icon(form.related[itm]['fieldActions'][action].icon);
-                      html += (form.related[itm].fieldActions[action].label) ?  " " + form.related[itm].fieldActions[action].label : ""; 
+                     html += (form.related[itm].fieldActions[action].label) ?  " " + form.related[itm].fieldActions[action].label : ""; 
-                      html += "</button> ";
+                     html += "</button> ";
-                  }
+                 }
-                  html += "</td>";
+                 html += "</td>";
-                  html += "</tr>\n";
+                 html += "</tr>\n";
-                  
+                 
-                  // Message for when a related collection is empty
+                 // Message for when a related collection is empty
-                  html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
+                 html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == false && (" + itm + " == null || " + itm + ".length == 0)\">\n";
-                  html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">No records matched your search.</div></td>\n";
+                 html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">No records matched your search.</div></td>\n";
-                  html += "</tr>\n";
+                 html += "</tr>\n";
 
-                  // Message for loading
+                 // Message for loading
-                  html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == true\">\n";
+                 html += "<tr class=\"info\" ng-show=\"" + form.related[itm].iterator + "Loading == true\">\n";
-                  html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">Loading...</div></td>\n";
+                 html += "<td colspan=\"" + cnt + "\"><div class=\"alert alert-info\">Loading...</div></td>\n";
-                  html += "</tr>\n";
+                 html += "</tr>\n";
 
-                  // End List
+                 // End List
-                  html += "</tbody>\n";
+                 html += "</tbody>\n";
-                  html += "</table>\n";
+                 html += "</table>\n";
-                  html += "</div>\n";    // close well
+                 html += "</div>\n";    // close well
-                  html += "</div>\n";    // close list div
+                 html += "</div>\n";    // close list div
 
-                  html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true });      
+                 html += PaginateWidget({ set: itm, iterator: form.related[itm].iterator, mini: true });      
-              }
+               }
 
-              // End Accordion Group
+               // End Accordion Group
-              html += "</div>\n";    // accordion inner
+               html += "</div>\n";    // accordion inner
-              html += "</div>\n";    // accordion body
+               html += "</div>\n";    // accordion body
-              html += "</div>\n";    // accordion group
+               html += "</div>\n";    // accordion group 
 
-              idx++;
+               idx++;
-           }
+            }
        }
        html += "</div>\n";
 

ansibleworks/ui/static/lib/ansible/generator-helpers.js

@@ -29,7 +29,7 @@ angular.module('GeneratorHelpers', [])
         html += "<span ng-bind=\"" + iterator + "SearchFieldLabel\"></span>\n";
         html += "<span class=\"caret\"></span>\n";
         html += "</button>\n";
-        html += "<ul class=\"dropdown-menu\">\n";
+        html += "<ul class=\"dropdown-menu\" id=\"" + iterator + "SearchDropdown\">\n";
         
         for ( var fld in form.fields) {
           if (form.fields[fld].notSearchable == undefined || form.fields[fld].notSearchable == false) {

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

@@ -34,6 +34,9 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
            case 'ngShow':
                 result = "ng-show=\"" + obj[key] + "\" ";
                 break;
+           case 'ngHide':
+                result = "ng-hide=\"" + obj[key] + "\" ";
+                break;
            case 'awToolTip':
                 result = "aw-tool-tip=\"" + obj[key] + "\" ";
                 break;
@@ -68,6 +71,9 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
        if (options.mode == 'lookup') {
           var element = angular.element(document.getElementById('lookup-modal-body'));  
        }
+       else if (options.id) {
+          var element = angular.element(document.getElementById(options.id));  
+       }
        else {
           var element = angular.element(document.getElementById('htmlTemplate'));  
        }
@@ -94,7 +100,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
        var html = '';
        var list = this.list; 
 
-       if (options.mode != 'lookup') {
+       if (options.mode != 'lookup' && (options.breadCrumbs == undefined || options.breadCrumbs == true)) {
            //Breadcrumbs
            html += "<div class=\"nav-path\">\n";
            html += "<ul class=\"breadcrumb\">\n";
@@ -146,6 +152,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
                     html += "<button " + this.attr(list.actions[action], 'ngClick') + "class=\"btn";
                     html += (list.actions[action].class) ?  " " + list.actions[action].class : " btn-small";
                     html += "\" ";
+                    html += (list.actions[action].ngHide) ? this.attr(list.actions[action],'ngHide') : "";
                     html += (list.actions[action].awToolTip) ? this.attr(list.actions[action],'awToolTip') : "";
                     html += (list.actions[action].awToolTip) ? "data-placement=\"top\" " : "";
                     html += " >" + this.icon(list.actions[action].icon);

ansibleworks/ui/static/lib/ansible/utilities.js

@@ -49,6 +49,9 @@ angular.module('Utilities',[])
       else if (data.detail) {
          Alert(defaultMsg.hdr, defaultMsg.msg + ' ' + data.detail);
       }
+      else if (data['__all__']) {
+         Alert('Error!', data['__all__']);
+      }
       else if (form) {
          var fieldErrors = false; 
          for (var field in form.fields ) {
@@ -94,7 +97,12 @@ angular.module('Utilities',[])
          for (var i=0; i < paths.length - 1; i++) {
             if (i > 0 && paths[i].match(/\d+/)) {
                parent = paths[i-1];
-               child = parent.substring(0,parent.length - 1);  //assumes parent ends with 's'
+               if (parent == 'inventories') {
+                  child = 'inventory';
+               }
+               else {
+                  child = parent.substring(0,parent.length - 1);  //assumes parent ends with 's'
+               }
                // find the correct title
                for (var j=0; j < $rootScope.crumbCache.length; j++) {
                    if ($rootScope.crumbCache[j].path == '/' + parent + '/' + paths[i]) {

ansibleworks/ui/static/lib/jstree/themes/ansible/style.css

@@ -0,0 +1,93 @@
+/*
+ * jsTree classic theme 1.0
+ * Supported features: dots/no-dots, icons/no-icons, focused, loading
+ * Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
+ */
+
+#tree-view {
+  margin: 0;
+  padding: 0;
+}
+
+.jstree-ansible {
+   background-color: #f5f5f5;
+   border: 1px solid #e3e3e3;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.jstree-ansible li, 
+.jstree-ansible ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
+.jstree-ansible li { background-position:-90px 0; background-repeat:repeat-y;  }
+.jstree-ansible li.jstree-last { background:transparent; }
+.jstree-ansible .jstree-open > ins { background-position:-72px 0; }
+.jstree-ansible .jstree-closed > ins { background-position:-54px 0; }
+.jstree-ansible .jstree-leaf > ins { background-position:-36px 0; }
+
+.jstree-ansible .jstree-hovered { background:#e7f4f9; border:1px solid #e7f4f9; padding:0 2px 0 1px; }
+.jstree-ansible .jstree-clicked { background:#d9edf7; border:1px solid #3a87ad; padding:0 2px 0 1px; color: #000; }
+.jstree-ansible a .jstree-icon { background-position:-56px -19px; }
+.jstree-ansible .jstree-open > a .jstree-icon { background-position:-56px -36px; }
+.jstree-ansible a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
+
+/*.jstree-ansible.jstree-focused { background:white; }*/
+
+.jstree-ansible .jstree-no-dots li, 
+.jstree-ansible .jstree-no-dots .jstree-leaf > ins { background:transparent; }
+.jstree-ansible .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
+.jstree-ansible .jstree-no-dots .jstree-closed > ins { background-position:0 0; }
+
+.jstree-ansible .jstree-no-icons a .jstree-icon { display:none; }
+
+.jstree-ansible .jstree-search { font-style:italic; }
+
+.jstree-ansible .jstree-no-icons .jstree-checkbox { display:inline-block; }
+.jstree-ansible .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
+.jstree-ansible .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
+.jstree-ansible .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
+.jstree-ansible .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
+.jstree-ansible .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
+.jstree-ansible .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
+.jstree-ansible .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }
+
+#vakata-dragged.jstree-ansible ins { background:transparent !important; }
+#vakata-dragged.jstree-ansible .jstree-ok { background:url("d.png") -2px -53px no-repeat !important; }
+#vakata-dragged.jstree-ansible .jstree-invalid { background:url("d.png") -18px -53px no-repeat !important; }
+#jstree-marker.jstree-ansible { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }
+
+.jstree-ansible a.jstree-search { color:aqua; }
+.jstree-ansible .jstree-locked a { color:silver; cursor:default; }
+
+#vakata-contextmenu.jstree-ansible-context, 
+#vakata-contextmenu.jstree-ansible-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
+#vakata-contextmenu.jstree-ansible-context li { }
+#vakata-contextmenu.jstree-ansible-context a { color:black; }
+#vakata-contextmenu.jstree-ansible-context a:hover, 
+#vakata-contextmenu.jstree-ansible-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
+#vakata-contextmenu.jstree-ansible-context li.jstree-contextmenu-disabled a, 
+#vakata-contextmenu.jstree-ansible-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
+#vakata-contextmenu.jstree-ansible-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
+#vakata-contextmenu.jstree-ansible-context li ul { margin-left:-4px; }
+
+/* IE6 BEGIN */
+.jstree-ansible li, 
+.jstree-ansible ins,
+#vakata-dragged.jstree-ansible .jstree-invalid, 
+#vakata-dragged.jstree-ansible .jstree-ok, 
+#jstree-marker.jstree-ansible { _background-image:url("d.gif"); }
+.jstree-ansible .jstree-open ins { _background-position:-72px 0; }
+.jstree-ansible .jstree-closed ins { _background-position:-54px 0; }
+.jstree-ansible .jstree-leaf ins { _background-position:-36px 0; }
+.jstree-ansible .jstree-open a ins.jstree-icon { _background-position:-56px -36px; }
+.jstree-ansible .jstree-closed a ins.jstree-icon { _background-position:-56px -19px; }
+.jstree-ansible .jstree-leaf a ins.jstree-icon { _background-position:-56px -19px; }
+#vakata-contextmenu.jstree-ansible-context ins { _display:none; }
+#vakata-contextmenu.jstree-ansible-context li { _zoom:1; }
+.jstree-ansible .jstree-undetermined a .jstree-checkbox { _background-position:-20px -19px; }
+.jstree-ansible .jstree-checked a .jstree-checkbox { _background-position:-38px -19px; }
+.jstree-ansible .jstree-unchecked a .jstree-checkbox { _background-position:-2px -19px; }
+/* IE6 END */