External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-18 21:21:21 -03:30
Code Issues Packages Projects Releases Wiki Activity

Got our custom tree working on both the Groups page and the Hosts page.

Browse Source
This commit is contained in:
chouseknecht 2013-10-21 15:15:12 -04:00
parent 8bd00cfacb
commit 4cf47bfa9e
5 changed files with 98 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
awx/ui/static/js/controllers/Groups.js
View File

@ -33,7 +33,6 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
}
scope.inventoryLoadedRemove = scope.$on('inventoryLoaded', function() {
LoadBreadCrumbs({ path: '/inventories/' + id, title: scope.inventory_name });
//TreeInit(scope.TreeParams);
BuildTree({
scope: scope,
inventory_id: id,

24
awx/ui/static/js/controllers/Hosts.js
View File

@ -13,10 +13,10 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
GetBasePath, HostsList, HostsAdd, HostsEdit, HostsDelete,
HostsReload, LoadSearchTree, EditHostGroups, InventoryHostsHelp, HelpDialog)
HostsReload, BuildTree, EditHostGroups, InventoryHostsHelp, HelpDialog)
{
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope.
//scope.
var generator = GenerateForm;
var form = InventoryHostsForm;
@ -31,6 +31,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
scope['hosts'] = null;
scope['helpCount'] = 0;
// buildAllGroups emits from TreeSelector.js after the inventory object is ready
if (scope.loadBreadCrumbsRemove) {
scope.loadBreadCrumbsRemove();
}
@ -38,10 +39,6 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
LoadBreadCrumbs({ path: '/inventories/' + id, title: inventory_name });
});
// Sets up the search tree and loads All Hosts for the inventory
LoadSearchTree({ scope: scope, inventory_id: scope['inventory_id'] });
scope.filterHosts = function() {
HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: scope['group_id'] });
}
@ -112,11 +109,11 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
HelpDialog({ defn: InventoryHostsHelp });
}
// Respond to the scope.$emit from awTree directive
// Refresh host is emitted each time a group on the selector tree is clicked
if (scope.refreshHostRemove) {
scope.refreshHostRemove();
}
scope.refreshHostRemove = scope.$on('refreshHost', function(e, group, title) {
scope.refreshHostRemove = scope.$on('refreshHost', function(e, id, group, title) {
scope.groupTitle = title;
scope.group_id = group;
scope.helpCount++;
@ -135,12 +132,21 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
scope['hostDeleteDisabledClass'] = 'disabled';
HostsReload({ scope: scope, inventory_id: scope['inventory_id'], group_id: group });
});
// Load the tree. See TreeSelector.js
BuildTree({
scope: scope,
inventory_id: id,
emit_on_select: 'refreshHost',
target_id: 'search-tree-container'
});
}
InventoryHosts.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryHostsForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
'GetBasePath', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete',
'HostsReload', 'LoadSearchTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog'
'HostsReload', 'BuildTree', 'EditHostGroups', 'InventoryHostsHelp', 'HelpDialog'
];

47
awx/ui/static/js/helpers/Groups.js
View File

@ -10,7 +10,7 @@
angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService', 'GroupsHelper',
'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper', 'RefreshHelper',
'PromptDialog', 'InventorySummaryHelpDefinition'
'PromptDialog', 'InventorySummaryHelpDefinition', 'TreeSelector'
])
.factory('GetSourceTypeOptions', [ function() {
@ -175,9 +175,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
.factory('InventoryStatus', [ '$rootScope', '$routeParams', 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary',
'GenerateList', 'ClearScope', 'SearchInit', 'PaginateInit', 'Refresh', 'InventoryUpdate', 'GroupsEdit', 'ShowUpdateStatus', 'HelpDialog',
'ShowGroupHelp', 'InventorySummaryHelp', 'RefreshTree',
'ShowGroupHelp', 'InventorySummaryHelp', 'BuildTree',
function($rootScope, $routeParams, Rest, Alert, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope, SearchInit,
PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp, RefreshTree) {
PaginateInit, Refresh, InventoryUpdate, GroupsEdit, ShowUpdateStatus, HelpDialog, ShowGroupHelp, InventorySummaryHelp, BuildTree) {
return function(params) {
//Build a summary of a given inventory
@ -449,10 +449,18 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
// Respond to refresh button
scope.refresh = function() {
scope['groupSearchSpin'] = true;
scope['groupLoading'] = false;
RefreshTree({ scope: scope });
//setTimeout( function () { Refresh({ scope: scope, set: 'groups', iterator: 'group', url: scope['current_url'] }); }, 500);
//scope['groupSearchSpin'] = true;
//scope['groupLoading'] = false;
scope.search(list.iterator, false, true);
BuildTree({
scope: scope,
inventory_id: scope['inventory_id'],
emit_on_select: 'NodeSelect',
target_id: 'search-tree-container',
refresh: true
});
}
// Start the update process
@ -615,10 +623,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}])
.factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm',
'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'GetSourceTypeOptions', 'InventoryUpdate',
'GetUpdateIntervalOptions',
'Prompt', 'ProcessErrors', 'GetBasePath', 'SetNodeName', 'ParseTypeChange', 'GetSourceTypeOptions', 'InventoryUpdate',
'GetUpdateIntervalOptions', 'ClickNode',
function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
GetBasePath, RefreshGroupName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, GetUpdateIntervalOptions) {
GetBasePath, SetNodeName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, GetUpdateIntervalOptions, ClickNode) {
return function(params) {
var group_id = params.group_id;
@ -787,11 +795,13 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
scope.removeSaveComplete();
}
scope.removeSaveComplete = scope.$on('SaveComplete', function(e, error) {
if (!error) {
if (!error) {
// Reset the form, adjust buttons and let user know changese saved
scope[form.name + '_form'].$setPristine();
scope['groupUpdateHide'] = (scope['source'].value !== null && scope['source'].value !== '') ? false : true;
Alert("Changes Saved", "Your changes to inventory group " + scope['name'] + " were successfully saved.", 'alert-info');
//scope[form.name + '_form'].$setPristine();
//scope['groupUpdateHide'] = (scope['source'].value !== null && scope['source'].value !== '') ? false : true;
//Alert("Changes Saved", "Your changes to inventory group " + scope['name'] + " were successfully saved.", 'alert-info');
scope['flashMessage'] = 'Your changes to ' + scope['name'] + ' were saved.';
ClickNode({ selector: '#inventory-root-node' });
}
});
@ -802,6 +812,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
var parseError = false;
var saveError = false;
// Update the selector tree with new group name, descr
SetNodeName({ scope: scope['selectedNode'], group_id: group_id,
name: scope.name, description: scope.description });
if (scope.source.value !== null && scope.source.value !== '') {
var data = { group: group_id,
@ -853,6 +867,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
});
}
}
else {
// No source value
scope.$emit('SaveComplete', false);
}
});
// Save changes to the parent
@ -891,7 +909,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
{ hdr: 'Error!', msg: 'Failed to update group variables. PUT status: ' + status });
});
}
RefreshGroupName(scope['selectedNode'], data.name, data.description);
scope.$emit('formSaveSuccess', data.id);
})
.error( function(data, status, headers, config) {

6
awx/ui/static/less/ansible-ui.less
View File

@ -982,12 +982,16 @@ select.field-mini-height {
padding: 10px 3px 10px 10px;
.title {
color: #888;
color: @grey;
font-weight: normal;
margin-bottom: 5px;
margin-top: 0;
}
.icon-sitemap {
color: @grey;
}
ul {
list-style-type: none;
padding-left: 16px;

50
awx/ui/static/lib/ansible/TreeSelector.js
View File

@ -7,7 +7,7 @@
*
*/
angular.module('TreeSelector', ['Utilities', 'RestServices'])
angular.module('TreeSelector', ['Utilities', 'RestServices'])
.factory('BuildTree', ['Rest', 'GetBasePath', 'ProcessErrors', '$compile', '$rootScope', 'Wait', 'SortNodes',
function(Rest, GetBasePath, ProcessErrors, $compile, $rootScope, Wait, SortNodes) {
return function(params) {
@ -16,6 +16,7 @@
var inventory_id = params.inventory_id;
var emit_on_select = params.emit_on_select;
var target_id = params.target_id;
var refresh_tree = (params.refresh == undefined || params.refresh == false) ? false : true;
var html = '';
var toolTip = 'Hosts have failed jobs?';
@ -207,7 +208,7 @@
Rest.get()
.success( function(data, status, headers, config) {
html += "<div class=\"title\">Group Selector:</div>\n" +
"<ul class=\"tree-root\">\n" +
"<ul id=\"inventory-tree\" class=\"tree-root\">\n" +
"<li id=\"inventory-root-node\" data-state=\"opened\" data-hosts=\"" + data.related.hosts + "\" " +
"data-description=\"" + data.description + "\" " +
"data-failures=\"" + data.has_active_failures + "\" " +
@ -216,12 +217,53 @@
">" +
"<i class=\"icon-sitemap\"></i> " +
"<a href=\"\" class=\"activate active\">" + data.name + "</a>";
scope.$emit('buildAllGroups', data.name, data.related.tree, data.related.groups);
scope.$emit(emit_on_select, 'inventory-root-node', null, 'All Hosts');
if (!refresh_tree) {
// if caller requests refresh, let caller handle next steps / node selection
scope.$emit(emit_on_select, 'inventory-root-node', null, 'All Hosts');
}
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to get inventory: ' + inventory_id + '. GET returned: ' + status });
});
}
}])
}])
// Set node name and description after an update to Group properties.
.factory('SetNodeName', [ function() {
return function(params) {
var scope = params.scope;
var name = params.name;
var descr = params.description;
var group_id = (params.group_id !== undefined) ? params.group_id : null;
var inventory_id = (params.inventory_id != undefined) ? params.inventory_id : null;
if (group_id !== null) {
$('#inventory-tree').find('li [data-group-id="' + group_id + '"]').each(function(idx) {
$(this).attr('data-name',name);
$(this).attr('data-description',descr);
$(this).find('.activate').first().text(name);
});
}
if (inventory_id !== null) {
$('#inventory-root-node').attr('data-name', name).attr('data-description', descr).find('.activate').first().text(name);
}
}
}])
.factory('ClickNode', [ function() {
return function(params) {
var selector = params.selector; //jquery selector string to find the correct <li>
$(selector + ' .activate').first().click();
}
}]);