External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 14:57:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Inventory detail page changes. Added accordion. Added custom theme to tree. Fixed tooltips. Added button labels.

Browse Source
This commit is contained in:
chouseknecht
2013-05-30 14:57:38 -04:00
parent 4fae801355
commit f16f41fc99
17 changed files with 538 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ansibleworks/ui/static/js/controllers/Hosts.js
View File

@@ -19,16 +19,25 @@ 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 view = GenerateList;
var mode = (base == 'hosts') ? 'edit' : 'select';
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') {
scope['showAddButton'] = false;
}
else {
scope['showAddButton'] = true;
}
SearchInit({ scope: scope, set: 'hosts', list: list, url: defaultUrl });
PaginateInit({ scope: scope, list: list, url: defaultUrl });
scope.search(list.iterator);
LoadBreadCrumbs();
scope.addHost = function() {
@@ -36,7 +45,7 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
}
scope.editHost = function(id) {
$location.path($location.path() + '/' + id);
$location.path('/inventories/' + $routeParams.inventory_id + '/hosts/' + id);
}
scope.deleteHost = function(id, name) {

80
ansibleworks/ui/static/js/controllers/Inventories.js
View File

@@ -216,7 +216,20 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
var base = $location.path().replace(/^\//,'').split('/')[0];
var master = {};
var id = $routeParams.id;
var relatedSets = {};
var relatedSets = {};
var hostsUrl;
scope['inventory_id'] = id;
// Retrieve each related set and any lookups
if (scope.inventoryLoadedRemove) {
scope.inventoryLoadedRemove();
}
scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
scope.groupName = 'All Hosts';
scope.createButtonShow = false;
scope.search(relatedSets['hosts'].iterator);
});
// Retrieve detail record and prepopulate the form
Rest.setUrl(defaultUrl + ':id/');
@@ -244,19 +257,12 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
field: 'organization'
});
var related = data.related;
for (var set in form.related) {
if (related[set]) {
relatedSets[set] = { url: related[set], iterator: form.related[set].iterator };
}
}
// Load the tree view
TreeInit({ scope: scope, inventory: data });
// Initialize related search functions. Doing it here to make sure relatedSets object is populated.
//RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
//RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
hostsUrl = data.related.hosts;
relatedSets['hosts'] = { url: hostsUrl, iterator: 'host' };
RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
scope.$emit('inventoryLoaded');
})
.error( function(data, status, headers, config) {
@@ -293,7 +299,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
// Related set: Add button
scope.add = function(set) {
$rootScope.flashMessage = null;
$location.path('/' + base + '/' + $routeParams.id + '/' + set + '/add');
$location.path('/' + base + '/' + $routeParams.id + '/groups/' + scope.group_id + '/' + set + '/add');
};
// Related set: Edit button
@@ -391,14 +397,14 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
},
"_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('id'), title: $(obj).attr('name') });
// changePath($location.path() + '/groups/' + $(obj).attr('id') + '/hosts');
// },
// "_disabled": (nodeType == 'all-hosts-group') ? true : false
// },
edit: {
label: 'Edit Group',
action: function(obj) { changePath($location.path() + '/groups/' + $(obj).attr('id')); },
@@ -440,11 +446,39 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
}
}
}
scope.$on('NodeSelect', function(e, n) {
var node = $('li[name="' + n.data + '"]');
var type = node.attr('type');
var url;
$('#tree-view').jstree('open_node',node);
if (type == 'group') {
url = node.attr('all');
scope.createButtonShow = true;
scope.group_id = node.attr('id');
scope.groupName = n.data;
}
else if (type == 'all-hosts-group') {
url = node.attr('url');
scope.createButtonShow = false;
scope.groupName = 'All Hosts';
}
else if (type == 'inventory-node') {
url = node.attr('hosts');
scope.createButtonShow = false;
scope.groupName = 'All Hosts';
}
relatedSets['hosts'] = { url: url, iterator: 'host' };
RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
scope.search('host');
scope.$digest();
});
}
InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
'OrganizationList', 'TreeInit', 'GetBasePath'];
'OrganizationList', 'TreeInit', 'GetBasePath'
];

5
ansibleworks/ui/static/js/controllers/Teams.js
View File

@@ -230,7 +230,10 @@ function TeamsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
TeamLookUpOrganizationInit({ scope: scope });
// Retrieve each related set and any lookups
scope.$on('teamLoaded', function() {
if (scope.teamLoadedRemove) {
scope.teamLoadedRemove();
}
scope.teamLoadedRemove = scope.$on('teamLoaded', function() {
Rest.setUrl(scope['organization_url']);
Rest.get()
.success( function(data, status, headers, config) {

92
ansibleworks/ui/static/js/forms/Inventories.js
View File

@@ -14,6 +14,9 @@ angular.module('InventoryFormDefinition', [])
editTitle: '{{ name }}', //Legend in edit mode
name: 'inventory',
well: true,
collapse: true,
collapseTitle: 'Edit Inventory',
collapseMode: 'edit',
fields: {
name: {
@@ -56,53 +59,56 @@ angular.module('InventoryFormDefinition', [])
}
},
related: { //related colletions (and maybe items?)
// hosts: {
// type: 'collection',
// title: 'Hosts',
// iterator: 'host',
// open: false,
// actions: {
// add: {
// ngClick: "add('hosts')",
// icon: 'icon-plus',
// awToolTip: 'Create a new host'
// },
// },
// fields: {
// name: {
// key: true,
// label: 'Name'
// },
// description: {
// label: 'Description'
// }
// },
// fieldActions: {
// edit: {
// ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
// icon: 'icon-edit',
// awToolTip: 'Edit host'
// },
// delete: {
// ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
// icon: 'icon-remove',
// class: 'btn-danger',
// awToolTip: 'Create a new host'
// }
// }
//
related: {
groups: {
type: 'tree',
title: "{{ name }} Children",
instructions: "Right click on a host or subgroup to make changes or add additional children.",
open: true,
actions: { }
actions: {
}
},
hosts: {
type: 'treeview',
title: "{{ groupName }}",
iterator: 'host',
actions: {
add: {
ngClick: "add('hosts')",
icon: 'icon-plus',
label: 'Add',
awToolTip: 'Create a new host',
ngHide: 'createButtonShow == false'
},
},
fields: {
name: {
key: true,
label: 'Name',
linkTo: "/inventories/\{\{ inventory_id \}\}/hosts/\{\{ host.id \}\}"
},
description: {
label: 'Description'
}
},
fieldActions: {
edit: {
ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
icon: 'icon-edit',
label: 'Edit',
class: 'btn-success',
awToolTip: 'Edit host'
},
delete: {
ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
icon: 'icon-remove',
label: 'Delete',
class: 'btn-danger',
awToolTip: 'Remove host'
}
}
}
}

69
ansibleworks/ui/static/js/helpers/inventory.js
View File

@@ -74,6 +74,12 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
$(tree_id).jstree({
"core": { "initially_open":['inventory-node'] },
"plugins": ['themes', 'json_data', 'ui', 'contextmenu'],
"themes": {
"theme": "ansible",
"dots": false,
"icons": true
},
"ui": { "initially_select": [ 'all-hosts-group' ]},
"json_data": {
data: treeData,
ajax: {
@@ -96,14 +102,14 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
description: data.results[i].description,
inventory: data.results[i].inventory,
all: data.results[i].related.all_hosts,
children: data.results[i].related.children,
children: data.results[i].related.children + '?order_by=name',
hosts: data.results[i].related.hosts,
variable: data.results[i].related.variable_data
},
state: 'closed'
});
}
scope.$emit('loadHosts');
//scope.$emit('loadHosts');
return response;
}
}
@@ -112,9 +118,21 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
items: scope.treeController
}
});
// When user clicks on a group, display the related hosts in the list view
$(tree_id).bind("select_node.jstree", function(evt, data){
//selected node object: data.inst.get_json()[0];
//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]);
}
else {
$('#all-hosts-group a').click();
}
});
});
// Ater inventory top-level hosts, load top-level groups
if (scope.HostLoadedRemove) {
scope.HostLoadedRemove();
@@ -163,6 +181,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
id: 'inventory-node',
url: inventory_url,
'inventory_id': inventory_id,
hosts: hosts,
name: inventory_name
},
state: 'open',
@@ -176,30 +195,33 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
attr: {
type: 'all-hosts-group',
id: 'all-hosts-group',
url: hosts + '?order_by=name',
url: hosts,
name: 'All Hosts'
},
state: 'closed',
children: []
};
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
},
});
}
//
// 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');
})
@@ -207,8 +229,5 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
Alert('Error', 'Failed to laod tree data. Url: ' + hosts + ' GET status: ' + status);
});
}
}]);

3
ansibleworks/ui/static/js/helpers/search.js
View File

@@ -93,9 +93,6 @@ angular.module('SearchHelper', ['RestServices', 'Utilities', 'RefreshHelper'])
}
scope.search = function(iterator) {
//
// need to be able to search by related set. Ex: /api/v1/inventories/?organization__name__icontains=
//
scope[iterator + 'SearchSpin'] = true;
scope[iterator + 'Loading'] = true;
scope[iterator + 'SearchParms'] = '';

8
ansibleworks/ui/static/js/lists/Hosts.js
View File

@@ -20,7 +20,8 @@ angular.module('HostListDefinition', [])
fields: {
name: {
key: true,
label: 'Name'
label: 'Name',
linkTo: "/inventories/\{\{ inventory_id \}\}/hosts/\{\{ host.id \}\}"
},
description: {
label: 'Description'
@@ -33,6 +34,7 @@ angular.module('HostListDefinition', [])
label: 'Add',
mode: 'all', // One of: edit, select, all
ngClick: 'addHost()',
ngHide: 'showAddButton == false',
class: 'btn-success btn-small',
awToolTip: 'Create a new host'
}
@@ -42,8 +44,8 @@ angular.module('HostListDefinition', [])
edit: {
label: 'Edit',
ngClick: "editHost(\{\{ host.id \}\})",
icon: 'icon-edit btn-success',
class: 'btn-small',
icon: 'icon-edit',
class: 'btn-small btn-success',
awToolTip: 'View/Edit host'
},