diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-03 00:05:59 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-03 00:05:59 +0000 |
commit | 427b23c12718bea233931431e7d9307881a960c0 (patch) | |
tree | 5e15672783c950a5e68dd89517d7888e652e01a7 /app/assets/javascripts/create_cluster | |
parent | 6d60f910762c1a92a07a4afaf1b26962f75ee4b6 (diff) | |
download | gitlab-ce-427b23c12718bea233931431e7d9307881a960c0.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/create_cluster')
9 files changed, 174 insertions, 13 deletions
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 7ed51068d42..6f6b9ad025a 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 @@ -1,39 +1,92 @@ <script> 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'; -import SubnetDropdown from './subnet_dropdown.vue'; -import VpcDropdown from './vpc_dropdown.vue'; const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers( 'regions', ); +const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHelpers('vpcs'); +const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers( + 'subnets', +); export default { components: { + ClusterFormDropdown, RegionDropdown, RoleNameDropdown, SecurityGroupDropdown, - SubnetDropdown, - VpcDropdown, }, computed: { - ...mapState(['selectedRegion']), + ...mapState(['selectedRegion', 'selectedVpc', 'selectedSubnet']), ...mapRegionsState({ regions: 'items', isLoadingRegions: 'isLoadingItems', loadingRegionsError: 'loadingItemsError', }), + ...mapVpcsState({ + vpcs: 'items', + isLoadingVpcs: 'isLoadingItems', + loadingVpcsError: 'loadingItemsError', + }), + ...mapSubnetsState({ + subnets: 'items', + isLoadingSubnets: 'isLoadingItems', + loadingSubnetsError: 'loadingItemsError', + }), + vpcDropdownDisabled() { + return !this.selectedRegion; + }, + subnetDropdownDisabled() { + return !this.selectedVpc; + }, + vpcDropdownHelpText() { + return sprintf( + s__( + 'ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services%{endLink}.', + ), + { + startLink: + '<a href="https://console.aws.amazon.com/vpc/home?#vpc" target="_blank" rel="noopener noreferrer">', + endLink: '</a>', + }, + false, + ); + }, + subnetDropdownHelpText() { + return sprintf( + s__( + 'ClusterIntegration|Choose the %{startLink}subnets%{endLink} in your VPC where your worker nodes will run.', + ), + { + startLink: + '<a href="https://console.aws.amazon.com/vpc/home?#subnets" target="_blank" rel="noopener noreferrer">', + endLink: '</a>', + }, + false, + ); + }, }, mounted() { this.fetchRegions(); }, methods: { - ...mapActions(['setRegion']), - ...mapRegionsActions({ - fetchRegions: 'fetchItems', - }), + ...mapActions(['setRegion', 'setVpc', 'setSubnet']), + ...mapRegionsActions({ fetchRegions: 'fetchItems' }), + ...mapVpcActions({ fetchVpcs: 'fetchItems' }), + ...mapSubnetActions({ fetchSubnets: 'fetchItems' }), + setRegionAndFetchVpcs(region) { + this.setRegion({ region }); + this.fetchVpcs({ region }); + }, + setVpcAndFetchSubnets(vpc) { + this.setVpc({ vpc }); + this.fetchSubnets({ vpc }); + }, }, }; </script> @@ -54,8 +107,52 @@ export default { :regions="regions" :error="loadingRegionsError" :loading="isLoadingRegions" - @input="setRegion({ region: $event })" + @input="setRegionAndFetchVpcs($event)" + /> + </div> + <div class="form-group"> + <label class="label-bold" name="eks-vpc" for="eks-vpc">{{ + s__('ClusterIntegration|VPC') + }}</label> + <cluster-form-dropdown + field-id="eks-vpc" + field-name="eks-vpc" + :input="selectedVpc" + :items="vpcs" + :loading="isLoadingVpcs" + :disabled="vpcDropdownDisabled" + :disabled-text="s__('ClusterIntegration|Select a region to choose a VPC')" + :loading-text="s__('ClusterIntegration|Loading VPCs')" + :placeholder="s__('ClusterIntergation|Select a VPC')" + :search-field-placeholder="s__('ClusterIntegration|Search VPCs')" + :empty-text="s__('ClusterIntegration|No VPCs found')" + :has-errors="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> + <cluster-form-dropdown + field-id="eks-subnet" + field-name="eks-subnet" + :input="selectedSubnet" + :items="subnets" + :loading="isLoadingSubnets" + :disabled="subnetDropdownDisabled" + :disabled-text="s__('ClusterIntegration|Select a VPC to choose a subnet')" + :loading-text="s__('ClusterIntegration|Loading subnets')" + :placeholder="s__('ClusterIntergation|Select a subnet')" + :search-field-placeholder="s__('ClusterIntegration|Search subnets')" + :empty-text="s__('ClusterIntegration|No subnet found')" + :has-errors="loadingSubnetsError" + :error-message="s__('ClusterIntegration|Could not load subnets for the selected VPC')" + @input="setSubnet({ subnet: $event })" /> + <p class="form-text text-muted" v-html="subnetDropdownHelpText"></p> </div> </form> </template> diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/subnet_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/subnet_dropdown.vue deleted file mode 100644 index e69de29bb2d..00000000000 --- a/app/assets/javascripts/create_cluster/eks_cluster/components/subnet_dropdown.vue +++ /dev/null diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/vpc_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/vpc_dropdown.vue deleted file mode 100644 index e69de29bb2d..00000000000 --- a/app/assets/javascripts/create_cluster/eks_cluster/components/vpc_dropdown.vue +++ /dev/null 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 5a13d32e0d2..030b6b384b1 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 @@ -17,4 +17,45 @@ export const fetchRegions = () => .send(); }); +export const fetchVpcs = () => + new Promise((resolve, reject) => { + const ec2 = new EC2(); + + ec2 + .describeVpcs() + .on('success', ({ data: { Vpcs: vpcs } }) => { + const transformedVpcs = vpcs.map(({ VpcId: id }) => ({ id, name: id })); + + resolve(transformedVpcs); + }) + .on('error', error => { + reject(error); + }) + .send(); + }); + +export const fetchSubnets = ({ vpc }) => + new Promise((resolve, reject) => { + const ec2 = new EC2(); + + ec2 + .describeSubnets({ + Filters: [ + { + Name: 'vpc-id', + Values: [vpc.id], + }, + ], + }) + .on('success', ({ data: { Subnets: subnets } }) => { + const transformedSubnets = subnets.map(({ SubnetId: id }) => ({ id, name: id })); + + resolve(transformedSubnets); + }) + .on('error', error => { + reject(error); + }) + .send(); + }); + export default () => {}; 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 68493be37e0..0809fc2dfc4 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js @@ -4,4 +4,12 @@ export const setRegion = ({ commit }, payload) => { commit(types.SET_REGION, payload); }; +export const setVpc = ({ commit }, payload) => { + commit(types.SET_VPC, payload); +}; + +export const setSubnet = ({ commit }, payload) => { + commit(types.SET_SUBNET, payload); +}; + export default () => {}; diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/cluster_dropdown/actions.js b/app/assets/javascripts/create_cluster/eks_cluster/store/cluster_dropdown/actions.js index 4f1ecb22719..5d250b2e29e 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/cluster_dropdown/actions.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/cluster_dropdown/actions.js @@ -4,10 +4,10 @@ export default fetchItems => ({ requestItems: ({ commit }) => commit(types.REQUEST_ITEMS), receiveItemsSuccess: ({ commit }, payload) => commit(types.RECEIVE_ITEMS_SUCCESS, payload), receiveItemsError: ({ commit }, payload) => commit(types.RECEIVE_ITEMS_ERROR, payload), - fetchItems: ({ dispatch }) => { + fetchItems: ({ dispatch }, payload) => { dispatch('requestItems'); - return fetchItems() + return fetchItems(payload) .then(items => dispatch('receiveItemsSuccess', { items })) .catch(error => dispatch('receiveItemsError', { error })); }, 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 608c4ec9e1e..622095f2cc8 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/index.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/index.js @@ -19,6 +19,14 @@ const createStore = () => namespaced: true, ...clusterDropdownStore(awsServices.fetchRegions), }, + vpcs: { + namespaced: true, + ...clusterDropdownStore(awsServices.fetchVpcs), + }, + subnets: { + namespaced: true, + ...clusterDropdownStore(awsServices.fetchSubnets), + }, }, }); 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 80c1354482b..ada76b21f18 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,2 +1,3 @@ -// eslint-disable-next-line import/prefer-default-export export const SET_REGION = 'SET_REGION'; +export const SET_VPC = 'SET_VPC'; +export const SET_SUBNET = 'SET_SUBNET'; 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 02f34d1bdcd..346716bb0df 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js @@ -4,4 +4,10 @@ export default { [types.SET_REGION](state, { region }) { state.selectedRegion = region; }, + [types.SET_VPC](state, { vpc }) { + state.selectedVpc = vpc; + }, + [types.SET_SUBNET](state, { subnet }) { + state.selectedSubnet = subnet; + }, }; |