1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 15:21:13 +03:00

Latest UI Inventory updates

This commit is contained in:
chouseknecht 2013-05-14 01:52:04 -04:00
parent fe5a454441
commit 2612ebd792
22 changed files with 682 additions and 433 deletions

View File

@ -222,3 +222,13 @@
.ask-checkbox { .ask-checkbox {
margin-left: 10px; margin-left: 10px;
} }
#tree-view {
padding: 0;
margin: 5px 0 15px 0;
}
.no-padding {
margin: 0;
padding: 0;
}

View File

@ -33,7 +33,6 @@ angular.module('ansible', [
'AWFilters', 'AWFilters',
'HostFormDefinition', 'HostFormDefinition',
'HostListDefinition', 'HostListDefinition',
'HostHelper',
'GroupFormDefinition', 'GroupFormDefinition',
'GroupListDefinition', 'GroupListDefinition',
'TeamsListDefinition', 'TeamsListDefinition',
@ -70,7 +69,25 @@ angular.module('ansible', [
controller: GroupsAdd }). controller: GroupsAdd }).
when('/inventories/:inventory_id/groups/:id', { templateUrl: urlPrefix + 'partials/inventories.html', when('/inventories/:inventory_id/groups/:id', { templateUrl: urlPrefix + 'partials/inventories.html',
controller: GroupsEdit }). controller: GroupsEdit }).
when('/inventories/:inventory_id/groups/:group_id/children',
{ templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsList }).
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',
{ templateUrl: urlPrefix + 'partials/inventories.html', controller: GroupsEdit }).
when('/inventories/:inventory_id/groups/:group_id/hosts',
{ templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsList }).
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',
{ templateUrl: urlPrefix + 'partials/inventories.html', controller: HostsEdit }).
when('/organizations', { templateUrl: urlPrefix + 'partials/organizations.html', when('/organizations', { templateUrl: urlPrefix + 'partials/organizations.html',
controller: OrganizationsList }). controller: OrganizationsList }).

View File

@ -12,16 +12,17 @@
function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest, function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
Alert, GroupList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, Alert, GroupList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit,
PaginateInit, ReturnToCaller, ClearScope, ProcessErrors) PaginateInit, ReturnToCaller, ClearScope, ProcessErrors, GetBasePath)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
var list = GroupList; var list = GroupList;
var defaultUrl = '/api/v1/inventories/' + $routeParams.id + '/groups/'; var base = $location.path().replace(/^\//,'').split('/')[0];
var defaultUrl = GetBasePath('groups');
var view = GenerateList; var view = GenerateList;
var paths = $location.path().replace(/^\//,'').split('/');
var scope = view.inject(GroupList, { mode: 'edit' }); // Inject our view var scope = view.inject(GroupList, { mode: 'select' }); // Inject our view
scope.selected = []; scope.selected = [];
SearchInit({ scope: scope, set: 'groups', list: list, url: defaultUrl }); SearchInit({ scope: scope, set: 'groups', list: list, url: defaultUrl });
@ -61,21 +62,90 @@ function GroupsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
}); });
} }
scope.finishSelection = function() {
var url = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/children/' :
GetBasePath('inventory') + $routeParams.inventory_id + '/groups/';
Rest.setUrl(url);
scope.queue = [];
if (scope.callFinishedRemove) {
scope.callFinishedRemove();
}
scope.callFinishedRemove = scope.$on('callFinished', function() {
// We call the API for each selected item. We need to hang out until all the api
// calls are finished.
if (scope.queue.length == scope.selected.length) {
// All the api calls finished
$('input[type="checkbox"]').prop("checked",false);
scope.selected = [];
var errors = 0;
for (var i=0; i < scope.queue.length; i++) {
if (scope.queue[i].result == 'error') {
errors++;
}
}
if (errors > 0) {
Alert('Error', 'There was an error while adding one or more of the selected groups.');
}
else {
ReturnToCaller(1);
}
}
});
if (scope.selected.length > 0 ) {
var group;
for (var i=0; i < scope.selected.length; i++) {
group = null;
for (var j=0; j < scope.groups.length; j++) {
if (scope.groups[j].id == scope.selected[i]) {
group = scope.groups[j];
}
}
if (group !== null) {
Rest.post(group)
.success( function(data, status, headers, config) {
scope.queue.push({ result: 'success', data: data, status: status });
scope.$emit('callFinished');
})
.error( function(data, status, headers, config) {
scope.queue.push({ result: 'error', data: data, status: status, headers: headers });
scope.$emit('callFinished');
});
}
}
}
else {
ReturnToCaller(1);
}
}
scope.toggle_group = function(idx) {
if (scope.selected.indexOf(idx) > -1) {
scope.selected.splice(scope.selected.indexOf(idx),1);
}
else {
scope.selected.push(idx);
}
}
} }
GroupsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupList', 'GenerateList', GroupsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupList', 'GenerateList',
'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit']; 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
'GetBasePath' ];
function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, GroupForm, function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, GroupForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller,
ClearScope, LookUpInventoryInit) ClearScope, GetBasePath)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
// Inject dynamic view // Inject dynamic view
var defaultUrl = '/api/v1/inventories/'; var defaultUrl = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/children/' :
GetBasePath('inventory') + $routeParams.inventory_id + '/';
var form = GroupForm; var form = GroupForm;
var generator = GenerateForm; var generator = GenerateForm;
var scope = generator.inject(form, {mode: 'add', related: false}); var scope = generator.inject(form, {mode: 'add', related: false});
@ -84,30 +154,18 @@ function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
LoadBreadCrumbs(); LoadBreadCrumbs();
LookUpInventoryInit({ scope: scope });
// Load inventory lookup value
var url = defaultUrl + $routeParams.id + '/';
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
scope['inventory'] = data.id;
master['inventory'] = data.id;
scope['inventory_name'] = data.name;
master['inventory_name'] = data.name;
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to retrieve: ' + url + '. GET status: ' + status });
});
// Save // Save
scope.formSave = function() { scope.formSave = function() {
Rest.setUrl(defaultUrl + $routeParams.id + '/groups/'); Rest.setUrl(defaultUrl);
var data = {} var data = {}
for (var fld in form.fields) { for (var fld in form.fields) {
data[fld] = scope[fld]; data[fld] = scope[fld];
} }
if ($routeParams.group_id) {
data['inventory'] = $routeParams.inventory_id;
}
Rest.post(data) Rest.post(data)
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
ReturnToCaller(1); ReturnToCaller(1);
@ -127,47 +185,38 @@ function GroupsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
} }
GroupsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'GroupForm', 'GenerateForm', GroupsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'GroupForm', 'GenerateForm',
'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ];
function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, GroupForm, function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, GroupForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInventoryInit) RelatedPaginateInit, ReturnToCaller, ClearScope, GetBasePath)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
var defaultUrl='/api/v1/groups/';
var generator = GenerateForm; var generator = GenerateForm;
var form = GroupForm; var form = GroupForm;
var defaultUrl = GetBasePath('groups') + $routeParams.id + '/';
var scope = generator.inject(form, {mode: 'edit', related: true}); var scope = generator.inject(form, {mode: 'edit', related: true});
generator.reset(); generator.reset();
var master = {}; var master = {};
var id = $routeParams.id; var id = $routeParams.id;
var relatedSets = {}; var relatedSets = {};
LookUpInventoryInit({ scope: scope });
// After the Organization is loaded, retrieve each related set // After the Organization is loaded, retrieve each related set
scope.$on('groupLoaded', function() { if (scope.groupLoadedRemove) {
Rest.setUrl(scope['inventory_url']); scope.groupLoadedRemove();
Rest.get() }
.success( function(data, status, headers, config) { scope.groupLoadedRemove = scope.$on('groupLoaded', function() {
scope['inventory_name'] = data.name;
master['inventory_name'] = data.name;
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.orgnization_url + '. GET status: ' + status });
});
for (var set in relatedSets) { for (var set in relatedSets) {
scope.search(relatedSets[set].iterator); scope.search(relatedSets[set].iterator);
} }
}); });
// Retrieve detail record and prepopulate the form // Retrieve detail record and prepopulate the form
Rest.setUrl(defaultUrl + ':id/'); Rest.setUrl(defaultUrl);
Rest.get({ params: {id: id} }) Rest.get()
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
LoadBreadCrumbs(); LoadBreadCrumbs();
for (var fld in form.fields) { for (var fld in form.fields) {
@ -185,7 +234,6 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
// Initialize related search functions. Doing it here to make sure relatedSets object is populated. // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets }); RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
RelatedPaginateInit({ scope: scope, relatedSets: relatedSets }); RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
scope['inventory_url'] = data.related.inventory;
scope.$emit('groupLoaded'); scope.$emit('groupLoaded');
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
@ -195,7 +243,7 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
// Save changes to the parent // Save changes to the parent
scope.formSave = function() { scope.formSave = function() {
Rest.setUrl(defaultUrl + id + '/'); Rest.setUrl(defaultUrl);
var data = {} var data = {}
for (var fld in form.fields) { for (var fld in form.fields) {
data[fld] = scope[fld]; data[fld] = scope[fld];
@ -203,11 +251,11 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
Rest.put(data) Rest.put(data)
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
var base = $location.path().replace(/^\//,'').split('/')[0]; var base = $location.path().replace(/^\//,'').split('/')[0];
(base == 'inventories') ? ReturnToCaller() : ReturnToCaller(1); (base == 'groups') ? ReturnToCaller() : ReturnToCaller(1);
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, form, ProcessErrors(scope, data, status, form,
{ hdr: 'Error!', msg: 'Failed to update host: ' + $routeParams.id + '. PUT status: ' + status }); { hdr: 'Error!', msg: 'Failed to update group: ' + $routeParams.id + '. PUT status: ' + status });
}); });
}; };
@ -221,7 +269,7 @@ function GroupsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams
} }
HostsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', GroupsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ];

View File

@ -12,23 +12,23 @@
function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest, function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
Alert, HostList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, Alert, HostList, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit,
ReturnToCaller, ClearScope, ProcessErrors) ReturnToCaller, ClearScope, ProcessErrors, GetBasePath)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
var list = HostList; var list = HostList
var defaultUrl = '/api/v1/inventories/' + $routeParams.id + '/hosts/'; var base = $location.path().replace(/^\//,'').split('/')[0];
var defaultUrl = GetBasePath('hosts');
var view = GenerateList; var view = GenerateList;
var paths = $location.path().replace(/^\//,'').split('/'); var mode = (base == 'hosts') ? 'edit' : 'select';
var scope = view.inject(HostList, { mode: 'edit' }); // Inject our view var scope = view.inject(list, { mode: mode }); // Inject our view
scope.selected = []; scope.selected = [];
SearchInit({ scope: scope, set: 'hosts', list: list, url: defaultUrl }); SearchInit({ scope: scope, set: 'hosts', list: list, url: defaultUrl });
PaginateInit({ scope: scope, list: list, url: defaultUrl }); PaginateInit({ scope: scope, list: list, url: defaultUrl });
scope.search(list.iterator); scope.search(list.iterator);
LoadBreadCrumbs(); LoadBreadCrumbs();
scope.addHost = function() { scope.addHost = function() {
@ -62,21 +62,89 @@ function HostsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
}); });
} }
scope.finishSelection = function() {
var url = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/hosts/' :
GetBasePath('inventory') + $routeParams.inventory_id + '/hosts/';
Rest.setUrl(url); // We're assuming the path matches the api path.
// Will this always be true??
scope.queue = [];
scope.$on('callFinished', function() {
// We call the API for each selected item. We need to hang out until all the api
// calls are finished.
if (scope.queue.length == scope.selected.length) {
// All the api calls finished
$('input[type="checkbox"]').prop("checked",false);
scope.selected = [];
var errors = 0;
for (var i=0; i < scope.queue.length; i++) {
if (scope.queue[i].result == 'error') {
errors++;
}
}
if (errors > 0) {
Alert('Error', 'There was an error while adding one or more of the selected hosts.');
}
else {
ReturnToCaller(1);
}
}
});
if (scope.selected.length > 0 ) {
var host;
for (var i=0; i < scope.selected.length; i++) {
host = null;
for (var j=0; j < scope.hosts.length; j++) {
if (scope.hosts[j].id == scope.selected[i]) {
host = scope.hosts[j];
}
}
if (host !== null) {
Rest.post(host)
.success( function(data, status, headers, config) {
scope.queue.push({ result: 'success', data: data, status: status });
scope.$emit('callFinished');
})
.error( function(data, status, headers, config) {
scope.queue.push({ result: 'error', data: data, status: status, headers: headers });
scope.$emit('callFinished');
});
}
}
}
else {
ReturnToCaller(1);
}
}
scope.toggle_host = function(idx) {
if (scope.selected.indexOf(idx) > -1) {
scope.selected.splice(scope.selected.indexOf(idx),1);
}
else {
scope.selected.push(idx);
}
}
} }
HostsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostList', 'GenerateList', HostsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostList', 'GenerateList',
'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors' ]; 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors',
'GetBasePath' ];
function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, HostForm, function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, HostForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller,
ClearScope, LookUpInventoryInit) ClearScope, GetBasePath )
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
// Inject dynamic view // Inject dynamic view
var defaultUrl = '/api/v1/inventories/'; var defaultUrl = ($routeParams.group_id) ? GetBasePath('groups') + $routeParams.group_id + '/hosts/' :
GetBasePath('inventory') + $routeParams.inventory_id + '/hosts/';
var form = HostForm; var form = HostForm;
var generator = GenerateForm; var generator = GenerateForm;
var scope = generator.inject(form, {mode: 'add', related: false}); var scope = generator.inject(form, {mode: 'add', related: false});
@ -85,30 +153,18 @@ function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
LoadBreadCrumbs(); LoadBreadCrumbs();
LookUpInventoryInit({ scope: scope });
// Load inventory lookup value
var url = defaultUrl + $routeParams.id + '/';
Rest.setUrl(url);
Rest.get()
.success( function(data, status, headers, config) {
scope['inventory'] = data.id;
master['inventory'] = data.id;
scope['inventory_name'] = data.name;
master['inventory_name'] = data.name;
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to retrieve: ' + url + '. GET status: ' + status });
});
// Save // Save
scope.formSave = function() { scope.formSave = function() {
Rest.setUrl(defaultUrl + $routeParams.id + '/hosts/'); Rest.setUrl(defaultUrl);
var data = {} var data = {}
for (var fld in form.fields) { for (var fld in form.fields) {
data[fld] = scope[fld]; data[fld] = scope[fld];
} }
if ($routeParams.group_id) {
data['inventory'] = $routeParams.inventory_id;
}
Rest.post(data) Rest.post(data)
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
ReturnToCaller(1); ReturnToCaller(1);
@ -128,39 +184,28 @@ function HostsAdd ($scope, $rootScope, $compile, $location, $log, $routeParams,
} }
HostsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', 'GenerateForm', HostsAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', 'GenerateForm',
'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ];
function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, UserForm, function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, HostForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInventoryInit) RelatedPaginateInit, ReturnToCaller, ClearScope, GetBasePath)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
var defaultUrl='/api/v1/hosts/'; var defaultUrl = GetBasePath('hosts');
var generator = GenerateForm; var generator = GenerateForm;
var form = UserForm; var base = $location.path().replace(/^\//,'').split('/')[0];
var form = HostForm;
var scope = generator.inject(form, {mode: 'edit', related: true}); var scope = generator.inject(form, {mode: 'edit', related: true});
generator.reset(); generator.reset();
var master = {}; var master = {};
var id = $routeParams.id; var id = $routeParams.id;
var relatedSets = {}; var relatedSets = {};
LookUpInventoryInit({ scope: scope });
// After form data loads, load related sets and lookups // After form data loads, load related sets and lookups
scope.$on('hostLoaded', function() { scope.$on('hostLoaded', function() {
Rest.setUrl(scope['inventory_url']);
Rest.get()
.success( function(data, status, headers, config) {
scope['inventory_name'] = data.name;
master['inventory_name'] = data.name;
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.inventory_url + '. GET status: ' + status });
});
for (var set in relatedSets) { for (var set in relatedSets) {
scope.search(relatedSets[set].iterator); scope.search(relatedSets[set].iterator);
} }
@ -186,7 +231,6 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
// Initialize related search functions. Doing it here to make sure relatedSets object is populated. // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets }); RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
RelatedPaginateInit({ scope: scope, relatedSets: relatedSets }); RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
scope['inventory_url'] = data.related.inventory;
scope.$emit('hostLoaded'); scope.$emit('hostLoaded');
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
@ -203,8 +247,7 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
} }
Rest.put(data) Rest.put(data)
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
var base = $location.path().replace(/^\//,'').split('/')[0]; (base == 'hosts') ? ReturnToCaller() : ReturnToCaller(1);
(base == 'inventories') ? ReturnToCaller() : ReturnToCaller(1);
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, form, ProcessErrors(scope, data, status, form,
@ -224,5 +267,5 @@ function HostsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
HostsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm', HostsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'HostForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInventoryInit' ]; 'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'GetBasePath' ];

View File

@ -12,7 +12,7 @@
function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, InventoryList, function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, InventoryList,
GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
ClearScope, ProcessErrors, SetListeners) ClearScope, ProcessErrors)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
@ -24,7 +24,6 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
var scope = view.inject(InventoryList, { mode: mode }); // Inject our view var scope = view.inject(InventoryList, { mode: mode }); // Inject our view
scope.selected = []; scope.selected = [];
SetListeners({ scope: scope, set: 'inventories', iterator: list.iterator });
SearchInit({ scope: scope, set: 'inventories', list: list, url: defaultUrl }); SearchInit({ scope: scope, set: 'inventories', list: list, url: defaultUrl });
PaginateInit({ scope: scope, list: list, url: defaultUrl }); PaginateInit({ scope: scope, list: list, url: defaultUrl });
scope.search(list.iterator); scope.search(list.iterator);
@ -86,13 +85,6 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
for (var i=0; i < scope.queue.length; i++) { for (var i=0; i < scope.queue.length; i++) {
if (scope.queue[i].result == 'error') { if (scope.queue[i].result == 'error') {
errors++; errors++;
// there is no way to know which user raised the error. no data comes
// back from the api call.
// $('td.username-column').each(function(index) {
// if ($(this).text() == scope.queue[i].username) {
// $(this).addClass("error");
// }
// });
} }
} }
if (errors > 0) { if (errors > 0) {
@ -141,13 +133,12 @@ function InventoriesList ($scope, $rootScope, $location, $log, $routeParams, Res
} }
InventoriesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'InventoryList', 'GenerateList', InventoriesList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'InventoryList', 'GenerateList',
'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'ProcessErrors' ];
'SetListeners' ];
function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm, function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope,
GenerateList, OrganizationList, SearchInit, PaginateInit, LookUpOrganizationInit) GenerateList, OrganizationList, SearchInit, PaginateInit, LookUpInit)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
@ -159,7 +150,14 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
var scope = generator.inject(form, {mode: 'add', related: false}); var scope = generator.inject(form, {mode: 'add', related: false});
generator.reset(); generator.reset();
LoadBreadCrumbs(); LoadBreadCrumbs();
LookUpOrganizationInit({ scope: scope });
LookUpInit({
scope: scope,
form: form,
current_item: ($routeParams.organization_id) ? $routeParams.organization_id : null,
list: OrganizationList,
field: 'organization'
});
// Save // Save
scope.formSave = function() { scope.formSave = function() {
@ -187,44 +185,32 @@ function InventoriesAdd ($scope, $rootScope, $compile, $location, $log, $routePa
InventoriesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', 'GenerateForm', InventoriesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', 'GenerateForm',
'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GenerateList', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 'ClearScope', 'GenerateList',
'OrganizationList', 'SearchInit', 'PaginateInit', 'LookUpOrganizationInit' ]; 'OrganizationList', 'SearchInit', 'PaginateInit', 'LookUpInit' ];
function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm, function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, InventoryForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpOrganizationInit, Prompt, RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
TreeInit) OrganizationList, TreeInit, GetBasePath)
{ {
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope. //scope.
var defaultUrl='/api/v1/inventories/';
var generator = GenerateForm; var generator = GenerateForm;
var form = InventoryForm; var form = InventoryForm;
var defaultUrl=GetBasePath('inventory');
var scope = generator.inject(form, {mode: 'edit', related: true}); var scope = generator.inject(form, {mode: 'edit', related: true});
generator.reset(); generator.reset();
var base = $location.path().replace(/^\//,'').split('/')[0]; var base = $location.path().replace(/^\//,'').split('/')[0];
var master = {}; var master = {};
var id = $routeParams.id; var id = $routeParams.id;
var relatedSets = {}; var relatedSets = {};
LookUpOrganizationInit({ scope: scope });
// After inventory is loaded, retrieve each related set and any lookups // After inventory is loaded, retrieve each related set and any lookups
scope.$on('inventoryLoaded', function() { scope.$on('inventoryLoaded', function() {
Rest.setUrl(scope['organization_url']);
Rest.get()
.success( function(data, status, headers, config) {
scope['organization_name'] = data.name;
master['organization_name'] = data.name;
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to retrieve: ' + scope.orgnization_url + '. GET status: ' + status });
});
for (var set in relatedSets) { for (var set in relatedSets) {
scope.search(relatedSets[set].iterator); scope.search(relatedSets[set].iterator);
} }
}); });
// Retrieve detail record and prepopulate the form // Retrieve detail record and prepopulate the form
@ -237,7 +223,22 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
scope[fld] = data[fld]; scope[fld] = data[fld];
master[fld] = scope[fld]; master[fld] = scope[fld];
} }
if (form.fields[fld].type == 'lookup' && data.summary_fields[form.fields[fld].sourceModel]) {
scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
data.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
master[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField];
}
} }
LookUpInit({
scope: scope,
form: form,
current_item: data.organization,
list: OrganizationList,
field: 'organization'
});
var related = data.related; var related = data.related;
for (var set in form.related) { for (var set in form.related) {
if (related[set]) { if (related[set]) {
@ -246,12 +247,11 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
} }
// Load the tree view // Load the tree view
TreeInit(related.groups); TreeInit({ scope: scope, inventory: data });
// Initialize related search functions. Doing it here to make sure relatedSets object is populated. // Initialize related search functions. Doing it here to make sure relatedSets object is populated.
RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets }); RelatedSearchInit({ scope: scope, form: form, relatedSets: relatedSets });
RelatedPaginateInit({ scope: scope, relatedSets: relatedSets }); RelatedPaginateInit({ scope: scope, relatedSets: relatedSets });
scope['organization_url'] = data.related.organization;
scope.$emit('inventoryLoaded'); scope.$emit('inventoryLoaded');
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
@ -261,7 +261,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
// Save changes to the parent // Save changes to the parent
scope.formSave = function() { scope.formSave = function() {
Rest.setUrl(defaultUrl + $routeParams.id); Rest.setUrl(defaultUrl + $routeParams.id + '/');
var data = {} var data = {}
for (var fld in form.fields) { for (var fld in form.fields) {
data[fld] = scope[fld]; data[fld] = scope[fld];
@ -321,12 +321,142 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
action: action action: action
}); });
};
function changePath(path) {
// For reasons unknown, calling $location.path(<new path>) from inside
// treeController fails to work. This is the work-around.
window.location = '/#' + path;
};
scope.treeController = function($node) {
if ($($node).attr('type') == '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
});
}
},
vairables: {
label: 'Host Variables',
separator_before: true,
"_disabled": true,
action: function(obj) { }
}
}
}
else if ($($node).attr('type') == 'inventory') {
return {
addGroup: {
label: 'Add Group',
action: function() { changePath($location.path() + '/groups'); }
},
addHost: {
label: 'Add Host',
action: function() { changePath($location.path() + '/hosts'); }
},
variables: {
label: 'Inventory variables',
action: function(obj) { },
"_disabled": true,
separator_before: true
}
}
}
else {
return {
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');
}
},
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');
}
},
edit: {
label: 'Edit Group',
action: function(obj) { changePath($location.path() + '/groups/' + $(obj).attr('id')); },
separator_before: true
},
delete: {
label: 'Delete Group',
action: function(obj) {
var action_to_take = function() {
var url = defaultUrl + $routeParams.id + '/groups/';
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.
var parent = $.jstree._reference('#tree-view')._get_parent(obj);
$('#prompt-header').text('Delete Group');
$('#prompt-body').text('Are you sure you want to remove group ' + $(obj).attr('name') +
' from ' + $(parent).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
});
}
},
variables: {
label: 'Group variables',
action: function(obj) { },
"_disabled": true,
separator_before: true
}
}
}
} }
} }
InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm', InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'InventoryForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit',
'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpOrganizationInit', 'Prompt', 'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
'TreeInit' ]; 'OrganizationList', 'TreeInit', 'GetBasePath'];

View File

@ -79,13 +79,6 @@ function UsersList ($scope, $rootScope, $location, $log, $routeParams, Rest,
for (var i=0; i < scope.queue.length; i++) { for (var i=0; i < scope.queue.length; i++) {
if (scope.queue[i].result == 'error') { if (scope.queue[i].result == 'error') {
errors++; errors++;
// there is no way to know which user raised the error. no data comes
// back from the api call.
// $('td.username-column').each(function(index) {
// if ($(this).text() == scope.queue[i].username) {
// $(this).addClass("error");
// }
// });
} }
} }
if (errors > 0) { if (errors > 0) {

View File

@ -30,12 +30,9 @@ angular.module('GroupFormDefinition', [])
}, },
inventory: { inventory: {
label: 'Inventory', label: 'Inventory',
type: 'lookup', type: 'hidden',
sourceModel: 'inventory', includeOnEdit: true,
sourceField: 'name', includeOnAdd: true
addRequired: true,
editRequired: true,
ngClick: 'lookUpInventory()'
} }
}, },

View File

@ -29,14 +29,19 @@ angular.module('HostFormDefinition', [])
editRequired: false editRequired: false
}, },
inventory: { inventory: {
label: 'Inventory', type: 'hidden',
type: 'lookup', includeOnEdit: true,
sourceModel: 'inventory', includeOnAdd: true
sourceField: 'name',
addRequired: true,
editRequired: true,
ngClick: 'lookUpInventory()'
} }
// inventory: {
// label: 'Inventory',
// type: 'lookup',
// sourceModel: 'inventory',
// sourceField: 'name',
// addRequired: true,
// editRequired: true,
// ngClick: 'lookUpInventory()'
// }
}, },
buttons: { //for now always generates <button> tags buttons: { //for now always generates <button> tags

View File

@ -59,50 +59,53 @@ angular.module('InventoryFormDefinition', [])
related: { //related colletions (and maybe items?) related: { //related colletions (and maybe items?)
hosts: { // hosts: {
type: 'collection', // type: 'collection',
title: 'Hosts', // title: 'Hosts',
iterator: 'host', // iterator: 'host',
open: false, // open: false,
actions: { // actions: {
add: { // add: {
ngClick: "add('hosts')", // ngClick: "add('hosts')",
icon: 'icon-plus', // icon: 'icon-plus',
awToolTip: 'Create a new host' // awToolTip: 'Create a new host'
}, // },
}, // },
fields: { // fields: {
name: { // name: {
key: true, // key: true,
label: 'Name' // label: 'Name'
}, // },
description: { // description: {
label: 'Description' // label: 'Description'
} // }
}, // },
fieldActions: { // fieldActions: {
edit: { // edit: {
ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')", // ngClick: "edit('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}')",
icon: 'icon-edit', // icon: 'icon-edit',
awToolTip: 'Edit host' // awToolTip: 'Edit host'
}, // },
delete: { // delete: {
ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')", // ngClick: "delete('hosts', \{\{ host.id \}\}, '\{\{ host.name \}\}', 'hosts')",
icon: 'icon-remove', // icon: 'icon-remove',
class: 'btn-danger', // class: 'btn-danger',
awToolTip: 'Create a new host' // awToolTip: 'Create a new host'
} // }
} // }
}, //
groups: { groups: {
type: 'tree', type: 'tree',
title: 'Groups', title: "{{ name }} Children",
open: true instructions: "Right click on a host or subgroup to make changes or add additional children.",
open: true,
actions: { }
} }
} }
}); //InventoryForm }); //InventoryForm

View File

@ -24,9 +24,10 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
var current_item = params.current_item; //id of the item that should be selected on open var current_item = params.current_item; //id of the item that should be selected on open
var list = params.list; // list object var list = params.list; // list object
var field = params.field; // form field var field = params.field; // form field
// Show pop-up to select user // Show pop-up to select user
var name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1); var name = list.iterator.charAt(0).toUpperCase() + list.iterator.substring(1);
scope['lookUp' + name] = function() { scope['lookUp' + name] = function() {
var listGenerator = GenerateList; var listGenerator = GenerateList;
var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select ' + name }); var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select ' + name });
@ -37,11 +38,15 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
var name; var name;
for (var i=0; i < listScope[list.name].length; i++) { for (var i=0; i < listScope[list.name].length; i++) {
if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") { if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") {
found = true; found = true;
scope[field] = listScope[list.name][i].id; scope[field] = listScope[list.name][i].id;
scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] = if (form.fields[field] && form.fields[field].sourceModel) {
listScope[list.name][i][form.fields[field].sourceField]; scope[form.fields[field].sourceModel + '_' + form.fields[field].sourceField] =
scope[form.name + '_form'].$setDirty(); listScope[list.name][i][form.fields[field].sourceField];
}
if (scope[form.name + '_form']) {
scope[form.name + '_form'].$setDirty();
}
listGenerator.hide(); listGenerator.hide();
} }
} }
@ -62,11 +67,12 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
listScope[list.iterator + "_" + id + "_class"] = "success"; listScope[list.iterator + "_" + id + "_class"] = "success";
} }
} }
SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl }); SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl });
PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' }); PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' });
scope.search(list.iterator); listScope.search(list.iterator);
listScope['toggle_' + list.iterator](current_item); if (current_item) {
listScope['toggle_' + list.iterator](current_item);
}
} }
} }
}]); }]);

View File

@ -1,58 +0,0 @@
/*********************************************
* Copyright (c) 2013 AnsibleWorks, Inc.
*
* Helper
* Routines shared amongst the hosts controllers
*/
angular.module('HostHelper', [ 'RestServices', 'Utilities', 'OrganizationListDefinition',
'SearchHelper', 'PaginateHelper', 'ListGenerator' ])
.factory('LookUpInventoryInit', ['Alert', 'Rest', 'InventoryList', 'GenerateList', 'SearchInit', 'PaginateInit',
function(Alert, Rest, InventoryList, GenerateList, SearchInit, PaginateInit) {
return function(params) {
var scope = params.scope;
// Show pop-up to select organization
scope.lookUpInventory = function() {
var list = InventoryList;
var listGenerator = GenerateList;
var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select Inventory' });
var defaultUrl = '/api/v1/inventories';
listScope.selectAction = function() {
var found = false;
for (var i=0; i < listScope[list.name].length; i++) {
if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") {
found = true;
scope['inventory'] = listScope[list.name][i].id;
scope['inventory_name'] = listScope[list.name][i].name;
scope['host_form'].$setDirty();
listGenerator.hide();
}
}
if (found == false) {
Alert('No Selection', 'Click on a row to select an Inventory before clicking the Select button.');
}
}
listScope.toggle_inventory = function(id) {
// when user clicks a row, remove 'success' class from all rows except clicked-on row
if (listScope[list.name]) {
for (var i=0; i < listScope[list.name].length; i++) {
listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] = "";
}
}
if (id != null && id != undefined) {
listScope[list.iterator + "_" + id + "_class"] = "success";
}
}
SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl });
PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' });
scope.search(list.iterator);
listScope.toggle_inventory(scope.inventory);
}
}
}]);

View File

@ -6,123 +6,132 @@
*/ */
angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationListDefinition', angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationListDefinition',
'SearchHelper', 'PaginateHelper', 'ListGenerator' ]) 'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService'
.factory('SetListeners', ['Alert', 'Rest', function(Alert, Rest) { ])
.factory('TreeInit', ['Alert', 'Rest', 'Authorization',
function(Alert, Rest, Authorization) {
return function(params) { return function(params) {
var scope = params.scope;
var set = params.set;
var iterator = params.iterator;
// Listeners to perform lookups after main inventory list loads
scope.$on('resultFound', function(e, results, lookup_results) {
if ( lookup_results.length == results.length ) {
key = 'organization';
property = 'organization_name';
for (var i=0; i < results.length; i++) {
for (var j=0; j < lookup_results.length; j++) {
if (results[i][key] == lookup_results[j].id) {
results[i][property] = lookup_results[j].value;
}
}
}
scope[iterator + 'SearchSpin'] = false;
scope[set] = results;
}
});
scope.$on('refreshFinished', function(e, results) {
// Loop through the result set (sent to us by the search helper) and
// lookup the id and name of each organization. After each lookup
// completes, call resultFound.
var lookup_results = [];
for (var i = 0; i < results.length; i++) {
Rest.setUrl('/api/v1/organizations/' + results[i].organization + '/');
Rest.get()
.success( function( data, status, headers, config) {
lookup_results.push({ id: data.id, value: data.name });
scope.$emit('resultFound', results, lookup_results);
})
.error( function( data, status, headers, config) {
lookup_results.push({ id: 'error' });
scope.$emit('resultFound', results, lookup_results);
});
}
});
}
}])
.factory('LookUpOrganizationInit', ['Alert', 'Rest', 'OrganizationList', 'GenerateList', 'SearchInit', 'PaginateInit',
function(Alert, Rest, OrganizationList, GenerateList, SearchInit, PaginateInit) {
return function(params) {
var scope = params.scope; var scope = params.scope;
var inventory = params.inventory;
var groups = inventory.related.groups;
var hosts = inventory.related.hosts;
var inventory_name = inventory.name;
var inventory_url = inventory.url;
var inventory_id = inventory.id;
var treeData = [];
// Show pop-up to select organization if (scope.HostLoadedRemove) {
scope.lookUpOrganization = function() { scope.HostLoadedRemove();
var list = OrganizationList;
var listGenerator = GenerateList;
var listScope = listGenerator.inject(list, { mode: 'lookup', hdr: 'Select Organization' });
var defaultUrl = '/api/v1/organizations';
listScope.selectAction = function() {
var found = false;
for (var i=0; i < listScope[list.name].length; i++) {
if (listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] == "success") {
found = true;
scope['organization'] = listScope[list.name][i].id;
scope['organization_name'] = listScope[list.name][i].name;
scope['inventory_form'].$setDirty();
listGenerator.hide();
}
}
if (found == false) {
Alert('No Selection', 'Click on a row to select an Organization before clicking the Select button.');
}
}
listScope.toggle_organization = function(id) {
// when user clicks a row, remove 'success' class from all rows except clicked-on row
if (listScope[list.name]) {
for (var i=0; i < listScope[list.name].length; i++) {
listScope[list.iterator + "_" + listScope[list.name][i].id + "_class"] = "";
}
}
if (id != null && id != undefined) {
listScope[list.iterator + "_" + id + "_class"] = "success";
}
}
SearchInit({ scope: listScope, set: list.name, list: list, url: defaultUrl });
PaginateInit({ scope: listScope, list: list, url: defaultUrl, mode: 'lookup' });
scope.search(list.iterator);
listScope.toggle_organization(scope.organization);
}
} }
}])
scope.HostLoadedRemove = scope.$on('hostsLoaded', function() {
Rest.setUrl(groups + '?order_by=name');
Rest.get()
.success( function(data, status, headers, config) {
for (var i=0; i < data.results.length; i++) {
treeData[0].children.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'
});
}
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) {
console.log(data);
},
error: function() {
if (console) {
console.log('Error accessing node data!');
}
}
}
},
"contextmenu": {
items: scope.treeController
}
});
})
.error( function(data, status, headers, config) {
Alert('Error', 'Failed to laod tree data. Url: ' + groups + ' GET status: ' + status);
});
});
.factory('TreeInit', ['Alert', 'Rest', function(Alert, Rest) { Rest.setUrl(hosts + '?order_by=name');
return function(groups) {
Rest.setUrl(groups);
Rest.get() Rest.get()
.success( function(data, status, headers, config) { .success ( function(data, status, headers, config) {
var treeData = []; treeData = [];
for (var i=0; i < data.results.length; i++) { treeData.push({
treeData.push({ data: {
data: data.results[i].name, title: inventory_name,
state: 'closed', },
attr: { id: data.results[i] } attr: {
}); type: 'inventory',
id: 'inventory-node',
url: inventory_url,
'inventory_id': inventory_id,
name: inventory_name
},
state: 'open',
children:[]
});
for (var i=0; i < data.results.length; i++ ) {
treeData[0].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
},
});
} }
$('#tree-view').jstree({ "json_data": { data: treeData }, scope.$emit('hostsLoaded');
plugins: ['themes', 'json_data', 'ui'] }); })
}) .error ( function(data, status, headers, config) {
.error( function(data, status, headers, config) { Alert('Error', 'Failed to laod tree data. Url: ' + hosts + ' GET status: ' + status);
Alert('Error', 'Failed to laod tree data. Url: ' + groups + ' GET status: ' + status); });
});
} }
}]); }]);

View File

@ -25,6 +25,7 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
url.replace(/page_size\=\d+/,''); //stop repeatedly appending page_size url.replace(/page_size\=\d+/,''); //stop repeatedly appending page_size
url += scope[iterator + 'SearchParams']; url += scope[iterator + 'SearchParams'];
Rest.setUrl(url); Rest.setUrl(url);
Rest.get({ params: { page_size: scope[iterator + 'PageSize'] }}) Rest.get({ params: { page_size: scope[iterator + 'PageSize'] }})
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
@ -36,7 +37,7 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
scope[set] = data['results']; scope[set] = data['results'];
}) })
.error ( function(data, status, headers, config) { .error ( function(data, status, headers, config) {
scope[iterator + 'SearchSpin'] = true; scope[iterator + 'SearchSpin'] = false;
Alert('Error!', 'Failed to retrieve ' + set + '. GET returned status: ' + status); Alert('Error!', 'Failed to retrieve ' + set + '. GET returned status: ' + status);
}); });
} }

View File

@ -40,7 +40,7 @@ angular.module('SearchHelper', ['RestServices', 'Utilities', 'RefreshHelper'])
scope[iterator + 'SearchTypeLabel'] = 'Contains'; scope[iterator + 'SearchTypeLabel'] = 'Contains';
scope[iterator + 'SearchParams'] = ''; scope[iterator + 'SearchParams'] = '';
scope[iterator + 'SearchValue'] = ''; scope[iterator + 'SearchValue'] = '';
// Functions to handle search widget changes // Functions to handle search widget changes
scope.setSearchField = function(iterator, fld, label) { scope.setSearchField = function(iterator, fld, label) {
scope[iterator + 'SearchFieldLabel'] = label; scope[iterator + 'SearchFieldLabel'] = label;

View File

@ -14,6 +14,7 @@ angular.module('GroupListDefinition', [])
iterator: 'group', iterator: 'group',
selectTitle: 'Add Group', selectTitle: 'Add Group',
editTitle: 'Groups', editTitle: 'Groups',
selectInstructions: 'Check the Select checkbox next to each group to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new group.',
fields: { fields: {
name: { name: {

View File

@ -13,6 +13,7 @@ angular.module('HostListDefinition', [])
name: 'hosts', name: 'hosts',
iterator: 'host', iterator: 'host',
selectTitle: 'Add Host', selectTitle: 'Add Host',
selectInstructions: 'Check the Select checkbox next to each host to be added, and click Finished when done. Use the green <i class=\"icon-plus\"></i> button to create a new host.',
editTitle: 'Hosts', editTitle: 'Hosts',
fields: { fields: {

View File

@ -26,7 +26,7 @@ angular.module('InventoriesListDefinition', [])
}, },
organization: { organization: {
label: 'Organization', label: 'Organization',
ngBind: 'inventory.organization_name', ngBind: 'inventory.summary_fields.organization.name',
sourceModel: 'organization', sourceModel: 'organization',
sourceField: 'name' sourceField: 'name'
} }

View File

@ -34,6 +34,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
case 'falseValue': case 'falseValue':
result = "ng-false-value=\"" + obj[key] + "\" "; result = "ng-false-value=\"" + obj[key] + "\" ";
break; break;
case 'awToolTip':
result = "aw-tool-tip=\"" + obj[key] + "\" ";
break;
default: default:
result = key + "=\"" + obj[key] + "\" "; result = key + "=\"" + obj[key] + "\" ";
} }
@ -53,14 +56,21 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
// Use to inject the form as html into the view. View MUST have an ng-bind for 'htmlTemplate'. // Use to inject the form as html into the view. View MUST have an ng-bind for 'htmlTemplate'.
// Returns scope of form. // Returns scope of form.
// //
var element = angular.element(document.getElementById('htmlTemplate')); var element;
if (options.modal) {
element = angular.element(document.getElementById('form-modal-body'));
}
else {
var element = angular.element(document.getElementById('htmlTemplate'));
}
this.setForm(form); this.setForm(form);
element.html(this.build(options)); // Inject the html element.html(this.build(options)); // Inject the html
this.scope = element.scope(); // Set scope specific to the element we're compiling, avoids circular reference this.scope = element.scope(); // Set scope specific to the element we're compiling, avoids circular reference
// From here use 'scope' to manipulate the form, as the form is not in '$scope' // From here use 'scope' to manipulate the form, as the form is not in '$scope'
$compile(element)(this.scope); $compile(element)(this.scope);
if (options.related) { if ((!options.modal) && options.related) {
this.addListeners(); this.addListeners();
} }
@ -68,7 +78,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
this.applyDefaults(); this.applyDefaults();
} }
if (options.modal) {
(options.mode == 'add') ? scope.formHeader = form.addTitle : form.editTitle;
$('#form-modal').modal();
}
this.mode = options.mode; this.mode = options.mode;
this.modal = (options.modal) ? true : false;
return this.scope; return this.scope;
}, },
@ -130,20 +146,22 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
// //
var html = ''; var html = '';
//Breadcrumbs if (!this.modal) {
html += "<div class=\"nav-path\">\n"; //Breadcrumbs
html += "<ul class=\"breadcrumb\">\n"; html += "<div class=\"nav-path\">\n";
html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"{{ '#' + crumb.path }}\">{{ crumb.title | capitalize }}</a> " + html += "<ul class=\"breadcrumb\">\n";
"<span class=\"divider\">/</span></li>\n"; html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"{{ '#' + crumb.path }}\">{{ crumb.title | capitalize }}</a> " +
html += "<li class=\"active\">"; "<span class=\"divider\">/</span></li>\n";
if (options.mode == 'edit') { html += "<li class=\"active\">";
html += this.form.editTitle; if (options.mode == 'edit') {
html += this.form.editTitle;
}
else {
html += this.form.addTitle;
}
html += "</li>\n</ul>\n</div>\n";
} }
else {
html += this.form.addTitle;
}
html += "</li>\n</ul>\n</div>\n";
// Start the well // Start the well
if ( this.has('well') ) { if ( this.has('well') ) {
html += "<div class=\"well\">\n"; html += "<div class=\"well\">\n";
@ -269,6 +287,13 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
} }
} }
if (field.type == 'hidden') {
if ( (options.mode == 'edit' && field.includeOnEdit) ||
(options.mode == 'add' && field.includeOnAdd) ) {
html += "<input type=\"hidden\" ng-model=\"" + fld + "\" name=\"" + fld + "\" />";
}
}
//lookup type fields //lookup type fields
if (field.type == 'lookup') { if (field.type == 'lookup') {
html += "<div class=\"control-group\"" html += "<div class=\"control-group\""
@ -300,50 +325,51 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
} }
//buttons //buttons
if (this.has('buttons')) { if (!this.modal) {
html += "<div class=\"control-group\">\n"; if (this.has('buttons')) {
html += "<div class=\"controls buttons\">\n"; html += "<div class=\"control-group\">\n";
} html += "<div class=\"controls buttons\">\n";
for (var btn in this.form.buttons) { }
var button = this.form.buttons[btn]; for (var btn in this.form.buttons) {
//button var button = this.form.buttons[btn];
html += "<button "; //button
if (button.class) { html += "<button ";
html += this.attr(button,'class'); if (button.class) {
} html += this.attr(button,'class');
if (button.ngClick) {
html += this.attr(button,'ngClick');
}
if (button.ngDisabled) {
if (btn !== 'reset') {
html += "ng-disabled=\"" + this.form.name + "_form.$pristine || " + this.form.name + "_form.$invalid\" ";
} }
else { if (button.ngClick) {
html += "ng-disabled=\"" + this.form.name + "_form.$pristine\" "; html += this.attr(button,'ngClick');
} }
if (button.ngDisabled) {
if (btn !== 'reset') {
html += "ng-disabled=\"" + this.form.name + "_form.$pristine || " + this.form.name + "_form.$invalid\" ";
}
else {
html += "ng-disabled=\"" + this.form.name + "_form.$pristine\" ";
}
}
html += ">";
if (button.icon) {
html += this.icon(button.icon);
}
html += button.label + "</button>\n";
} }
html += ">"; if (this.has('buttons')) {
if (button.icon) { html += "</div>\n";
html += this.icon(button.icon); html += "</div>\n";
} }
html += button.label + "</button>\n";
} }
if (this.has('buttons')) {
html += "</div>\n";
html += "</div>\n";
}
html += "</form>\n"; html += "</form>\n";
if ( this.has('well') ) { if ( this.has('well') ) {
html += "</div>\n"; html += "</div>\n";
} }
if (options.related && this.form.related) { if ((!this.modal) && options.related && this.form.related) {
html += this.buildCollections(); html += this.buildCollections();
} }
console.log(html); //console.log(html);
return html; return html;
@ -371,9 +397,30 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
} }
html += "\">\n"; html += "\">\n";
html += "<div class=\"accordion-inner\">\n"; html += "<div class=\"accordion-inner\">\n";
if (form.related[itm].instructions) {
html += "<div class=\"alert alert-info alert-block\">\n";
html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n";
html += "<strong>Hint: </strong>" + form.related[itm].instructions + "\n";
html += "</div>\n"
}
if (form.related[itm].type == 'tree') { if (form.related[itm].type == 'tree') {
html += "<div id=\"tree-view\"></div>\n"; html += "<div>\n";
// Add actions(s)
if (form.related[itm].actions && form.related[itm].actions.length > 0) {
html += "<div class=\"text-right actions\">\n";
for (var act in form.related[itm].actions) {
var action = form.related[itm].actions[act];
html += "<button class=\"btn btn-mini btn-success\" ";
html += this.attr(action,'ngClick');
html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";
html += ">" + this.icon(action.icon) + "</button>\n";
}
html += "</div>\n";
}
html += "<div id=\"tree-view\"></div>\n";
html += "</div>\n";
} }
else { else {
html += "<div class=\"well\">\n"; html += "<div class=\"well\">\n";

View File

@ -129,7 +129,6 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
if (options.mode != 'lookup') { if (options.mode != 'lookup') {
//actions //actions
base = $location.path().replace(/^\//,'').split('/')[0]; base = $location.path().replace(/^\//,'').split('/')[0];
console.log('base: ' + base);
html += "<div class=\"text-right\">\n"; html += "<div class=\"text-right\">\n";
for (action in list.actions) { for (action in list.actions) {
if (list.actions[action].mode == 'all' || list.actions[action].mode == options.mode) { if (list.actions[action].mode == 'all' || list.actions[action].mode == options.mode) {
@ -227,7 +226,6 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
else { else {
html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true }); html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });
} }
return html; return html;
} }

View File

@ -26,8 +26,8 @@ angular.module('PromptDialog', [])
var cls = (params.class == null || params.class == undefined) ? 'btn-danger' : params.class; var cls = (params.class == null || params.class == undefined) ? 'btn-danger' : params.class;
$('#prompt-action-btn').addClass(cls); //Use jquery because django template engine conflicts with Angular's $('#prompt-action-btn').addClass(cls); //Use jquery because django template engine conflicts with Angular's
// use of {{...}} // use of {{...}}
scope.id = params.id; //scope.id = params.id;
scope.url = params.url; //scope.url = params.url;
scope.promptAction = params.action; scope.promptAction = params.action;
$(dialog).modal({ $(dialog).modal({
backdrop: 'static', backdrop: 'static',

View File

@ -30,12 +30,12 @@ angular.module('RestServices',['ngCookies','AuthService'])
get: function(args) { get: function(args) {
args = (args) ? args : {}; args = (args) ? args : {};
this.params = (args.params != null || args.params != undefined) ? args.params : null; this.params = (args.params) ? args.params : null;
this.pReplace(); this.pReplace();
return $http({method: 'GET', return $http({method: 'GET',
url: this.url, url: this.url,
headers: this.auth, headers: this.auth,
params: this.params, params: this.params
}); });
}, },
post: function(data) { post: function(data) {

View File

@ -55,8 +55,6 @@
<script src="{{ STATIC_URL }}js/helpers/search.js"></script> <script src="{{ STATIC_URL }}js/helpers/search.js"></script>
<script src="{{ STATIC_URL }}js/helpers/paginate.js"></script> <script src="{{ STATIC_URL }}js/helpers/paginate.js"></script>
<script src="{{ STATIC_URL }}js/helpers/inventory.js"></script> <script src="{{ STATIC_URL }}js/helpers/inventory.js"></script>
<script src="{{ STATIC_URL }}js/helpers/hosts.js"></script>
<script src="{{ STATIC_URL }}js/helpers/teams.js"></script>
<script src="{{ STATIC_URL }}js/helpers/teams.js"></script> <script src="{{ STATIC_URL }}js/helpers/teams.js"></script>
<script src="{{ STATIC_URL }}js/helpers/Lookup.js"></script> <script src="{{ STATIC_URL }}js/helpers/Lookup.js"></script>
<script src="{{ STATIC_URL }}lib/ansible/directives.js"></script> <script src="{{ STATIC_URL }}lib/ansible/directives.js"></script>
@ -108,18 +106,18 @@
</div> </div>
</div> </div>
<!-- Generic Modal dialog. Use to confirming an action (i.e. Delete) --> <!-- Confirmation Dialog -->
<div id="prompt-modal" class="modal hide"> <div id="prompt-modal" class="modal hide">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-target="#prompt-modal" <button type="button" class="close" data-target="#prompt-modal"
data-dismiss="modal" aria-hidden="true">&times;</button> data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 ng-bind="promptHeader"></h3> <h3 ng-bind="promptHeader" id="prompt-header"></h3>
</div> </div>
<div class="modal-body" ng-bind="promptBody"> <div class="modal-body" ng-bind="promptBody" id="prompt-body">
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" data-target="#prompt-modal" data-dismiss="modal" class="btn">No</a> <a href="#" data-target="#prompt-modal" data-dismiss="modal" class="btn">No</a>
<a href="" ng-click="promptAction()" id="prompt-action-btn" class="btn">Yes</a> <!-- FIXME: Make sure the ng-bind works. --> <a href="" ng-click="promptAction()" id="prompt-action-btn" class="btn">Yes</a>
</div> </div>
</div> </div>
@ -137,7 +135,7 @@
</div> </div>
</div> </div>
<!-- Generic Modal dialog. Use for alerts/error handling --> <!-- Alerts/error handling dialog -->
<div id="alert-modal" class="modal hide"> <div id="alert-modal" class="modal hide">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-target="#alert-modal" <button type="button" class="close" data-target="#alert-modal"