Inventory UI changes. Added action buttons to tree. Removed All Hosts group from tree (click on Inventory root node to see All Hosts). Added Create/Select buttons to hosts list. Preparing to move group/host views to modal dialog.

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

@@ -333,3 +333,19 @@
     color: #0088cc;
     font-weight: bold;
  }
+
+ .inventory-buttons {
+    margin: 10px 10px 0 0;
+ }
+
+ .inventory-buttons button {
+    margin-left: 5px;
+ }
+
+ #hosts-well {
+    padding-top: 10px;
+ }
+
+ #hosts-title {
+    margin-bottom: 15px;
+ }

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

@@ -360,14 +360,14 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                     },
                 "_disabled": (nodeType == 'all-hosts-group') ? true : false
                 },
-             addHost: { 
+             /*addHost: { 
                 label: 'Add Host',
                     action: function(obj) {
                         LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('group_id'), title: $(obj).attr('name') });
                         changePath($location.path() + '/groups/' + $(obj).attr('group_id') + '/hosts'); 
                         },
                     "_disabled": (nodeType == 'all-hosts-group') ? true : false
-                   },
+                   },*/
              edit: { 
                  label: 'Edit Group',
                  action: function(obj) { changePath($location.path() + '/groups/' + $(obj).attr('group_id')); },
@@ -411,16 +411,18 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       }
   
   scope.$on('NodeSelect', function(e, n) {
-      var node = $('li[name="' + n.data + '"]');
+      var node = $('li[id="' + n.attr.id + '"]');
       var type = node.attr('type');
       var url;
       $('#tree-view').jstree('open_node',node);
       if (type == 'group') {
          url = node.attr('all');
+         scope.groupAddHide = false; 
+         scope.groupEditHide =false;
          scope.createButtonShow = true;
          scope.group_id = node.attr('group_id');
          scope.groupName = n.data;
-         scope.groupTitle = 'Hosts: ' + n.data;
+         scope.groupTitle = n.data;
          scope.groupTitle += (node.attr('description')) ? ' -' + node.attr('description') : '';
       }
       else if (type == 'all-hosts-group') {
@@ -429,8 +431,10 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
          scope.groupName = 'All Hosts';
          scope.groupTitle = 'All Hosts';
       }
-      else if (type == 'inventory-node') {
+      else if (type == 'inventory') {
          url = node.attr('hosts');
+         scope.groupAddHide = false; 
+         scope.groupEditHide =true;
          scope.createButtonShow = false;
          scope.groupName = 'All Hosts';
          scope.groupTitle = 'All Hosts';

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

@@ -76,10 +76,17 @@ angular.module('InventoryFormDefinition', [])
                     add: {
                         ngClick: "add('hosts')",
                         icon: 'icon-plus',
-                        label: 'Add',
+                        label: 'Create Host',
                         awToolTip: 'Create a new host',
                         ngHide: 'createButtonShow == false'
                         },
+                    select: {
+                        ngClick: "select('hosts')",
+                        icon: 'icon-th-large',
+                        label: 'Select Existing Host',
+                        awToolTip: 'Select an existing host',
+                        ngHide: 'createButtonShow == false'
+                        }
                     },
                 
                 fields: {

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

@@ -41,7 +41,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                     "dots": false,
                     "icons": true
                     },
-                "ui": { "initially_select": [ 'all-hosts-group' ]},
+                "ui": { "initially_select": [ 'inventory-node' ]},
                 "json_data": {
                     data: treeData,
                     ajax: {
@@ -73,7 +73,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                                     });
                                 idx++;
                             }
-                            //scope.$emit('loadHosts');
                             return response;
                             }
                         }
@@ -87,13 +86,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             $(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 );
+                scope.$emit('NodeSelect',data.inst.get_json()[0]);
-                if (data.inst.get_json()[0].attr.id != 'inventory-node') {
-                   scope.$emit('NodeSelect',data.inst.get_json()[0]);
-                }
-                else {
-                   $('#all-hosts-group a').click(); 
-                }
                 });
             });
         
@@ -133,12 +126,12 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                     });
             });
 
-        // Load inventory all hosts
+        // Setup tree_data
         Rest.setUrl(hosts + '?order_by=name'); 
         Rest.get()
             .success ( function(data, status, headers, config) {
-                treeData = [];
+                treeData =
-                treeData.push({ 
+                    [{ 
                     data: {
                         title: inventory_name
                         }, 
@@ -153,22 +146,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                         },
                     state: 'open',
                     children:[] 
-                    });
+                    }];
-                
-                var all_hosts_node = {
-                    data: {
-                        title: 'All Hosts'
-                        },
-                    attr: {
-                        type: 'all-hosts-group',
-                        id: 'all-hosts-group',
-                        url: hosts,
-                        name: 'All Hosts'
-                        },
-                    state: 'closed'
-                    };
-                
-                treeData[0].children.push(all_hosts_node);
                 scope.$emit('hostsLoaded');
             })
             .error ( function(data, status, headers, config) {

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

@@ -639,12 +639,18 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
        
        for (var itm in form.related) {
            if (form.related[itm].type == 'tree') {
-              html += "<div id=\"tree-view\" class=\"span5\"></div>\n";
+              html += "<div class=\"span5\">";
+              html += "<div class=\"inventory-buttons pull-right\">";
+              html += "<button ng-hide=\"groupAddHide\" id=\"inv-group-add\" class=\"btn btn-mini btn-success\"><i class=\"icon-plus\"></i> Add Group</button>";
+              html += "<button ng-hide=\"groupEditHide\" id=\"inv-group-edit\" class=\"btn btn-mini btn-success\"><i class=\"icon-edit\"></i> Edit Group</button>";
+              html += "</div>\n";  
+              html += "<div id=\"tree-view\"></div>\n";
+              html += "</div>\n";
            }
            else {
               html += "<div id=\"group-view\" class=\"span7\">\n";
-              html += "<div class=\"well\">\n";
+              html += "<div id=\"hosts-well\" class=\"well\">\n";
-              html += "<h5>" + form.related[itm].title + "</h5>\n";
+              html += "<h4 id=\"hosts-title\">" + form.related[itm].title + "</h4>\n";
               html += SearchWidget({ iterator: form.related[itm].iterator, template: form.related[itm], mini: true });
 
               // Add actions(s)