diff options
Diffstat (limited to 'app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue')
-rw-r--r-- | app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue | 61 |
1 files changed, 15 insertions, 46 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 d403f370f9d..2858561e033 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,15 +1,12 @@ <script> import { createNamespacedHelpers, mapState, mapActions, mapGetters } from 'vuex'; -import { GlFormInput, GlFormCheckbox, GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon, GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue'; import { KUBERNETES_VERSIONS } from '../constants'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles'); -const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers( - 'regions', -); const { mapState: mapKeyPairsState, mapActions: mapKeyPairsActions } = createNamespacedHelpers( 'keyPairs', ); @@ -27,6 +24,7 @@ export default { components: { ClusterFormDropdown, GlFormCheckbox, + GlFormGroup, GlFormInput, GlIcon, GlLink, @@ -60,11 +58,10 @@ export default { ), roleDropdownHelpPath: 'https://docs.aws.amazon.com/eks/latest/userguide/service_IAM_role.html#create-service-role', - regionsDropdownHelpText: s__( - 'ClusterIntegration|Learn more about %{linkStart}Regions%{linkEnd}.', + regionInputLabel: s__('ClusterIntegration|Cluster Region'), + regionHelpText: s__( + 'ClusterIntegration|The region the new cluster will be created in. You must reauthenticate to change regions.', ), - regionsDropdownHelpPath: - 'https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/', keyPairDropdownHelpText: 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 %{linkStart}Amazon Web Services%{linkEnd}.', ), @@ -117,11 +114,6 @@ export default { isLoadingRoles: 'isLoadingItems', loadingRolesError: 'loadingItemsError', }), - ...mapRegionsState({ - regions: 'items', - isLoadingRegions: 'isLoadingItems', - loadingRegionsError: 'loadingItemsError', - }), ...mapKeyPairsState({ keyPairs: 'items', isLoadingKeyPairs: 'isLoadingItems', @@ -195,8 +187,8 @@ export default { }, }, mounted() { - this.fetchRegions(); this.fetchRoles(); + this.setRegionAndFetchVpcsAndKeyPairs(); }, methods: { ...mapActions([ @@ -215,20 +207,18 @@ export default { 'setGitlabManagedCluster', 'setNamespacePerEnvironment', ]), - ...mapRegionsActions({ fetchRegions: 'fetchItems' }), ...mapVpcActions({ fetchVpcs: 'fetchItems' }), ...mapSubnetActions({ fetchSubnets: 'fetchItems' }), ...mapRolesActions({ fetchRoles: 'fetchItems' }), ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }), ...mapSecurityGroupsActions({ fetchSecurityGroups: 'fetchItems' }), - setRegionAndFetchVpcsAndKeyPairs(region) { - this.setRegion({ region }); + setRegionAndFetchVpcsAndKeyPairs() { this.setVpc({ vpc: null }); this.setKeyPair({ keyPair: null }); this.setSubnet({ subnet: [] }); this.setSecurityGroup({ securityGroup: null }); - this.fetchVpcs({ region }); - this.fetchKeyPairs({ region }); + this.fetchVpcs({ region: this.selectedRegion }); + this.fetchKeyPairs({ region: this.selectedRegion }); }, setVpcAndFetchSubnets(vpc) { this.setVpc({ vpc }); @@ -314,33 +304,12 @@ export default { </gl-sprintf> </p> </div> - <div class="form-group"> - <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label> - <cluster-form-dropdown - field-id="eks-region" - field-name="eks-region" - :value="selectedRegion" - :items="regions" - :loading="isLoadingRegions" - :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="Boolean(loadingRegionsError)" - :error-message="s__('ClusterIntegration|Could not load regions from your AWS account')" - @input="setRegionAndFetchVpcsAndKeyPairs($event)" - /> - <p class="form-text text-muted"> - <gl-sprintf :message="$options.i18n.regionsDropdownHelpText"> - <template #link="{ content }"> - <gl-link :href="$options.i18n.regionsDropdownHelpPath" target="_blank"> - {{ content }} - <gl-icon name="external-link" class="gl-vertical-align-middle" /> - </gl-link> - </template> - </gl-sprintf> - </p> - </div> + <gl-form-group + :label="$options.i18n.regionInputLabel" + :description="$options.i18n.regionHelpText" + > + <gl-form-input id="eks-region" :value="selectedRegion" type="text" readonly /> + </gl-form-group> <div class="form-group"> <label class="label-bold" for="eks-key-pair">{{ s__('ClusterIntegration|Key pair name') |