Inventory refactory: working on inventory group copy/move via drag-n-drop. The graphical piece is mostly working.

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

@@ -9,7 +9,7 @@
  *
  */
 
-angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
+angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper', 'PromptDialog'])
     
     .factory('SortNodes', [ function() {
         return function(data) {
@@ -31,6 +31,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             }
             }])
     
+
     // Figure out the group level tool tip
     .factory('GetToolTip', [ 'FormatDate', function(FormatDate) {
         return function(params) {
@@ -106,6 +107,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             }
             }])
 
+
     .factory('GetInventoryToolTip', [ 'FormatDate', function(FormatDate) {
         return function(params) {
             
@@ -171,6 +173,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             }
             }])
 
+
     .factory('BuildTree', ['Rest', 'GetBasePath', 'ProcessErrors', 'SortNodes', 'Wait', 'GetSyncStatusMsg', 'GetHostsStatusMsg',
         function(Rest, GetBasePath, ProcessErrors, SortNodes, Wait, GetSyncStatusMsg, GetHostsStatusMsg) {
         return function(params) {
@@ -180,16 +183,22 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             var refresh = params.refresh;
             var emit = params.emit;
             var new_group_id = params.new_group_id;
-
-            //var selected_id = params.
-
             var groups = [];
             var id = 1;
-
-            var all_hosts = {
-                name: 'All Hosts', id: 1, group_id: null, parent: 0, description: '', show: true, ngicon: null,
-                has_children: false, related: {}, selected_class: '', show_failures: false };
-            groups.push(all_hosts);
+            
+            function buildAllHosts(tree_data) {
+                // Start our tree object with All Hosts
+                var children = [];
+                var sorted = SortNodes(tree_data);
+                for (var j=0; j < sorted[j].length; i++) {
+                     push(sorted[j].id);
+                }  
+                var all_hosts = {
+                    name: 'All Hosts', id: 1, group_id: null, parent: 0, description: '', show: true, ngicon: null,
+                    has_children: false, related: {}, selected_class: '', show_failures: false, isDraggable: false, 
+                    isDroppable: true, children: children };
+                groups.push(all_hosts);
+                }
 
             function buildGroups(tree_data, parent, level) {
                 var sorted = SortNodes(tree_data);
@@ -204,6 +213,12 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
                         inventory_id: inventory_id, 
                         group_id: sorted[i].id
                         });   // from helpers/Groups.js
+                    
+                    var children = [];
+                    for (var j=0; j < sorted[j].children.length; i++) {
+                        children.push(sorted[j].id);
+                    }    
+                    
                     var group = {
                         name: sorted[i].name,
                         has_active_failures: sorted[i].has_active_failures,
@@ -218,6 +233,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
                         source: sorted[i].summary_fields.inventory_source.source,
                         group_id: sorted[i].id,
                         event_level: level,
+                        children: children,
                         ngicon: (sorted[i].children.length > 0) ? 'fa fa-minus-square-o node-toggle' : 'fa fa-square-o node-no-toggle',
                         ngclick: 'toggle(' + id + ')',
                         related: { 
@@ -233,7 +249,9 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
                         show_failures: hosts_status['failures'],
                         hosts_status_class: hosts_status['class'],
                         selected_class: '',
-                        show: true
+                        show: true,
+                        isDraggable: true, 
+                        isDroppable: true
                         }
                     groups.push(group);
                     if (new_group_id && group.group_id == new_group_id) {
@@ -255,6 +273,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
                 Rest.setUrl(inventory_tree);
                 Rest.get()
                     .success( function(data, status, headers, config) {
+                        buildAllHosts(data);
                         buildGroups(data, 0, 0);
                         //console.log(groups);
                         if (refresh) {
@@ -292,6 +311,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             }
             }])
     
+
     // Update a group with a set of properties 
     .factory('UpdateGroup', [ function() {
         return function(params) {
@@ -339,4 +359,87 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
                 $('#inventory-root-node').attr('data-name', name).attr('data-description', descr).find('.activate').first().text(name);
             }
             }
-            }]);
+            }])
+    
+
+    // Copy or Move a group on the tree after drag-n-drop
+    .factory('CopyMoveGroup', ['$compile', 'Alert', 'ProcessErrors', 'Find', 
+        function($compile, Alert, ProcessErrors, Find) {
+        return function(params) {
+            var scope = params.scope;
+            
+            var target = Find({ list: scope.groups, key: 'id', val: params.target_tree_id });
+            var inbound = Find({ list: scope.groups, key: 'id', val: params.inbound_tree_id });
+            
+            var html = '';
+            html += "<div id=\"copy-prompt-modal\" class=\"modal fade\">\n";
+            html += "<div class=\"modal-dialog\">\n";
+            html += "<div class=\"modal-content\">\n";
+            html += "<div class=\"modal-header\">\n";
+            html += "<button type=\"button\" class=\"close\" data-target=\"#copy-prompt-modal\" " + 
+                "data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n";
+            
+            if (target.id == 1 || inbound.parent == 0) {
+               // We're moving the group to the top level, or we're moving a top level group down
+               html += "<h3>Move Group</h3>\n";
+            }
+            else {
+               html += "<h3>Copy or Move?</h3>\n";
+            }
+
+            html += "</div>\n";
+            html += "<div class=\"modal-body text-center\">\n";
+            
+            if (target.id == 1) {
+                html += "<p>Are you sure you want to move group " + inbound.name + " to the top level?</p>";
+            }
+            else if (inbound.parent == 0) {
+                html += "<p>Are you sure you want to move group " + inbound.name + " away from the top level?</p>";
+            }
+            else {
+                html += "<p>Would you like to copy or move group <em>" + inbound.name + "</em> to group <em>" + target.name + "</em>?</p>\n";
+                html += "<div style=\"margin-top: 30px;\">\n";
+                html += "<a href=\"\" ng-click=\"moveGroup()\" class=\"btn btn-primary\" style=\"margin-right: 15px;\"><i class=\"fa fa-cut\"></i> Move</a>\n";
+                html += "<a href=\"\" ng-click=\"copyGroup()\" class=\"btn btn-primary\"><i class=\"fa fa-copy\"></i> Copy</a>\n";
+                html += "</div>\n";
+            }
+            
+            html += "</div>\n";
+            html += "<div class=\"modal-footer\">\n";
+            html += "<a href=\"#\" data-target=\"#prompt-modal\" data-dismiss=\"modal\" class=\"btn btn-default\">Cancel</a>\n";
+
+            if (target.id == 1 || inbound.parent == 0) {
+                // We're moving the group to the top level, or we're moving a top level group down
+                html += "<a href=\"\" data-target=\"#prompt-modal\" ng-click=\"moveGroup()\" class=\"btn btn-primary\">Yes</a>\n";
+            }
+
+            html += "</div>\n";
+            html += "</div><!-- modal-content -->\n";
+            html += "</div><!-- modal-dialog -->\n";
+            html += "</div><!-- modal -->\n";
+            
+            // Inject our custom dialog
+            var e = angular.element(document.getElementById('inventory-modal-container'));
+            e.append(html);
+            $compile(e)(scope);
+            
+            // Display it
+            $('#copy-prompt-modal').modal({
+                backdrop: 'static',
+                keyboard: true,
+                show: true
+                });
+            
+            // Respond to copy or move... 
+            scope.moveGroup = function() {
+                $('#copy-prompt-modal').modal('hide');
+                console.log('moving the group...');
+                }
+
+            scope.copyGroup = function() {
+                $('#copy-prompt-modal').modal('hide');
+                console.log('copying the group...');
+                }
+
+            }
+            }]);