From 1bc85f608c558a0cf1942f6b3bfc70f0ed566afb Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Wed, 15 May 2013 17:24:49 -0400 Subject: [PATCH] Latest inventory tree updates. Now using root_groups to retrieve top-level inventory groups. Ajax group load now works -hosts and subgroups loading. Need to add sorting, but all works. --- lib/ui/static/js/app.js | 44 +++---- lib/ui/static/js/controllers/Groups.js | 14 +- lib/ui/static/js/controllers/Hosts.js | 10 +- lib/ui/static/js/controllers/Inventories.js | 3 + lib/ui/static/js/helpers/inventory.js | 137 ++++++++++++++------ lib/ui/templates/ui/index.html | 1 - 6 files changed, 135 insertions(+), 74 deletions(-) diff --git a/lib/ui/static/js/app.js b/lib/ui/static/js/app.js index f55adfe7e9..e2ae135e51 100644 --- a/lib/ui/static/js/app.js +++ b/lib/ui/static/js/app.js @@ -56,35 +56,35 @@ angular.module('ansible', [ // when('/job_templates/:id', { templateUrl: urlPrefix + 'partials/job_templates.html', // controller: JobTemplatesEdit }). - when('/projects', { templateUrl: urlPrefix + 'partials/projects.html', - controller: ProjectsList }). + when('/projects', + { templateUrl: urlPrefix + 'partials/projects.html', controller: ProjectsList }). - when('/inventories', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: InventoriesList }). + when('/inventories', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: InventoriesList }). - when('/inventories/add', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: InventoriesAdd }). + when('/inventories/add', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: InventoriesAdd }). - when('/inventories/:id', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: InventoriesEdit }). + when('/inventories/:id', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: InventoriesEdit }). - when('/inventories/:id/hosts', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: HostsList }). + when('/inventories/:inventory_id/hosts', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsList }). - when('/inventories/:id/hosts/add', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: HostsAdd }). + when('/inventories/:inventory_id/hosts/add', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsAdd }). - when('/inventories/:inventory_id/hosts/:id', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: HostsEdit }). + when('/inventories/:inventory_id/hosts/:host_id', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsEdit }). - when('/inventories/:id/groups', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: GroupsList }). + when('/inventories/:inventory_id/groups', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsList }). - when('/inventories/:id/groups/add', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: GroupsAdd }). + when('/inventories/:inventory_id/groups/add', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsAdd }). - when('/inventories/:inventory_id/groups/:id', { templateUrl: urlPrefix + 'partials/inventories.html', - controller: GroupsEdit }). + when('/inventories/:inventory_id/groups/:group_id', + { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsEdit }). when('/inventories/:inventory_id/groups/:group_id/children', { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsList }). @@ -92,7 +92,7 @@ angular.module('ansible', [ when('/inventories/:inventory_id/groups/:group_id/children/add', { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsAdd }). - when('/inventories/:inventory_id/groups/:group_id/children/:id', + when('/inventories/:inventory_id/groups/:group_id/children/:child_id', { templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsEdit }). when('/inventories/:inventory_id/groups/:group_id/hosts', @@ -101,7 +101,7 @@ angular.module('ansible', [ when('/inventories/:inventory_id/groups/:group_id/hosts/add', { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsAdd }). - when('/inventories/:inventory_id/groups/:group_id/hosts/:id', + when('/inventories/:inventory_id/groups/:group_id/hosts/:host_id', { templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsEdit }). when('/organizations', { templateUrl: urlPrefix + 'partials/organizations.html', diff --git a/lib/ui/static/js/controllers/Groups.js b/lib/ui/static/js/controllers/Groups.js index f7a9621d74..5a35468e33 100644 --- a/lib/ui/static/js/controllers/Groups.js +++ b/lib/ui/static/js/controllers/Groups.js @@ -162,9 +162,9 @@ function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, data[fld] = scope[fld]; } - //if ($routeParams.group_id) { - // data['inventory'] = $routeParams.inventory_id; - //} + if ($routeParams.inventory_id) { + data['inventory'] = $routeParams.inventory_id; + } Rest.post(data) .success( function(data, status, headers, config) { @@ -197,11 +197,11 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams var generator = GenerateForm; var form = GroupForm; - var defaultUrl = GetBasePath('groups') + $routeParams.id + '/'; + var defaultUrl = GetBasePath('groups') + $routeParams.group_id + '/'; var scope = generator.inject(form, {mode: 'edit', related: true}); generator.reset(); var master = {}; - var id = $routeParams.id; + var id = $routeParams.group_id; var relatedSets = {}; // After the Organization is loaded, retrieve each related set @@ -238,7 +238,7 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams }) .error( function(data, status, headers, config) { ProcessErrors(scope, data, status, form, - { hdr: 'Error!', msg: 'Failed to retrieve group: ' + $routeParams.id + '. GET status: ' + status }); + { hdr: 'Error!', msg: 'Failed to retrieve group: ' + id + '. GET status: ' + status }); }); // Save changes to the parent @@ -255,7 +255,7 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams }) .error( function(data, status, headers, config) { ProcessErrors(scope, data, status, form, - { hdr: 'Error!', msg: 'Failed to update group: ' + $routeParams.id + '. PUT status: ' + status }); + { hdr: 'Error!', msg: 'Failed to update group: ' + id + '. PUT status: ' + status }); }); }; diff --git a/lib/ui/static/js/controllers/Hosts.js b/lib/ui/static/js/controllers/Hosts.js index ee51ee047d..ca210635fa 100644 --- a/lib/ui/static/js/controllers/Hosts.js +++ b/lib/ui/static/js/controllers/Hosts.js @@ -160,11 +160,9 @@ function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, for (var fld in form.fields) { data[fld] = scope[fld]; } - - if ($routeParams.group_id) { + if ($routeParams.inventory_id) { data['inventory'] = $routeParams.inventory_id; } - Rest.post(data) .success( function(data, status, headers, config) { ReturnToCaller(1); @@ -201,7 +199,7 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, var scope = generator.inject(form, {mode: 'edit', related: true}); generator.reset(); var master = {}; - var id = $routeParams.id; + var id = $routeParams.host_id; var relatedSets = {}; // After form data loads, load related sets and lookups @@ -235,7 +233,7 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, }) .error( function(data, status, headers, config) { ProcessErrors(scope, data, status, form, - { hdr: 'Error!', msg: 'Failed to retrieve host: ' + $routeParams.id + '. GET status: ' + status }); + { hdr: 'Error!', msg: 'Failed to retrieve host: ' + id + '. GET status: ' + status }); }); // Save changes to the parent @@ -251,7 +249,7 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, }) .error( function(data, status, headers, config) { ProcessErrors(scope, data, status, form, - { hdr: 'Error!', msg: 'Failed to update host: ' + $routeParams.id + '. PUT status: ' + status }); + { hdr: 'Error!', msg: 'Failed to update host: ' + id + '. PUT status: ' + status }); }); }; diff --git a/lib/ui/static/js/controllers/Inventories.js b/lib/ui/static/js/controllers/Inventories.js index 6ae9ecf628..8d83c8bcff 100644 --- a/lib/ui/static/js/controllers/Inventories.js +++ b/lib/ui/static/js/controllers/Inventories.js @@ -166,6 +166,9 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa for (var fld in form.fields) { data[fld] = scope[fld]; } + if ($routeParams.inventory_id) { + data.inventory = $routeParams.inventory_id; + } Rest.post(data) .success( function(data, status, headers, config) { ReturnToCaller(); diff --git a/lib/ui/static/js/helpers/inventory.js b/lib/ui/static/js/helpers/inventory.js index e08e807f6d..2547792de6 100644 --- a/lib/ui/static/js/helpers/inventory.js +++ b/lib/ui/static/js/helpers/inventory.js @@ -2,31 +2,123 @@ * Copyright (c) 2013 AnsibleWorks, Inc. * * InventoryHelper - * Routines shared amongst the inventory controllers + * Routines for building the tree. Everything related to the tree is here except + * for the menu piece. The routine for building the menu is in InventoriesEdit controller + * (controllers/Inventories.js) + * */ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationListDefinition', 'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService' ]) - .factory('TreeInit', ['Alert', 'Rest', 'Authorization', - function(Alert, Rest, Authorization) { + .factory('TreeInit', ['Alert', 'Rest', 'Authorization', '$http', + function(Alert, Rest, Authorization, $http) { return function(params) { var scope = params.scope; var inventory = params.inventory; - var groups = inventory.related.groups; + var groups = inventory.related.root_groups; var hosts = inventory.related.hosts; var inventory_name = inventory.name; var inventory_url = inventory.url; var inventory_id = inventory.id; + var tree_id = '#tree-view'; var treeData = []; + + // On group expand, fetch and add hosts + if (scope.loadHostsRemove) { + scope.loadHostsRemove(); + } + scope.loadHostsRemove = scope.$on('loadHosts', function(){ + var node = scope.selected_node; + var url = $(node).attr('hosts'); + var children = []; + // Rest and $http refuse to work. Seems we've hit a nesting limit at this point? + $.ajax({ + url: url, + dataType: 'json', + headers: { 'Authorization': 'Token ' + Authorization.getToken() } + }).done( function(data) { + for (var i=0; i < data.results.length; i++) { + // Add each host to the group node + $(tree_id).jstree("create_node", node, "inside", { + data: { + title: data.results[i].name, + icon: '/' + }, + attr: { + id: data.results[i].id, + type: 'host', + name: data.results[i].name, + description: data.results[i].description, + 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 + } + }); + } + // Open the group node + $(tree_id).jstree("open_node", node); + }); + }); + + // After loading the Inventory top-level data, initialize the tree + if (scope.buildTreeRemove) { + scope.buildTreeRemove(); + } + scope.buildTreeRemove = scope.$on('buildTree', function() { + $(tree_id).jstree({ + "core": { "initially_open":['inventory-node'] }, + "plugins": ['themes', 'json_data', 'ui', 'contextmenu'], + "json_data": { + data: treeData, + ajax: { + url: function(node){ + scope.selected_node = node; + return $(node).attr('children'); + }, + headers: { 'Authorization': 'Token ' + Authorization.getToken() }, + success: function(data) { + var response = []; + for (var i=0; i < data.results.length; i++) { + response.push({ + data: { + title: data.results[i].name + }, + attr: { + id: data.results[i].id, + type: 'group', + name: data.results[i].name, + description: data.results[i].description, + inventory: data.results[i].inventory, + all: data.results[i].related.all_hosts, + children: data.results[i].related.children, + hosts: data.results[i].related.hosts, + variable: data.results[i].related.variable_data + }, + state: 'closed' + }); + } + scope.$emit('loadHosts'); + return response; + } + } + }, + "contextmenu": { + items: scope.treeController + } + }); + }); + + + // Ater inventory top-level hosts, load top-level groups if (scope.HostLoadedRemove) { scope.HostLoadedRemove(); } - scope.HostLoadedRemove = scope.$on('hostsLoaded', function() { Rest.setUrl(groups + '?order_by=name'); Rest.get() @@ -50,45 +142,14 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi state: 'closed' }); } - - var tree_id = '#tree-view'; - //.bind("open_node.jstree close_node.jstree", function (e,data) { - // var currentNode = data.args[0]; - // if (e.type === "open_node") { - //var tree = $.jstree._reference(tree_id); - //tree.refresh(currentNode); - // } - // }) - $(tree_id).jstree({ - "core": { "initially_open":['inventory-node'] }, - "plugins": ['themes', 'json_data', 'ui', 'contextmenu'], - "json_data": { - data: treeData, - ajax: { - url: function(node){ - return $(node).attr('all'); - }, - headers: { 'Authorization': 'Token ' + Authorization.getToken() }, - success: function(data) { - - }, - error: function() { - if (console) { - console.log('Error accessing node data!'); - } - } - } - }, - "contextmenu": { - items: scope.treeController - } - }); + scope.$emit('buildTree'); }) .error( function(data, status, headers, config) { Alert('Error', 'Failed to laod tree data. Url: ' + groups + ' GET status: ' + status); }); }); + // Load inventory top-level hosts Rest.setUrl(hosts + '?order_by=name'); Rest.get() .success ( function(data, status, headers, config) { diff --git a/lib/ui/templates/ui/index.html b/lib/ui/templates/ui/index.html index 1b5bdaa42b..55af5567cc 100644 --- a/lib/ui/templates/ui/index.html +++ b/lib/ui/templates/ui/index.html @@ -4,7 +4,6 @@ Ansible Commander -