AC-369 Inventories->Groups page now loads from /api/v1/inventories/N/trees. All nodes are open on load. Drag-n-drop works. Node add/update/delete working.

2026-03-13 15:09:32 -02:30 · 2013-08-28 12:38:41 -04:00
parent 5ce8328230
commit 51033abe87
4 changed files with 56 additions and 20 deletions
--- a/awx/ui/static/js/controllers/Groups.js
+++ b/awx/ui/static/js/controllers/Groups.js
@@ -8,11 +8,9 @@
 */

 function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryGroupsForm,
-                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
-                          RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
-                          OrganizationList, TreeInit, GetBasePath, GroupsList, GroupsAdd, GroupsEdit, LoadInventory,
-                          GroupsDelete, HostsList, HostsAdd, HostsEdit, HostsDelete, RefreshGroupName, ParseTypeChange,
-                          HostsReload, EditInventory, RefreshTree, LoadSearchTree, EditHostGroups) 
+                          GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, Prompt,
+                          TreeInit, GetBasePath, GroupsList, GroupsAdd, GroupsEdit, LoadInventory,
+                          GroupsDelete, RefreshGroupName, EditInventory) 
 {
   ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                //scope.
@@ -38,7 +36,7 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
       }
       });

-   LoadInventory({ scope: scope, doPostSteps: true });
+   LoadInventory({ scope: scope, doPostSteps: false });

   scope.treeController = function($node) {

@@ -184,11 +182,9 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP

 }

-InventoryGroups.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryGroupsForm', 
-                            'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
-                            'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
-                            'OrganizationList', 'TreeInit', 'GetBasePath', 'GroupsList', 'GroupsAdd', 'GroupsEdit', 'LoadInventory',
-                            'GroupsDelete', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete', 'RefreshGroupName',
-                            'ParseTypeChange', 'HostsReload', 'EditInventory', 'RefreshTree', 'LoadSearchTree', 'EditHostGroups'
+InventoryGroups.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryGroupsForm',
+                            'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'Prompt',
+                            'TreeInit', 'GetBasePath', 'GroupsList', 'GroupsAdd', 'GroupsEdit', 'LoadInventory',
+                            'GroupsDelete', 'RefreshGroupName', 'EditInventory'
                            ]; 
  
--- a/awx/ui/static/js/helpers/inventory.js
+++ b/awx/ui/static/js/helpers/inventory.js
@@ -31,6 +31,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
        var treeData = [];

        // Ater inventory top-level hosts, load top-level groups
+        /*
        if (scope.inventoryLoadedRemove) {
            scope.inventoryLoadedRemove();
        }
@@ -67,6 +68,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                    Alert('Error', 'Failed to laod tree data. Url: ' + groups + ' GET status: ' + status);
                    });
            });
+          */

          treeData =
              [{ 
@@ -78,7 +80,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                  id: 'inventory-node',
                  url: inventory_url,
                  'inventory_id': inventory_id,
-                  hosts: hosts,
                  name: inventory_name,
                  description: inventory_descr,
                  "data-failures": inventory.has_active_failures
@@ -86,8 +87,44 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
              state: 'open',
              children:[] 
              }];
-          scope.$emit('inventoryLoaded');
-           
+          
+          function addNodes(tree, data) {
+              for (var i=0; i < data.length; i++) {
+                  tree.children.push({
+                      data: {
+                          title: data[i].name
+                          },
+                      attr: {
+                          id: idx,
+                          group_id: data[i].id,
+                          type: 'group',
+                          name: data[i].name, 
+                          description: data[i].description,
+                          "data-failures": data[i].has_active_failures,
+                          inventory: data[i].inventory
+                          },
+                      state: 'open',
+                      children:[]
+                      });
+                  idx++;
+                  if (data[i].children.length > 0) {
+                     var node = tree.children.length - 1;
+                     addNodes(tree.children[node], data[i].children);
+                  }
+              }
+          }
+
+          Rest.setUrl(scope.treeData); 
+          Rest.get()
+              .success( function(data, status, headers, config) { 
+                  addNodes(treeData[0], data);
+                  scope.$emit('buildTree', treeData, idx);  
+              })
+              .error( function(data, status, headers, config) {
+                  ProcessErrors(scope, data, status, form,
+                      { hdr: 'Error!', msg: 'Failed to retrieve inventory tree data. GET returned status: ' + status });
+              });
+
        }
        }])

@@ -127,7 +164,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                    "select_limit": 1 
                    },
                "json_data": {
-                    data: treeData,
+                    data: treeData
+                    /*,
                    ajax: {
                        url: function(node){
                            scope.selected_node = node;
@@ -161,6 +199,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                            return response;
                            }
                        }
+                        */
                    },
                "dnd": { },
                "crrm": { 
@@ -354,7 +393,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                scope.TreeParams = { scope: scope, inventory: data };
                scope.variable_url = data.related.variable_data;
                scope.relatedSets['hosts'] = { url: data.related.hosts, iterator: 'host' };
-                
+                scope.treeData = data.related.tree;
+
                // Load the tree view
                if (params.doPostSteps) {
                   RelatedSearchInit({ scope: scope, form: form, relatedSets: scope.relatedSets });
--- a/awx/ui/static/js/lists/Inventories.js
+++ b/awx/ui/static/js/lists/Inventories.js
@@ -63,7 +63,7 @@ angular.module('InventoriesListDefinition', [])
            hosts: {
                label: 'Hosts',
                ngClick: "editHosts(\{\{ inventory.id \}\})",
-                icon: 'icon-th-large',
+                icon: 'icon-laptop',
                "class": 'btn-xs btn-default',
                awToolTip: 'Edit Hosts'
                },
@@ -71,7 +71,7 @@ angular.module('InventoriesListDefinition', [])
            groups: {
                label: 'Groups',
                ngClick: "editGroups(\{\{ inventory.id \}\})",
-                icon: 'icon-group',
+                icon: 'icon-sitemap',
                "class": 'btn-xs btn-default',
                awToolTip: 'Edit Groups'
                },
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/awx/ui/static/lib/ansible/form-generator.js
@@ -1022,7 +1022,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                 html += "<td>";
                 html += "<div class=\"input-group input-group-sm\">\n";
                 html += "<span class=\"input-group-btn\">\n";
-                 html += "<button class=\"btn btn-default\" type=\"button\" ng-click=\"editHostGroups({{ host.id }})\"><i class=\"icon-list\"></i></button>\n";
+                 html += "<button class=\"btn btn-default\" type=\"button\" ng-click=\"editHostGroups({{ host.id }})\"><i class=\"icon-sitemap\"></i></button>\n";
                 html += "</span>\n";
                 html += "<input type=\"text\" ng-model=\"host.groups\" class=\"form-control\" disabled=\"disabled\" >\n";
                 html += "</div>\n";