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

Job event detail page now working. Search expanded to work with boolean an integer types. Added new form generator layout. Fixed pagination bugs. Job cancel/delete working.

Browse Source
This commit is contained in:
chouseknecht
2013-05-21 02:57:34 -04:00
parent 3d3782fcee
commit 8343d20c60
13 changed files with 659 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
lib/ui/static/css/ansible-ui.css
View File

@@ -16,6 +16,10 @@
padding-top: 40px; padding-top: 40px;
} }
hr {
border-color: #e3e3e3;
}
.container-fluid { .container-fluid {
min-height: 700px ; min-height: 700px ;
} }
@@ -175,6 +179,13 @@
display: inline-block; display: inline-block;
font-size: 18px; font-size: 18px;
margin-left: 15px; margin-left: 15px;
min-width: 30px;
}
.search-widget label {
display:inline-block;
vertical-align: middle;
padding-right: 15px;
} }
.nav-path { .nav-path {
@@ -241,7 +252,7 @@
.list-actions { .list-actions {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-left: 15px; margin-left: 10px;
margin-top: 3px; margin-top: 3px;
} }
/* End Display list actions */ /* End Display list actions */
@@ -256,15 +267,20 @@
background-color: #fff; background-color: #fff;
} }
.job-error, .job-failed { .job-error, .job-failed,
input[type="text"].job-failed,
input[type="text"].job-error
{
color: #da4f49; color: #da4f49;
} }
.job-new { .job-new, input[type="text"].job-new {
color: #778899; color: #778899;
} }
.job-pending, .job-running { .job-pending, .job-running, .job-success,
input[type="text"].job-success
{
color: #5bb75b; color: #5bb75b;
} }
@@ -273,5 +289,28 @@
font-weight: bold; font-weight: bold;
padding-left: 15px; padding-left: 15px;
} }
#job_events label {
margin-right: 10px;
}
#job_events {
text-align: center;
}
#job_events_items_form {
margin-top: 15px;
}
.form-items .search-widget {
margin-top: 15px;
}
.form-items .item-count {
display: inline-block;
font-size: small;
margin-top: 25px;
}
/* End Jobs Page */ /* End Jobs Page */

2
lib/ui/static/js/app.js
View File

@@ -52,7 +52,7 @@ angular.module('ansible', [
.config(['$routeProvider', function($routeProvider) { .config(['$routeProvider', function($routeProvider) {
$routeProvider. $routeProvider.
when('/jobs', when('/jobs',
{ templateUrl: urlPrefix + 'partials/jobs.html', controller: JobsList }). { templateUrl: urlPrefix + 'partials/jobs.html', controller: JobsListCtrl }).
when('/jobs/:id', when('/jobs/:id',
{ templateUrl: urlPrefix + 'partials/jobs.html', controller: JobsEdit }). { templateUrl: urlPrefix + 'partials/jobs.html', controller: JobsEdit }).

2
lib/ui/static/js/controllers/JobTemplates.js
View File

@@ -167,7 +167,7 @@ function JobTemplatesList ($scope, $rootScope, $location, $log, $routeParams, Re
Rest.setUrl(data.related.start); Rest.setUrl(data.related.start);
Rest.post() Rest.post()
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
$location.path(GetBasePath('jobs')); $location.path('/jobs');
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null, ProcessErrors(scope, data, status, null,

131
lib/ui/static/js/controllers/Jobs.js
View File

@@ -10,9 +10,9 @@
'use strict'; 'use strict';
function JobsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobList, function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobList,
GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller, GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
ClearScope, ProcessErrors, GetBasePath, LookUpInit) ClearScope, ProcessErrors, GetBasePath, LookUpInit)
{ {
ClearScope('htmlTemplate'); ClearScope('htmlTemplate');
var list = JobList; var list = JobList;
@@ -33,16 +33,73 @@ function JobsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Aler
} }
scope.viewEvents = function(id) { scope.viewEvents = function(id) {
console.log('headed to: ' + $location.path() + '/' + id + '/job_events');
$location.path($location.path() + '/' + id + '/job_events'); $location.path($location.path() + '/' + id + '/job_events');
} }
scope.deleteJob = function(id, name) {
Rest.setUrl(defaultUrl + id + '/');
Rest.get()
.success( function(data, status, headers, config) {
var url, action_label, restcall, hdr;
if (data.status == 'pending') {
url = data.related.cancel;
action_label = 'cancel';
hdr = 'Cancel Job';
}
else {
url = defaultUrl + id + '/';
action_label = 'delete';
hdr = 'Delete Job';
}
var action = function() {
Rest.setUrl(url);
if (action_label == 'cancel') {
Rest.post()
.success( function(data, status, headers, config) {
$('#prompt-modal').modal('hide');
scope.search(list.iterator);
})
.error( function(data, status, headers, config) {
$('#prompt-modal').modal('hide');
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Call to ' + url + ' failed. POST returned status: ' + status });
});
}
else {
Rest.delete()
.success( function(data, status, headers, config) {
$('#prompt-modal').modal('hide');
scope.search(list.iterator);
})
.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 });
});
}
};
Prompt({ hdr: hdr,
body: 'Are you sure you want to ' + action_label + ' job ' + id + '?',
action: action
});
})
.error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null,
{ hdr: 'Error!', msg: 'Failed to get job details. GET returned status: ' + status });
});
}
} }
JobsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobList', JobsListCtrl.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobList',
'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope', 'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
'ProcessErrors','GetBasePath', 'LookUpInit' 'ProcessErrors','GetBasePath', 'LookUpInit'
]; ];
function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobForm, function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobForm,
@@ -274,7 +331,8 @@ JobsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$
function JobEvents ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, function JobEvents ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm,
GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, GetBasePath) GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, ClearScope, SearchInit,
PaginateInit, 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.
@@ -285,31 +343,57 @@ function JobEvents ($scope, $rootScope, $compile, $location, $log, $routeParams,
var scope = GenerateForm.inject(form, {mode: 'edit', related: true}); var scope = GenerateForm.inject(form, {mode: 'edit', related: true});
generator.reset(); generator.reset();
var defaultUrl = GetBasePath('jobs') + $routeParams.id + '/job_events'; var defaultUrl = GetBasePath('jobs') + $routeParams.id + '/job_events/';
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 = {};
if (scope.PostRefreshRemove){
scope.PostRefreshRemove();
}
scope.PostRefreshRemove = scope.$on('PostRefresh', function() {
var results = scope[form.items.event.set][0];
// Disable Next/Prev buttons when we rich the end/beginning of array
scope[form.items.event.iterator + 'NextUrlDisable'] = (scope[form.items.event.iterator + 'NextUrl']) ? "" : "disabled";
scope[form.items.event.iterator + 'PrevUrlDisable'] = (scope[form.items.event.iterator + 'PrevUrl']) ? "" : "disabled";
// Set the scope input field values
for (var fld in form.items.event.fields) {
if (fld == 'event_data') {
scope.event_data = JSON.stringify(results[fld]);
}
else {
if (results[fld]) {
scope[fld] = results[fld];
}
}
}
scope['event_status'] = (results.failed) ? 'failed' : 'success';
});
// Retrieve detail record and prepopulate the form // Retrieve detail record and prepopulate the form
Rest.setUrl(defaultUrl); Rest.setUrl(defaultUrl);
Rest.get({ params: {page_size: 1} }) Rest.get({ params: {page_size: 1} })
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
LoadBreadCrumbs({ path: '/organizations/' + id, title: data.name }); var results = data.results[0];
scope[form.items.event.iterator + 'NextUrl'] = data.next;
scope[form.items.event.iterator + 'PrevUrl'] = data.previous;
scope[form.items.event.iterator + 'Count'] = data.count;
LoadBreadCrumbs({ path: '/jobs/' + id, title: results["summary_fields"].job.name });
for (var fld in form.fields) { for (var fld in form.fields) {
if (data[fld]) { if (results[fld]) {
scope[fld] = data[fld]; scope[fld] = results[fld];
}
if (form.fields[fld].sourceModel && results.summary_fields[form.fields[fld].sourceModel]) {
scope[form.fields[fld].sourceModel + '_' + form.fields[fld].sourceField] =
results.summary_fields[form.fields[fld].sourceModel][form.fields[fld].sourceField];
} }
} }
for (var fld in form.items) { scope[form.items.event.set] = data.results;
if (data[fld]) { SearchInit({ scope: scope, set: form.items.event.set, list: form.items.event, iterator: form.items.event.iterator, url: defaultUrl });
scope[fld] = data[fld]; PaginateInit({ scope: scope, list: form.items.event, iterator: form.items.event.iterator, url: defaultUrl , pageSize: 1 });
} scope.$emit('PostRefresh');
}
scope['event_satus'] = (data.failed) ? 'failed' : 'success';
scope.next = data.next;
scope.previous = data.previous;
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, form, ProcessErrors(scope, data, status, form,
@@ -319,5 +403,6 @@ function JobEvents ($scope, $rootScope, $compile, $location, $log, $routeParams,
} }
JobEvents.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobEventForm', JobEvents.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobEventForm',
'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ClearScope', 'GetBasePath' ]; 'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'ClearScope', 'SearchInit',
'PaginateInit', 'GetBasePath' ];

80
lib/ui/static/js/forms/JobEvents.js
View File

@@ -13,26 +13,27 @@ angular.module('JobEventFormDefinition', [])
editTitle: '{{ name }} Events', //Legend in edit mode editTitle: '{{ name }} Events', //Legend in edit mode
name: 'job_events', name: 'job_events',
well: true, well: true,
formInline: true, fieldsAsHeader: true,
fields: { fields: {
job: { job: {
label: 'Job ID', label: 'Job',
type: 'text', type: 'text',
class: 'span1',
readonly: true readonly: true
}, },
name: { job_name: {
label: 'Name',
type: 'text', type: 'text',
sourceModel: 'job', sourceModel: 'job',
sourceField: 'name', sourceField: 'name',
class: 'span5',
readonly: true readonly: true
}, },
description: { job_description: {
label: 'Description',
type: 'text', type: 'text',
sourceModel: 'job', sourceModel: 'job',
sourceField: 'description', sourceField: 'description',
class: 'span5',
readonly: true readonly: true
} }
}, },
@@ -43,29 +44,54 @@ angular.module('JobEventFormDefinition', [])
items: { items: {
event: { event: {
set: 'job_events',
iterator: 'job_event',
label: 'Event', label: 'Event',
type: 'text', fields: {
readonly: true id: {
}, label: 'Event ID',
created: { type: 'text',
label: 'Event Timestamp', readonly: true,
type: 'text', class: 'span2',
readonly: true key: true,
}, searchType: 'int'
event_status: { },
label: 'Event Status <span class="job-detail-status job-\{\{ status \}\}"><i class="icon-circle"></i> \{\{ status \}\}</span>', created: {
type: 'text', label: 'Event Timestamp',
readonly: true, type: 'text',
control: false readonly: true,
}, class: 'span4'
event_data: { },
label: 'Event Data', event: {
type: 'textarea', label: 'Event',
class: 'span12', type: 'text',
rows: 10 readonly: true
} },
host: {
label: 'Host',
type: 'text',
readonly: true
},
event_status: {
label: 'Event Status',
type: 'text',
class: 'job-\{\{ event_status \}\}',
readonly: true,
searchField: 'failed',
searchType: 'boolean',
searchOptions: [{ name: "success", value: 0 }, { name: "failed", value: 1 }],
},
event_data: {
label: 'Event Data',
type: 'textarea',
class: 'span12',
rows: 10,
readonly: true
}
}
}
}, },
related: { //related colletions (and maybe items?) related: { //related colletions (and maybe items?)
} }

4
lib/ui/static/js/helpers/JobTemplate.js
View File

@@ -24,7 +24,7 @@ angular.module('JobTemplateHelper', [ 'RestServices', 'Utilities', 'CredentialFo
Rest.setUrl(start_url); Rest.setUrl(start_url);
Rest.post(pswd) Rest.post(pswd)
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
$location.path(GetBasPath('jobs')); $location.path('/jobs');
}) })
.error( function(data, status, headers, config) { .error( function(data, status, headers, config) {
ProcessErrors(scope, data, status, null, ProcessErrors(scope, data, status, null,
@@ -37,6 +37,7 @@ angular.module('JobTemplateHelper', [ 'RestServices', 'Utilities', 'CredentialFo
// Add the password field // Add the password field
field = form.fields[passwords[i]]; field = form.fields[passwords[i]];
fld = passwords[i]; fld = passwords[i];
scope[fld] = '';
html += "<div class=\"control-group\">\n"; html += "<div class=\"control-group\">\n";
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n"; html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
@@ -57,6 +58,7 @@ angular.module('JobTemplateHelper', [ 'RestServices', 'Utilities', 'CredentialFo
// Add the related confirm field // Add the related confirm field
fld = field.associated; fld = field.associated;
field = form.fields[field.associated]; field = form.fields[field.associated];
scope[fld] = '';
html += "<div class=\"control-group\">\n"; html += "<div class=\"control-group\">\n";
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n"; html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";

30
lib/ui/static/js/helpers/paginate.js
View File

@@ -20,32 +20,44 @@ angular.module('PaginateHelper', ['RefreshHelper'])
var scope = params.scope; var scope = params.scope;
var list = params.list; var list = params.list;
var iterator = (params.iterator) ? params.iterator : list.iterator;
var url = params.url; var url = params.url;
var mode = (params.mode) ? params.mode : null; var mode = (params.mode) ? params.mode : null;
scope[list.iterator + 'Page'] = 0; scope[iterator + 'Page'] = 0;
if (mode == 'lookup') { if (params.pageSize) {
scope[list.iterator + 'PageSize'] = 5; scope[iterator + 'PageSize'] = params.pageSize;
}
else if (mode == 'lookup') {
scope[iterator + 'PageSize'] = 5;
} }
else { else {
scope[list.iterator + 'PageSize'] = 20; scope[iterator + 'PageSize'] = 20;
} }
scope.nextSet = function(set, iterator) { scope.nextSet = function(set, iterator) {
scope[iterator + 'Page']++; if (scope[iterator + 'NextUrl']) {
Refresh({ scope: scope, set: set, iterator: iterator, url: scope[iterator + 'NextUrl'] }); scope[iterator + 'Page']++;
Refresh({ scope: scope, set: set, iterator: iterator, url: scope[iterator + 'NextUrl'] });
}
}; };
scope.prevSet = function(set, iterator) { scope.prevSet = function(set, iterator) {
scope[iterator + 'Page']--; if (scope[iterator + 'PrevUrl']) {
Refresh({ scope: scope, set: set, iterator: iterator, url: scope[iterator + 'PrevUrl'] }); scope[iterator + 'Page']--;
Refresh({ scope: scope, set: set, iterator: iterator, url: scope[iterator + 'PrevUrl'] });
}
}; };
scope.changePageSize = function(set, iterator) { scope.changePageSize = function(set, iterator) {
// Called when a new page size is selected // Called when a new page size is selected
scope[iterator + 'Page'] = 0; scope[iterator + 'Page'] = 0;
url += (scope[iterator + 'SearchParams']) ? scope[iterator + 'SearchParams'] : ''; console.log(url);
url = url.replace(/\/\?.*$/,'/');
console.log(url);
url += (scope[iterator + 'SearchParams']) ? scope[iterator + 'SearchParams'] + '&page_size=' + scope[iterator + 'PageSize' ] :
'?page_size=' + scope[iterator + 'PageSize' ];
Refresh({ scope: scope, set: set, iterator: iterator, url: url }); Refresh({ scope: scope, set: set, iterator: iterator, url: url });
} }
} }

2
lib/ui/static/js/helpers/refresh.js
View File

@@ -22,7 +22,6 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
var set = params.set; var set = params.set;
var iterator = params.iterator; var iterator = params.iterator;
var url = params.url; var url = params.url;
Rest.setUrl(url); Rest.setUrl(url);
Rest.get() Rest.get()
.success( function(data, status, headers, config) { .success( function(data, status, headers, config) {
@@ -32,6 +31,7 @@ angular.module('RefreshHelper', ['RestServices', 'Utilities'])
scope[iterator + 'PageCount'] = Math.ceil((data.count / scope[iterator + 'PageSize'])); scope[iterator + 'PageCount'] = Math.ceil((data.count / scope[iterator + 'PageSize']));
scope[iterator + 'SearchSpin'] = false; scope[iterator + 'SearchSpin'] = false;
scope[set] = data['results']; scope[set] = data['results'];
scope.$emit('PostRefresh');
}) })
.error ( function(data, status, headers, config) { .error ( function(data, status, headers, config) {
scope[iterator + 'SearchSpin'] = false; scope[iterator + 'SearchSpin'] = false;

61
lib/ui/static/js/helpers/search.js
View File

@@ -21,12 +21,12 @@ angular.module('SearchHelper', ['RestServices', 'Utilities', 'RefreshHelper'])
return function(params) { return function(params) {
var scope = params.scope; var scope = params.scope;
var set = params.set; var set = params.set;
var defaultUrl = params.url; var defaultUrl = params.url;
var list = params.list; var list = params.list;
var iterator = list.iterator; var iterator = (params.iterator) ? params.iterator : list.iterator;
var default_order; var default_order;
// Set default values // Set default values
for (fld in list.fields) { for (fld in list.fields) {
if (list.fields[fld].key) { if (list.fields[fld].key) {
@@ -40,11 +40,34 @@ 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'] = '';
scope[iterator + 'SelectShow'] = false; // show/hide the Select
scope[iterator + 'HideSearchType'] = false;
var f = scope[iterator + 'SearchField']
if (list.fields[f].searchType && list.fields[f].searchType == 'boolean') {
scope[iterator + 'SelectShow'] = true;
scope[iterator + 'SearchSelectOpts'] = list.fields[fld].searchOptions;
}
if (list.fields[f].searchType && list.fields[f].searchType == 'int') {
scope[iterator + 'HideSearchType'] = true;
}
// 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;
scope[iterator + 'SearchField'] = fld; scope[iterator + 'SearchField'] = fld;
scope[iterator + 'SearchValue'] = '';
scope[iterator + 'SelectShow'] = false;
scope[iterator + 'HideSearchType'] = false;
if (list.fields[fld].searchType && list.fields[fld].searchType == 'boolean') {
scope[iterator + 'SelectShow'] = true;
scope[iterator + 'SearchSelectOpts'] = list.fields[f].searchOptions;
}
if (list.fields[fld].searchType && list.fields[fld].searchType == 'int') {
scope[iterator + 'HideSearchType'] = true;
}
scope.search(iterator); scope.search(iterator);
} }
@@ -60,19 +83,37 @@ angular.module('SearchHelper', ['RestServices', 'Utilities', 'RefreshHelper'])
// //
scope[iterator + 'SearchSpin'] = true; scope[iterator + 'SearchSpin'] = true;
var url = defaultUrl; var url = defaultUrl;
if (scope[iterator + 'SearchValue'] != '' && scope[iterator + 'SearchValue'] != undefined) { if ( (scope[iterator + 'SelectShow'] == false && scope[iterator + 'SearchValue'] != '' && scope[iterator + 'SearchValue'] != undefined) ||
(scope[iterator + 'SelectShow'] && scope[iterator + 'SearchSelectValue']) ) {
if (list.fields[scope[iterator + 'SearchField']].sourceModel) { if (list.fields[scope[iterator + 'SearchField']].sourceModel) {
// handle fields whose source is a related model e.g. inventories.organization // handle fields whose source is a related model e.g. inventories.organization
scope[iterator + 'SearchParams'] = '?' + list.fields[scope[iterator + 'SearchField']].sourceModel + '__' + scope[iterator + 'SearchParams'] = '?' + list.fields[scope[iterator + 'SearchField']].sourceModel + '__' +
list.fields[scope[iterator + 'SearchField']].sourceField + '__' + list.fields[scope[iterator + 'SearchField']].sourceField + '__';
scope[iterator + 'SearchType'] + '=' + escape(scope[iterator + 'SearchValue']); }
scope[iterator + 'SearchParams'] += (default_order) ? '&order_by=' + escape(default_order) : ''; else if (list.fields[scope[iterator + 'SearchField']].searchField) {
scope[iterator + 'SearchParams'] = '?' + list.fields[scope[iterator + 'SearchField']].searchField + '__';
} }
else { else {
scope[iterator + 'SearchParams'] = '?' + scope[iterator + 'SearchField'] + '__' + scope[iterator + 'SearchParams'] = '?' + scope[iterator + 'SearchField'] + '__';
scope[iterator + 'SearchType'] + '=' + escape(scope[iterator + 'SearchValue']);
scope[iterator + 'SearchParams'] += (default_order) ? '&order_by=' + escape(default_order) : '';
} }
if ( list.fields[scope[iterator + 'SearchField']].searchType &&
(list.fields[scope[iterator + 'SearchField']].searchType == 'int' ||
list.fields[scope[iterator + 'SearchField']].searchType == 'boolean') ) {
scope[iterator + 'SearchParams'] += 'int=';
}
else {
scope[iterator + 'SearchParams'] += scope[iterator + 'SearchType'] + '=';
}
if ( list.fields[scope[iterator + 'SearchField']].searchType &&
list.fields[scope[iterator + 'SearchField']].searchType == 'boolean' ) {
scope[iterator + 'SearchParams'] += scope[iterator + 'SearchSelectValue'].value;
}
else {
scope[iterator + 'SearchParams'] += escape(scope[iterator + 'SearchValue']);
}
scope[iterator + 'SearchParams'] += (default_order) ? '&order_by=' + escape(default_order) : '';
} }
else { else {
scope[iterator + 'SearchParams'] = ''; scope[iterator + 'SearchParams'] = '';

5
lib/ui/static/js/lists/Jobs.js
View File

@@ -21,7 +21,8 @@ angular.module('JobsListDefinition', [])
id: { id: {
label: 'Job ID', label: 'Job ID',
key: true, key: true,
desc: true desc: true,
searchType: 'int'
}, },
created: { created: {
label: 'Creation Date', label: 'Creation Date',
@@ -69,7 +70,7 @@ angular.module('JobsListDefinition', [])
title: 'Cancel', title: 'Cancel',
icon: 'icon-minus-sign', icon: 'icon-minus-sign',
mode: 'all', mode: 'all',
ngClick: 'cancel(\{\{ job.id \}\})', ngClick: 'deleteJob(\{\{ job.id \}\})',
class: 'btn-danger btn-mini', class: 'btn-danger btn-mini',
awToolTip: 'Cancel job', awToolTip: 'Cancel job',
ngDisabled: "job.status == 'error' || job.status == 'failed'" ngDisabled: "job.status == 'error' || job.status == 'failed'"

669
lib/ui/static/lib/ansible/form-generator.js
View File

@@ -68,9 +68,9 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
} }
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.modal) && options.related) { if ((!options.modal) && options.related) {
@@ -142,245 +142,258 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
}); });
}, },
headerField: function(fld, field, options) {
var html = '';
if (field.label) {
html += "<label>" + field.label + "</label>\n";
}
html += "<input type=\"text\" name=\"" + fld + "\" ";
html += "ng-model=\"" + fld + "\" ";
html += (field.class) ? this.attr(field, "class") : "";
html += " readonly />\n";
return html;
},
buildField: function(fld, field, options) { buildField: function(fld, field, options) {
var html=''; var html='';
//Assuming horizontal form for now. This will need to be more flexible later. //Assuming horizontal form for now. This will need to be more flexible later.
//text fields //text fields
if (field.type == 'text' || field.type == 'password' || field.type == 'email') { if (field.type == 'text' || field.type == 'password' || field.type == 'email') {
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) { if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
html += "<div class=\"control-group\"" html += "<div class=\"control-group\""
html += (field.ngShow) ? this.attr(field,'ngShow') : ""; html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += ">\n"; html += ">\n";
html += "<label class=\"control-label"; html += "<label class=\"control-label";
html += (field.labelClass) ? " " + field.labelClass : ""; html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" for=\"" + fld + '">'; html += "\" for=\"" + fld + '">';
html += (field.icon) ? this.icon(field.icon) : ""; html += (field.icon) ? this.icon(field.icon) : "";
html += field.label + '</label>' + "\n"; html += field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
html += (field.clear) ? "<div class=\"input-append\">\n" : ""; html += (field.clear) ? "<div class=\"input-append\">\n" : "";
if (field.control === null || field.control === undefined || field.control) { if (field.control === null || field.control === undefined || field.control) {
html += "<input "; html += "<input ";
html += this.attr(field,'type'); html += this.attr(field,'type');
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" '; html += 'name="' + fld + '" ';
html += (field.ngChange) ? this.attr(field,'ngChange') : ""; html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : ""; html += (field.id) ? this.attr(field,'id') : "";
html += (field.placeholder) ? this.attr(field,'placeholder') : ""; html += (field.class) ? this.attr(field, 'class') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : ""; html += (field.placeholder) ? this.attr(field,'placeholder') : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : ""; html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (field.readonly) ? "readonly " : ""; html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : ""; html += (field.readonly) ? "readonly " : "";
html += (field.capitalize) ? "capitalize " : ""; html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : "";
html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : ""; html += (field.capitalize) ? "capitalize " : "";
html += (field.associated && this.form.fields[field.associated].ask) ? "ng-disabled=\"" + field.associated + "_ask\" " : ""; html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : "";
html += "/>"; html += (field.associated && this.form.fields[field.associated].ask) ? "ng-disabled=\"" + field.associated + "_ask\" " : "";
if (field.clear) { html += "/>";
html += " \n<button class=\"btn\" ng-click=\"clear('" + fld + "','" + field.associated + "')\" " + if (field.clear) {
"aw-tool-tip=\"Clear " + field.label + "\" id=\"" + fld + "-clear-btn\"><i class=\"icon-undo\"></i></button>\n"; html += " \n<button class=\"btn\" ng-click=\"clear('" + fld + "','" + field.associated + "')\" " +
html += "</div>\n"; "aw-tool-tip=\"Clear " + field.label + "\" id=\"" + fld + "-clear-btn\"><i class=\"icon-undo\"></i></button>\n";
} html += "</div>\n";
if (field.ask) { }
html += " \n<label class=\"checkbox inline ask-checkbox\"><input type=\"checkbox\" ng-model=\"" + if (field.ask) {
fld + "_ask\" ng-change=\"ask('" + fld + "','" + field.associated + "')\" /> Ask at runtime?</label>"; html += " \n<label class=\"checkbox inline ask-checkbox\"><input type=\"checkbox\" ng-model=\"" +
} fld + "_ask\" ng-change=\"ask('" + fld + "','" + field.associated + "')\" /> Ask at runtime?</label>";
html += "<br />\n"; }
// Add error messages html += "<br />\n";
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { // Add error messages
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n"; html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
} this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
if (field.type == "email") { }
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + if (field.type == "email") {
this.form.name + '_form.' + fld + ".$error.email\">A valid email address is required!</span>\n"; html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
} this.form.name + '_form.' + fld + ".$error.email\">A valid email address is required!</span>\n";
if (field.awPassMatch) { }
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + if (field.awPassMatch) {
".$error.awpassmatch\">Must match Password value</span>\n"; html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld +
} ".$error.awpassmatch\">Must match Password value</span>\n";
html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n"; }
} html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
html += "</div>\n"; }
html += "</div>\n"; html += "</div>\n";
} html += "</div>\n";
} }
}
//textarea fields //textarea fields
if (field.type == 'textarea') { if (field.type == 'textarea') {
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) { if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
html += "<div class=\"control-group\"" html += "<div class=\"control-group\""
html += (field.ngShow) ? this.attr(field,'ngShow') : ""; html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += ">\n"; html += ">\n";
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n"; html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
html += "<textarea "; html += "<textarea ";
html += (field.rows) ? this.attr(field, 'rows') : ""; html += (field.rows) ? this.attr(field, 'rows') : "";
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" '; html += 'name="' + fld + '" ';
html += (field.class) ? this.attr(field,'class') : ""; html += (field.class) ? this.attr(field,'class') : "";
html += (field.ngChange) ? this.attr(field,'ngChange') : ""; html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : ""; html += (field.id) ? this.attr(field,'id') : "";
html += (field.placeholder) ? this.attr(field,'placeholder') : ""; html += (field.placeholder) ? this.attr(field,'placeholder') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : ""; html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : ""; html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly) ? "readonly " : ""; html += (field.readonly) ? "readonly " : "";
html += "></textarea><br />\n"; html += "></textarea><br />\n";
// Add error messages // Add error messages
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n"; this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
} }
html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n"; html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
} }
} }
//select field //select field
if (field.type == 'select') { if (field.type == 'select') {
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) { if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
html += "<div class=\"control-group\"" html += "<div class=\"control-group\""
html += (field.ngShow) ? this.attr(field,'ngShow') : ""; html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += ">\n"; html += ">\n";
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n"; html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
html += "<select "; html += "<select ";
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" '; html += 'name="' + fld + '" ';
//html += "ng-options=\"item.label for item in " + fld + "_options\" "; //html += "ng-options=\"item.label for item in " + fld + "_options\" ";
html += this.attr(field, 'ngOptions'); html += this.attr(field, 'ngOptions');
html += (field.ngChange) ? this.attr(field,'ngChange') : ""; html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : ""; html += (field.id) ? this.attr(field,'id') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : ""; html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : ""; html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly) ? "readonly " : ""; html += (field.readonly) ? "readonly " : "";
html += ">\n"; html += ">\n";
html += "<option value=\"\">Choose " + field.label + "</option>\n"; html += "<option value=\"\">Choose " + field.label + "</option>\n";
html += "</select><br />\n"; html += "</select><br />\n";
// Add error messages // Add error messages
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n"; this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
} }
html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n"; html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
} }
} }
//number field //number field
if (field.type == 'number') { if (field.type == 'number') {
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) { if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
html += "<div class=\"control-group\"" html += "<div class=\"control-group\""
html += (field.ngShow) ? this.attr(field,'ngShow') : ""; html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += ">\n"; html += ">\n";
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n"; html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
// Use 'text' rather than 'number' so that our integer directive works correctly // Use 'text' rather than 'number' so that our integer directive works correctly
html += "<input type=\"text\" value=\"" + field.default + "\" class=\"spinner\" "; html += "<input type=\"text\" value=\"" + field.default + "\" class=\"spinner\" ";
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" '; html += 'name="' + fld + '" ';
html += (field.min || field.min == 0) ? this.attr(field, 'min') : ""; html += (field.min || field.min == 0) ? this.attr(field, 'min') : "";
html += (field.max) ? this.attr(field, 'max') : ""; html += (field.max) ? this.attr(field, 'max') : "";
html += (field.ngChange) ? this.attr(field,'ngChange') : ""; html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : ""; html += (field.id) ? this.attr(field,'id') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : ""; html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : ""; html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly) ? "readonly " : ""; html += (field.readonly) ? "readonly " : "";
html += (field.integer) ? "integer " : ""; html += (field.integer) ? "integer " : "";
html += "/><br />\n"; html += "/><br />\n";
// Add error messages // Add error messages
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n"; this.form.name + '_form.' + fld + ".$error.required\">A value is required!</span>\n";
} }
if (field.integer) { if (field.integer) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$error.integer\">Must be an integer value</span>\n"; html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$error.integer\">Must be an integer value</span>\n";
} }
if (field.min || field.max) { if (field.min || field.max) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$error.min || " + html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$error.min || " +
this.form.name + '_form.' + fld + ".$error.max\">Must be in range " + field.min + " to " + this.form.name + '_form.' + fld + ".$error.max\">Must be in range " + field.min + " to " +
field.max + "</span>\n"; field.max + "</span>\n";
} }
html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n"; html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
} }
} }
//checkbox //checkbox
if (field.type == 'checkbox') { if (field.type == 'checkbox') {
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) { if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
html += "<div class=\"control-group\" " html += "<div class=\"control-group\" "
html += (field.ngShow) ? this.attr(field,'ngShow') : ""; html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += ">\n"; html += ">\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
html += "<label class=\"checkbox\">"; html += "<label class=\"checkbox\">";
html += "<input "; html += "<input ";
html += this.attr(field,'type'); html += this.attr(field,'type');
html += "ng-model=\"" + fld + '" '; html += "ng-model=\"" + fld + '" ';
html += "name=\"" + fld + '" '; html += "name=\"" + fld + '" ';
html += (field.ngChange) ? this.attr(field,'ngChange') : ""; html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : ""; html += (field.id) ? this.attr(field,'id') : "";
html += this.attr(field,'trueValue'); html += this.attr(field,'trueValue');
html += this.attr(field,'falseValue'); html += this.attr(field,'falseValue');
html += (field.checked) ? "checked " : ""; html += (field.checked) ? "checked " : "";
html += (field.readonly) ? "readonly " : ""; html += (field.readonly) ? "readonly " : "";
html += " /> " + field.label + "\n"; html += " /> " + field.label + "\n";
html += "</label>\n"; html += "</label>\n";
html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n"; html += "<span class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></span>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
} }
} }
if (field.type == 'hidden') { if (field.type == 'hidden') {
if ( (options.mode == 'edit' && field.includeOnEdit) || if ( (options.mode == 'edit' && field.includeOnEdit) ||
(options.mode == 'add' && field.includeOnAdd) ) { (options.mode == 'add' && field.includeOnAdd) ) {
html += "<input type=\"hidden\" ng-model=\"" + fld + "\" name=\"" + fld + "\" />"; 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\""
html += (field.ngShow) ? this.attr(field,'ngShow') : ""; html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += ">\n"; html += ">\n";
html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n"; html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
html += "<div class=\"controls\">\n"; html += "<div class=\"controls\">\n";
html += "<div class=\"input-prepend\">\n"; html += "<div class=\"input-prepend\">\n";
html += "<button class=\"btn\" " + this.attr(field,'ngClick') + "><i class=\"icon-search\"></i></button>\n"; html += "<button class=\"btn\" " + this.attr(field,'ngClick') + "><i class=\"icon-search\"></i></button>\n";
html += "<input class=\"input-medium\" type=\"text\" "; html += "<input class=\"input-medium\" type=\"text\" ";
html += "ng-model=\"" + field.sourceModel + '_' + field.sourceField + "\" "; html += "ng-model=\"" + field.sourceModel + '_' + field.sourceField + "\" ";
html += "name=\"" + field.sourceModel + '_' + field.sourceField + "\" "; html += "name=\"" + field.sourceModel + '_' + field.sourceField + "\" ";
html += (field.ngChange) ? this.attr(field,'ngChange') : ""; html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.id) ? this.attr(field,'id') : ""; html += (field.id) ? this.attr(field,'id') : "";
html += (field.placeholder) ? this.attr(field,'placeholder') : ""; html += (field.placeholder) ? this.attr(field,'placeholder') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : ""; html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : ""; html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += " awlookup />\n"; html += " awlookup />\n";
html += "</div><br />\n"; html += "</div><br />\n";
// Add error messages // Add error messages
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) { if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' +
field.sourceModel + '_' + field.sourceField + ".$dirty && " + field.sourceModel + '_' + field.sourceField + ".$dirty && " +
this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField + this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField +
".$error.required\">A value is required!</span>\n"; ".$error.required\">A value is required!</span>\n";
} }
html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' +
field.sourceModel + '_' + field.sourceField + ".$dirty && " + field.sourceModel + '_' + field.sourceField + ".$dirty && " +
this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField + this.form.name + '_form.' + field.sourceModel + '_' + field.sourceField +
".$error.awlookup\">Value not found</span>\n"; ".$error.awlookup\">Value not found</span>\n";
html += "<span class=\"error api-error\" ng-bind=\"" + field.sourceModel + '_' + field.sourceField + html += "<span class=\"error api-error\" ng-bind=\"" + field.sourceModel + '_' + field.sourceField +
"_api_error\"></span>\n"; "_api_error\"></span>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
} }
return html; return html;
}, },
build: function(options) { build: function(options) {
@@ -406,91 +419,102 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
html += "</li>\n</ul>\n</div>\n"; html += "</li>\n</ul>\n</div>\n";
} }
// Start the well if (this.form.fieldsAsHeader) {
if ( this.has('well') ) {
html += "<div class=\"well\">\n"; html += "<div class=\"well\">\n";
} html += "<form class=\"form-inline\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "\" novalidate >\n";
html += "<form class=\"form-horizontal\" name=\"" + this.form.name + '_form" id="' + this.form.name + '" novalidate>' + "\n";
html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
var field;
if (this.form.twoColumns) {
html += "<div class=\"row-fluid\">\n";
html += "<div class=\"span6\">\n";
for (var fld in this.form.fields) { for (var fld in this.form.fields) {
field = this.form.fields[fld]; field = this.form.fields[fld];
if (field.column == 1) { html += this.headerField(fld, field, options);
html += this.buildField(fld, field, options);
}
} }
html += "</div><!-- column 1 -->\n"; html += "</form>\n";
html += "<div class=\"span6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 2) {
html += this.buildField(fld, field, options);
}
}
html += "</div><!-- column 2 -->\n";
html += "</div><!-- inner row -->\n";
}
else {
// original, single-column form
for (var fld in this.form.fields) {
var field = this.form.fields[fld];
html += this.buildField(fld, field, options);
}
}
//buttons
if (!this.modal) {
if (this.has('buttons')) {
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];
//button
html += "<button ";
html += "class=\"btn btn-small";
html += (button.class) ? " " + button.class : "";
html += "\" ";
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";
html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : "";
html += "\" ";
}
else {
html += "ng-disabled=\"" + this.form.name + "_form.$pristine";
html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : "";
html += "\" ";
}
}
html += ">";
if (button.icon) {
html += this.icon(button.icon);
}
html += button.label + "</button>\n";
}
if (this.has('buttons')) {
html += "</div>\n";
html += "</div>\n";
}
}
html += "</form>\n";
if ( this.has('well') ) {
html += "</div>\n"; html += "</div>\n";
} }
else {
// Start the well
if ( this.has('well') ) {
html += "<div class=\"well\">\n";
}
html += "<form class=\"form-horizontal\" name=\"" + this.form.name + '_form" id="' + this.form.name + '" novalidate>' + "\n";
html += "<div ng-show=\"flashMessage != null && flashMessage != undefined\" class=\"alert alert-info\">{{ flashMessage }}</div>\n";
var field;
if (this.form.twoColumns) {
html += "<div class=\"row-fluid\">\n";
html += "<div class=\"span6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 1) {
html += this.buildField(fld, field, options);
}
}
html += "</div><!-- column 1 -->\n";
html += "<div class=\"span6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 2) {
html += this.buildField(fld, field, options);
}
}
html += "</div><!-- column 2 -->\n";
html += "</div><!-- inner row -->\n";
}
else {
// original, single-column form
for (var fld in this.form.fields) {
var field = this.form.fields[fld];
html += this.buildField(fld, field, options);
}
}
//buttons
if (!this.modal) {
if (this.has('buttons')) {
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];
//button
html += "<button ";
html += "class=\"btn btn-small";
html += (button.class) ? " " + button.class : "";
html += "\" ";
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";
html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : "";
html += "\" ";
}
else {
html += "ng-disabled=\"" + this.form.name + "_form.$pristine";
html += (this.form.allowReadonly) ? " || " + this.form.name + "ReadOnly == true" : "";
html += "\" ";
}
}
html += ">";
if (button.icon) {
html += this.icon(button.icon);
}
html += button.label + "</button>\n";
}
if (this.has('buttons')) {
html += "</div>\n";
html += "</div>\n";
}
html += "</form>\n";
}
if ( this.has('well') ) {
html += "</div>\n";
}
}
if ((!this.modal && this.form.statusFields)) { if ((!this.modal && this.form.statusFields)) {
// Add status fields section (used in Jobs form) // Add status fields section (used in Jobs form)
html += "<div class=\"well\">\n"; html += "<div class=\"well\">\n";
@@ -500,6 +524,35 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
} }
html += "</div><!-- well -->\n"; html += "</div><!-- well -->\n";
} }
if ((!this.modal && this.form.items)) {
for (itm in this.form.items) {
html += "<div class=\"well form-items\">\n";
html += SearchWidget({ iterator: this.form.items[itm].iterator, template: this.form.items[itm], mini: false, label: 'Filter Events'});
html += "<div class=\"item-count pull-right\">Viewing" + " \{\{ " + this.form.items[itm].iterator + "Page + 1 \}\} of " +
"\{\{ " + this.form.items[itm].iterator + "Count \}\}</div>\n";
html += "<hr />\n";
html += "<ul class=\"pager\">\n";
html += "<li ng-class=\"" + this.form.items[itm].iterator + "PrevUrlDisable\"><a href=\"\" " +
"ng-click=\"prevSet('" + this.form.items[itm].set + "','" + this.form.items[itm].iterator + "')\">&larr; Prev</a></li>\n";
html += "<li ng-class=\"" + this.form.items[itm].iterator + "NextUrlDisable\"><a href=\"\" " +
"ng-click=\"nextSet('" + this.form.items[itm].set + "','" + this.form.items[itm].iterator + "')\">&rarr; Next</a></li>\n";
html +="</ul>\n";
html += "<form class=\"form-horizontal\" name=\"" + this.form.name + '_items_form" id="' + this.form.name + '_items_form" novalidate>' + "\n";
for (var fld in this.form.items[itm].fields) {
var field = this.form.items[itm].fields[fld];
html += this.buildField(fld, field, options);
}
html += "</form>\n";
html += "<ul class=\"pager\">\n";
html += "<li ng-class=\"" + this.form.items[itm].iterator + "PrevUrlDisable\"><a href=\"\" " +
"ng-click=\"prevSet('" + this.form.items[itm].set + "','" + this.form.items[itm].iterator + "')\">&larr; Prev</a></li>\n";
html += "<li ng-class=\"" + this.form.items[itm].iterator + "NextUrlDisable\"><a href=\"\" " +
"ng-click=\"nextSet('" + this.form.items[itm].set + "','" + this.form.items[itm].iterator + "')\">&rarr; Next</a></li>\n";
html +="</ul>\n";
html += "</div><!-- well -->\n";
}
}
if ((!this.modal) && options.related && this.form.related) { if ((!this.modal) && options.related && this.form.related) {
html += this.buildCollections(); html += this.buildCollections();

17
lib/ui/static/lib/ansible/generator-helpers.js
View File

@@ -16,9 +16,11 @@ angular.module('GeneratorHelpers', [])
var iterator = params.iterator; var iterator = params.iterator;
var form = params.template; var form = params.template;
var useMini = params.mini; var useMini = params.mini;
var label = (params.label) ? params.label : null;
var html= ''; var html= '';
html += "<div class=\"search-widget\">\n"; html += "<div class=\"search-widget\">\n";
html += (label) ? "<label>" + label +"</label>" : "";
html += "<div class=\"input-prepend input-append\">\n"; html += "<div class=\"input-prepend input-append\">\n";
html += "<div class=\"btn-group\">\n"; html += "<div class=\"btn-group\">\n";
html += "<button class=\"btn "; html += "<button class=\"btn ";
@@ -31,19 +33,24 @@ angular.module('GeneratorHelpers', [])
for ( var fld in form.fields) { for ( var fld in form.fields) {
html += "<li><a href=\"\" ng-click=\"setSearchField('" + iterator + "','"; html += "<li><a href=\"\" ng-click=\"setSearchField('" + iterator + "','";
html += (form.fields[fld].desc) ? '-' : ''; //html += (form.fields[fld].desc) ? '-' : '';
//html += (form.fields[fld].searchField) ? form.fields[fld].searchField : fld;
html += fld + "','" + form.fields[fld].label + "')\">" html += fld + "','" + form.fields[fld].label + "')\">"
+ form.fields[fld].label + "</a></li>\n"; + form.fields[fld].label + "</a></li>\n";
} }
html += "</ul>\n"; html += "</ul>\n";
html += "</div>\n"; html += "</div>\n";
html += "<input class=\"input-medium";
html += "<select ng-show=\"" + iterator + "SelectShow\" ng-model=\""+ iterator + "SearchSelectValue\" ng-change=\"search('" + iterator + "')\" ";
html += "ng-options=\"c.name for c in " + iterator + "SearchSelectOpts\" class=\"search-select\"></select>\n";
html += "<input ng-hide=\"" + iterator + "SelectShow\" class=\"input-medium";
html += (useMini) ? " field-mini-height" : ""; html += (useMini) ? " field-mini-height" : "";
html += "\" ng-model=\"" + iterator + "SearchValue\" ng-change=\"search('" + iterator + html += "\" ng-model=\"" + iterator + "SearchValue\" ng-change=\"search('" + iterator +
"')\" placeholder=\"Search\" type=\"text\" >\n"; "')\" placeholder=\"Search\" type=\"text\" >\n";
html += "<div class=\"btn-group\">\n"; html += "<div class=\"btn-group\">\n";
html += "<button class=\"btn "; html += "<button ng-hide=\"" + iterator + "SelectShow || " + iterator + "HideSearchType\" class=\"btn ";
html += (useMini) ? "btn-mini " : ""; html += (useMini) ? "btn-mini " : "";
html += "dropdown-toggle\" data-toggle=\"dropdown\">\n"; html += "dropdown-toggle\" data-toggle=\"dropdown\">\n";
html += "<span ng-bind=\"" + iterator + "SearchTypeLabel\"></span>\n"; html += "<span ng-bind=\"" + iterator + "SearchTypeLabel\"></span>\n";
@@ -55,7 +62,7 @@ angular.module('GeneratorHelpers', [])
html += "</ul>\n"; html += "</ul>\n";
html += "</div>\n"; html += "</div>\n";
html += "</div>\n"; html += "</div>\n";
html += "<div class=\"spin\" ng-show=\"" + iterator + "SearchSpin == true\"><i class=\"icon-spinner icon-spin\"></i></div>\n"; html += "<div class=\"spin\"><i class=\"icon-spinner icon-spin\" ng-show=\"" + iterator + "SearchSpin == true\"></i></div>\n";
html += "</div>\n"; html += "</div>\n";
return html; return html;

2
lib/ui/static/lib/ansible/list-generator.js
View File

@@ -140,7 +140,7 @@ angular.module('ListGenerator', ['GeneratorHelpers',])
if (list.actions[action].mode == 'all' || list.actions[action].mode == options.mode) { if (list.actions[action].mode == 'all' || list.actions[action].mode == options.mode) {
if ( (list.basePaths == undefined) || (list.basePaths && list.basePaths.indexOf(base) > -1) ) { if ( (list.basePaths == undefined) || (list.basePaths && list.basePaths.indexOf(base) > -1) ) {
html += "<button " + this.attr(list.actions[action], 'ngClick') + html += "<button " + this.attr(list.actions[action], 'ngClick') +
"class=\"btn-small " + list.actions[action].class + "\" "; "class=\"btn btn-small " + list.actions[action].class + "\" ";
html += (list.actions[action].awToolTip) ? this.attr(list.actions[action],'awToolTip') : ""; html += (list.actions[action].awToolTip) ? this.attr(list.actions[action],'awToolTip') : "";
html += " >" + this.icon(list.actions[action].icon) + "</button> "; html += " >" + this.icon(list.actions[action].icon) + "</button> ";
} }