diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-09 18:05:58 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-09 18:05:58 +0300 |
commit | cc6b394a063eb77c90505e4adca2e2da2e29c3a2 (patch) | |
tree | 94ec203489b9c800b832c7bd4f1b7aadc5a96958 /app/assets/javascripts/create_cluster | |
parent | 0a850868dfb85086cba8320cee9dac4657dcae6c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/create_cluster')
9 files changed, 169 insertions, 76 deletions
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue index f9465da6fda..3c6da43c4c4 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue +++ b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue @@ -3,6 +3,8 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; +const findItem = (items, valueProp, value) => items.find(item => item[valueProp] === value); + export default { components: { DropdownButton, @@ -26,7 +28,7 @@ export default { default: '', }, value: { - type: Object, + type: [Object, String], required: false, default: () => null, }, @@ -93,8 +95,8 @@ export default { }, data() { return { + selectedItem: findItem(this.items, this.value), searchQuery: '', - selectedItem: null, }; }, computed: { @@ -127,10 +129,15 @@ export default { return (this.selectedItem && this.selectedItem[this.valueProperty]) || ''; }, }, + watch: { + value(value) { + this.selectedItem = findItem(this.items, this.valueProperty, value); + }, + }, methods: { select(item) { this.selectedItem = item; - this.$emit('input', item); + this.$emit('input', item[this.valueProperty]); }, }, }; diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue index 6f6b9ad025a..94a446f1721 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue +++ b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue @@ -3,12 +3,15 @@ import { createNamespacedHelpers, mapState, mapActions } from 'vuex'; import { sprintf, s__ } from '~/locale'; import ClusterFormDropdown from './cluster_form_dropdown.vue'; import RegionDropdown from './region_dropdown.vue'; -import RoleNameDropdown from './role_name_dropdown.vue'; import SecurityGroupDropdown from './security_group_dropdown.vue'; +const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles'); const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers( 'regions', ); +const { mapState: mapKeyPairsState, mapActions: mapKeyPairsActions } = createNamespacedHelpers( + 'keyPairs', +); const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHelpers('vpcs'); const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers( 'subnets', @@ -18,16 +21,31 @@ export default { components: { ClusterFormDropdown, RegionDropdown, - RoleNameDropdown, SecurityGroupDropdown, }, computed: { - ...mapState(['selectedRegion', 'selectedVpc', 'selectedSubnet']), + ...mapState([ + 'selectedRegion', + 'selectedKeyPair', + 'selectedVpc', + 'selectedSubnet', + 'selectedRole', + ]), + ...mapRolesState({ + roles: 'items', + isLoadingRoles: 'isLoadingItems', + loadingRolesError: 'loadingItemsError', + }), ...mapRegionsState({ regions: 'items', isLoadingRegions: 'isLoadingItems', loadingRegionsError: 'loadingItemsError', }), + ...mapKeyPairsState({ + keyPairs: 'items', + isLoadingKeyPairs: 'isLoadingItems', + loadingKeyPairsError: 'loadingItemsError', + }), ...mapVpcsState({ vpcs: 'items', isLoadingVpcs: 'isLoadingItems', @@ -41,9 +59,38 @@ export default { vpcDropdownDisabled() { return !this.selectedRegion; }, + keyPairDropdownDisabled() { + return !this.selectedRegion; + }, subnetDropdownDisabled() { return !this.selectedVpc; }, + roleDropdownHelpText() { + return sprintf( + s__( + 'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.', + ), + { + startLink: + '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">', + endLink: '</a>', + }, + false, + ); + }, + keyPairDropdownHelpText() { + return sprintf( + s__( + 'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services%{endLink}.', + ), + { + startLink: + '<a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair" target="_blank" rel="noopener noreferrer">', + endLink: '</a>', + }, + false, + ); + }, vpcDropdownHelpText() { return sprintf( s__( @@ -73,15 +120,19 @@ export default { }, mounted() { this.fetchRegions(); + this.fetchRoles(); }, methods: { - ...mapActions(['setRegion', 'setVpc', 'setSubnet']), + ...mapActions(['setRegion', 'setVpc', 'setSubnet', 'setRole', 'setKeyPair']), ...mapRegionsActions({ fetchRegions: 'fetchItems' }), ...mapVpcActions({ fetchVpcs: 'fetchItems' }), ...mapSubnetActions({ fetchSubnets: 'fetchItems' }), - setRegionAndFetchVpcs(region) { + ...mapRolesActions({ fetchRoles: 'fetchItems' }), + ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }), + setRegionAndFetchVpcsAndKeyPairs(region) { this.setRegion({ region }); this.fetchVpcs({ region }); + this.fetchKeyPairs({ region }); }, setVpcAndFetchSubnets(vpc) { this.setVpc({ vpc }); @@ -93,28 +144,58 @@ export default { <template> <form name="eks-cluster-configuration-form"> <div class="form-group"> - <label class="label-bold" name="role" for="eks-role">{{ - s__('ClusterIntegration|Role name') - }}</label> - <role-name-dropdown /> + <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Role name') }}</label> + <cluster-form-dropdown + field-id="eks-role" + field-name="eks-role" + :input="selectedRole" + :items="roles" + :loading="isLoadingRoles" + :loading-text="s__('ClusterIntegration|Loading IAM Roles')" + :placeholder="s__('ClusterIntergation|Select role name')" + :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')" + :empty-text="s__('ClusterIntegration|No IAM Roles found')" + :has-errors="Boolean(loadingRolesError)" + :error-message="s__('ClusterIntegration|Could not load IAM roles')" + @input="setRole({ role: $event })" + /> + <p class="form-text text-muted" v-html="roleDropdownHelpText"></p> </div> <div class="form-group"> - <label class="label-bold" name="role" for="eks-role">{{ - s__('ClusterIntegration|Region') - }}</label> + <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label> <region-dropdown :value="selectedRegion" :regions="regions" :error="loadingRegionsError" :loading="isLoadingRegions" - @input="setRegionAndFetchVpcs($event)" + @input="setRegionAndFetchVpcsAndKeyPairs($event)" /> </div> <div class="form-group"> - <label class="label-bold" name="eks-vpc" for="eks-vpc">{{ - s__('ClusterIntegration|VPC') + <label class="label-bold" for="eks-key-pair">{{ + s__('ClusterIntegration|Key pair name') }}</label> <cluster-form-dropdown + field-id="eks-key-pair" + field-name="eks-key-pair" + :input="selectedKeyPair" + :items="keyPairs" + :disabled="keyPairDropdownDisabled" + :disabled-text="s__('ClusterIntegration|Select a region to choose a Key Pair')" + :loading="isLoadingKeyPairs" + :loading-text="s__('ClusterIntegration|Loading Key Pairs')" + :placeholder="s__('ClusterIntergation|Select key pair')" + :search-field-placeholder="s__('ClusterIntegration|Search Key Pairs')" + :empty-text="s__('ClusterIntegration|No Key Pairs found')" + :has-errors="Boolean(loadingKeyPairsError)" + :error-message="s__('ClusterIntegration|Could not load Key Pairs')" + @input="setKeyPair({ keyPair: $event })" + /> + <p class="form-text text-muted" v-html="keyPairDropdownHelpText"></p> + </div> + <div class="form-group"> + <label class="label-bold" for="eks-vpc">{{ s__('ClusterIntegration|VPC') }}</label> + <cluster-form-dropdown field-id="eks-vpc" field-name="eks-vpc" :input="selectedVpc" @@ -126,16 +207,14 @@ export default { :placeholder="s__('ClusterIntergation|Select a VPC')" :search-field-placeholder="s__('ClusterIntegration|Search VPCs')" :empty-text="s__('ClusterIntegration|No VPCs found')" - :has-errors="loadingVpcsError" + :has-errors="Boolean(loadingVpcsError)" :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')" @input="setVpcAndFetchSubnets($event)" /> <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p> </div> <div class="form-group"> - <label class="label-bold" name="eks-subnet" for="eks-subnet">{{ - s__('ClusterIntegration|Subnet') - }}</label> + <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Subnet') }}</label> <cluster-form-dropdown field-id="eks-subnet" field-name="eks-subnet" @@ -148,7 +227,7 @@ export default { :placeholder="s__('ClusterIntergation|Select a subnet')" :search-field-placeholder="s__('ClusterIntegration|Search subnets')" :empty-text="s__('ClusterIntegration|No subnet found')" - :has-errors="loadingSubnetsError" + :has-errors="Boolean(loadingSubnetsError)" :error-message="s__('ClusterIntegration|Could not load subnets for the selected VPC')" @input="setSubnet({ subnet: $event })" /> diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue deleted file mode 100644 index 70230b294ac..00000000000 --- a/app/assets/javascripts/create_cluster/eks_cluster/components/role_name_dropdown.vue +++ /dev/null @@ -1,53 +0,0 @@ -<script> -import { sprintf, s__ } from '~/locale'; - -import ClusterFormDropdown from './cluster_form_dropdown.vue'; - -export default { - components: { - ClusterFormDropdown, - }, - props: { - roles: { - type: Array, - required: false, - default: () => [], - }, - loading: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - helpText() { - return sprintf( - s__( - 'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.', - ), - { - startLink: - '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">', - endLink: '</a>', - }, - false, - ); - }, - }, -}; -</script> -<template> - <div> - <cluster-form-dropdown - field-id="eks-role-name" - field-name="eks-role-name" - :items="roles" - :loading="loading" - :loading-text="s__('ClusterIntegration|Loading IAM Roles')" - :placeholder="s__('ClusterIntergation|Select role name')" - :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')" - :empty-text="s__('ClusterIntegration|No IAM Roles found')" - /> - <p class="form-text text-muted" v-html="helpText"></p> - </div> -</template> diff --git a/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js b/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js index 030b6b384b1..98ad33d6651 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js @@ -1,4 +1,39 @@ import EC2 from 'aws-sdk/clients/ec2'; +import IAM from 'aws-sdk/clients/iam'; + +export const fetchRoles = () => + new Promise((resolve, reject) => { + const iam = new IAM(); + + iam + .listRoles() + .on('success', ({ data: { Roles: roles } }) => { + const transformedRoles = roles.map(({ RoleName: name }) => ({ name })); + + resolve(transformedRoles); + }) + .on('error', error => { + reject(error); + }) + .send(); + }); + +export const fetchKeyPairs = () => + new Promise((resolve, reject) => { + const ec2 = new EC2(); + + ec2 + .describeKeyPairs() + .on('success', ({ data: { KeyPairs: keyPairs } }) => { + const transformedKeyPairs = keyPairs.map(({ RegionName: name }) => ({ name })); + + resolve(transformedKeyPairs); + }) + .on('error', error => { + reject(error); + }) + .send(); + }); export const fetchRegions = () => new Promise((resolve, reject) => { diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js index 0809fc2dfc4..f2abc121f57 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js @@ -4,6 +4,10 @@ export const setRegion = ({ commit }, payload) => { commit(types.SET_REGION, payload); }; +export const setKeyPair = ({ commit }, payload) => { + commit(types.SET_KEY_PAIR, payload); +}; + export const setVpc = ({ commit }, payload) => { commit(types.SET_VPC, payload); }; @@ -12,4 +16,8 @@ export const setSubnet = ({ commit }, payload) => { commit(types.SET_SUBNET, payload); }; +export const setRole = ({ commit }, payload) => { + commit(types.SET_ROLE, payload); +}; + export default () => {}; diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/index.js b/app/assets/javascripts/create_cluster/eks_cluster/store/index.js index 622095f2cc8..584cd267d8c 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/index.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/index.js @@ -15,10 +15,18 @@ const createStore = () => mutations, state: state(), modules: { + roles: { + namespaced: true, + ...clusterDropdownStore(awsServices.fetchRoles), + }, regions: { namespaced: true, ...clusterDropdownStore(awsServices.fetchRegions), }, + keyPairs: { + namespaced: true, + ...clusterDropdownStore(awsServices.fetchKeyPairs), + }, vpcs: { namespaced: true, ...clusterDropdownStore(awsServices.fetchVpcs), diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js b/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js index ada76b21f18..b9af9c1d5a4 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js @@ -1,3 +1,5 @@ export const SET_REGION = 'SET_REGION'; export const SET_VPC = 'SET_VPC'; +export const SET_KEY_PAIR = 'SET_KEY_PAIR'; export const SET_SUBNET = 'SET_SUBNET'; +export const SET_ROLE = 'SET_ROLE'; diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js b/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js index 346716bb0df..748a78e0b1e 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js @@ -4,10 +4,16 @@ export default { [types.SET_REGION](state, { region }) { state.selectedRegion = region; }, + [types.SET_KEY_PAIR](state, { keyPair }) { + state.selectedKeyPair = keyPair; + }, [types.SET_VPC](state, { vpc }) { state.selectedVpc = vpc; }, [types.SET_SUBNET](state, { subnet }) { state.selectedSubnet = subnet; }, + [types.SET_ROLE](state, { role }) { + state.selectedRole = role; + }, }; diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js index 84880e15d9c..6ed174d247b 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js @@ -4,6 +4,7 @@ export default () => ({ selectedRegion: '', selectedRole: '', + selectedKeyPair: '', selectedVpc: '', selectedSubnet: '', selectedSecurityGroup: '', |