update subnets display for imported clusters and clusters that had be…

…en configured to create a vpc and subnet automatically
rancher · Jun 26, 2024 · d3ae4a9 · d3ae4a9
1 parent 02e7796
commit d3ae4a9
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 7 deletions.
diff --git a/pkg/eks/components/CruEKS.vue b/pkg/eks/components/CruEKS.vue
@@ -307,6 +307,11 @@ export default defineComponent({
       return this.value?.id || null;
     },
 
+    // used to display VPC/subnet information in the networking tab for imported clusters and clusters with the 'create a vpc and subnets automatically' option selected
+    statusSubnets(): string[] {
+      return this.normanCluster?.eksStatus?.subnets || [];
+    },
+
     canManageMembers(): boolean {
       return canViewClusterMembershipEditor(this.$store);
     },
@@ -665,6 +670,7 @@ export default defineComponent({
           :mode="mode"
           :region="config.region"
           :amazon-credential-secret="config.amazonCredentialSecret"
+          :status-subnets="statusSubnets"
           :rules="{subnets:fvGetAndReportPathRules('subnets')}"
         />
       </Accordion>

diff --git a/pkg/eks/components/Networking.vue b/pkg/eks/components/Networking.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
-import { defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { Store, mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
@@ -27,31 +27,42 @@ export default defineComponent({
       type:    String,
       default: _EDIT
     },
+
     region: {
       type:    String,
       default: ''
     },
+
     amazonCredentialSecret: {
       type:    String,
       default: ''
     },
 
     subnets: {
-      type:    Array,
+      type:    Array as PropType<string[]>,
       default: () => []
     },
+
     publicAccess: {
       type:    Boolean,
       default: false
     },
+
     privateAccess: {
       type:    Boolean,
       default: false
     },
+
     publicAccessSources: {
       type:    Array,
       default: () => []
     },
+
+    statusSubnets: {
+      type:    Array as PropType<string[]>,
+      default: () => []
+    },
+
     rules: {
       type:    Object,
       default: () => {}
@@ -143,8 +154,11 @@ export default defineComponent({
     },
 
     displaySubnets: {
-      get(): {key:string, label:string, _isSubnet?:boolean, kind?:string}[] {
-        return this.vpcOptions.filter((option) => this.subnets.includes(option.key));
+      get(): {key:string, label:string, _isSubnet?:boolean, kind?:string}[] | string[] {
+        const subnets: string[] = this.chooseSubnet ? this.subnets : this.statusSubnets;
+
+        // vpcOptions will be empty in 'view config' mode, where aws API requests are not made
+        return this.vpcOptions.length ? this.vpcOptions.filter((option) => subnets.includes(option.key)) : subnets;
       },
       set(neu: {key:string, label:string, _isSubnet?:boolean, kind?:string}[]) {
         this.$emit('update:subnets', neu.map((s) => s.key));
@@ -223,7 +237,10 @@ export default defineComponent({
       </div>
     </div>
     <div class="row mb-10">
-      <div class="col span-6">
+      <div
+        v-if="isNew"
+        class="col span-6"
+      >
         <RadioGroup
           v-model="chooseSubnet"
           name="subnet-mode"
@@ -234,11 +251,12 @@ export default defineComponent({
         />
       </div>
       <div
-        v-if="chooseSubnet"
+        v-if="chooseSubnet || !isNew"
         class="col span-6"
       >
         <LabeledSelect
           v-model="displaySubnets"
+          :disabled="!isNew"
           :mode="mode"
           label-key="eks.vpcSubnet.label"
           :options="vpcOptions"

diff --git a/pkg/eks/components/__tests__/Networking.test.ts b/pkg/eks/components/__tests__/Networking.test.ts
@@ -1,5 +1,6 @@
 
 /* eslint-disable jest/no-mocks-import */
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 import { shallowMount } from '@vue/test-utils';
 import Networking from '../Networking.vue';
 
@@ -56,7 +57,7 @@ describe('eKS Networking', () => {
     const setup = requiredSetup();
 
     const wrapper = shallowMount(Networking, {
-      propsData: { },
+      propsData: { mode: _CREATE },
       ...setup
     });
 
@@ -70,4 +71,23 @@ describe('eKS Networking', () => {
     await wrapper.vm.$nextTick();
     expect(subnetDropdown.exists()).toBe(false);
   });
+
+  it('should show a list of subnets in use if a cluster has already provisioned and the \'create automatically\' vpc option was selected', async() => {
+    const setup = requiredSetup();
+
+    const wrapper = shallowMount(Networking, {
+      propsData: {
+        mode: _EDIT, subnets: [], statusSubnets: ['bc', 'def']
+      },
+      ...setup
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const subnetDropdown = wrapper.find('[data-testid="eks-subnets-dropdown"]');
+
+    expect(subnetDropdown.exists()).toBe(true);
+
+    expect(subnetDropdown.props().value).toStrictEqual(['bc', 'def']);
+  });
 });