From e121235ba9feb16464b43fd60c1b0b9dab923641 Mon Sep 17 00:00:00 2001 From: chouseknecht Date: Thu, 30 May 2013 18:12:36 -0400 Subject: [PATCH] Latest inventory detail page modifications. --- .../ui/static/js/controllers/Groups.js | 7 +- .../ui/static/js/controllers/Hosts.js | 15 +++- .../ui/static/js/controllers/Inventories.js | 69 ++++------------ .../ui/static/js/forms/Inventories.js | 2 +- .../ui/static/js/helpers/inventory.js | 82 ++++--------------- .../ui/static/lib/ansible/form-generator.js | 2 +- 6 files changed, 52 insertions(+), 125 deletions(-) diff --git a/ansibleworks/ui/static/js/controllers/Groups.js b/ansibleworks/ui/static/js/controllers/Groups.js index f2b1fb5ed6..a6840fc8d9 100644 --- a/ansibleworks/ui/static/js/controllers/Groups.js +++ b/ansibleworks/ui/static/js/controllers/Groups.js @@ -19,7 +19,7 @@ function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest, var list = GroupList; var base = $location.path().replace(/^\//,'').split('/')[0]; - var defaultUrl = GetBasePath('groups'); + var defaultUrl = GetBasePath('inventory') + $routeParams.inventory_id + '/groups/'; var view = GenerateList; var scope = view.inject(GroupList, { mode: 'select' }); // Inject our view @@ -29,6 +29,10 @@ function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest, scope.PostRefreshRemove(); } scope.PostRefresRemove = scope.$on('PostRefresh', function() { + $("tr.success").each(function(index) { + var ngc = $(this).attr('ng-class'); + scope[ngc] = ""; + }); if ($routeParams.group_id) { // Remove the current group from the list of available groups, thus // preventing a group from being added to itself @@ -38,6 +42,7 @@ function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest, } } } + //scope.$digest(); }); SearchInit({ scope: scope, set: 'groups', list: list, url: defaultUrl }); diff --git a/ansibleworks/ui/static/js/controllers/Hosts.js b/ansibleworks/ui/static/js/controllers/Hosts.js index abf8b3bda7..f6cc07c193 100644 --- a/ansibleworks/ui/static/js/controllers/Hosts.js +++ b/ansibleworks/ui/static/js/controllers/Hosts.js @@ -20,12 +20,11 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest, var list = HostList var base = $location.path().replace(/^\//,'').split('/')[0]; var base2 = $location.path().replace(/^\//,'').split('/')[2]; - var defaultUrl = GetBasePath('hosts'); + var defaultUrl = GetBasePath('inventory') + $routeParams.inventory_id + '/hosts/'; var view = GenerateList; var mode = (base == 'hosts' || base2 == 'hosts') ? 'edit' : 'select'; var scope = view.inject(list, { mode: mode }); // Inject our view scope.selected = []; - scope['inventory_id'] = $routeParams.inventory_id; if (base == 'hosts' || base2 == 'hosts') { @@ -34,7 +33,17 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest, else { scope['showAddButton'] = true; } - + + // if (scope.PostRefreshRemove) { + // scope.PostRefreshRemove(); + // } + // scope.PostRefresRemove = scope.$on('PostRefresh', function() { + // $("tr.success").each(function(index) { + // var ngc = $(this).attr('ng-class'); + // scope[ngc] = ""; + // }); + // }); + SearchInit({ scope: scope, set: 'hosts', list: list, url: defaultUrl }); PaginateInit({ scope: scope, list: list, url: defaultUrl }); scope.search(list.iterator); diff --git a/ansibleworks/ui/static/js/controllers/Inventories.js b/ansibleworks/ui/static/js/controllers/Inventories.js index 3220e3c6d0..a1ba604a19 100644 --- a/ansibleworks/ui/static/js/controllers/Inventories.js +++ b/ansibleworks/ui/static/js/controllers/Inventories.js @@ -226,7 +226,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP scope.inventoryLoadedRemove(); } scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() { - scope.groupName = 'All Hosts'; + scope.groupTitle = 'All Hosts'; scope.createButtonShow = false; scope.search(relatedSets['hosts'].iterator); }); @@ -342,44 +342,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP scope.treeController = function($node) { var nodeType = $($node).attr('type'); - if (nodeType == 'host') { - return { - edit: { - label: 'Edit Host', - action: function(obj) { changePath($location.path() + '/hosts/' + $(obj).attr('id')); } - }, - delete: { - label: 'Delete Host', - action: function(obj) { - var action_to_take = function() { - var url = defaultUrl + $routeParams.id + '/hosts/'; - Rest.setUrl(url); - Rest.post({ id: $(obj).attr('id'), disassociate: 1 }) - .success( function(data, status, headers, config) { - $('#prompt-modal').modal('hide'); - $('#tree-view').jstree("delete_node",obj); - }) - .error( function(data, status, headers, config) { - $('#prompt-modal').modal('hide'); - ProcessErrors(scope, data, status, null, - { hdr: 'Error!', msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status }); - }); - }; - //Force binds to work. Not working usual way. - $('#prompt-header').text('Delete'); - $('#prompt-body').text('Are you sure you want to delete host ' + $(obj).attr('name') + '?'); - $('#prompt-action-btn').addClass('btn-danger'); - scope.promptAction = action_to_take; // for some reason this binds? - $('#prompt-modal').modal({ - backdrop: 'static', - keyboard: true, - show: true - }); - } - } - } - } - else if (nodeType == 'inventory') { + if (nodeType == 'inventory') { return { addGroup: { label: 'Add Group', @@ -392,22 +355,22 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP addGroup: { label: 'Add Subgroup', action: function(obj) { - LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('id'), title: $(obj).attr('name') }); - changePath($location.path() + '/groups/' + $(obj).attr('id') + '/children'); + LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('group_id'), title: $(obj).attr('name') }); + changePath($location.path() + '/groups/' + $(obj).attr('group_id') + '/children'); }, "_disabled": (nodeType == 'all-hosts-group') ? true : false }, - // addHost: { - // label: 'Add Host', - // action: function(obj) { - // LoadBreadCrumbs({ path: '/groups/' + $(obj).attr('id'), title: $(obj).attr('name') }); - // changePath($location.path() + '/groups/' + $(obj).attr('id') + '/hosts'); - // }, - // "_disabled": (nodeType == 'all-hosts-group') ? true : false - // }, + 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('id')); }, + action: function(obj) { changePath($location.path() + '/groups/' + $(obj).attr('group_id')); }, separator_before: true, "_disabled": (nodeType == 'all-hosts-group') ? true : false }, @@ -455,18 +418,22 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP if (type == 'group') { url = node.attr('all'); scope.createButtonShow = true; - scope.group_id = node.attr('id'); + scope.group_id = node.attr('group_id'); scope.groupName = n.data; + scope.groupTitle = 'Hosts: ' + n.data; + scope.groupTitle += (node.attr('description')) ? ' -' + node.attr('description') : ''; } else if (type == 'all-hosts-group') { url = node.attr('url'); scope.createButtonShow = false; scope.groupName = 'All Hosts'; + scope.groupTitle = 'All Hosts'; } else if (type == 'inventory-node') { url = node.attr('hosts'); scope.createButtonShow = false; scope.groupName = 'All Hosts'; + scope.groupTitle = 'All Hosts'; } relatedSets['hosts'] = { url: url, iterator: 'host' }; RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets }); diff --git a/ansibleworks/ui/static/js/forms/Inventories.js b/ansibleworks/ui/static/js/forms/Inventories.js index 9ad6184a8d..5d284606b2 100644 --- a/ansibleworks/ui/static/js/forms/Inventories.js +++ b/ansibleworks/ui/static/js/forms/Inventories.js @@ -70,7 +70,7 @@ angular.module('InventoryFormDefinition', []) hosts: { type: 'treeview', - title: "{{ groupName }}", + title: "{{ groupTitle }}", iterator: 'host', actions: { add: { diff --git a/ansibleworks/ui/static/js/helpers/inventory.js b/ansibleworks/ui/static/js/helpers/inventory.js index c9f2938254..16c86a42dd 100644 --- a/ansibleworks/ui/static/js/helpers/inventory.js +++ b/ansibleworks/ui/static/js/helpers/inventory.js @@ -23,49 +23,11 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi var inventory_name = inventory.name; var inventory_url = inventory.url; var inventory_id = inventory.id; + var inventory_descr = inventory.description; var tree_id = '#tree-view'; - + var idx=0; 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(); @@ -96,7 +58,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi title: data.results[i].name }, attr: { - id: data.results[i].id, + id: idx, + group_id: data.results[i].id, type: 'group', name: data.results[i].name, description: data.results[i].description, @@ -108,6 +71,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi }, state: 'closed' }); + idx++; } //scope.$emit('loadHosts'); return response; @@ -125,7 +89,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi //selected node text: data.inst.get_json()[0].data //console.log( data.inst.get_json()[0].data + ', ' + data.inst.get_json()[0].attr.id ); if (data.inst.get_json()[0].attr.id != 'inventory-node') { - scope.$emit('NodeSelect',data.inst.get_json()[0]); + scope.$emit('NodeSelect',data.inst.get_json()[0]); } else { $('#all-hosts-group a').click(); @@ -147,7 +111,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi title: data.results[i].name }, attr: { - id: data.results[i].id, + id: idx, + group_id: data.results[i].id, type: 'group', name: data.results[i].name, description: data.results[i].description, @@ -159,6 +124,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi }, state: 'closed' }); + idx++; } scope.$emit('buildTree'); }) @@ -182,12 +148,13 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi url: inventory_url, 'inventory_id': inventory_id, hosts: hosts, - name: inventory_name + name: inventory_name, + description: inventory_descr }, state: 'open', children:[] }); - //treeData[0].children.push({ + var all_hosts_node = { data: { title: 'All Hosts' @@ -198,30 +165,9 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi url: hosts, name: 'All Hosts' }, - state: 'closed', - children: [] + state: 'closed' }; - // - // No longer loading hosts inside the tree. Instead, we'll show hosts in the list view. - // - // for (var i=0; i < data.results.length; i++ ) { - // all_hosts_node.children.push({ - // 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 - // }, - // }); - // } + treeData[0].children.push(all_hosts_node); scope.$emit('hostsLoaded'); }) diff --git a/ansibleworks/ui/static/lib/ansible/form-generator.js b/ansibleworks/ui/static/lib/ansible/form-generator.js index d4eaa14b48..4f440ac6ef 100644 --- a/ansibleworks/ui/static/lib/ansible/form-generator.js +++ b/ansibleworks/ui/static/lib/ansible/form-generator.js @@ -609,7 +609,7 @@ angular.module('FormGenerator', ['GeneratorHelpers']) } } - if (this.form.name == 'inventory') { + if (this.form.name == 'inventory' && options.mode == 'edit') { html += this.buildTree(); } else {