AC-331 Group drag-n-drop starting to work.

awx/ui/static/js/controllers/Inventories.js

@@ -213,34 +213,6 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
        scope.createButtonShow = false;
        scope.search(scope.relatedSets['hosts'].iterator);
        TreeInit(scope.TreeParams);
-       LookUpInit({
-           scope: scope,
-           form: form,
-           current_item: (scope.organization !== undefined) ? scope.organization : null,
-           list: OrganizationList, 
-           field: 'organization' 
-           });
-
-       if (scope.variable_url) {
-          Rest.setUrl(scope.variable_url);
-          Rest.get()
-              .success( function(data, status, headers, config) {
-                  if ($.isEmptyObject(data)) {
-                     scope.inventory_variables = "---";
-                  }
-                  else {
-                     scope.inventory_variables = jsyaml.safeDump(data);
-                  }
-                  })
-              .error( function(data, status, headers, config) {
-                  scope.inventory_variables = null;
-                  ProcessErrors(scope, data, status, form,
-                      { hdr: 'Error!', msg: 'Failed to retrieve inventory variables. GET returned status: ' + status });
-                  });
-          }
-          else {
-              scope.inventory_variables = "---";
-          }
        });
 
    LoadInventory({ scope: scope, doPostSteps: true });
@@ -405,18 +377,8 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       }
       else {
          return {
-             addGroup: { 
-                label: 'Add Group',
-                action: function(obj) {
-                    scope.group_id = $(obj).attr('group_id');
-                    if (!scope.$$phase) {
-                       scope.$digest();
-                    }
-                    GroupsList({ "inventory_id": id, group_id: $(obj).attr('group_id') });
-                    }    
-                },
              edit: { 
-                 label: 'Edit Group',
+                 label: 'Group Properties',
                  action: function(obj) {
                      scope.group_id = $(obj).attr('group_id');
                      if (!scope.$$phase) {
@@ -426,6 +388,29 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                      },
                  separator_before: true
                  },
+
+             addGroup: { 
+                 label: 'Add Existing',
+                 action: function(obj) {
+                     scope.group_id = $(obj).attr('group_id');
+                     if (!scope.$$phase) {
+                        scope.$digest();
+                     }
+                     GroupsList({ "inventory_id": id, group_id: $(obj).attr('group_id') });
+                     }    
+                 },
+
+             createGroup: { 
+                 label: 'Create New',
+                 action: function(obj) {
+                     scope.group_id = $(obj).attr('group_id');
+                     if (!scope.$$phase) {
+                        scope.$digest();
+                     }
+                     GroupsAdd({ "inventory_id": id, group_id: $(obj).attr('group_id') });
+                     }    
+                 },
+
              "delete": {
                  label: 'Delete Group',
                  action: function(obj) {
@@ -447,6 +432,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       var node = $('li[id="' + n.attr.id + '"]');
       var type = node.attr('type');
       var url;
+      
       scope['selectedNode'] = node;
       scope['selectedNodeName'] = node.attr('name');
       
@@ -455,11 +441,11 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       if (type == 'group') {
          url = node.attr('all');
          scope.groupAddHide = false;
+         scope.groupCreateHide = false;
          scope.groupEditHide =false;
          scope.inventoryEditHide=true;
          scope.groupDeleteHide = false;
          scope.createButtonShow = true;
-         scope.addGroupTitle = 'Add Group';
          scope.group_id = node.attr('group_id');
          scope.groupName = n.data;
          scope.groupTitle = '<h4>' + n.data + '</h4>';
@@ -467,11 +453,11 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       }
       else if (type == 'inventory') {
          url = node.attr('hosts');
-         scope.groupAddHide = false; 
+         scope.groupAddHide = true;
+         scope.groupCreateHide = false; 
          scope.groupEditHide =true;
          scope.inventoryEditHide=false;
          scope.groupDeleteHide = true;
-         scope.addGroupTitle = 'Create Group';
          scope.createButtonShow = false;
          scope.groupName = 'All Hosts';
          scope.groupTitle = '<h4>All Hosts</h4>';
@@ -487,12 +473,11 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
       });
 
   scope.addGroup = function() {
-      if (scope.group_id == null) {
-         GroupsAdd({ "inventory_id": id, group_id: null });
-      }
-      else {
          GroupsList({ "inventory_id": id, group_id: scope.group_id });
       }
+
+  scope.createGroup = function() {
+      GroupsAdd({ "inventory_id": id, group_id: scope.group_id });
       }
 
   scope.editGroup = function() {

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

@@ -70,12 +70,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         scope.removeModalClosed = scope.$on('modalClosed', function() {
             RefreshTree({ scope: scope });
             });
-
-        scope.createGroup = function() {
-            $('#form-modal').modal('hide');   
-            GroupsAdd({ inventory_id: inventory_id, group_id: group_id });
-            }
-
         }
         }])
 
@@ -102,13 +96,13 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         scope.parseType = 'yaml';
         ParseTypeChange(scope);
 
-         $('#form-modal').on('hidden.bs.modal', function() {
+        //$('#form-modal').on('hidden.bs.modal', function() {
-             var me = $(this);
+        //     var me = $(this);
-             $('.modal-backdrop').each(function(index) {
+        //     $('.modal-backdrop').each(function(index) {
-                 $(this).remove();
+        //         $(this).remove();
-                 });
+        //         });
-             me.unbind('hidden.bs.modal');
+        //     me.unbind('hidden.bs.modal');
-             });
+        //     });
         
         $('#form-modal .btn-none').removeClass('btn-none').addClass('btn-success');
 
@@ -374,8 +368,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
             Rest.post({ id: group_id, disassociate: 1 })
                .success( function(data, status, headers, config) {
                    $('#prompt-modal').modal('hide');
+                   scope.selectedNode = scope.selectedNode.parent().parent();
                    RefreshTree({ scope: scope });
-                   //$('#tree-view').jstree("delete_node",obj);
                    })
                .error( function(data, status, headers, config) {
                    $('#prompt-modal').modal('hide');

awx/ui/static/js/helpers/inventory.js

@@ -121,14 +121,17 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
         scope.buildTreeRemove = scope.$on('buildTree', function(e, treeData, index) {
             var idx = index;
             $(tree_id).jstree({
-                "core": { "initially_open":['inventory-node'] },
+                "core": { "initially_open":['inventory_node'] },
-                "plugins": ['themes', 'json_data', 'ui', 'contextmenu'],
+                "plugins": ['themes', 'json_data', 'ui', 'contextmenu', 'dnd', 'crrm'],
                 "themes": {
                     "theme": "ansible",
                     "dots": false,
                     "icons": true
                     },
-                "ui": { "initially_select": [ 'inventory-node' ]},
+                "ui": { 
+                    "initially_select": [ 'inventory-node' ],
+                    "select_limit": 1 
+                    },
                 "json_data": {
                     data: treeData,
                     ajax: {
@@ -166,6 +169,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                             }
                         }
                     },
+                "dnd": { },
+                "crrm": { },
                 "contextmenu": {
                     items: scope.treeController
                     }
@@ -175,11 +180,20 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                 scope.$emit('treeLoaded');
                 });
 
+            $(tree_id).bind('move_node.jstree', function(e, data) {
+                if (data.rslt.o[0].id !== 'inventory_id') {
+                  console.log('group_id: ' + $('#tree-view li[id="' + data.rslt.o[0].id+ '"]').attr('group_id'));
+                }
+                else {
+                  console.log('id: ' + data.rslt.o[0].id);
+                }
+                });
+            
             // When user clicks on a group, display the related hosts in the list view
             $(tree_id).bind("select_node.jstree", function(e, data){
                 //selected node object: data.inst.get_json()[0];
                 //selected node text: data.inst.get_json()[0].data
-                scope.$emit('NodeSelect',data.inst.get_json()[0]);
+                scope.$emit('NodeSelect', data.inst.get_json()[0]);
                 });
             });
    
@@ -272,6 +286,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             // Opens the list in reverse so that nodes open in parent then child order,
             // drilling down to the last selected node.
             var id, node;
+            
             if (openId.length > 0) {
                id = openId.pop();
                node = $('#tree-view li[id="' + id + '"]');
@@ -280,7 +295,9 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             else {
                if (selectedId !== null && selectedId !== undefined) {
                   // Click on the previously selected node
-                  $('#tree-view li[id="' + selectedId + '"] a').first().click();
+                  node = $('#tree-view li[id="' + selectedId + '"]');
+                  $('#tree-view').jstree('select_node', node);
+                  //$('#tree-view li[id="' + selectedId + '"] a').first().click();
                }   
             }
             });
@@ -304,8 +321,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             $('#tree-view').jstree('destroy');
             TreeInit(scope.TreeParams);  
             });
-
+        LoadInventory({ scope: scope, doPostSteps: true });
-        LoadInventory({ scope: scope });
         
         }
         }])

awx/ui/static/js/lists/Groups.js

@@ -28,18 +28,9 @@ angular.module('GroupListDefinition', [])
             },
         
         actions: {
-            add: {
-                label: 'Create New Group',
-                icon: 'icon-plus',
-                mode: 'all',             // One of: edit, select, all
-                ngClick: 'createGroup()',
-                "class": 'btn-success btn-mini',
-                awToolTip: 'Create a new group'
-                },
              help: {
                 awPopOver: "Select groups by clicking on each group you wish to add. Add the selected groups to your inventory " +
-                    "or to the selected parent group by clicking the <em>Select</em> button. You can also create a new group by clicking the " +
+                    "or to the selected parent group by clicking the <em>Select</em> button.",
-                    "<em>Create New Group</em> button.",
                 dataPlacement: 'left',
                 dataContainer: '#form-modal .modal-content',
                 icon: "icon-question-sign",

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

@@ -114,7 +114,7 @@ hr {
 
 .main-menu .nav > li > a:hover,
 .main-menu .nav > li > a:focus {
-  color: #2078be;
+  color: @blue;
 }
 
 /* Using inline-block rather than block keeps 
@@ -531,6 +531,9 @@ input[type="text"].job-successful {
      color: @black; 
      cursor: default;
   }
+  .nav a {
+     color: @blue-link;
+  }
 }
 
 .inventory-title {

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

@@ -919,11 +919,13 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        html += "<li><a href=\"\" ng-click=\"editInventory()\" ng-hide=\"inventoryEditHide\" " +
            "aw-tool-tip=\"Edit inventory properties\"  data-placement=\"bottom\"><i class=\"icon-edit\"></i> Inventory Properties</a></li>\n";
        html += "<li><a href=\"\" ng-click=\"editGroup()\" ng-hide=\"groupEditHide\" " +
-           "aw-tool-tip=\"Edit the selected group\" data-placement=\"bottom\"><i class=\"icon-edit\"></i> Edit Group</a></li>\n";
+           "aw-tool-tip=\"Edit the selected group\" data-placement=\"bottom\"><i class=\"icon-edit\"></i> Group Properties</a></li>\n";
        html += "<li><a href=\"\" ng-click=\"addGroup()\" ng-hide=\"groupAddHide\" " +
-           "aw-tool-tip=\"Add a new group\" data-placement=\"bottom\"><i class=\"icon-plus\"></i> \{\{ addGroupTitle \}\}</a></li>\n";
+           "aw-tool-tip=\"Add an existing group\" data-placement=\"bottom\"><i class=\"icon-check\"></i> Add Existing</a></li>\n";
+       html += "<li><a href=\"\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
+           "aw-tool-tip=\"Create a new group\" data-placement=\"bottom\"><i class=\"icon-plus\"></i> Create New</a></li>\n";
        html += "<li><a href=\"\" ng-click=\"deleteGroup()\" ng-hide=\"groupDeleteHide\" " +
-           "aw-tool-tip=\"Delete the group\" data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete Group</a></li>\n";
+           "aw-tool-tip=\"Delete the selected group\" data-placement=\"bottom\"><i class=\"icon-trash\"></i> Delete Group</a></li>\n";
        html += "</ul>\n";
        html += "</div><!-- navbar -->\n";  
        html += "<div id=\"tree-view\" class=\"tree-container\"></div>\n";

awx/ui/templates/ui/index.html

@@ -339,7 +339,7 @@
     </div>
   </div><!-- site footer --> 
   
-  <script src="{{ STATIC_URL }}lib/jquery/jquery-1.9.1.min.js"></script>
+  <script src="{{ STATIC_URL }}lib/jquery/jquery-1.10.2.min.js"></script>
   <script src="{{ STATIC_URL }}lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
   <script src="{{ STATIC_URL }}lib/twitter/bootstrap.min.js"></script>
   <script src="{{ STATIC_URL }}lib/jstree/jquery.jstree.js"></script>