Merge branch 'eks-vpc-and-subnets-dropdown' into 'master'

Create EKS cluster VPC and Subnet dropdown

See merge request gitlab-org/gitlab!16922

app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue

 <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>

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 () => {};

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 () => {};

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 }));
   },

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),
+      },
     },
   });
 

app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js

-// 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';

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;
+  },
 };

locale/gitlab.pot

@@ -3351,6 +3351,9 @@ msgstr ""
 msgid "ClusterIntegration|Choose a prefix to be used for your namespaces. Defaults to your project path."
 msgstr ""
 
+msgid "ClusterIntegration|Choose the %{startLink}subnets%{endLink} in your VPC where your worker nodes will run."
+msgstr ""
+
 msgid "ClusterIntegration|Choose which applications to install on your Kubernetes cluster. Helm Tiller is required to install any of the following applications."
 msgstr ""
 
@@ -3390,9 +3393,15 @@ msgstr ""
 msgid "ClusterIntegration|Copy Service Token"
 msgstr ""
 
+msgid "ClusterIntegration|Could not load VPCs for the selected region"
+msgstr ""
+
 msgid "ClusterIntegration|Could not load regions from your AWS account"
 msgstr ""
 
+msgid "ClusterIntegration|Could not load subnets for the selected VPC"
+msgstr ""
+
 msgid "ClusterIntegration|Create Kubernetes cluster"
 msgstr ""
 
@@ -3579,6 +3588,12 @@ msgstr ""
 msgid "ClusterIntegration|Loading Regions"
 msgstr ""
 
+msgid "ClusterIntegration|Loading VPCs"
+msgstr ""
+
+msgid "ClusterIntegration|Loading subnets"
+msgstr ""
+
 msgid "ClusterIntegration|Machine type"
 msgstr ""
 
@@ -3591,6 +3606,9 @@ msgstr ""
 msgid "ClusterIntegration|No IAM Roles found"
 msgstr ""
 
+msgid "ClusterIntegration|No VPCs found"
+msgstr ""
+
 msgid "ClusterIntegration|No machine types matched your search"
 msgstr ""
 
@@ -3603,6 +3621,9 @@ msgstr ""
 msgid "ClusterIntegration|No region found"
 msgstr ""
 
+msgid "ClusterIntegration|No subnet found"
+msgstr ""
+
 msgid "ClusterIntegration|No zones matched your search"
 msgstr ""
 
@@ -3672,6 +3693,9 @@ msgstr ""
 msgid "ClusterIntegration|Search IAM Roles"
 msgstr ""
 
+msgid "ClusterIntegration|Search VPCs"
+msgstr ""
+
 msgid "ClusterIntegration|Search machine types"
 msgstr ""
 
@@ -3681,12 +3705,24 @@ msgstr ""
 msgid "ClusterIntegration|Search regions"
 msgstr ""
 
+msgid "ClusterIntegration|Search subnets"
+msgstr ""
+
 msgid "ClusterIntegration|Search zones"
 msgstr ""
 
 msgid "ClusterIntegration|See and edit the details for your Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Select a VPC to choose a subnet"
+msgstr ""
+
+msgid "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}."
+msgstr ""
+
+msgid "ClusterIntegration|Select a region to choose a VPC"
+msgstr ""
+
 msgid "ClusterIntegration|Select machine type"
 msgstr ""
 
@@ -3735,6 +3771,9 @@ msgstr ""
 msgid "ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{auto_devops_start}Auto DevOps%{auto_devops_end}. The domain should have a wildcard DNS configured matching the domain."
 msgstr ""
 
+msgid "ClusterIntegration|Subnet"
+msgstr ""
+
 msgid "ClusterIntegration|The Kubernetes certificate used to authenticate to the cluster."
 msgstr ""
 
@@ -3783,6 +3822,9 @@ msgstr ""
 msgid "ClusterIntegration|Uses the Cloud Run, Istio, and HTTP Load Balancing addons for this cluster."
 msgstr ""
 
+msgid "ClusterIntegration|VPC"
+msgstr ""
+
 msgid "ClusterIntegration|Validating project billing status"
 msgstr ""
 
@@ -3831,9 +3873,15 @@ msgstr ""
 msgid "ClusterIntegration|sign up"
 msgstr ""
 
+msgid "ClusterIntergation|Select a VPC"
+msgstr ""
+
 msgid "ClusterIntergation|Select a region"
 msgstr ""
 
+msgid "ClusterIntergation|Select a subnet"
+msgstr ""
+
 msgid "ClusterIntergation|Select role name"
 msgstr ""
 

spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue';
 import RegionDropdown from '~/create_cluster/eks_cluster/components/region_dropdown.vue';
 
+import eksClusterFormState from '~/create_cluster/eks_cluster/store/state';
 import clusterDropdownStoreState from '~/create_cluster/eks_cluster/store/cluster_dropdown/state';
 
 const localVue = createLocalVue();
@@ -12,29 +13,59 @@ localVue.use(Vuex);
 describe('EksClusterConfigurationForm', () => {
   let store;
   let actions;
+  let state;
   let regionsState;
+  let vpcsState;
+  let subnetsState;
+  let vpcsActions;
   let regionsActions;
+  let subnetsActions;
   let vm;
 
   beforeEach(() => {
+    state = eksClusterFormState();
     actions = {
       setRegion: jest.fn(),
       setVpc: jest.fn(),
+      setSubnet: jest.fn(),
     };
     regionsActions = {
       fetchItems: jest.fn(),
     };
+    vpcsActions = {
+      fetchItems: jest.fn(),
+    };
+    subnetsActions = {
+      fetchItems: jest.fn(),
+    };
     regionsState = {
       ...clusterDropdownStoreState(),
     };
+    vpcsState = {
+      ...clusterDropdownStoreState(),
+    };
+    subnetsState = {
+      ...clusterDropdownStoreState(),
+    };
     store = new Vuex.Store({
+      state,
       actions,
       modules: {
+        vpcs: {
+          namespaced: true,
+          state: vpcsState,
+          actions: vpcsActions,
+        },
         regions: {
           namespaced: true,
           state: regionsState,
           actions: regionsActions,
         },
+        subnets: {
+          namespaced: true,
+          state: subnetsState,
+          actions: subnetsActions,
+        },
       },
     });
   });
@@ -51,6 +82,8 @@ describe('EksClusterConfigurationForm', () => {
   });
 
   const findRegionDropdown = () => vm.find(RegionDropdown);
+  const findVpcDropdown = () => vm.find('[field-id="eks-vpc"]');
+  const findSubnetDropdown = () => vm.find('[field-id="eks-subnet"]');
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
@@ -62,16 +95,72 @@ describe('EksClusterConfigurationForm', () => {
     regionsState.isLoadingItems = true;
 
     return Vue.nextTick().then(() => {
-      expect(findRegionDropdown().props('loading')).toEqual(regionsState.isLoadingItems);
+      expect(findRegionDropdown().props('loading')).toBe(regionsState.isLoadingItems);
     });
   });
 
   it('sets regions to RegionDropdown regions property', () => {
-    expect(findRegionDropdown().props('regions')).toEqual(regionsState.items);
+    expect(findRegionDropdown().props('regions')).toBe(regionsState.items);
   });
 
   it('sets loadingRegionsError to RegionDropdown error property', () => {
-    expect(findRegionDropdown().props('error')).toEqual(regionsState.loadingItemsError);
+    expect(findRegionDropdown().props('error')).toBe(regionsState.loadingItemsError);
+  });
+
+  it('disables VpcDropdown when no region is selected', () => {
+    expect(findVpcDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables VpcDropdown when no region is selected', () => {
+    state.selectedRegion = { name: 'west-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findVpcDropdown().props('disabled')).toBe(false);
+    });
+  });
+
+  it('sets isLoadingVpcs to VpcDropdown loading property', () => {
+    vpcsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
+    });
+  });
+
+  it('sets vpcs to VpcDropdown items property', () => {
+    expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
+  });
+
+  it('sets loadingVpcsError to VpcDropdown hasErrors property', () => {
+    expect(findVpcDropdown().props('hasErrors')).toBe(vpcsState.loadingItemsError);
+  });
+
+  it('disables SubnetDropdown when no vpc is selected', () => {
+    expect(findSubnetDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables SubnetDropdown when a vpc is selected', () => {
+    state.selectedVpc = { name: 'vpc-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findSubnetDropdown().props('disabled')).toBe(false);
+    });
+  });
+
+  it('sets isLoadingSubnets to SubnetDropdown loading property', () => {
+    subnetsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
+    });
+  });
+
+  it('sets subnets to SubnetDropdown items property', () => {
+    expect(findSubnetDropdown().props('items')).toBe(subnetsState.items);
+  });
+
+  it('sets loadingSubnetsError to SubnetDropdown hasErrors property', () => {
+    expect(findSubnetDropdown().props('hasErrors')).toBe(subnetsState.loadingItemsError);
   });
 
   describe('when region is selected', () => {
@@ -84,5 +173,37 @@ describe('EksClusterConfigurationForm', () => {
     it('dispatches setRegion action', () => {
       expect(actions.setRegion).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
     });
+
+    it('fetches available vpcs', () => {
+      expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+    });
+  });
+
+  describe('when vpc is selected', () => {
+    const vpc = { name: 'vpc-1' };
+
+    beforeEach(() => {
+      findVpcDropdown().vm.$emit('input', vpc);
+    });
+
+    it('dispatches setVpc action', () => {
+      expect(actions.setVpc).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    });
+
+    it('dispatches fetchSubnets action', () => {
+      expect(subnetsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    });
+  });
+
+  describe('when a subnet is selected', () => {
+    const subnet = { name: 'subnet-1' };
+
+    beforeEach(() => {
+      findSubnetDropdown().vm.$emit('input', subnet);
+    });
+
+    it('dispatches setSubnet action', () => {
+      expect(actions.setSubnet).toHaveBeenCalledWith(expect.anything(), { subnet }, undefined);
+    });
   });
 });

spec/frontend/create_cluster/eks_cluster/store/actions_spec.js

 import testAction from 'helpers/vuex_action_helper';
 
 import createState from '~/create_cluster/eks_cluster/store/state';
-import * as types from '~/create_cluster/eks_cluster/store/mutation_types';
 import * as actions from '~/create_cluster/eks_cluster/store/actions';
+import { SET_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
 
 describe('EKS Cluster Store Actions', () => {
-  describe('setRegion', () => {
-    it(`commits ${types.SET_REGION} mutation`, () => {
-      const region = { name: 'west-1' };
+  let region;
+  let vpc;
+  let subnet;
 
-      testAction(actions.setRegion, { region }, createState(), [
-        { type: types.SET_REGION, payload: { region } },
-      ]);
+  beforeEach(() => {
+    region = { name: 'regions-1' };
+    vpc = { name: 'vpc-1' };
+    subnet = { name: 'subnet-1' };
   });
+
+  it.each`
+    action         | mutation      | payload       | payloadDescription
+    ${'setRegion'} | ${SET_REGION} | ${{ region }} | ${'region'}
+    ${'setVpc'}    | ${SET_VPC}    | ${{ vpc }}    | ${'vpc'}
+    ${'setSubnet'} | ${SET_SUBNET} | ${{ subnet }} | ${'subnet'}
+  `(`$action commits $mutation with $payloadDescription payload`, data => {
+    const { action, mutation, payload } = data;
+
+    testAction(actions[action], payload, createState(), [{ type: mutation, payload }]);
   });
 });

spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js

-import { SET_REGION } from '~/create_cluster/eks_cluster/store/mutation_types';
+import { SET_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
 import createState from '~/create_cluster/eks_cluster/store/state';
 import mutations from '~/create_cluster/eks_cluster/store/mutations';
 
 describe('Create EKS cluster store mutations', () => {
   let state;
   let region;
+  let vpc;
+  let subnet;
 
   beforeEach(() => {
     region = { name: 'regions-1' };
+    vpc = { name: 'vpc-1' };
+    subnet = { name: 'subnet-1' };
+
     state = createState();
   });
 
   it.each`
     mutation      | mutatedProperty     | payload       | expectedValue | expectedValueDescription
     ${SET_REGION} | ${'selectedRegion'} | ${{ region }} | ${region}     | ${'selected region payload'}
+    ${SET_VPC}    | ${'selectedVpc'}    | ${{ vpc }}    | ${vpc}        | ${'selected vpc payload'}
+    ${SET_SUBNET} | ${'selectedSubnet'} | ${{ subnet }} | ${subnet}     | ${'selected sybnet payload'}
   `(`$mutation sets $mutatedProperty to $expectedValueDescription`, data => {
     const { mutation, mutatedProperty, payload, expectedValue } = data;