From 5c42b88e27788ab63bfdbbb4f620e7449afa977c Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Sat, 28 Dec 2013 19:45:51 +0000 Subject: [PATCH] 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. --- awx/ui/static/js/controllers/Credentials.js | 5 + awx/ui/static/js/controllers/Inventories.js | 13 +- awx/ui/static/js/forms/Credentials.js | 17 +- awx/ui/static/js/forms/Groups.js | 87 +--- awx/ui/static/js/forms/JobTemplates.js | 10 +- awx/ui/static/js/forms/Jobs.js | 16 +- awx/ui/static/js/forms/Projects.js | 4 +- awx/ui/static/js/forms/Users.js | 14 +- awx/ui/static/js/helpers/Events.js | 5 +- awx/ui/static/js/helpers/Groups.js | 112 ++--- awx/ui/static/js/helpers/search.js | 2 +- awx/ui/static/js/lists/Inventories.js | 4 +- awx/ui/static/js/lists/InventoryGroups.js | 22 +- awx/ui/static/js/lists/InventoryHosts.js | 4 +- awx/ui/static/js/lists/JobEvents.js | 2 +- awx/ui/static/js/lists/JobHosts.js | 2 +- awx/ui/static/js/lists/Jobs.js | 4 +- awx/ui/static/less/ansible-ui.less | 39 +- awx/ui/static/lib/ansible/InventoryTree.js | 17 +- awx/ui/static/lib/ansible/form-generator.js | 467 +++++++++++------- .../static/lib/ansible/generator-helpers.js | 8 +- awx/ui/static/lib/ansible/list-generator.js | 6 +- 22 files changed, 487 insertions(+), 373 deletions(-) diff --git a/awx/ui/static/js/controllers/Credentials.js b/awx/ui/static/js/controllers/Credentials.js index 1c8d514830..3ca88de934 100644 --- a/awx/ui/static/js/controllers/Credentials.js +++ b/awx/ui/static/js/controllers/Credentials.js @@ -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 () { diff --git a/awx/ui/static/js/controllers/Inventories.js b/awx/ui/static/js/controllers/Inventories.js index 887e000459..4e01f20ce1 100644 --- a/awx/ui/static/js/controllers/Inventories.js +++ b/awx/ui/static/js/controllers/Inventories.js @@ -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' ]; diff --git a/awx/ui/static/js/forms/Credentials.js b/awx/ui/static/js/forms/Credentials.js index 1875dcd6f3..d975907135 100644 --- a/awx/ui/static/js/forms/Credentials.js +++ b/awx/ui/static/js/forms/Credentials.js @@ -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: "

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: '

Choose a type for this credential: ' + - '

\n' + + { hdr: 'Select a Credential Type', + content: '
\n' + '
AWS
\n' + '
Access keys for Amazon Web Services used for inventory management or deployment.
\n' + '
Machine
\n' + diff --git a/awx/ui/static/js/forms/Groups.js b/awx/ui/static/js/forms/Groups.js index d503b56f6f..d737a7b811 100644 --- a/awx/ui/static/js/forms/Groups.js +++ b/awx/ui/static/js/forms/Groups.js @@ -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', []) "
---
somevar: somevalue
password: magic
\n" + '

View JSON examples at www.json.org

' + '

View YAML examples at ansibleworks.com

', - 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: "

Click on the regions field to see a list of regions for your cloud provider. You can select multiple regions, " + "or choose All to include all regions. AWX will only be updated with Hosts associated with the selected regions." + "

", - 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', []) "
---
somevar: somevalue
password: magic
\n" + '

View JSON examples at www.json.org

' + '

View YAML examples at ansibleworks.com

', - 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 + }); diff --git a/awx/ui/static/js/forms/JobTemplates.js b/awx/ui/static/js/forms/JobTemplates.js index 6222d70cb3..786c832c95 100644 --- a/awx/ui/static/js/forms/JobTemplates.js +++ b/awx/ui/static/js/forms/JobTemplates.js @@ -187,7 +187,7 @@ angular.module('JobTemplateFormDefinition', []) "YAML:
\n" + "
---
somevar: somevalue
password: magic
\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" + "
configuration,packages
\n", dataTitle: "Job Tags", - dataPlacement: "left", + dataPlacement: "right", dataContainer: "body" }, allow_callbacks: { @@ -227,7 +227,7 @@ angular.module('JobTemplateFormDefinition', []) "

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.

" + "

Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.

", - detailPlacement: 'left', + dataPlacement: 'right', dataTitle: 'Callback URL', dataContainer: "body" }, @@ -247,7 +247,7 @@ angular.module('JobTemplateFormDefinition', []) "

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.

" + "

Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.

", - 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:

\n" + "

curl --data \"host_config_key=5a8ec154832b780b9bdef1061764ae5a\" " + "http://your.server.com:999/api/v1/job_templates/1/callback/

\n", - detailPlacement: 'left', + dataPlacement: 'right', dataContainer: "body" } }, diff --git a/awx/ui/static/js/forms/Jobs.js b/awx/ui/static/js/forms/Jobs.js index 862a8f17f8..009217de3e 100644 --- a/awx/ui/static/js/forms/Jobs.js +++ b/awx/ui/static/js/forms/Jobs.js @@ -202,7 +202,7 @@ angular.module('JobFormDefinition', []) "
---
somevar: somevalue
password: magic
\n", dataTitle: 'Extra Variables', dataContainer: 'body', - dataPlacement: 'left' + dataPlacement: 'right' }, job_tags: { label: 'Job Tags', @@ -221,7 +221,7 @@ angular.module('JobFormDefinition', []) "
configuration,packages
\n", dataTitle: "Job Tags", dataContainer: 'body', - dataPlacement: "left" + dataPlacement: "right" }, allow_callbacks: { label: 'Allow Callbacks', @@ -242,7 +242,7 @@ angular.module('JobFormDefinition', []) "

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.

" + "

Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.

", - detailPlacement: 'left', + dataPlacement: 'right', dataContainer: 'body', dataTitle: 'Callback URL' }, @@ -262,7 +262,7 @@ angular.module('JobFormDefinition', []) "

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.

" + "

Successful requests will result in an entry on the Jobs tab, where the results and history can be viewed.

", - 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:

\n" + "

curl --data \"host_config_key=5a8ec154832b780b9bdef1061764ae5a\" " + "http://your.server.com:999/api/v1/job_templates/1/callback/

\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: '
\{\{ status \}\}
', + control: '
Status \{\{ status \}\}
', readonly: true }, created: { - label: 'Date', + label: 'Created On', type: 'text', readonly: true }, diff --git a/awx/ui/static/js/forms/Projects.js b/awx/ui/static/js/forms/Projects.js index 5ebc7b7ddc..a023a9b285 100644 --- a/awx/ui/static/js/forms/Projects.js +++ b/awx/ui/static/js/forms/Projects.js @@ -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: '

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: [ diff --git a/awx/ui/static/js/forms/Users.js b/awx/ui/static/js/forms/Users.js index b7d09fbcba..e59be33dd1 100644 --- a/awx/ui/static/js/forms/Users.js +++ b/awx/ui/static/js/forms/Users.js @@ -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 \n"; } } - html += "\n"; - html += "\n"; + html += "\n"; + + if (this.form.horizontal) { + html += "\n"; + } + if (this.form.twoColumns) { html += "\n"; html += "\n"; @@ -1326,20 +1465,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities']) html += "

\n"; html += "
\n"; + for (var act in form.related[itm].actions) { var action = form.related[itm].actions[act]; - html += "\n"; + html += this.button({ btn: action, action: act, toolbar: true }); } + html += "
\n"; html += "
\n"; html += "\n" @@ -1391,18 +1522,16 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies', 'Utilities']) // Row level actions html += ""; for (act in form.related[itm].fieldActions) { - var action = form.related[itm].fieldActions[act]; - html += "