diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-24 09:06:04 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-24 09:06:04 +0000 |
commit | bc89882970d6a14b1f72eb9c715fae90b26d066c (patch) | |
tree | f5cb59d5130d7585980eb39437071e07ebc12f87 /app/assets/javascripts/create_cluster | |
parent | 4a45a787703cb78c6101750cfbdc9f656b934b42 (diff) | |
download | gitlab-ce-bc89882970d6a14b1f72eb9c715fae90b26d066c.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/create_cluster')
9 files changed, 166 insertions, 3 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 6e74963dcb0..a700069d2c8 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,4 +1,7 @@ <script> +import { mapActions, mapState } from 'vuex'; + +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'; @@ -6,11 +9,21 @@ import VPCDropdown from './vpc_dropdown.vue'; export default { components: { + RegionDropdown, RoleNameDropdown, SecurityGroupDropdown, SubnetDropdown, VPCDropdown, }, + computed: { + ...mapState(['isLoadingRegions', 'loadingRegionsError', 'regions', 'selectedRegion']), + }, + mounted() { + this.fetchRegions(); + }, + methods: { + ...mapActions(['fetchRegions', 'setRegion']), + }, }; </script> <template> @@ -21,5 +34,17 @@ export default { </label> <role-name-dropdown /> </div> + <div class="form-group"> + <label class="label-bold" name="role" for="eks-role"> + {{ s__('ClusterIntegration|Region') }} + </label> + <region-dropdown + :value="selectedRegion" + :regions="regions" + :error="loadingRegionsError" + :loading="isLoadingRegions" + @input="setRegion({ region: $event })" + /> + </div> </form> </template> diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/region_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/region_dropdown.vue new file mode 100644 index 00000000000..765955305c8 --- /dev/null +++ b/app/assets/javascripts/create_cluster/eks_cluster/components/region_dropdown.vue @@ -0,0 +1,63 @@ +<script> +import { sprintf, s__ } from '~/locale'; + +import ClusterFormDropdown from './cluster_form_dropdown.vue'; + +export default { + components: { + ClusterFormDropdown, + }, + props: { + regions: { + type: Array, + required: false, + default: () => [], + }, + loading: { + type: Boolean, + required: false, + default: false, + }, + error: { + type: Object, + required: false, + default: null, + }, + }, + computed: { + hasErrors() { + return Boolean(this.error); + }, + helpText() { + return sprintf( + s__('ClusterIntegration|Learn more about %{startLink}Regions%{endLink}.'), + { + startLink: + '<a href="https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/" target="_blank" rel="noopener noreferrer">', + endLink: '</a>', + }, + false, + ); + }, + }, +}; +</script> +<template> + <div> + <cluster-form-dropdown + field-id="eks-region" + field-name="eks-region" + :items="regions" + :loading="loading" + :loading-text="s__('ClusterIntegration|Loading Regions')" + :placeholder="s__('ClusterIntergation|Select a region')" + :search-field-placeholder="s__('ClusterIntegration|Search regions')" + :empty-text="s__('ClusterIntegration|No region found')" + :has-errors="hasErrors" + :error-message="s__('ClusterIntegration|Could not load regions from your AWS account')" + v-bind="$attrs" + v-on="$listeners" + /> + <p class="form-text text-muted" v-html="helpText"></p> + </div> +</template> diff --git a/app/assets/javascripts/create_cluster/eks_cluster/index.js b/app/assets/javascripts/create_cluster/eks_cluster/index.js index c62e5ec101d..9365fc41f4c 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/index.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/index.js @@ -12,7 +12,6 @@ export default () => components: { CreateEksCluster, }, - data() {}, render(createElement) { return createElement('create-eks-cluster'); }, 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 e69de29bb2d..5a13d32e0d2 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 @@ -0,0 +1,20 @@ +import EC2 from 'aws-sdk/clients/ec2'; + +export const fetchRegions = () => + new Promise((resolve, reject) => { + const ec2 = new EC2(); + + ec2 + .describeRegions() + .on('success', ({ data: { Regions: regions } }) => { + const transformedRegions = regions.map(({ RegionName: name }) => ({ name })); + + resolve(transformedRegions); + }) + .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 861bcddfcc7..cad9e5eb183 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js @@ -1,3 +1,27 @@ -// import awsServices from '../services/aws_services_facade'; +import * as awsServices from '../services/aws_services_facade'; +import * as types from './mutation_types'; + +export const requestRegions = ({ commit }) => commit(types.REQUEST_REGIONS); + +export const receiveRegionsSuccess = ({ commit }, payload) => { + commit(types.RECEIVE_REGIONS_SUCCESS, payload); +}; + +export const receiveRegionsError = ({ commit }, payload) => { + commit(types.RECEIVE_REGIONS_ERROR, payload); +}; + +export const fetchRegions = ({ dispatch }) => { + dispatch('requestRegions'); + + return awsServices + .fetchRegions() + .then(regions => dispatch('receiveRegionsSuccess', { regions })) + .catch(error => dispatch('receiveRegionsError', { error })); +}; + +export const setRegion = ({ commit }, payload) => { + commit(types.SET_REGION, 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 99e9e35fd1a..8f5ad109c2f 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/index.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/index.js @@ -9,7 +9,7 @@ const createStore = () => actions, getters, mutations, - state, + state: state(), }); export default createStore; 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 e69de29bb2d..d66d0e70dc0 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 @@ -0,0 +1,4 @@ +export const REQUEST_REGIONS = 'REQUEST_REGIONS'; +export const RECEIVE_REGIONS_SUCCESS = 'REQUEST_REGIONS_SUCCESS'; +export const RECEIVE_REGIONS_ERROR = 'RECEIVE_REGIONS_ERROR'; +export const SET_REGION = 'SET_REGION'; 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 e69de29bb2d..a203dd3bf42 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js @@ -0,0 +1,19 @@ +import * as types from './mutation_types'; + +export default { + [types.REQUEST_REGIONS](state) { + state.isLoadingRegions = true; + state.loadingRegionsError = null; + }, + [types.RECEIVE_REGIONS_SUCCESS](state, { regions }) { + state.isLoadingRegions = false; + state.regions = regions; + }, + [types.RECEIVE_REGIONS_ERROR](state, { error }) { + state.isLoadingRegions = false; + state.loadingRegionsError = error; + }, + [types.SET_REGION](state, { region }) { + state.selectedRegion = region; + }, +}; 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 9754ccfeeaf..ffeb1963060 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js +++ b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js @@ -2,16 +2,25 @@ export default () => ({ isValidatingCredentials: false, validCredentials: false, + isLoadingRegions: false, isLoadingRoles: false, isLoadingVPCs: false, isLoadingSubnets: false, isLoadingSecurityGroups: false, + regions: [], roles: [], vpcs: [], subnets: [], securityGroups: [], + loadingRegionsError: null, + loadingRolesError: null, + loadingVPCsError: null, + loadingSubnetsError: null, + loadingSecurityGroupsError: null, + + selectedRegion: '', selectedRole: '', selectedVPC: '', selectedSubnet: '', |