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

Merge pull request #1041 from kensible/#957-subform-styling

Browse Source 
Create sub forms for dropdowns. Dropdowns affected: SCM source and credentials details.
This commit is contained in:
kensible 2016-02-25 12:17:29 -05:00
commit 2c6cf4c2fe
4 changed files with 99 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
awx/ui/client/legacy-styles/forms.less
View File

@ -141,6 +141,28 @@
padding-right: 50px;
}
.Form-subForm {
width: 100%;
border-left: 5px solid @default-border;
margin-left: -20px;
padding-left: 15px;
margin-bottom: 15px;
.Form-formGroup {
float: left;
}
}
.Form-subForm--title {
font-weight: bold;
text-transform: uppercase;
color: @default-interface-txt;
font-size: small;
width: 100%;
float: left;
margin-bottom: 10px;
}
.Form-textAreaLabel{
width:100%;
}

54
awx/ui/client/src/forms/Credentials.js
View File

@ -18,6 +18,9 @@ export default
editTitle: '{{ name }}', //Legend in edit mode
name: 'credential',
forceListeners: true,
subFormTitles: {
credentialSubForm: 'Type Details',
},
actions: {
@ -103,7 +106,8 @@ export default
'</dl>\n',
dataTitle: 'Type',
dataPlacement: 'right',
dataContainer: "body"
dataContainer: "body",
hasSubForm: true,
// helpCollapse: [{
// hdr: 'Select a Credential Type',
// content: '<dl>\n' +
@ -131,7 +135,8 @@ export default
init: false
},
autocomplete: false,
apiField: 'username'
apiField: 'username',
subForm: 'credentialSubForm',
},
secret_key: {
label: 'Secret Key',
@ -145,7 +150,8 @@ export default
ask: false,
clear: false,
hasShowInputButton: true,
apiField: 'passwowrd'
apiField: 'passwowrd',
subForm: 'credentialSubForm'
},
security_token: {
label: 'STS Token',
@ -157,7 +163,8 @@ export default
hasShowInputButton: true,
dataTitle: 'STS Token',
dataPlacement: 'right',
dataContainer: "body"
dataContainer: "body",
subForm: 'credentialSubForm'
},
"host": {
labelBind: 'hostLabel',
@ -172,7 +179,8 @@ export default
awRequiredWhen: {
variable: 'host_required',
init: false
}
},
subForm: 'credentialSubForm'
},
"username": {
labelBind: 'usernameLabel',
@ -183,7 +191,8 @@ export default
variable: 'username_required',
init: false
},
autocomplete: false
autocomplete: false,
subForm: "credentialSubForm"
},
"email_address": {
labelBind: 'usernameLabel',
@ -197,7 +206,8 @@ export default
awPopOver: '<p>The email address assigned to the Google Compute Engine <b><i>service account.</b></i></p>',
dataTitle: 'Email',
dataPlacement: 'right',
dataContainer: "body"
dataContainer: "body",
subForm: 'credentialSubForm'
},
"subscription_id": {
labelBind: "usernameLabel",
@ -213,8 +223,8 @@ export default
awPopOver: '<p>Subscription ID is an Azure construct, which is mapped to a username.</p>',
dataTitle: 'Subscription ID',
dataPlacement: 'right',
dataContainer: "body"
dataContainer: "body",
subForm: 'credentialSubForm'
},
"api_key": {
label: 'API Key',
@ -228,6 +238,7 @@ export default
ask: false,
hasShowInputButton: true,
clear: false,
subForm: 'credentialSubForm'
},
"password": {
labelBind: 'passwordLabel',
@ -242,7 +253,8 @@ export default
awRequiredWhen: {
variable: "password_required",
init: false
}
},
subForm: "credentialSubForm"
},
"ssh_password": {
label: 'Password', // formally 'SSH Password'
@ -252,7 +264,8 @@ export default
editRequired: false,
ask: true,
hasShowInputButton: true,
autocomplete: false
autocomplete: false,
subForm: 'credentialSubForm'
},
"ssh_key_data": {
labelBind: 'sshKeyDataLabel',
@ -273,7 +286,8 @@ export default
awPopOverWatch: "key_description",
dataTitle: 'Help',
dataPlacement: 'right',
dataContainer: "body"
dataContainer: "body",
subForm: "credentialSubForm"
},
"ssh_key_unlock": {
label: 'Private Key Passphrase',
@ -285,6 +299,7 @@ export default
ask: true,
hasShowInputButton: true,
askShow: "kind.value == 'ssh'", // Only allow ask for machine credentials
subForm: 'credentialSubForm'
},
"become_method": {
label: "Privilege Escalation",
@ -297,7 +312,8 @@ export default
"This is equivalent to specifying the <code>--become-method=BECOME_METHOD</code> parameter, where <code>BECOME_METHOD</code> could be "+
"<code>sudo | su | pbrun | pfexec | runas</code> <br>(defaults to <code>sudo</code>)</p>",
dataPlacement: 'right',
dataContainer: "body"
dataContainer: "body",
subForm: 'credentialSubForm'
},
"become_username": {
label: 'Privilege Escalation Username',
@ -305,7 +321,8 @@ export default
ngShow: "kind.value == 'ssh' && (become_method && become_method.value)",
addRequired: false,
editRequired: false,
autocomplete: false
autocomplete: false,
subForm: 'credentialSubForm'
},
"become_password": {
label: 'Privilege Escalation Password',
@ -315,7 +332,8 @@ export default
editRequired: false,
ask: true,
hasShowInputButton: true,
autocomplete: false
autocomplete: false,
subForm: 'credentialSubForm'
},
"project": {
labelBind: 'projectLabel',
@ -331,7 +349,8 @@ export default
awRequiredWhen: {
variable: 'project_required',
init: false
}
},
subForm: 'credentialSubForm'
},
"vault_password": {
label: "Vault Password",
@ -341,7 +360,8 @@ export default
editRequired: false,
ask: true,
hasShowInputButton: true,
autocomplete: false
autocomplete: false,
subForm: 'credentialSubForm'
}
},

17
awx/ui/client/src/forms/Projects.js
View File

@ -19,6 +19,10 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
name: 'project',
forceListeners: true,
tabs: true,
subFormTitles: {
sourceSubForm: 'Source Details',
},
fields: {
name: {
@ -62,7 +66,8 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
ngOptions: 'type.label for type in scm_type_options track by type.value',
ngChange: 'scmChange()',
addRequired: true,
editRequired: true
editRequired: true,
hasSubForm: true
},
missing_path_alert: {
type: 'alertblock',
@ -112,6 +117,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
variable: "scmRequired",
init: false
},
subForm: 'sourceSubForm',
helpCollapse: [{
hdr: 'GIT URLs',
content: '<p>Example URLs for GIT SCM include:</p><ul class=\"no-bullets\"><li>https://github.com/ansible/ansible.git</li>' +
@ -135,14 +141,15 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
'Do not put the username and key in the URL. ' +
'If using Bitbucket and SSH, do not supply your Bitbucket username.',
show: "scm_type.value == 'hg'"
}]
}],
},
scm_branch: {
labelBind: "scmBranchLabel",
type: 'text',
ngShow: "scm_type && scm_type.value !== 'manual'",
addRequired: false,
editRequired: false
editRequired: false,
subForm: 'sourceSubForm'
},
credential: {
label: 'SCM Credential',
@ -152,12 +159,14 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
sourceField: 'name',
ngClick: 'lookUpCredential()',
addRequired: false,
editRequired: false
editRequired: false,
subForm: 'sourceSubForm'
},
checkbox_group: {
label: 'SCM Update Options',
type: 'checkbox_group',
ngShow: "scm_type && scm_type.value !== 'manual'",
subForm: 'sourceSubForm',
fields: [{
name: 'scm_clean',
label: 'Clean',

27
awx/ui/client/src/shared/form-generator.js
View File

@ -1476,6 +1476,9 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
html += "</div>\n";
} else {
var inSubForm = false;
var currentSubForm = undefined;
var hasSubFormField;
// original, single-column form
section = '';
group = '';
@ -1502,9 +1505,33 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += "<div" + sectionShow + ">\n";
section = field.section;
}
// To hide/show the subform when the value changes on parent
if (field.hasSubForm === true) {
hasSubFormField = fld;
}
// Add a subform container
if(field.subForm && currentSubForm === undefined) {
currentSubForm = field.subForm;
var subFormTitle = this.form.subFormTitles[field.subForm];
html += '<div class="Form-subForm '+ currentSubForm + '" ng-hide="'+ hasSubFormField + '.value === undefined"> ';
html += '<span class="Form-subForm--title">'+ subFormTitle +'</span>';
}
else if (!field.subForm && currentSubForm !== undefined) {
currentSubForm = undefined;
html += '</div></div> ';
}
html += this.buildField(fld, field, options, this.form);
}
}
if (currentSubForm) {
currentSubForm = undefined;
html += '</div>';
}
if (section !== '') {
html += "</div>\n</div>\n";
}