shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-02 09:51:09 +03:00
Code Releases Activity

Finished icon cleanup from FontAwesome upgrade. Changed default form style to basic rather than horizontal for a much cleaner, uncluttered look, especially in dialog boxes. Group Edit dialog is starting to function. Added support for Tabs in form generator.

Browse Source
This commit is contained in:
Chris Houseknecht 2013-12-28 19:45:51 +00:00
parent 0b7d3999d2
commit 5c42b88e27
22 changed files with 487 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui/static/js/controllers/Credentials.js
View File

@ -195,6 +195,11 @@ function CredentialsAdd ($scope, $rootScope, $compile, $location, $log, $routePa
{ hdr: 'Error!', msg: 'Failed to retrieve team. GET status: ' + status });
});
}
else {
// default type of owner to a user
scope['owner'] = 'user';
OwnerChange({ scope: scope });
}
// Handle Kind change
scope.kindChange = function () {

13
awx/ui/static/js/controllers/Inventories.js
View File

@ -316,7 +316,7 @@ InventoriesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$lo
function InventoriesEdit ($scope, $location, $routeParams, GenerateList, ClearScope, InventoryGroups, InventoryHosts, BuildTree, Wait,
UpdateStatusMsg, InjectHosts, HostsReload)
UpdateStatusMsg, InjectHosts, HostsReload, GroupsAdd, GroupsEdit)
{
ClearScope('htmlTemplate'); //Garbage collection. Don't leave behind any listeners/watchers from the prior
//scope.
@ -347,14 +347,21 @@ function InventoriesEdit ($scope, $location, $routeParams, GenerateList, ClearSc
$scope.showHosts = function(group_id) {
// Clicked on group
console.log('here');
HostsReload({ scope: $scope, group_id: group_id, inventory_id: $scope.inventory_id });
}
$scope.createGroup = function() {
GroupsAdd({ scope: $scope, inventory_id: $scope.inventory_id, group_id: null });
}
$scope.editGroup = function(group_id) {
GroupsEdit({ scope: $scope, inventory_id: $scope.inventory_id, group_id: group_id });
}
BuildTree({ scope: $scope, inventory_id: $scope.inventory_id });
}
InventoriesEdit.$inject = [ '$scope','$location', '$routeParams', 'GenerateList', 'ClearScope', 'InventoryGroups', 'InventoryHosts', 'BuildTree',
'Wait', 'UpdateStatusMsg', 'InjectHosts', 'HostsReload'
'Wait', 'UpdateStatusMsg', 'InjectHosts', 'HostsReload', 'GroupsAdd', 'GroupsEdit'
];

17
awx/ui/static/js/forms/Credentials.js
View File

@ -39,13 +39,11 @@ angular.module('CredentialFormDefinition', [])
editRequired: false
},
owner: {
label: 'Owned By?',
type: 'radio',
label: "Does this credential belong to a team or user?",
type: 'radio_group',
ngChange: "ownerChange()",
addRequired: true,
editRequired: true,
options: [
{ label: 'User', value: 'user' },
{ label: 'User', value: 'user', selected: true },
{ label: 'Team', value: 'team' }
],
awPopOver: "<p>A credential must be associated with either a user or a team. Choosing a user allows only the selected user access " +
@ -55,7 +53,7 @@ angular.module('CredentialFormDefinition', [])
dataContainer: "body"
},
user: {
label: 'User',
label: 'User that owns this credential',
type: 'lookup',
sourceModel: 'user',
sourceField: 'username',
@ -64,7 +62,7 @@ angular.module('CredentialFormDefinition', [])
awRequiredWhen: { variable: "user_required", init: "false" }
},
team: {
label: 'Team',
label: 'Team that owns this credential',
type: 'lookup',
sourceModel: 'team',
sourceField: 'name',
@ -81,9 +79,8 @@ angular.module('CredentialFormDefinition', [])
addRequired: true,
editRequired: true,
helpCollapse: [
{ hdr: 'Credential Type',
content: '<p>Choose a type for this credential: ' +
'<dl>\n' +
{ hdr: 'Select a Credential Type',
content: '<dl>\n' +
'<dt>AWS</dt>\n' +
'<dd>Access keys for Amazon Web Services used for inventory management or deployment.</dd>\n' +
'<dt>Machine</dt>\n' +

87
awx/ui/static/js/forms/Groups.js
View File

@ -10,70 +10,34 @@ angular.module('GroupFormDefinition', [])
.value(
'GroupForm', {
addTitle: 'Create Group', //Legend in add mode
editTitle: '{{ name }}', //Legend in edit mode
addTitle: 'Create Group',
editTitle: 'Edit Group',
showTitle: true,
cancelButton: false,
name: 'group', //Form name attribute
well: true, //Wrap the form with TB well
name: 'group',
well: true,
formLabelSize: 'col-lg-3',
formFieldSize: 'col-lg-9',
titleActions: {
copy_action: {
'class': 'btn-success btn-xs',
ngClick: "addGroup()",
ngHide: "groupAddHide",
awToolTip: "\{\{ addGroupHelp \}\}",
dataPlacement: 'top',
ngDisabled: "grpBtnDisable",
icon: "icon-check",
label: 'Copy'
},
create_action: {
'class': 'btn-success btn-xs',
ngClick: "createGroup()",
ngHide: "groupCreateHide",
awToolTip: "\{\{ createGroupHelp \}\}",
dataPlacement: "top",
ngDisabled: "grpBtnDisable",
icon: "icon-plus",
label: "Create New"
},
update_action: {
'class': 'btn-success btn-xs',
ngClick: "updateGroup()",
ngHide: "groupUpdateHide",
awToolTip: "\{\{ updateGroupHelp \}\}",
dataPlacement: "top",
ngDisabled: "grpBtnDisable",
icon: "icon-cloud-download",
label: 'Update'
},
delete_action: {
'class': "btn-danger btn-xs",
ngClick: "deleteGroup()",
ngHide: "groupDeleteHide",
awToolTip: "\{\{ deleteGroupHelp \}\}",
dataPlacement: "top",
ngDisabled: "grpBtnDisable",
icon: "icon-trash",
label: "Delete"
}
},
tabs: [
{ name: 'properties', label: 'Properties'},
{ name: 'source', label: 'Source' }
],
fields: {
name: {
label: 'Name',
type: 'text',
addRequired: true,
editRequired: true
editRequired: true,
tab: 'properties'
},
description: {
label: 'Description',
type: 'text',
addRequired: false,
editRequired: false
editRequired: false,
tab: 'properties'
},
variables: {
label: 'Variables',
@ -93,24 +57,25 @@ angular.module('GroupFormDefinition', [])
"<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
'<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
'<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
dataContainer: 'body'
dataContainer: 'body',
tab: 'properties'
},
source: {
label: 'Source',
excludeModal: true,
type: 'select',
ngOptions: 'source.label for source in source_type_options',
ngChange: 'sourceChange()',
addRequired: false,
editRequired: false,
'default': { label: 'Manual', value: '' }
'default': { label: 'Manual', value: '' },
tab: 'source'
},
source_path: {
label: 'Script Path',
excludeModal: true,
ngShow: "source.value == 'file'",
type: 'text',
awRequiredWhen: {variable: "sourcePathRequired", init: "false" }
awRequiredWhen: {variable: "sourcePathRequired", init: "false" },
tab: 'source'
},
credential: {
label: 'Cloud Credential',
@ -120,11 +85,11 @@ angular.module('GroupFormDefinition', [])
sourceField: 'name',
ngClick: 'lookUpCredential()',
addRequired: false,
editRequired: false
editRequired: false,
tab: 'source'
},
source_regions: {
label: 'Regions',
excludeModal: true,
type: 'text',
ngShow: "source.value == 'rax' || source.value == 'ec2'",
addRequired: false,
@ -135,7 +100,8 @@ angular.module('GroupFormDefinition', [])
awPopOver: "<p>Click on the regions field to see a list of regions for your cloud provider. You can select multiple regions, " +
"or choose <em>All</em> to include all regions. AWX will only be updated with Hosts associated with the selected regions." +
"</p>",
dataContainer: 'body'
dataContainer: 'body',
tab: 'source'
},
source_vars: {
label: 'Source Variables',
@ -143,7 +109,6 @@ angular.module('GroupFormDefinition', [])
type: 'textarea',
addRequired: false,
editRequird: false,
excludeModal: true,
rows: 10,
'default': '---',
parseTypeName: 'envParseType',
@ -159,7 +124,8 @@ angular.module('GroupFormDefinition', [])
"<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
'<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
'<p>View YAML examples at <a href="http://www.ansibleworks.com/docs/YAMLSyntax.html" target="_blank">ansibleworks.com</a></p>',
dataContainer: 'body'
dataContainer: 'body',
tab: 'source'
},
/*update_interval: {
label: 'Update Interval',
@ -180,6 +146,7 @@ angular.module('GroupFormDefinition', [])
label: 'Update Options',
type: 'checkbox_group',
ngShow: "source.value !== '' && source.value !== null",
tab: 'source',
fields: [
{
@ -249,5 +216,5 @@ angular.module('GroupFormDefinition', [])
}
}); //UserForm
});

10
awx/ui/static/js/forms/JobTemplates.js
View File

@ -187,7 +187,7 @@ angular.module('JobTemplateFormDefinition', [])
"YAML:<br />\n" +
"<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n",
dataTitle: 'Extra Variables',
dataPlacement: 'left',
dataPlacement: 'right',
dataContainer: "body"
},
job_tags: {
@ -206,7 +206,7 @@ angular.module('JobTemplateFormDefinition', [])
"in the Job Tags field:<\p>\n" +
"<blockquote>configuration,packages</blockquote>\n",
dataTitle: "Job Tags",
dataPlacement: "left",
dataPlacement: "right",
dataContainer: "body"
},
allow_callbacks: {
@ -227,7 +227,7 @@ angular.module('JobTemplateFormDefinition', [])
"<p>Note the requesting host must be defined in your inventory. If ansible fails to locate the host either by name or IP address " +
"in one of your defined inventories, the request will be denied.</p>" +
"<p>Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.</p>",
detailPlacement: 'left',
dataPlacement: 'right',
dataTitle: 'Callback URL',
dataContainer: "body"
},
@ -247,7 +247,7 @@ angular.module('JobTemplateFormDefinition', [])
"<p>Note the requesting host must be defined in your inventory. If ansible fails to locate the host either by name or IP address " +
"in one of your defined inventories, the request will be denied.</p>" +
"<p>Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.</p>",
detailPlacement: 'left',
dataPlacement: 'right',
dataTitle: 'Callback URL',
dataContainer: "body"
},
@ -261,7 +261,7 @@ angular.module('JobTemplateFormDefinition', [])
"this key in the POST data of the request. Here's an example using curl:</p>\n" +
"<p class=\"code-breakable\">curl --data \"host_config_key=5a8ec154832b780b9bdef1061764ae5a\" " +
"http://your.server.com:999/api/v1/job_templates/1/callback/</p>\n",
detailPlacement: 'left',
dataPlacement: 'right',
dataContainer: "body"
}
},

16
awx/ui/static/js/forms/Jobs.js
View File

@ -202,7 +202,7 @@ angular.module('JobFormDefinition', [])
"<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n",
dataTitle: 'Extra Variables',
dataContainer: 'body',
dataPlacement: 'left'
dataPlacement: 'right'
},
job_tags: {
label: 'Job Tags',
@ -221,7 +221,7 @@ angular.module('JobFormDefinition', [])
"<blockquote>configuration,packages</blockquote>\n",
dataTitle: "Job Tags",
dataContainer: 'body',
dataPlacement: "left"
dataPlacement: "right"
},
allow_callbacks: {
label: 'Allow Callbacks',
@ -242,7 +242,7 @@ angular.module('JobFormDefinition', [])
"<p>Note the requesting host must be defined in your inventory. If ansible fails to locate the host either by name or IP address " +
"in one of your defined inventories, the request will be denied.</p>" +
"<p>Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.</p>",
detailPlacement: 'left',
dataPlacement: 'right',
dataContainer: 'body',
dataTitle: 'Callback URL'
},
@ -262,7 +262,7 @@ angular.module('JobFormDefinition', [])
"<p>Note the requesting host must be defined in your inventory. If ansible fails to locate the host either by name or IP address " +
"in one of your defined inventories, the request will be denied.</p>" +
"<p>Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.</p>",
detailPlacement: 'left',
dataPlacement: 'right',
dataContainer: 'body',
dataTitle: 'Callback URL'
},
@ -276,7 +276,7 @@ angular.module('JobFormDefinition', [])
"this key in the POST data of the request. Here's an example using curl:</p>\n" +
"<p class=\"code-breakable\">curl --data \"host_config_key=5a8ec154832b780b9bdef1061764ae5a\" " +
"http://your.server.com:999/api/v1/job_templates/1/callback/</p>\n",
detailPlacement: 'left',
dataPlacement: 'right',
dataContainer: 'body'
}
},
@ -300,13 +300,13 @@ angular.module('JobFormDefinition', [])
statusFields: {
status: {
label: 'Job Status',
//label: 'Job Status',
type: 'custom',
control: '<div class=\"job-detail-status\"><i class=\"icon-job-\{\{ status \}\}\"></i> \{\{ status \}\}</div>',
control: '<div class=\"job-detail-status\"><span style="padding-right: 15px; font-weight: bold;">Status</span> <i class=\"fa icon-job-\{\{ status \}\}\"></i> \{\{ status \}\}</div>',
readonly: true
},
created: {
label: 'Date',
label: 'Created On',
type: 'text',
readonly: true
},

4
awx/ui/static/js/forms/Projects.js
View File

@ -83,7 +83,7 @@ angular.module('ProjectFormDefinition', [])
base_dir: {
label: 'Project Base Path',
type: 'textarea',
"class": 'col-lg-6',
//"class": 'col-lg-6',
showonly: true,
ngShow: "scm_type.value == ''",
awPopOver: '<p>Base path used for locating playbooks. Directories found inside this path will be listed in the playbook directory drop-down. ' +
@ -153,7 +153,7 @@ angular.module('ProjectFormDefinition', [])
editRequired: false
},
checkbox_group: {
label: 'SCM Options',
label: 'SCM Update Options',
type: 'checkbox_group',
ngShow: "scm_type && scm_type.value !== ''",
fields: [

14
awx/ui/static/js/forms/Users.js
View File

@ -66,11 +66,6 @@ angular.module('UserFormDefinition', [])
awRequiredWhen: { variable: "not_ldap_user", init: true },
autocomplete: false
},
ldap_user: {
label: 'Created by LDAP?',
type: 'checkbox',
readonly: true
},
password: {
label: 'Password',
type: 'password',
@ -91,13 +86,18 @@ angular.module('UserFormDefinition', [])
autocomplete: false
},
is_superuser: {
label: 'Superuser?',
label: 'Superuser (User has full system administration privileges.)',
type: 'checkbox',
trueValue: 'true',
falseValue: 'false',
"default": 'false',
ngShow: "current_user['is_superuser'] == true"
}
},
ldap_user: {
label: 'Created by LDAP',
type: 'checkbox',
readonly: true
},
},
buttons: { //for now always generates <button> tags

5
awx/ui/static/js/helpers/Events.js
View File

@ -27,10 +27,9 @@ angular.module('EventsHelper', ['RestServices', 'Utilities', 'JobEventDataDefini
fields: {
status: {
labelClass: 'job-\{\{ status \}\}',
icon: 'icon-job-\{\{ status \}\}',
type: 'custom',
section: 'Event',
control: '<div class=\"job-event-status job-\{\{ status \}\}\">\{\{ status \}\}</div>'
control: '<div class=\"job-event-status job-\{\{ status \}\}\"><i class=\"fa icon-job-{{ status }}"></i> \{\{ status \}\}</div>'
},
id: {
label: 'ID',
@ -40,7 +39,7 @@ angular.module('EventsHelper', ['RestServices', 'Utilities', 'JobEventDataDefini
'class': 'span1'
},
created: {
label: 'Created',
label: 'Created On',
type: 'text',
section: 'Event',
readonly: true

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

@ -6,7 +6,9 @@
* Routines that handle group add/edit/delete on the Inventory tree widget.
*
*/
'use strict';
angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService', 'GroupsHelper',
'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper', 'RefreshHelper',
@ -26,7 +28,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
var choices = data.actions.GET.source.choices
for (var i=0; i < choices.length; i++) {
if (choices[i][0] !== 'file') {
scope[variable].push({ label: [ (choices[i][0] == "") ? 'Manual' : choices[i][1] ], value: choices[i][0] });
scope[variable].push({ label: (choices[i][0] == "") ? 'Manual' : choices[i][1] , value: choices[i][0] });
}
}
})
@ -601,7 +603,6 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
var groupCreated = false;
scope.formModalActionLabel = 'Save';
scope.formModalHeader = 'Create New Group';
scope.formModalCancelShow = true;
scope.parseType = 'yaml';
scope.source = null;
@ -704,17 +705,14 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
GetBasePath, SetNodeName, ParseTypeChange, GetSourceTypeOptions, InventoryUpdate, GetUpdateIntervalOptions, ClickNode,
LookUpInit, CredentialList, Empty, Wait, GetChoices) {
return function(params) {
$('#tree-form').hide().empty();
var group_id = params.group_id;
var inventory_id = params.inventory_id;
var generator = GenerateForm;
var form = GroupForm;
var defaultUrl = GetBasePath('groups') + group_id + '/';
var scope = generator.inject(form,
{ mode: 'edit', modal: false, related: false, id: 'tree-form', breadCrumbs: false });
var scope = generator.inject(form, { mode: 'edit', modal: true, related: false });
generator.reset();
var master = {};
@ -722,7 +720,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
GetSourceTypeOptions({ scope: scope, variable: 'source_type_options' });
scope.update_interval_options = GetUpdateIntervalOptions();
//scope.update_interval_options = GetUpdateIntervalOptions();
scope.formModalActionLabel = 'Save';
scope.formModalCancelShow = true;
scope.source = form.fields.source['default'];
scope.parseType = 'yaml';
scope[form.fields['source_vars'].parseTypeName] = 'yaml';
@ -945,8 +945,11 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
scope.removeSaveComplete = scope.$on('SaveComplete', function(e, error) {
if (!error) {
scope['flashMessage'] = 'Your changes to ' + scope['name'] + ' were saved.';
ClickNode({ selector: '#inventory-root-node' });
//scope['flashMessage'] = 'Your changes to ' + scope['name'] + ' were saved.';
//ClickNode({ selector: '#inventory-root-node' });
scope.formModalActionDisabled = false;
scope.showGroupHelp = false; //get rid of the Hint
$('#form-modal').modal('hide');
}
});
@ -955,15 +958,18 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
scope.removeFormSaveSuccess = scope.$on('formSaveSuccess', function(e, group_id) {
// Source data gets stored separately from the group. Validate and store Source
// related fields, then call SaveComplete to wrap things up.
var parseError = false;
var saveError = false;
// Update the selector tree with new group name, descr
SetNodeName({ scope: scope['selectedNode'], group_id: group_id,
name: scope.name, description: scope.description });
//SetNodeName({ scope: scope['selectedNode'], group_id: group_id,
// name: scope.name, description: scope.description });
if (scope.source.value !== null && scope.source.value !== '') {
var data = { group: group_id,
var data = { group: group_id,
source: scope['source'].value,
source_path: scope['source_path'],
credential: scope['credential'],
@ -972,46 +978,42 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
update_on_launch: scope['update_on_launch']
//update_interval: scope['update_interval'].value
};
// Get the select list of regions
var regions = $('#s2id_group_source_regions').select2("data");
data['source_regions'] = '';
for (var i=0; i < regions.length; i++) {
data['source_regions'] += regions[i].id + ',';
}
data['source_regions'] = data['source_regions'].replace(/\,$/,'');
if (scope['source'].value == 'ec2') {
try {
// Make sure we have valid variable data
if (scope.envParseType == 'json') {
var json_data = JSON.parse(scope.source_vars); //make sure JSON parses
}
else {
var json_data = jsyaml.load(scope.source_vars); //parse yaml
}
// Make sure our JSON is actually an object
if (typeof json_data !== 'object') {
throw "failed to return an object!";
}
// Send JSON as a string
if ($.isEmptyObject(json_data)) {
data.source_vars = "";
}
else {
data.source_vars = JSON.stringify(json_data, undefined, '\t');
}
}
catch(err) {
parseError = true;
scope.$emit('SaveComplete', true);
Alert("Error", "Error parsing extra variables. Parser returned: " + err);
}
}
// Create a string out of selected list of regions
var regions = $('#s2id_group_source_regions').select2("data");
data['source_regions'] = regions.join();
if (scope['source'].value == 'ec2') {
// for ec2, validate variable data
try {
if (scope.envParseType == 'json') {
var json_data = JSON.parse(scope.source_vars); //make sure JSON parses
}
else {
var json_data = jsyaml.load(scope.source_vars); //parse yaml
}
// Make sure our JSON is actually an object
if (typeof json_data !== 'object') {
throw "failed to return an object!";
}
// Send JSON as a string
if ($.isEmptyObject(json_data)) {
data.source_vars = "";
}
else {
data.source_vars = JSON.stringify(json_data, undefined, '\t');
}
}
catch(err) {
parseError = true;
scope.$emit('SaveComplete', true);
Alert("Error", "Error parsing extra variables. Parser returned: " + err);
}
}
if (!parseError) {
if (!parseError) {
Rest.setUrl(scope.source_url)
Rest.put(data)
.success( function(data, status, headers, config) {
@ -1022,7 +1024,7 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
ProcessErrors(scope, data, status, form,
{ hdr: 'Error!', msg: 'Failed to update group inventory source. PUT status: ' + status });
});
}
}
}
else {
// No source value
@ -1030,8 +1032,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
}
});
// Save changes to the parent
scope.formSave = function() {
// Save
scope.formModalAction = function() {
Wait('start');
try {
var refreshHosts = false;

2
awx/ui/static/js/helpers/search.js
View File

@ -459,7 +459,7 @@ angular.module('SearchHelper', ['RestServices', 'Utilities', 'RefreshHelper'])
$('.list-header').each(function(index) {
if ($(this).attr('id') != fld + '-header') {
var icon = $(this).find('i');
icon.attr('class','fa-sort');
icon.attr('class','fa fa-sort');
}
});

4
awx/ui/static/js/lists/Inventories.js
View File

@ -34,7 +34,7 @@ angular.module('InventoriesListDefinition', [])
failed_hosts: {
label: 'Failed Hosts',
ngHref: "\{\{ inventory.failed_hosts_link \}\}",
badgeIcon: "\{\{ 'icon-failures-' + inventory.failed_hosts_class \}\}",
badgeIcon: "\{\{ 'fa icon-failures-' + inventory.failed_hosts_class \}\}",
badgeNgHref: "\{\{ inventory.failed_hosts_link \}\}",
badgePlacement: 'left',
badgeToolTip: "\{\{ inventory.failed_hosts_tip \}\}",
@ -48,7 +48,7 @@ angular.module('InventoriesListDefinition', [])
status: {
label: 'Status',
ngHref: "\{\{ inventory.status_link \}\}",
badgeIcon: "\{\{ 'icon-cloud-' + inventory.status_class \}\}",
badgeIcon: "\{\{ 'fa icon-cloud-' + inventory.status_class \}\}",
badgeNgHref: "\{\{ inventory.status_link \}\}",
badgePlacement: 'left',
badgeTipPlacement: 'top',

22
awx/ui/static/js/lists/InventoryGroups.js
View File

@ -32,7 +32,7 @@ angular.module('InventoryGroupsDefinition', [])
label: 'Sync Status',
ngClick: "viewUpdateStatus(\{\{ group.id \}\})",
searchType: 'select',
badgeIcon: "\{\{ 'icon-cloud-' + group.status_badge_class \}\}",
badgeIcon: "\{\{ 'fa icon-cloud-' + group.status_badge_class \}\}",
badgeToolTip: "\{\{ group.status_badge_tooltip \}\}",
awToolTip: "\{\{ group.status_badge_tooltip \}\}",
dataPlacement: 'top',
@ -50,7 +50,7 @@ angular.module('InventoryGroupsDefinition', [])
failed_hosts: {
label: 'Failed Hosts',
ngHref: "\{\{ group.failed_hosts_link \}\}",
badgeIcon: "\{\{ 'icon-failures-' + group.failed_hosts_class \}\}",
badgeIcon: "\{\{ 'fa icon-failures-' + group.failed_hosts_class \}\}",
badgeNgHref: "\{\{ group.failed_hosts_link \}\}",
badgePlacement: 'left',
badgeToolTip: "\{\{ group.failed_hosts_tip \}\}",
@ -137,34 +137,26 @@ angular.module('InventoryGroupsDefinition', [])
fieldActions: {
group_update: {
label: 'Sync',
icon: 'icon-cloud-download',
"class": 'btn-xs btn-primary',
ngClick: 'updateGroup(\{\{ group.id \}\})',
ngClick: 'updateGroup(\{\{ group.group_id \}\})',
awToolTip: "\{\{ group.update_tooltip \}\}",
ngClass: "group.update_class",
awToolTip: "Start inventory sync"
},
cancel: {
label: 'Cancel',
icon: 'icon-minus-sign',
ngClick: "cancelUpdate(\{\{ group.id \}\}, '\{\{ group.name \}\}')",
"class": 'btn-xs btn-primary',
ngClick: "cancelUpdate(\{\{ group.group_id \}\}, '\{\{ group.name \}\}')",
awToolTip: "\{\{ group.cancel_tooltip \}\}",
ngClass: "group.cancel_class",
ngShow: "group.status == 'running' || group.status == 'pending'"
},
edit: {
edit: {
label: 'Edit',
ngClick: "editGroup(\{\{ group.id \}\})",
icon: 'icon-edit',
"class": 'btn-xs btn-primary',
ngClick: "editGroup(\{\{ group.group_id \}\})",
awToolTip: 'Edit group'
},
"delete": {
label: 'Delete',
ngClick: "deleteGroup(\{\{ group.id \}\},'\{\{ group.name \}\}')",
icon: 'icon-trash',
"class": 'btn-xs btn-primary',
ngClick: "deleteGroup(\{\{ group.group_id \}\},'\{\{ group.name \}\}')",
awToolTip: 'Delete group'
}
}

4
awx/ui/static/js/lists/InventoryHosts.js
View File

@ -32,7 +32,7 @@ angular.module('InventoryHostsDefinition', [])
awToolTip: "\{\{ host.badgeToolTip \}\}",
dataPlacement: 'top',
badgeNgHref: '\{\{ host.activeFailuresLink \}\}',
badgeIcon: "\{\{ 'icon-failures-' + host.has_active_failures \}\}",
badgeIcon: "\{\{ 'fa icon-failures-' + host.has_active_failures \}\}",
badgePlacement: 'left',
badgeToolTip: "\{\{ host.badgeToolTip \}\}",
badgeTipPlacement: 'top',
@ -41,7 +41,7 @@ angular.module('InventoryHostsDefinition', [])
},
enabled_flag: {
label: 'Enabled',
badgeIcon: "\{\{ 'icon-enabled-' + host.enabled \}\}",
badgeIcon: "\{\{ 'fa icon-enabled-' + host.enabled \}\}",
badgePlacement: 'left',
badgeToolTip: "\{\{ host.enabledToolTip \}\}",
badgeTipPlacement: "top",

2
awx/ui/static/js/lists/JobEvents.js
View File

@ -57,7 +57,7 @@ angular.module('JobEventsListDefinition', [])
ngClick: "viewJobEvent(\{\{ jobevent.id \}\})",
awToolTip: "\{\{ jobevent.statusBadgeToolTip \}\}",
dataPlacement: 'top',
badgeIcon: 'icon-job-\{\{ jobevent.status \}\}',
badgeIcon: 'fa icon-job-\{\{ jobevent.status \}\}',
badgePlacement: 'left',
badgeToolTip: "\{\{ jobevent.statusBadgeToolTip \}\}",
badgeTipPlacement: 'top',

2
awx/ui/static/js/lists/JobHosts.js
View File

@ -56,7 +56,7 @@ angular.module('JobHostDefinition', [])
status: {
label: 'Status',
badgeNgHref: "\{\{ jobhost.statusLinkTo \}\}",
badgeIcon: 'icon-job-\{\{ jobhost.status \}\}',
badgeIcon: 'fa icon-job-\{\{ jobhost.status \}\}',
badgePlacement: 'left',
badgeToolTip: "\{\{ jobhost.statusBadgeToolTip \}\}",
badgeTipPlacement: 'top',

4
awx/ui/static/js/lists/Jobs.js
View File

@ -30,7 +30,7 @@ angular.module('JobsListDefinition', [])
searchOnly: true
},
created: {
label: 'Date',
label: 'Create On',
link: false,
searchable: false
},
@ -64,7 +64,7 @@ angular.module('JobsListDefinition', [])
{ name: "error", value: "error" },
{ name: "failed", value: "failed" },
{ name: "canceled", value: "canceled" } ],
badgeIcon: 'icon-job-\{\{ job.status \}\}',
badgeIcon: 'fa icon-job-\{\{ job.status \}\}',
badgePlacement: 'left',
badgeToolTip: "\{\{ job.statusBadgeToolTip \}\}",
badgeTipPlacement: 'top',

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

@ -393,19 +393,27 @@ a:hover {
margin-bottom: 10px;
}
.form-group {
margin-bottom: 25px;
}
.form-cancel {
float: right;
margin-right: 10px;
float: right;
margin-right: 10px;
}
.form-title-hr {
margin-bottom: 20px;
margin-bottom: 20px;
}
.form-horizontal .buttons {
margin-top: 25px;
}
.label-text {
padding-right: 10px;
}
/* Outline required fields in Red when focused */
.form-control[required]:focus {
@ -659,9 +667,6 @@ input[type="checkbox"].checkbox-no-label {
/* End Display list actions */
.well {
padding-bottom: 0;
}
/* Enable table-hover to work when table is in a well */
@ -695,8 +700,8 @@ input[type="checkbox"].checkbox-no-label {
.icon-failures-true,
.active-failures-true a,
.active-failures-true a:active,
input[type="text"].job-failed,
input[type="text"].job-error {
.job-failed,
.job-error {
color: #da4f49;
}
@ -715,15 +720,15 @@ input[type="checkbox"].checkbox-no-label {
}
input[type="text"].job-new,
input[type="text"].job-canceled {
.job-new,
.job-canceled {
color: #778899;
}
.icon-failures-false,
.license-valid,
input[type="text"].job-success,
input[type="text"].job-successful {
.job-success,
.job-successful {
color: @green;
}
@ -756,7 +761,8 @@ input[type="checkbox"].checkbox-no-label {
color: @grey;
}
.icon-job-changed {
.icon-job-changed,
.job-changed {
color: @warning;
}
@ -1227,7 +1233,7 @@ input[type="checkbox"].checkbox-no-label {
/* job_events syles */
tr td i {
#jobevents_table tr td i {
float: none;
padding-top: 3px;
padding-left: 0;
@ -1235,6 +1241,11 @@ tr td i {
margin-left: 0;
}
#jobevents_table .actions i {
padding-top: 0;
margin-right: 0;
}
tr td button i {
padding-top: 0;
margin-right: 0;

17
awx/ui/static/lib/ansible/InventoryTree.js
View File

@ -183,9 +183,9 @@ angular.module('InventoryTree', ['Utilities', 'RestServices'])
function buildGroups(tree_data, parent, level) {
var sorted = SortNodes(tree_data);
for(var i=0; i < sorted.length; i++) {
var currentId= id;
var group = {
for (var i=0; i < sorted.length; i++) {
var currentId= id;
var group = {
name: sorted[i].name,
has_active_failures: sorted[i].has_active_failures,
total_hosts: sorted[i].total_hosts,
@ -195,16 +195,17 @@ angular.module('InventoryTree', ['Utilities', 'RestServices'])
parent: parent,
has_children: (sorted[i].children.length > 0) ? true : false,
id: id,
group_id: sorted[i].id,
event_level: level,
ngicon: (sorted[i].children.length > 0) ? 'icon-collapse-alt' : null,
related: { children: (sorted[i].children.length > 0) ? sorted[i].related.children : '' },
status: sorted[i].summary_fields.inventory_source.status
}
groups.push(group);
id++;
if (sorted[i].children.length > 0) {
buildGroups(sorted[i].children, currentId, level + 1);
}
groups.push(group);
id++;
if (sorted[i].children.length > 0) {
buildGroups(sorted[i].children, currentId, level + 1);
}
}
}

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

@ -33,7 +33,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
inject: function(form, options) {
//
// 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'.t
// Returns scope of form.
//
@ -311,7 +311,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
}
html += "<input type=\"text\" name=\"" + fld + "\" ";
html += "ng-model=\"" + fld + "\" ";
html += (field['class']) ? this.attr(field, "class") : "";
html += (field['class']) ? Attr(field, "class") : "";
html += " readonly />\n";
return html;
},
@ -412,7 +412,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
}
html += "<input type=\"checkbox\" ";
html += (!label) ? "style=\"padding-top:5px;\" " : "";
//html += (!label) ? "style=\"padding-top:5px;\" " : "";
html += Attr(field,'type');
html += "ng-model=\"" + fld + '" ';
html += "name=\"" + fld + '" ';
@ -421,7 +421,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += (idx !== undefined) ? "_" + idx : "";
html += "class=\"";
html += (field['class']) ? field['class'] + " " : "";
html += (!label) ? "checkbox-no-label" : "";
//html += (!label) ? "checkbox-no-label" : "";
html += "\"";
html += (field.trueValue !== undefined) ? Attr(field,'trueValue') : "";
html += (field.falseValue !== undefined) ? Attr(field,'falseValue') : "";
@ -437,9 +437,32 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
return html;
}
function label() {
var html = '';
if (field.label || field.labelBind) {
html += "<label ";
html += (field.labelBind) ? "ng-bind=\"" + field.labelBind + "\" " : "";
if (horizontal || field.labelClass) {
html += "class=\"";
html += (field.labelClass) ? field.labelClass : "";
html += (horizontal) ? " " + getLabelWidth() : "";
html += "\" ";
}
html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
html += "for=\"" + fld + '">';
//html += (field.awPopOver && !field.awPopOverRight) ? Attr(field, 'awPopOver', fld) : "";
html += (field.icon) ? this.icon(field.icon) : "";
html += "<span class=\"label-text\">" + field.label + "</span>";
html += (field.awPopOver && !field.awPopOverRight) ? Attr(field, 'awPopOver', fld) : "";
html += "</label>\n";
}
return html;
}
var html = '';
var horizontal = (this.form.horizontal) ? true : false;
if (field.type == 'alertblock') {
html += "<div class=\"alert ";
html += (field.closeable == undefined || field.closeable == true) ? "alert-dismissable " : "";
@ -459,7 +482,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
}
}
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
if ( (! field.readonly) || (field.readonly && options.mode == 'edit') ) {
html += "<div class=\"form-group\" ";
html += (field.ngShow) ? this.attr(field,'ngShow') : "";
html += (field.ngHide) ? this.attr(field,'ngHide') : "";
@ -467,50 +490,54 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
//text fields
if (field.type == 'text' || field.type == 'password' || field.type == 'email') {
html += "<div class=\"label-text " + getLabelWidth();
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" ";
html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
html += ">\n";
html += (field.awPopOver && !field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
html += "<label ";
html += "class=\"control-label";
html += "\" ";
html += (field.labelBind) ? "ng-bind=\"" + field.labelBind + "\" " : "";
html += "for=\"" + fld + '">';
html += (field.icon) ? this.icon(field.icon) : "";
html += "<span class=\"label-text\">" + field.label + '</span></label>' + "\n";
html += (field.awPopOver && field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
html += "</div>\n";
//html += "<div class=\"label-text " + getLabelWidth();
//html += (field.labelClass) ? " " + field.labelClass : "";
//html += "\" ";
//html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
//html += ">\n";
//html += (field.awPopOver && !field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
//html += "<label class=\"control-label\" ";
//html += (field.labelBind) ? "ng-bind=\"" + field.labelBind + "\" " : "";
//html += "for=\"" + fld + '">';
//html += (field.icon) ? this.icon(field.icon) : "";
//html += "<span class=\"label-text\">" + field.label + '</span></label>' + "\n";
//html += (field.awPopOver && field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
//html += "</div>\n";
html += label();
html += "<div ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
html += (field.clear || field.genMD5) ? "<div class=\"input-group\">\n" : "";
if (field.control === null || field.control === undefined || field.control) {
html += "<input ";
html += this.attr(field,'type');
html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" ';
html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.chkPass) ? "chk-pass " : "";
html += buildId(field, fld, this.form);
html += "class=\"form-control";
html += (field['class']) ? " " + this.attr(field, 'class') : "";
html += "\" ";
html += (field.placeholder) ? this.attr(field,'placeholder') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly || field.showonly) ? "readonly " : "";
html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : "";
html += (field.capitalize) ? "capitalize " : "";
html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : "";
html += (field.autocomplete !== undefined) ? this.attr(field, 'autocomplete') : "";
html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" +
field.awRequiredWhen.variable + "\" " : "";
html += (field.awValidUrl) ? "aw-valid-url " : "";
html += (field.associated && this.form.fields[field.associated].ask) ? "ng-disabled=\"" + field.associated + "_ask\" " : "";
html += (field.awMultiselect) ? "aw-multiselect=\"" + field.awMultiselect + "\" " : "";
html += " >\n";
html += "<input ";
html += this.attr(field,'type');
html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" ';
html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += (field.chkPass) ? "chk-pass " : "";
html += buildId(field, fld, this.form);
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"form-control";
html += (field['class']) ? " " + this.attr(field, 'class') : "";
html += "\" ";
html += (field.placeholder) ? this.attr(field,'placeholder') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly || field.showonly) ? "readonly " : "";
html += (field.awPassMatch) ? "awpassmatch=\"" + field.associated + "\" " : "";
html += (field.capitalize) ? "capitalize " : "";
html += (field.ask) ? "ng-disabled=\"" + fld + "_ask\" " : "";
html += (field.autocomplete !== undefined) ? this.attr(field, 'autocomplete') : "";
html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" +
field.awRequiredWhen.variable + "\" " : "";
html += (field.awValidUrl) ? "aw-valid-url " : "";
html += (field.associated && this.form.fields[field.associated].ask) ? "ng-disabled=\"" + field.associated + "_ask\" " : "";
html += (field.awMultiselect) ? "aw-multiselect=\"" + field.awMultiselect + "\" " : "";
html += " >\n";
}
if (field.clear) {
@ -601,7 +628,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
//textarea fields
if (field.type == 'textarea') {
if (field.label !== false) {
/*if (field.label !== false) {
html += "<div class=\"label-text " + getLabelWidth();
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" ";
@ -616,9 +643,17 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "</div>\n";
html += "<div ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += "class=\"" + getFieldWidth() + "\"";
html += ">\n";
}
*/
html += label();
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
// Variable editing
if (fld == "variables" || fld == "extra_vars" || fld == 'inventory_variables' || fld == 'source_vars') {
html += "<div class=\"parse-selection\" id=\"" + this.form.name + "_" + fld + "_parse_type\">Parse as: " +
@ -627,7 +662,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "\" value=\"yaml\"> <span class=\"parse-label\">YAML</span>\n";
html += "<input type=\"radio\" ng-model=\"";
html += (field.parseTypeName) ? field.parseTypeName : 'parseType';
html += "\" value=\"json\"> <span class=\"parse-label\">JSON</span>\n</div>\n";
html += "\" value=\"json\"> <span class=\"parse-label\">JSON</span>\n"
html += "</div>\n";
}
html += "<textarea ";
@ -644,20 +680,20 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly || field.showonly) ? "readonly " : "";
html += "></textarea>\n";
// Add error messages
if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
html += "<div class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " +
this.form.name + '_form.' + fld + ".$error.required\">A value is required!</div>\n";
}
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
if (field.label !== false) {
html += "</div>\n";
}
html += "</div>\n";
}
//select field
if (field.type == 'select') {
html += "<div class=\"label-text " + getLabelWidth();
/*html += "<div class=\"label-text " + getLabelWidth();
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" ";
html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
@ -668,7 +704,16 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "</div>\n";
html += "<div ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += "class=\"" + getFieldWidth() + "\"";
html += ">\n";
*/
html += label();
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
html += "<select ";
html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" ';
@ -705,14 +750,24 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
//number field
if (field.type == 'number') {
html += "<label class=\"control-label " + getLabelWidth() + "\" for=\"" + fld + '">';
/*html += "<label class=\"control-label " + getLabelWidth();
html += " for=\"" + fld + '">';
html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
html += field.label + '</label>' + "\n";
html += "<div ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += "class=\"" + getFieldWidth() + "\"";
html += ">\n";
// Use 'text' rather than 'number' so that our integer directive works correctly
html += (field.slider) ? "<div class=\"slider\" id=\"" + fld + "-slider\"></div>\n" : "";
*/
html += label();
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
html += "<input ";
html += (field.spinner) ? "" : "type=\"text\" ";
html += "\" value=\"" + field['default'] + "\" ";
@ -754,11 +809,14 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
//checkbox group
if (field.type == 'checkbox_group') {
html += "<label class=\"control-label " + getLabelWidth() + "\">" +
field.label + "</label>\n";
html += "<div class=\"checkbox-group ";
html += getFieldWidth();
html += "\" ";
html += label();
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
html += "<div class=\"checkbox-group\" ";
html += "id=\"" + this.form.name + "_" + fld + "_chbox_group\" ";
html += ">\n";
for (var i=0; i < field.fields.length; i++) {
@ -778,43 +836,57 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
field.max + "</div>\n";
}
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
html += "</div><!-- checkbox-group -->\n";
html += "</div>\n";
}
//checkbox
if (field.type == 'checkbox') {
html += "<div class=\"label-text " + getLabelWidth();
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" ";
html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
html += ">\n";
html += (field.awPopOver && !field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
//html += "<div class=\"label-text " + getLabelWidth();
//html += (field.labelClass) ? " " + field.labelClass : "";
//html += "\" ";
//html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
//html += ">\n";
//html += "</div>\n";
//html += "<div ";
//html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
//html += "class=\"" + getFieldWidth() + "\"";
//html += ">\n";
if (horizontal) {
var fldWidth = getFieldWidth();
var offset = 12 - parsetInt(fldWidth.replace(/[A-Z,a-z,-]/g,''));
html += "<div class=\"" + fldWidth + " col-lg-offset-" + offset + "\">\n";
}
html += "<div class=\"checkbox\">\n";
html += "<label ";
html += "class=\"control-label";
html += "\" ";
html += (field.labelBind) ? "ng-bind=\"" + field.labelBind + "\" " : "";
html += "for=\"" + fld + '">';
html += (field.icon) ? this.icon(field.icon) : "";
html += '<span class=\"label-text\">' + field.label + '</span></label>' + "\n";
html += (field.awPopOver && field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
html += "</div>\n";
html += "<div ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += buildCheckbox(this.form, field, fld, undefined, false);
html += (field.icon) ? this.icon(field.icon) : "";
//html += (field.awPopOver && !field.awPopOverRight) ? this.attr(field, 'awPopOver', fld) : "";
html += '<span class=\"label-text\">' + field.label + "</span>";
html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
html += "</label>\n";
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
html += "</div>\n"
html += "</div><!-- checkbox -->\n"
if (horizontal) {
html += "</div>\n";
}
}
//radio
if (field.type == 'radio') {
html += "<label class=\"control-label " + getLabelWidth() + "\" for=\"" + fld + '">';
html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
html += '<span class=\"label-text\">' + field.label + '</span></label>' + "\n";
//radio group
if (field.type == 'radio_group') {
html += label();
html += "<div ";
html += "id=\"" + this.form.name + "_" + fld + "_radio_grp\" ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
for (var i=0; i < field.options.length; i++) {
html += "<label class=\"radio-inline\" ";
html += (field.options[i].ngShow) ? this.attr(field.options[i],'ngShow') : "";
@ -843,8 +915,41 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "</div>\n";
}
// radio button
if (field.type == 'radio') {
if (horizontal) {
var fldWidth = getFieldWidth();
var offset = 12 - parsetInt(fldWidth.replace(/[A-Z,a-z,-]/g,''));
html += "<div class=\"" + fldWidth + " col-lg-offset-" + offset + "\">\n";
}
html += "<div class=\"radio\">\n";
html += "<label ";
html += (field.labelBind) ? "ng-bind=\"" + field.labelBind + "\" " : "";
html += "for=\"" + fld + '">';
html += "<input type=\"radio\" ";
html += "name=\"" + fld + "\" ";
html += "value=\"" + field.value + "\" ";
html += "ng-model=\"" + field.ngModel + "\" ";
html += (field.ngChange) ? Attr(field,'ngChange') : "";
html += (field.readonly) ? "disabled " : "";
html += (field.ngDisabled) ? Attr(field,'ngDisabled') : "";
html += " > ";
html += field.label;
html += "</label>\n";
html += "<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>\n";
html += "</div><!-- radio -->\n"
if (horizontal) {
html += "</div>\n";
}
}
//lookup type fields
if (field.type == 'lookup' && (field.excludeMode == undefined || field.excludeMode != options.mode)) {
/*
html += "<div class=\"label-text " + getLabelWidth();
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" ";
@ -857,7 +962,15 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "</div>\n";
html += "<div ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += "class=\"" + getFieldWidth() + "\"";
html += ">\n";
*/
html += label();
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
html += "<div class=\"input-group\">\n";
html += "<span class=\"input-group-btn\">\n";
html += "<button type=\"button\" class=\"lookup-btn btn btn-default\" " + this.attr(field,'ngClick') + "><i class=\"fa fa-search\"></i></button>\n";
@ -893,7 +1006,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
//custom fields
if (field.type == 'custom') {
html += "<div class=\"label-text " + getLabelWidth();
/*html += "<div class=\"label-text " + getLabelWidth();
html += (field.labelClass) ? " " + field.labelClass : "";
html += "\" ";
html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
@ -904,40 +1017,21 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += (field.label) ? field.label : '';
html += '</label>' + "\n";
html += "</div>\n";
*/
html += label();
html += "<div ";
html += (horizontal) ? "class=\"" + getFieldWidth() + "\"" : "";
html += ">\n";
html += "<div ";
html += "id=\"" + form.name + "_" + fld + "\" ";
html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : "";
html += "class=\"" + getFieldWidth() + "\">\n";
html += ">\n";
html += field.control;
html += "</div>\n";
}
if (field.type == 'lgtextarea') {
// Use for modal, readonly textarea fields
html += "<div class=\"label-text " + getLabelWidth() + "\">\n";
html += "<label class=\"control-label\">";
html += (field.icon) ? this.icon(field.icon) : "";
html += (field.label) ? field.label : '';
html += "</label>";
html += "</div>\n";
html += "<div class=\"col-lg-12\">\n";
html += "<div style=\"padding-left:10px;\">"
html += "<textarea ";
html += (field.rows) ? this.attr(field, 'rows') : "";
html += "ng-model=\"" + fld + '" ';
html += 'name="' + fld + '" ';
html += "class=\"form-control";
html += (field['class']) ? " " + field['class'] : "";
html += "\" ";
html += (field.ngChange) ? this.attr(field,'ngChange') : "";
html += buildId(field, fld, this.form);
html += (field.placeholder) ? this.attr(field,'placeholder') : "";
html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
html += (options.mode == 'add' && field.addRequired) ? "required " : "";
html += (field.readonly || field.showonly) ? "readonly " : "";
html += "></textarea>\n";
html += "</div>\n";
html += "</div>\n";
html += "</div>\n";
}
html += "</div>\n";
@ -1065,7 +1159,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "</div>\n";
//html += "<div class=\"status-spin\"><i class=\"icon-spinner icon-spin\" ng-show=\"statusSearchSpin == true\"></i></div>\n";
}
html += "<div class=\"form-horizontal status-fields\">\n";
html += "<div class=\"form status-fields\">\n";
for (var fld in this.form.statusFields) {
field = this.form.statusFields[fld];
html += this.buildField(fld, field, options, this.form);
@ -1118,31 +1212,60 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "<hr class=\"form-title-hr\">\n";
}
html += "<form class=\"form-horizontal";
html += "<form class=\"";
html += (this.form.horizontal) ? "form-horizontal" : "";
html += (this.form['class']) ? ' ' + this.form['class'] : '';
html += "\" name=\"" + this.form.name + "_form\" id=\"" + this.form.name + "_form\" autocomplete=\"off\" 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\">\n";
html += "<div class=\"col-lg-6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 1) {
html += this.buildField(fld, field, options, this.form);
}
}
html += "</div><!-- column 1 -->\n";
html += "<div class=\"col-lg-6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 2) {
html += this.buildField(fld, field, options, this.form);
}
}
html += "</div><!-- column 2 -->\n";
html += "</div>\n";
html += "<div class=\"row\">\n";
html += "<div class=\"col-lg-6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 1) {
html += this.buildField(fld, field, options, this.form);
}
}
html += "</div><!-- column 1 -->\n";
html += "<div class=\"col-lg-6\">\n";
for (var fld in this.form.fields) {
field = this.form.fields[fld];
if (field.column == 2) {
html += this.buildField(fld, field, options, this.form);
}
}
html += "</div><!-- column 2 -->\n";
html += "</div>\n";
}
else if (this.form.tabs) {
html += "<ul class=\"nav nav-tabs\">\n";
for (var i=0; i < this.form.tabs.length; i++) {
var tab = this.form.tabs[i];
html += "<li";
if (i == 0) {
html += " class=\"active\"";
}
html += "><a href=\"#" + tab.name + "\" data-toggle=\"tab\">" + tab.label + "</a></li>\n";
}
html += "</ul>\n";
html += "<div class=\"tab-content\">\n";
for (var i=0; i < this.form.tabs.length; i++) {
var tab = this.form.tabs[i];
html += "<div class=\"tab-pane";
if (i == 0) {
html += " active";
}
html += "\" id=\"" + tab.name + "\">\n";
for (var fld in this.form.fields) {
if (this.form.fields[fld].tab == tab.name) {
html += this.buildField(fld, this.form.fields[fld], options, this.form);
}
}
html += "</div>\n"
}
html += "</div>\n";
}
else {
// original, single-column form
@ -1193,15 +1316,27 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "<hr />\n";
}
html += "<div class=\"form-group buttons\" ";
html += "<div class=\"buttons\" ";
html += "id=\"" + this.form.name + "_controls\" ";
html += ">\n";
html += "<label class=\"";
html += (this.form.buttons['labelClass']) ? this.form.buttons['labelClass'] : "col-lg-2";
html += " control-label\"> </label>\n";
html += "<div class=\"";
html += (this.form.buttons['controlClass']) ? this.form.buttons['controlClass'] : "col-lg-6";
html += " controls\">\n";
if (this.form.horizontal) {
var offset = 2;
if (this.form.buttons['labelClass']) {
offset = parseInt(this.form.buttons['labelClass'].replace(/[A-Z,a-z,-]/g,''));
}
var width = 12 - offset;
html += "<div class=\"col-lg-offset-" + offset + " col-lg-" + width + ">\n";
}
//html += "<label class=\"";
//html += (this.form.buttons['labelClass']) ? this.form.buttons['labelClass'] : "col-lg-2";
//html += " control-label\"> </label>\n";
//html += "<div class=\"";
//html += (this.form.buttons['controlClass']) ? this.form.buttons['controlClass'] : "col-lg-6";
//html += " controls\">\n";
for (var btn in this.form.buttons) {
if (typeof this.form.buttons[btn] == 'object') {
@ -1244,8 +1379,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += " " + button.label + "</button>\n";
}
}
html += "</div>\n";
html += "</div>\n";
html += "</div><!-- buttons -->\n";
if (this.form.horizontal) {
html += "</div>\n";
}
if (this.form.twoColumns) {
html += "</div>\n";
html += "</div>\n";
@ -1326,20 +1465,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
html += "<div class=\"col-lg-8\">\n";
html += "<div class=\"list-actions\">\n";
for (var act in form.related[itm].actions) {
var action = form.related[itm].actions[act];
html += "<button type=\"button\" class=\"btn btn-xs ";
html += (form.related[itm].actions[act]['class']) ? form.related[itm].actions[act]['class'] : "btn-success";
html += "\" ";
html += "id=\"" + itm + "_" + act + "_btn\" ";
html += this.attr(action,'ngClick');
html += (action['ngShow']) ? this.attr(action,'ngShow') : "";
html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";
html += (action.awToolTip) ? "data-placement=\"top\" " : "";
html += "><i class=\"" + action.icon + "\"></i>";
html += (action.label) ? " " + action.label : "";
html += "</button>\n";
html += this.button({ btn: action, action: act, toolbar: true });
}
html += "</div>\n";
html += "</div>\n";
html += "</div><!-- row -->\n"
@ -1391,18 +1522,16 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities'])
// Row level actions
html += "<td class=\"actions\">";
for (act in form.related[itm].fieldActions) {
var action = form.related[itm].fieldActions[act];
html += "<button type=\"button\" class=\"btn btn-xs";
html += (action['class']) ? " " + action['class'] : "";
html += "\" ";
html += "id=\"row" + act + "_btn\" ";
html += this.attr(action,'ngClick');
html += (action.ngShow) ? this.attr(action, 'ngShow') : "";
html += (action.awToolTip) ? this.attr(action,'awToolTip') : "";
html += (action.awToolTip) ? "data-placement=\"top\" " : "";
html += ">" + this.icon(action.icon);
html += (action.label) ? " " + action.label : "";
html += "</button> ";
var fAction = form.related[itm].fieldActions[act];
html += "<a ";
html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
html += (fAction.ngClick) ? this.attr(fAction,'ngClick') : "";
html += (fAction.ngHref) ? this.attr(fAction,'ngHref') : "";
html += (fAction.ngShow) ? this.attr(fAction,'ngShow') : "";
html += ">";
html += SelectIcon({ action: act });
html += (fAction.label) ? " " + fAction['label'] : "";
html += "</a>";
}
html += "</td>";
html += "</tr>\n";

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

@ -144,6 +144,9 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
case 'save':
icon='fa-check-square-o';
break;
case 'properties':
icon="fa-wrench";
break;
case 'reset':
icon="fa-undo";
break;
@ -163,7 +166,7 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
// pass in button object, get back html
var btn = params.btn;
var action = params.action;
var action = params.action; // label used to select the icon
var toolbar = params.toolbar;
if (toolbar) {
@ -530,7 +533,8 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
html += "<div class=\"panel panel-default\">\n";
html += "<div class=\"panel-heading\" ng-click=\"accordionToggle('#accordion" + idx + "')\">\n";
html += "<h4 class=\"panel-title\">\n";
html += "<i class=\"fa-question-circle help-collapse\"></i> " + hdr;
//html += "<i class=\"fa fa-question-circle help-collapse\"></i> " + hdr;
html += hdr;
html += "<i class=\"fa fa-minus pull-right collapse-help-icon\" id=\"accordion" + idx + "-icon\"></i>";
html += "</h4>\n";
html += "</div>\n";

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

@ -252,15 +252,15 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
if (options.mode == 'select' && list.selectInstructions) {
var btn = {
awPopOver: list.selectInstructions,
dataPlacement: 'left',
dataPlacement: 'top',
dataContainer: 'body',
icon: "fa-question-circle",
'class': 'btn-xs btn-help',
awToolTip: 'Click for help',
dataTitle: 'Help',
iconSize: 'fa-lg'
};
html += this.button(btn, 'select');
//html += this.button(btn, 'select');
html += this.button({ btn: btn, action: 'help', toolbar: true });
}
html += "</div><!-- list-acitons -->\n";