Merge pull request #6090 from jlmitch5/credTypes

add credential types to ui

awx/ui/client/legacy-styles/ansible-ui.less

@@ -2112,6 +2112,11 @@ tr td button i {
     box-shadow: none !important;
 }
 
+.select2-container {
+    margin-left: 2px;
+    margin-top: 2px;
+}
+
 .form-control + .select2-container--disabled .select2-selection {
   background-color: @egrey !important;
 }
@@ -2152,6 +2157,7 @@ tr td button i {
     cursor: not-allowed;
     opacity: 100;
     background: @egrey;
+    border-radius: 5px;
 }
 
 .select2-container--default .select2-selection--single {
@@ -2337,6 +2343,7 @@ input[disabled].ui-spinner-input {
     margin-right: 0;
     overflow: auto !important;
     overflow-y: auto !important;
+    border-radius: 5px;
 }
 
 .CodeMirror-lines {

awx/ui/client/legacy-styles/codemirror.less

@@ -39,11 +39,9 @@
 
 // Disabled
 textarea[disabled="disabled"] + div[id*="-container"]{
-    pointer-events: none;
-    cursor: not-allowed;
-
         .CodeMirror {
             cursor: not-allowed;
+            pointer-events: none;
         }
 
         .CodeMirror.cm-s-default,
@@ -68,4 +66,10 @@ textarea[disabled="disabled"] + div[id*="-container"]{
         .CodeMirror-cursors {
             display: none;
         }
+
+        .CodeMirror.cm-s-default {
+            min-height: initial !important;
+            max-height: initial !important;
+            height: initial !important;
+        }
 }

awx/ui/client/legacy-styles/forms.less

@@ -495,7 +495,8 @@ input[type='radio']:checked:before {
     display: block !important;
 }
 
-.Form-inputLabelContainer[for=variables] {
+.Form-inputLabelContainer[for=variables],
+.Form-inputLabelContainer--codeMirror {
     width: auto;
     display: inline-block !important;
 }
@@ -507,8 +508,8 @@ input[type='radio']:checked:before {
 .FormToggle {}
 .FormToggle-container {
     margin: 0 0 0 10px;
-    padding-bottom: 5px;
     display: initial;
+    padding-bottom: 5px;
 
     label {
         &:first-child {
@@ -702,4 +703,3 @@ input[type='radio']:checked:before {
     overflow-wrap: break-word;
     white-space: normal;
 }
-

awx/ui/client/src/app.js

@@ -41,6 +41,7 @@ import portalMode from './portal-mode/main';
 import systemTracking from './system-tracking/main';
 import inventories from './inventories/main';
 import inventoryScripts from './inventory-scripts/main';
+import credentialTypes from './credential-types/main';
 import organizations from './organizations/main';
 import managementJobs from './management-jobs/main';
 import workflowResults from './workflow-results/main';
@@ -99,6 +100,7 @@ var tower = angular.module('Tower', [
     systemTracking.name,
     inventories.name,
     inventoryScripts.name,
+    credentialTypes.name,
     organizations.name,
     managementJobs.name,
     setupMenu.name,

awx/ui/client/src/credential-types/add/add.controller.js

@@ -0,0 +1,106 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+export default ['Rest', 'Wait',
+    'CredentialTypesForm', 'ProcessErrors', 'GetBasePath',
+    'GenerateForm',  '$scope', '$state', 'Alert', 'GetChoices', 'ParseTypeChange', 'ToJSON', 'CreateSelect2',
+    function(Rest, Wait,
+        CredentialTypesForm, ProcessErrors, GetBasePath,
+        GenerateForm, $scope, $state, Alert, GetChoices, ParseTypeChange, ToJSON, CreateSelect2
+    ) {
+        var form = CredentialTypesForm,
+            url = GetBasePath('credential_types');
+
+        init();
+
+        function init() {
+            // Load the list of options for Kind
+            $scope.$parent.optionsDefer.promise
+                .then(function(options) {
+                    GetChoices({
+                        scope: $scope,
+                        url: url,
+                        field: 'kind',
+                        variable: 'credential_kind_options',
+                        options: options
+                    });
+
+                    if (!options.actions.POST) {
+                        $state.go("^");
+                        Alert('Permission Error', 'You do not have permission to add a credential type.', 'alert-info');
+                    }
+                });
+
+            // apply form definition's default field values
+            GenerateForm.applyDefaults(form, $scope);
+
+            // @issue @jmitchell - this setting probably collides with new RBAC can* implementation?
+            $scope.canEdit = true;
+
+            var callback = function() {
+                // Make sure the form controller knows there was a change
+                $scope[form.name + '_form'].$setDirty();
+            };
+            $scope.parseTypeInputs = 'yaml';
+            $scope.parseTypeInjectors = 'yaml';
+            ParseTypeChange({
+                scope: $scope,
+                field_id: 'credential_type_inputs',
+                variable: 'inputs',
+                onChange: callback,
+                parse_variable: 'parseTypeInputs'
+            });
+            ParseTypeChange({
+                scope: $scope,
+                field_id: 'credential_type_injectors',
+                variable: 'injectors',
+                onChange: callback,
+                parse_variable: 'parseTypeInjectors'
+            });
+
+            CreateSelect2({
+                element: '#credential_type_kind',
+                multiple: false,
+            });
+        }
+
+        // Save
+        $scope.formSave = function() {
+            GenerateForm.clearApiErrors($scope);
+            Wait('start');
+            Rest.setUrl(url);
+            var inputs = ToJSON($scope.parseTypeInputs, $scope.inputs);
+            var injectors = ToJSON($scope.parseTypeInjectors, $scope.injectors);
+            if (inputs === null) {
+              inputs = {};
+            }
+            if (injectors === null) {
+              injectors = {};
+            }
+            Rest.post({
+                    name: $scope.name,
+                    description: $scope.description,
+                    kind: $scope.kind.value,
+                    inputs: inputs,
+                    injectors: injectors
+                })
+                .success(function(data) {
+                    $state.go('credentialTypes.edit', { credential_type_id: data.id }, { reload: true });
+                    Wait('stop');
+                })
+                .error(function(data, status) {
+                    ProcessErrors($scope, data, status, form, {
+                        hdr: 'Error!',
+                        msg: 'Failed to add new credential type. PUT returned status: ' + status
+                    });
+                });
+        };
+
+        $scope.formCancel = function() {
+            $state.go('^');
+        };
+    }
+];

awx/ui/client/src/credential-types/add/main.js

@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import controller from './add.controller';
+
+export default
+    angular.module('credentialTypesAdd', [])
+        .controller('CredentialTypesAddController', controller);

awx/ui/client/src/credential-types/credential-types.form.js

@@ -0,0 +1,127 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+ /**
+ * @ngdoc function
+ * @name forms.function:CredentialType
+ * @description This form is for adding/editing a credential type
+*/
+
+export default ['i18n', function(i18n) {
+    return {
+
+        addTitle: i18n._('NEW CREDENTIAL TYPE'),
+        editTitle: '{{ name }}',
+        name: 'credential_type',
+        basePath: 'credential_types',
+        stateTree: 'credentialTypes',
+        breadcrumbName: i18n._('CREDENTIAL TYPE'),
+        showActions: true,
+
+        // TODO: update fields to be the schema for credential types instead of inventory scripts
+        fields: {
+            name: {
+                label: i18n._('Name'),
+                type: 'text',
+                ngDisabled: '!(credential_type.summary_fields.user_capabilities.edit || canAdd)',
+                required: true,
+                capitalize: false
+            },
+            description: {
+                label: i18n._('Description'),
+                type: 'text',
+                ngDisabled: '!(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            },
+            kind: {
+                label: i18n._('Kind'),
+                excludeModal: true,
+                type: 'select',
+                ngOptions: 'kind.label for kind in credential_kind_options track by kind.value',
+                required: true,
+                awPopOver: '<dl>\n' +
+                        '<dt>' + i18n._('Machine') + '</dt>\n' +
+                        '<dd>' + i18n._('Authentication for remote machine access. This can include SSH keys, usernames, passwords, ' +
+                        'and sudo information. Machine credentials are used when submitting jobs to run playbooks against ' +
+                        'remote hosts.') + '</dd>' +
+                        '<dt>' + i18n._('Network') + '</dt>\n' +
+                        '<dd>' + i18n._('Authentication for network device access. This can include SSH keys, usernames, passwords, ' +
+                        'and authorize information. Network credentials are used when submitting jobs to run playbooks against ' +
+                        'network devices.') + '</dd>' +
+                        '<dt>' + i18n._('Source Control') + '</dt>\n' +
+                        '<dd>' + i18n._('Used to check out and synchronize playbook repositories with a remote source control ' +
+                        'management system such as Git, Subversion (svn), or Mercurial (hg). These credentials are ' +
+                        'used by Projects.') + '</dd>\n' +
+                        '<dt>' + i18n._('Cloud') + '</dt>\n' +
+                        '<dd>' + i18n._('Usernames, passwords, and access keys for authenticating to the specified cloud or infrastructure ' +
+                        'provider. These are used for dynamic inventory sources and for cloud provisioning and deployment ' +
+                        'in playbook runs.') + '</dd>\n' +
+                        '</dl>\n',
+                dataTitle: i18n._('Kind'),
+                dataPlacement: 'right',
+                dataContainer: "body",
+                ngDisabled: '!(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            },
+            inputs: {
+                label: i18n._('Input Configuration'),
+                class: 'Form-textAreaLabel Form-formGroup--fullWidth',
+                type: 'textarea',
+                rows: 6,
+                default: '---',
+                showParseTypeToggle: true,
+                parseTypeName: 'parseTypeInputs',
+                awPopOver: "<p>Enter inputs using either JSON or YAML syntax. Use the " +
+                    "radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />&emsp; \"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<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://docs.ansible.com/YAMLSyntax.html" target="_blank">docs.ansible.com</a></p>',
+                dataTitle: i18n._('Input Configuration'),
+                dataPlacement: 'right',
+                dataContainer: "body",
+                ngDisabled: '!(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            },
+            injectors: {
+                label: i18n._('Injector Configuration'),
+                class: 'Form-textAreaLabel Form-formGroup--fullWidth',
+                type: 'textarea',
+                rows: 6,
+                default: '---',
+                showParseTypeToggle: true,
+                parseTypeName: 'parseTypeInjectors',
+                awPopOver: "<p>Enter injectors using either JSON or YAML syntax. Use the " +
+                    "radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />&emsp; \"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<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://docs.ansible.com/YAMLSyntax.html" target="_blank">docs.ansible.com</a></p>',
+                dataTitle: i18n._('Injector Configuration'),
+                dataPlacement: 'right',
+                dataContainer: "body",
+                ngDisabled: '!(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            },
+        },
+
+        buttons: { //for now always generates <button> tags
+            cancel: {
+                ngClick: 'formCancel()',
+                ngShow: '(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            },
+            close: {
+                ngClick: 'formCancel()',
+                ngShow: '!(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            },
+            save: {
+                ngClick: 'formSave()', //$scope.function to call on click, optional
+                ngDisabled: 'credential_type_form.$invalid', //Disable when $invalid, optional
+                ngShow: '(credential_type.summary_fields.user_capabilities.edit || canAdd)'
+            }
+        }
+    };
+}];

awx/ui/client/src/credential-types/credential-types.list.js

@@ -0,0 +1,78 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+
+
+export default ['i18n', function(i18n){
+    return {
+        name:  'credential_types' ,
+        listTitle: i18n._('CREDENTIAL TYPES'),
+        basePath: 'credential_types',
+        iterator: 'credential_type',
+        index: false,
+        hover: false,
+
+        fields: {
+            name: {
+                key: true,
+                label: i18n._('Name'),
+                columnClass: 'col-md-3 col-sm-9 col-xs-9',
+                modalColumnClass: 'col-md-8',
+                awToolTip: '{{credential_type.description}}',
+                dataPlacement: 'top'
+            },
+            kind: {
+                label: i18n._('Type'),
+                ngBind: 'credential_type.kind_label',
+                excludeModal: true,
+                columnClass: 'col-md-2 hidden-sm hidden-xs'
+            },
+        },
+
+        actions: {
+            add: {
+                mode: 'all', // One of: edit, select, all
+                ngClick: 'addCredentialType()',
+                awToolTip: i18n._('Create a new credential type'),
+                actionClass: 'btn List-buttonSubmit',
+                buttonContent: '+ ' + i18n._('ADD'),
+                ngShow: 'canAdd'
+            }
+        },
+
+        fieldActions: {
+
+            columnClass: 'col-md-2 col-sm-3 col-xs-3',
+
+            edit: {
+                ngClick: "editCredentialType(credential_type.id)",
+                icon: 'fa-edit',
+                label: i18n._('Edit'),
+                "class": 'btn-sm',
+                awToolTip: i18n._('Edit credenital type'),
+                dataPlacement: 'top',
+                ngShow: 'credential_type.summary_fields.user_capabilities.edit'
+            },
+            view: {
+                ngClick: "editCredentialType(credential_type.id)",
+                label: i18n._('View'),
+                "class": 'btn-sm',
+                awToolTip: i18n._('View credential type'),
+                dataPlacement: 'top',
+                ngShow: '!credential_type.summary_fields.user_capabilities.edit'
+            },
+            "delete": {
+                ngClick: "deleteCredentialType(credential_type.id, credential_type.name)",
+                icon: 'fa-trash',
+                label: i18n._('Delete'),
+                "class": 'btn-sm',
+                awToolTip: i18n._('Delete credential type'),
+                dataPlacement: 'top',
+                ngShow: 'credential_type.summary_fields.user_capabilities.delete'
+            }
+        }
+    };
+}];

awx/ui/client/src/credential-types/edit/edit.controller.js

@@ -0,0 +1,178 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+export default ['Rest', 'Wait',
+    'CredentialTypesForm', 'ProcessErrors', 'GetBasePath',
+    'GenerateForm', 'resourceData',
+    '$scope', '$state', 'GetChoices', 'ParseTypeChange', 'ToJSON', 'ParseVariableString', 'CreateSelect2',
+    function(
+        Rest, Wait, CredentialTypesForm, ProcessErrors, GetBasePath,
+        GenerateForm, resourceData,
+        $scope, $state, GetChoices, ParseTypeChange, ToJSON, ParseVariableString, CreateSelect2
+    ) {
+        var credential_typeData = resourceData.data,
+            generator = GenerateForm,
+            data = credential_typeData,
+            id = credential_typeData.id,
+            form = CredentialTypesForm,
+            master = {},
+            url = GetBasePath('credential_types');
+
+        init();
+
+        function init() {
+            // Load the list of options for Kind
+            $scope.$parent.optionsDefer.promise
+                .then(function(options) {
+                    GetChoices({
+                        scope: $scope,
+                        url: url,
+                        field: 'kind',
+                        variable: 'credential_kind_options',
+                        options: options,
+                        callback: 'choicesReadyCredentialTypes'
+                    });
+                });
+        }
+
+        if ($scope.removeChoicesReady) {
+            $scope.removeChoicesReady();
+        }
+        $scope.removeChoicesReady = $scope.$on('choicesReadyCredentialTypes',
+            function() {
+
+                $scope.credential_type = credential_typeData;
+
+                $scope.$watch('credential_type.summary_fields.user_capabilities.edit', function(val) {
+                    if (val === false) {
+                        $scope.canAdd = false;
+                    }
+                });
+
+                function getVars(str){
+
+                    // Quick function to test if the host vars are a json-object-string,
+                    // by testing if they can be converted to a JSON object w/o error.
+                    function IsJsonString(str) {
+                        try {
+                            JSON.parse(str);
+                        } catch (e) {
+                            return false;
+                        }
+                        return true;
+                    }
+
+                    if(str === ''){
+                        return '---';
+                    }
+                    else if(IsJsonString(str)){
+                        str = JSON.parse(str);
+                        return jsyaml.safeDump(str);
+                    }
+                    else if(!IsJsonString(str)){
+                        return str;
+                    }
+                }
+
+                var fld, i;
+                for (fld in form.fields) {
+                    if (data[fld]  && fld !== 'inputs' || fld !== 'injectors') {
+                        $scope[fld] = data[fld];
+                        master[fld] = data[fld];
+                    }
+
+                    if (fld === "kind") {
+                        // Set kind field to the correct option
+                        for (i = 0; i < $scope.credential_kind_options.length; i++) {
+                            if ($scope.kind === $scope.credential_kind_options[i].value) {
+                                $scope.kind = $scope.credential_kind_options[i];
+                                master[fld] = $scope.credential_kind_options[i];
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                $scope.inputs = ParseVariableString(getVars(data.inputs));
+                $scope.injectors = ParseVariableString(getVars(data.injectors));
+
+                // if ($scope.inputs === "{}") {
+                //     $scope.inputs = "---";
+                // }
+                //
+                // if ($scope.injectors === "{}") {
+                //     $scope.injectors = "---";
+                // }
+
+                // $scope.inputs = JSON.parse($scope.inputs);
+                // $scope.injectors = JSON.parse($scope.injectors);
+
+                var callback = function() {
+                    // Make sure the form controller knows there was a change
+                    $scope[form.name + '_form'].$setDirty();
+                };
+                $scope.parseTypeInputs = 'yaml';
+                $scope.parseTypeInjectors = 'yaml';
+
+                ParseTypeChange({
+                    scope: $scope,
+                    field_id: 'credential_type_inputs',
+                    variable: 'inputs',
+                    onChange: callback,
+                    parse_variable: 'parseTypeInputs'
+                });
+                ParseTypeChange({
+                    scope: $scope,
+                    field_id: 'credential_type_injectors',
+                    variable: 'injectors',
+                    onChange: callback,
+                    parse_variable: 'parseTypeInjectors'
+                });
+
+                CreateSelect2({
+                    element: '#credential_type_kind',
+                    multiple: false,
+                });
+            }
+        );
+
+        $scope.formSave = function() {
+            generator.clearApiErrors($scope);
+            Wait('start');
+            Rest.setUrl(url + id + '/');
+            var inputs = ToJSON($scope.parseTypeInputs, $scope.inputs);
+            var injectors = ToJSON($scope.parseTypeInjectors, $scope.injectors);
+            if (inputs === null) {
+              inputs = {};
+            }
+            if (injectors === null) {
+              injectors = {};
+            }
+            Rest.put({
+                    name: $scope.name,
+                    description: $scope.description,
+                    kind: $scope.kind.value,
+                    inputs: inputs,
+                    injectors: injectors
+                })
+                .success(function() {
+                    $state.go($state.current, null, { reload: true });
+                    Wait('stop');
+                })
+                .error(function(data, status) {
+                    ProcessErrors($scope, data, status, form, {
+                        hdr: 'Error!',
+                        msg: 'Failed to add new credential type. PUT returned status: ' + status
+                    });
+                });
+        };
+
+        $scope.formCancel = function() {
+            $state.go('credentialTypes');
+        };
+
+    }
+];

awx/ui/client/src/credential-types/edit/main.js

@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import controller from './edit.controller';
+
+export default
+    angular.module('credentialTypesEdit', [])
+        .controller('CredentialTypesEditController', controller);

awx/ui/client/src/credential-types/list/list.controller.js

@@ -0,0 +1,120 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+export default ['$rootScope', '$scope', 'Wait', 'CredentialTypesList',
+    'GetBasePath', 'Rest', 'ProcessErrors', 'Prompt', '$state', '$filter', 'Dataset', 'rbacUiControlService', 'Alert', '$q',
+    function(
+        $rootScope, $scope, Wait, CredentialTypesList,
+        GetBasePath, Rest, ProcessErrors, Prompt, $state, $filter, Dataset, rbacUiControlService, Alert, $q
+    ) {
+        var defaultUrl = GetBasePath('credential_types'),
+            list = CredentialTypesList;
+
+        init();
+
+        function init() {
+            $scope.optionsDefer = $q.defer();
+
+            if (!($rootScope.user_is_superuser || $rootScope.user_is_system_auditor)) {
+                $state.go("setup");
+                Alert('Permission Error', 'You do not have permission to view, edit or create custom credential types.', 'alert-info');
+            }
+
+            $scope.canAdd = false;
+
+            rbacUiControlService.canAdd("credential_types")
+                .then(function(params) {
+                    $scope.canAdd = params.canAdd;
+                    $scope.options = params.options;
+                    $scope.optionsDefer.resolve(params.options);
+                    optionsRequestDataProcessing();
+                });
+
+            // search init
+            $scope.list = list;
+            $scope[`${list.iterator}_dataset`] = Dataset.data;
+            $scope[list.name] = $scope[`${list.iterator}_dataset`].results;
+
+        }
+
+        // @todo what is going on here, and if it needs to happen in this controller make $rootScope var name more explicit
+        if ($rootScope.addedItem) {
+            $scope.addedItem = $rootScope.addedItem;
+            delete $rootScope.addedItem;
+        }
+
+        $scope.editCredentialType = function() {
+            $state.go('credentialTypes.edit', {
+                credential_type_id: this.credential_type.id
+            });
+        };
+
+        $scope.deleteCredentialType = function(id, name) {
+
+            var action = function() {
+                $('#prompt-modal').modal('hide');
+                Wait('start');
+                var url = defaultUrl + id + '/';
+                Rest.setUrl(url);
+                Rest.destroy()
+                    .success(function() {
+                        if (parseInt($state.params.credential_type_id) === id) {
+                            $state.go('^', null, { reload: true });
+                        } else {
+                            $state.go('.', null, { reload: true });
+                        }
+                    })
+                    .error(function(data, status) {
+                        ProcessErrors($scope, data, status, null, {
+                            hdr: 'Error!',
+                            msg: 'Call to ' + url + ' failed. DELETE returned status: ' + status
+                        });
+                    });
+            };
+
+            var bodyHtml = '<div class="Prompt-bodyQuery">Are you sure you want to delete the credential type below?</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>';
+            Prompt({
+                hdr: 'Delete',
+                body: bodyHtml,
+                action: action,
+                actionText: 'DELETE'
+            });
+        };
+
+        $scope.addCredentialType = function() {
+            $state.go('credentialTypes.add');
+        };
+
+        // iterate over the list and add fields like type label, after the
+        // OPTIONS request returns, or the list is sorted/paginated/searched
+        function optionsRequestDataProcessing(){
+            $scope.optionsDefer.promise.then(function(options) {
+                if($scope.list.name === 'credential_types'){
+                    if ($scope[list.name] !== undefined) {
+                        $scope[list.name].forEach(function(item, item_idx) {
+                            var itm = $scope[list.name][item_idx];
+                            // Set the item type label
+                            if (list.fields.kind && options && options.actions && options.actions.GET && options.actions.GET.kind) {
+                                options.actions.GET.kind.choices.forEach(function(choice) {
+                                    if (choice[0] === item.kind) {
+                                        itm.kind_label = choice[1];
+                                    }
+                                });
+                            }
+
+                        });
+                    }
+                }
+            });
+        }
+
+        $scope.$watchCollection(`${$scope.list.name}`, function() {
+                optionsRequestDataProcessing();
+            }
+        );
+
+    }
+];

awx/ui/client/src/credential-types/list/main.js

@@ -0,0 +1,11 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import CredentialTypesListController from './list.controller';
+
+export default
+angular.module('credenitalTypesList', [])
+    .controller('CredentialTypesListController', CredentialTypesListController);

awx/ui/client/src/credential-types/main.js

@@ -0,0 +1,50 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import credentialTypesList from './list/main';
+import credentialTypesAdd from './add/main';
+import credentialTypesEdit from './edit/main';
+import list from './credential-types.list';
+import form from './credential-types.form';
+import { N_ } from '../i18n';
+
+export default
+angular.module('credentialTypes', [
+        credentialTypesList.name,
+        credentialTypesAdd.name,
+        credentialTypesEdit.name
+    ])
+    .factory('CredentialTypesList', list)
+    .factory('CredentialTypesForm', form)
+    .config(['$stateProvider', 'stateDefinitionsProvider',
+        function($stateProvider, stateDefinitionsProvider) {
+            let stateDefinitions = stateDefinitionsProvider.$get();
+
+            $stateProvider.state({
+                name: 'credentialTypes',
+                url: '/credential_type',
+                lazyLoad: () => stateDefinitions.generateTree({
+                    parent: 'credentialTypes',
+                    modes: ['add', 'edit'],
+                    list: 'CredentialTypesList',
+                    form: 'CredentialTypesForm',
+                    controllers: {
+                        list: 'CredentialTypesListController',
+                        add: 'CredentialTypesAddController',
+                        edit: 'CredentialTypesEditController'
+                    },
+                    data: {
+                        activityStream: true,
+                        activityStreamTarget: 'custom_inventory_script' // TODO: change to 'credential_type'...there's probably more work that needs to be done to hook up activity stream
+                    },
+                    ncyBreadcrumb: {
+                        parent: 'setup',
+                        label: N_('CREDENTIAL TYPES')
+                    }
+                })
+            });
+        }
+    ]);

awx/ui/client/src/credentials/list/credentials-list.controller.js

@@ -19,8 +19,8 @@ export default ['$scope', 'Rest', 'CredentialList', 'Prompt', 'ClearScope',
 
         function init() {
             rbacUiControlService.canAdd('credentials')
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
 
             // search init

awx/ui/client/src/inventories/add/inventory-add.controller.js

@@ -17,8 +17,8 @@ function InventoriesAdd($scope, $location,
 
     $scope.canAdd = false;
     rbacUiControlService.canAdd(GetBasePath('inventory'))
-        .then(function(canAdd) {
+        .then(function(params) {
-            $scope.canAdd = canAdd;
+            $scope.canAdd = params.canAdd;
         });
 
     Rest.setUrl(GetBasePath('inventory'));

awx/ui/client/src/inventories/list/inventory-list.controller.js

@@ -23,8 +23,8 @@ function InventoriesList($scope, $rootScope, $location,
         $scope.canAdd = false;
 
         rbacUiControlService.canAdd('inventory')
-            .then(function(canAdd) {
+            .then(function(params) {
-                $scope.canAdd = canAdd;
+                $scope.canAdd = params.canAdd;
             });
 
         $scope.$watchCollection(list.name, function(){

awx/ui/client/src/inventories/manage/groups/groups-add.controller.js

@@ -17,8 +17,8 @@ export default ['$state', '$stateParams', '$scope', 'GroupForm', 'ParseTypeChang
             GenerateForm.applyDefaults(form, $scope);
 
         rbacUiControlService.canAdd(GetBasePath('inventory') + $stateParams.inventory_id + "/groups")
-            .then(function(canAdd) {
+            .then(function(params) {
-                $scope.canAdd = canAdd;
+                $scope.canAdd = params.canAdd;
             });
             $scope.parseType = 'yaml';
             $scope.envParseType = 'yaml';

awx/ui/client/src/inventories/manage/groups/groups-edit.controller.js

@@ -13,8 +13,8 @@ export default ['$state', '$stateParams', '$scope', 'ParseVariableString', 'rbac
 
         function init() {
             rbacUiControlService.canAdd(GetBasePath('inventory') + $stateParams.inventory_id + "/groups")
-                .then(function(canAdd) {
+                .then(function(params) {
-                $scope.canAdd = canAdd;
+                $scope.canAdd = params.canAdd;
             });
             // instantiate expected $scope values from inventorySourceData & groupData
             _.assign($scope, { credential: inventorySourceData.credential }, { overwrite: inventorySourceData.overwrite }, { overwrite_vars: inventorySourceData.overwrite_vars }, { update_on_launch: inventorySourceData.update_on_launch }, { update_cache_timeout: inventorySourceData.update_cache_timeout }, { instance_filters: inventorySourceData.instance_filters }, { inventory_script: inventorySourceData.source_script });

awx/ui/client/src/inventories/manage/groups/groups-list.controller.js

@@ -21,8 +21,8 @@
         $scope.canAdd = false;
 
         rbacUiControlService.canAdd(GetBasePath('inventory') + $scope.inventory_id + "/groups")
-            .then(function(canAdd) {
+            .then(function(params) {
-                $scope.canAdd = canAdd;
+                $scope.canAdd = params.canAdd;
             });
 
             // Search init

awx/ui/client/src/inventories/manage/hosts/hosts-add.controller.js

@@ -15,8 +15,8 @@ export default ['$state', '$stateParams', '$scope', 'HostForm', 'ParseTypeChange
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd(GetBasePath('inventory') + $stateParams.inventory_id + "/hosts")
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
             $scope.parseType = 'yaml';
             $scope.host = { enabled: true };

awx/ui/client/src/inventories/manage/hosts/hosts-list.controller.js

@@ -17,8 +17,8 @@
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd(GetBasePath('inventory') + $scope.inventory_id + "/hosts")
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
 
             // Search init

awx/ui/client/src/inventory-scripts/list/list.controller.js

@@ -19,8 +19,8 @@ export default ['$rootScope', '$scope', 'Wait', 'InventoryScriptsList',
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd("inventory_scripts")
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
 
             // search init

awx/ui/client/src/notifications/notification-templates-list/list.controller.js

@@ -23,8 +23,8 @@
              $scope.canAdd = false;
 
              rbacUiControlService.canAdd("notification_templates")
-                 .then(function(canAdd) {
+                 .then(function(params) {
-                     $scope.canAdd = canAdd;
+                     $scope.canAdd = params.canAdd;
                  });
 
              // search init

awx/ui/client/src/organizations/list/organizations-list.controller.js

@@ -23,8 +23,8 @@ export default ['$stateParams', '$scope', '$rootScope',
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd("organizations")
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
             $scope.orgCount = Dataset.data.count;
 

awx/ui/client/src/projects/list/projects-list.controller.js

@@ -22,8 +22,8 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert',
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd('projects')
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
 
             // search init

awx/ui/client/src/rest/get-choices.factory.js

@@ -17,27 +17,41 @@
         return function (params) {
             var scope = params.scope,
                 url = params.url,
-                field = params.field;
+                field = params.field,
+                options = params.options;
 
-            // Auto populate the field if there is only one result
+            if (!options) {
-            Rest.setUrl(url);
+              // Auto populate the field if there is only one result
-            return Rest.options()
+              Rest.setUrl(url);
-                .then(function (data) {
+              return Rest.options()
-                    data = data.data;
+                  .then(function (data) {
-                    var choices = data.actions.GET[field].choices;
+                      data = data.data;
+                      var choices = data.actions.GET[field].choices;
 
-                    // manually add the adhoc label to the choices object if
+                      // manually add the adhoc label to the choices object if
-                    // the permission_type field
+                      // the permission_type field
-                    if (field === "permission_type") {
+                      if (field === "permission_type") {
-                        choices.push(["adhoc",
+                          choices.push(["adhoc",
-                            data.actions.GET.run_ad_hoc_commands.help_text]);
+                              data.actions.GET.run_ad_hoc_commands.help_text]);
-                    }
+                      }
 
-                    return choices;
+                      return choices;
-                })
+                  })
-                .catch(function (data, status) {
+                  .catch(function (data, status) {
-                    ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                      ProcessErrors(scope, data, status, null, { hdr: 'Error!',
-                            msg: 'Failed to get ' + field + ' labels. Options requrest returned status: ' + status });
+                              msg: 'Failed to get ' + field + ' labels. Options requrest returned status: ' + status });
-                });
+                  });
+            } else {
+              var choices = options.actions.GET[field].choices;
+
+              // manually add the adhoc label to the choices object if
+              // the permission_type field
+              if (field === "permission_type") {
+                  choices.push(["adhoc",
+                      options.actions.GET.run_ad_hoc_commands.help_text]);
+              }
+
+              return choices;
+            }
         };
     }];

awx/ui/client/src/scheduler/schedulerList.controller.js

@@ -34,8 +34,8 @@ export default [
                 scheduleEndpoint = ParentObject.endpoint|| ParentObject.related.schedules || `${ParentObject.related.inventory_source}schedules`;
                 $scope.canAdd = false;
                 rbacUiControlService.canAdd(scheduleEndpoint)
-                    .then(function(canAdd) {
+                    .then(function(params) {
-                        $scope.canAdd = canAdd;
+                        $scope.canAdd = params.canAdd;
                     });
             }
 

awx/ui/client/src/setup-menu/setup-menu.partial.html

@@ -43,6 +43,13 @@
             Create templates for sending notifications with Email, HipChat, Slack, and SMS.
             </p>
         </a>
+        <a ui-sref="credentialTypes" class="SetupItem"
+            ng-if="user_is_system_auditor || user_is_superuser">
+            <h4 class="SetupItem-title" translate>Credential Types</h4>
+            <p class="SetupItem-description" translate>
+                Create custom credential types to be used for authenticating to network hosts and cloud sources
+            </p>
+        </a>
         <a ui-sref="license" class="SetupItem">
           <h4 class="SetupItem-title" translate>View Your License</h4>
           <p class="SetupItem-description" translate>

awx/ui/client/src/shared/Utilities.js

@@ -720,7 +720,8 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                     field = params.field,
                     variable = params.variable,
                     callback = params.callback,
-                    choice_name = params.choice_name;
+                    choice_name = params.choice_name,
+                    options = params.options;
 
                 if (scope[variable]) {
                     scope[variable].length = 0;
@@ -728,42 +729,50 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                     scope[variable] = [];
                 }
 
-                Rest.setUrl(url);
+                var withOptions = function(options) {
-                Rest.options()
+                    var choices, defaultChoice;
-                    .success(function(data) {
+                    choices = (choice_name) ? options.actions.GET[field][choice_name] : options.actions.GET[field].choices;
-                        var choices, defaultChoice;
+                    if (options && options.actions && options.actions.POST && options.actions.POST[field]) {
-                        choices = (choice_name) ? data.actions.GET[field][choice_name] : data.actions.GET[field].choices;
+                        defaultChoice = options.actions.POST[field].default;
-                        if (data && data.actions && data.actions.POST && data.actions.POST[field]) {
+                    }
-                            defaultChoice = data.actions.POST[field].default;
+                    if (choices) {
-                        }
+                        // including 'name' property so list can be used by search
-                        if (choices) {
+                        choices.forEach(function(choice) {
-                            // including 'name' property so list can be used by search
+                            scope[variable].push({
-                            choices.forEach(function(choice) {
+                                label: choice[1],
-                                scope[variable].push({
+                                value: choice[0],
-                                    label: choice[1],
+                                name: choice[1]
-                                    value: choice[0],
-                                    name: choice[1]
-                                });
                             });
-                        }
+                        });
-                        if (defaultChoice !== undefined) {
+                    }
-                            var val;
+                    if (defaultChoice !== undefined) {
-                            for (val in scope[variable]) {
+                        var val;
-                                if (scope[variable][val].value === defaultChoice) {
+                        for (val in scope[variable]) {
-                                    scope[variable][val].isDefault = true;
+                            if (scope[variable][val].value === defaultChoice) {
-                                }
+                                scope[variable][val].isDefault = true;
                             }
                         }
-                        if (callback) {
+                    }
-                            scope.$emit(callback);
+                    if (callback) {
-                        }
+                        scope.$emit(callback);
-                    })
+                    }
-                    .error(function(data, status) {
+                };
-                        ProcessErrors(scope, data, status, null, {
+
-                            hdr: 'Error!',
+                if (!options) {
-                            msg: 'Failed to get ' + url + '. GET status: ' + status
+                  Rest.setUrl(url);
-                        });
+                  Rest.options()
-                    });
+                      .success(function(data) {
+                          withOptions(data);
+                      })
+                      .error(function(data, status) {
+                          ProcessErrors(scope, data, status, null, {
+                              hdr: 'Error!',
+                              msg: 'Failed to get ' + url + '. GET status: ' + status
+                          });
+                      });
+                } else {
+                  withOptions(options);
+                }
             };
         }
     ])

awx/ui/client/src/shared/form-generator.js

@@ -646,6 +646,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += (field.labelClass) ? field.labelClass : "";
                         html += `${field.required ? ' prepend-asterisk ' : ''}`;
                         html += (horizontal) ? " " + getLabelWidth() : "Form-inputLabelContainer ";
+                        html += (field.showParseTypeToggle) ? "Form-inputLabelContainer--codeMirror " : "";
                         html += "\" ";
                         html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
                         html += "for=\"" + fld + '">\n';
@@ -658,7 +659,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += (field.awPopOver && !field.awPopOverRight) ? Attr(field, 'awPopOver', fld) : "";
                         html += (field.hintText) ? "\n\t\t<span class=\"label-hint-text\">\n\t\t\t<i class=\"fa fa-info-circle\">\n\t\t\t</i>\n\t\t\tHint: " + field.hintText + "\n\t\t</span>" : "";
                         // Variable editing
-                        if (fld === "variables" || fld === "extra_vars" || _.last(fld.split('_')) === 'variables' || fld === 'source_vars') {
+                        if (fld === "variables" || fld === "extra_vars" || _.last(fld.split('_')) === 'variables' || fld === 'source_vars' || field.showParseTypeToggle === true) {
                             let parseTypeId = `${form.name}_${fld}_parse_type`;
                             let parseTypeName = field.parseTypeName || 'parseType';
                             let getToggleClass = (primary, secondary) => `{

awx/ui/client/src/shared/rbacUiControl.js

@@ -20,7 +20,7 @@ export default
                 Rest.options()
                     .success(function(data) {
                         if (data.actions.POST) {
-                            canAddVal.resolve(true);
+                            canAddVal.resolve({canAdd: true, options: data});
                         } else {
                             canAddVal.reject(false);
                         }

awx/ui/client/src/teams/list/teams-list.controller.js

@@ -21,8 +21,8 @@ export default ['$scope', 'Rest', 'TeamList', 'Prompt', 'ClearScope',
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd('teams')
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
             // search init
             $scope.list = list;

awx/ui/client/src/templates/list/templates-list.controller.js

@@ -25,13 +25,13 @@ export default ['$scope', '$rootScope',
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd("job_templates")
-                .then(function(canAddJobTemplate) {
+                .then(function(params) {
-                    $scope.canAddJobTemplate = canAddJobTemplate;
+                    $scope.canAddJobTemplate = params.canAdd;
                 });
 
             rbacUiControlService.canAdd("workflow_job_templates")
-                .then(function(canAddWorkflowJobTemplate) {
+                .then(function(params) {
-                    $scope.canAddWorkflowJobTemplate = canAddWorkflowJobTemplate;
+                    $scope.canAddWorkflowJobTemplate = params.canAdd;
                 });
             // search init
             $scope.list = list;

awx/ui/client/src/users/list/users-list.controller.js

@@ -34,8 +34,8 @@ export default ['$scope', '$rootScope', 'Rest', 'UserList', 'Prompt',
             $scope.canAdd = false;
 
             rbacUiControlService.canAdd('users')
-                .then(function(canAdd) {
+                .then(function(params) {
-                    $scope.canAdd = canAdd;
+                    $scope.canAdd = params.canAdd;
                 });
 
             // search init