@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.3

package/detail/harvesterhci.io.management.cluster.vue

@@ -5,6 +5,12 @@ import CopyCode from '@shell/components/CopyCode';
 import Tab from '@shell/components/Tabbed/Tab';
 import { allHash } from '@shell/utils/promise';
 
+// Couple of things wrong here
+// 1. It should be in pkg/harvester-manager extension
+// 2. It's not used when the harvester-ui extension is loaded
+// - extension has it's own detail/harvesterhci.io.management.cluster.vue which supersedes this
+// - unless harvester standalone uses it, it should not exist in the harvester-ui extension
+
 export default {
   emits: ['input'],
 
@@ -31,8 +37,6 @@ export default {
 
     const res = await allHash(hash);
 
-    this.allNodes = res.allNodes || [];
-    this.allNodePools = res.allNodePools || [];
     this.clusterToken = res.clusterToken;
   },
 

package/detail/pod.vue

@@ -106,7 +106,7 @@ export default {
           availableActions: this.value.containerActions,
           stateObj:         status, // Required if there's a description
           stateDescription: descriptions.join(' | '), // Required to display the description
-          initIcon:         this.value.containerIsInit(container) ? 'icon-checkmark icon-2x text-success ml-5' : 'icon-minus icon-2x text-muted ml-5',
+          initIcon:         this.value.containerIsInit(container) ? 'icon-checkmark text-success ml-5' : 'icon-minus text-muted ml-5',
 
           // Call openShell here so that opening the shell
           // at the container level still has 'this' in scope.

package/detail/provisioning.cattle.io.cluster.vue

@@ -147,10 +147,6 @@ export default {
       fetchOne.normanClusters = this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
     }
 
-    if ( this.value.isRke1 && this.$store.getters['isRancher'] ) {
-      fetchOne.normanNodePools = this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_POOL });
-    }
-
     const fetchOneRes = await allHash(fetchOne);
 
     this.allMachines = fetchOneRes.machines || [];
@@ -203,10 +199,6 @@ export default {
     if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE) ) {
       this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE });
     }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE_REVISION });
-    }
   },
 
   created() {
@@ -284,9 +276,11 @@ export default {
       extCustomParams: null,
       extDetailTabs:   {
         machines:     true, // in this component
+        nodes:        true, // in this component
         logs:         true, // in this component
         registration: true, // in this component
         snapshots:    true, // in this component
+        autoscaler:   true, // in this component
         related:      true, // in ResourceTabs
         events:       true, // in ResourceTabs
         conditions:   true, // in ResourceTabs
@@ -451,7 +445,7 @@ export default {
     },
 
     showNodes() {
-      return !this.showMachines && this.haveNodes && !!this.nodes.length && this.extDetailTabs.machines;
+      return !this.showMachines && this.haveNodes && !!this.nodes.length && this.extDetailTabs.nodes;
     },
 
     showSnapshots() {
@@ -628,7 +622,7 @@ export default {
     },
 
     showAutoScalerTab() {
-      return isAutoscalerFeatureFlagEnabled(this.$store) && this.value.hasAccessToAutoscalerConfigMap;
+      return isAutoscalerFeatureFlagEnabled(this.$store) && this.value.hasAccessToAutoscalerConfigMap && this.extDetailTabs.autoscaler;
     }
   },
 

package/edit/auth/__tests__/azuread.test.ts

@@ -3,6 +3,7 @@ import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import AzureAD from '@shell/edit/auth/azuread.vue';
 import { _EDIT } from '@shell/config/query-params';
+import { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
 
 jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
@@ -28,43 +29,44 @@ const mockModel = {
   type:     'azureADConfig',
 };
 
-describe('edit: azureAD should', () => {
-  let wrapper: any;
-  const requiredSetup = () => ({
-    data() {
-      return {
-        isEnabling:     true,
-        editConfig:     false,
-        model:          { ...mockModel },
-        serverSetting:  null,
-        errors:         [],
-        originalModel:  null,
-        principals:     [],
-        authConfigName: 'azuread',
-      };
-    },
-    global: {
-      mocks: {
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            currentStore:              () => 'current_store',
-            'current_store/schemaFor': jest.fn(),
-            'current_store/all':       jest.fn(),
-            'i18n/t':                  (val: string) => val,
-            'i18n/exists':             jest.fn(),
-          },
-          dispatch: jest.fn()
+const requiredSetup = (modelOverrides = {}) => ({
+  data() {
+    return {
+      isEnabling:     true,
+      editConfig:     false,
+      model:          { ...mockModel, ...modelOverrides },
+      serverSetting:  null,
+      errors:         [],
+      originalModel:  null,
+      principals:     [],
+      authConfigName: 'azuread',
+    };
+  },
+  global: {
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val: string) => val,
+          'i18n/exists':             jest.fn(),
         },
-        $route:  { query: { AS: '' }, params: { id: 'azure' } },
-        $router: { applyQuery: jest.fn() },
+        dispatch: jest.fn()
       },
+      $route:  { query: { AS: '' }, params: { id: 'azure' } },
+      $router: { applyQuery: jest.fn() },
     },
-    propsData: {
-      value: { applicationSecret: '' },
-      mode:  _EDIT,
-    },
-  });
+  },
+  propsData: {
+    value: { applicationSecret: '' },
+    mode:  _EDIT,
+  },
+});
+
+describe('edit: azureAD should', () => {
+  let wrapper: any;
 
   beforeEach(() => {
     wrapper = mount(AzureAD, { ...requiredSetup() });
@@ -236,3 +238,184 @@ describe('edit: azureAD should', () => {
     expect(saveButton.disabled).toBe(testCase.result);
   });
 });
+
+describe('edit: azureAD SSO logout should', () => {
+  let wrapper: any;
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('not render SLO section when logoutAllSupported is false', () => {
+    wrapper = mount(AzureAD, { ...requiredSetup({ logoutAllSupported: false }) });
+    const sloSection = wrapper.find('[data-testid="azuread-sloType"]');
+
+    expect(sloSection.exists()).toBe(false);
+  });
+
+  it('render SLO section when logoutAllSupported is true', async() => {
+    wrapper = mount(AzureAD, { ...requiredSetup({ logoutAllSupported: true }) });
+    await nextTick();
+    const sloSection = wrapper.find('[data-testid="azuread-sloType"]');
+
+    expect(sloSection.exists()).toBe(true);
+  });
+
+  it('not render endSessionEndpoint field when sloType is rancher', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.rancher,
+        };
+      },
+    });
+    await nextTick();
+    const endSessionEndpointField = wrapper.find('[data-testid="azuread-endSessionEndpoint"]');
+
+    expect(endSessionEndpointField.exists()).toBe(false);
+  });
+
+  it('render endSessionEndpoint field when sloType is all', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.all,
+        };
+      },
+    });
+    await nextTick();
+    const endSessionEndpointField = wrapper.find('[data-testid="azuread-endSessionEndpoint"]');
+
+    expect(endSessionEndpointField.exists()).toBe(true);
+  });
+
+  it('render endSessionEndpoint field when sloType is both', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.both,
+        };
+      },
+    });
+    await nextTick();
+    const endSessionEndpointField = wrapper.find('[data-testid="azuread-endSessionEndpoint"]');
+
+    expect(endSessionEndpointField.exists()).toBe(true);
+  });
+
+  it.each([
+    {
+      sloType: SLO_OPTION_VALUES.all, endSessionEndpoint: '', disabled: true
+    },
+    {
+      sloType: SLO_OPTION_VALUES.all, endSessionEndpoint: 'not-a-url', disabled: true
+    },
+    {
+      sloType: SLO_OPTION_VALUES.all, endSessionEndpoint: 'https://login.microsoftonline.com/tenant/oauth2/v2.0/logout', disabled: false
+    },
+    {
+      sloType: SLO_OPTION_VALUES.both, endSessionEndpoint: '', disabled: true
+    },
+    {
+      sloType: SLO_OPTION_VALUES.both, endSessionEndpoint: 'https://login.microsoftonline.com/tenant/oauth2/v2.0/logout', disabled: false
+    },
+  ])('has save button disabled=$disabled when sloType=$sloType and endSessionEndpoint=$endSessionEndpoint', async(testCase) => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({
+        logoutAllSupported: true,
+        tenantId:           validTenantId,
+        applicationId:      validApplicationId,
+        applicationSecret:  validAppSecret,
+        endSessionEndpoint: testCase.endSessionEndpoint,
+      }),
+      data() {
+        return {
+          isEnabling: true,
+          editConfig: false,
+          model:      {
+            ...mockModel,
+            logoutAllSupported: true,
+            tenantId:           validTenantId,
+            applicationId:      validApplicationId,
+            applicationSecret:  validAppSecret,
+            graphEndpoint:      validGraphEndpoint,
+            tokenEndpoint:      validTokenEndpoint,
+            authEndpoint:       validAuthEndpoint,
+            endSessionEndpoint: testCase.endSessionEndpoint,
+          },
+          sloType:        testCase.sloType,
+          serverSetting:  null,
+          errors:         [],
+          originalModel:  null,
+          principals:     [],
+          authConfigName: 'azuread',
+        };
+      },
+    });
+    await nextTick();
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+    expect(saveButton.disabled).toBe(testCase.disabled);
+  });
+
+  it('sets logoutAllEnabled=false and logoutAllForced=false when sloType changes to rancher', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.all,
+        };
+      },
+    });
+    await nextTick();
+    wrapper.vm.sloType = SLO_OPTION_VALUES.rancher;
+    await nextTick();
+
+    expect(wrapper.vm.model.logoutAllEnabled).toBe(false);
+    expect(wrapper.vm.model.logoutAllForced).toBe(false);
+    expect(wrapper.vm.model.endSessionEndpoint).toBe('');
+  });
+
+  it('sets logoutAllEnabled=true and logoutAllForced=true when sloType changes to all', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.rancher,
+        };
+      },
+    });
+    await nextTick();
+    wrapper.vm.sloType = SLO_OPTION_VALUES.all;
+    await nextTick();
+
+    expect(wrapper.vm.model.logoutAllEnabled).toBe(true);
+    expect(wrapper.vm.model.logoutAllForced).toBe(true);
+  });
+
+  it('sets logoutAllEnabled=true and logoutAllForced=false when sloType changes to both', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.rancher,
+        };
+      },
+    });
+    await nextTick();
+    wrapper.vm.sloType = SLO_OPTION_VALUES.both;
+    await nextTick();
+
+    expect(wrapper.vm.model.logoutAllEnabled).toBe(true);
+    expect(wrapper.vm.model.logoutAllForced).toBe(false);
+  });
+});

package/edit/auth/azuread.vue

@@ -11,7 +11,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
-import AuthConfig from '@shell/mixins/auth-config';
+import AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
 import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
 import { get } from '@shell/utils/object';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
@@ -76,6 +76,8 @@ export default {
     if ( this.value?.graphEndpoint ) {
       this.setInitialEndpoint(this.value.graphEndpoint);
     }
+
+    await this.mixinFetch();
   },
 
   data() {
@@ -83,6 +85,7 @@ export default {
       isGroupMembershipFilterEnabled: !!this.value.groupMembershipFilter,
       endpoint:                       'standard',
       oldEndpoint:                    false,
+      SLO_OPTION_VALUES,
 
       // Storing the applicationSecret is necessary because norman doesn't support returning secrets and when we
       // override the steve authconfig with a norman config the applicationSecret is lost
@@ -95,6 +98,7 @@ export default {
         { path: 'graphEndpoint', rules: ['graphEndpointRequired', 'graphEndpointMustBeURL'] },
         { path: 'tokenEndpoint', rules: ['tokenEndpointRequired', 'tokenEndpointMustBeURL'] },
         { path: 'authEndpoint', rules: ['authEndpointRequired', 'authEndpointMustBeURL'] },
+        { path: 'endSessionEndpoint', rules: ['endSessionEndpointRequiredAndValid'] },
       ]
     };
   },
@@ -103,17 +107,18 @@ export default {
     // Cannot pass this.model as a rootObject because it is undefined at that point, so had to use a workaround
     fvExtraRules() {
       return {
-        tenantIdRequired:          this.modelFieldRequired('tenantId', 'authConfig.azuread.tenantId.label'),
-        applicationIdRequired:     this.modelFieldRequired('applicationId', 'authConfig.azuread.applicationId.label'),
-        applicationSecretRequired: this.applicationSecretRequired(),
-        endpointRequired:          this.modelFieldRequired('endpoint', 'authConfig.azuread.endpoint.label'),
-        endpointMustBeURL:         this.modelFieldURL('endpoint'),
-        graphEndpointRequired:     this.modelFieldRequired('graphEndpoint', 'authConfig.azuread.graphEndpoint.label'),
-        graphEndpointMustBeURL:    this.modelFieldURL('graphEndpoint'),
-        tokenEndpointRequired:     this.modelFieldRequired('tokenEndpoint', 'authConfig.azuread.tokenEndpoint.label'),
-        tokenEndpointMustBeURL:    this.modelFieldURL('tokenEndpoint'),
-        authEndpointRequired:      this.modelFieldRequired('authEndpoint', 'authConfig.azuread.authEndpoint.label'),
-        authEndpointMustBeURL:     this.modelFieldURL('authEndpoint')
+        tenantIdRequired:                   this.modelFieldRequired('tenantId', 'authConfig.azuread.tenantId.label'),
+        applicationIdRequired:              this.modelFieldRequired('applicationId', 'authConfig.azuread.applicationId.label'),
+        applicationSecretRequired:          this.applicationSecretRequired(),
+        endpointRequired:                   this.modelFieldRequired('endpoint', 'authConfig.azuread.endpoint.label'),
+        endpointMustBeURL:                  this.modelFieldURL('endpoint'),
+        graphEndpointRequired:              this.modelFieldRequired('graphEndpoint', 'authConfig.azuread.graphEndpoint.label'),
+        graphEndpointMustBeURL:             this.modelFieldURL('graphEndpoint'),
+        tokenEndpointRequired:              this.modelFieldRequired('tokenEndpoint', 'authConfig.azuread.tokenEndpoint.label'),
+        tokenEndpointMustBeURL:             this.modelFieldURL('tokenEndpoint'),
+        authEndpointRequired:               this.modelFieldRequired('authEndpoint', 'authConfig.azuread.authEndpoint.label'),
+        authEndpointMustBeURL:              this.modelFieldURL('authEndpoint'),
+        endSessionEndpointRequiredAndValid: this.endSessionEndpointRule(),
       };
     },
 
@@ -165,7 +170,29 @@ export default {
     },
     editMemberConfig() {
       return this.model.enabled && !this.isEnabling && !this.editConfig;
-    }
+    },
+
+    isLogoutAllSupported() {
+      return this.model?.logoutAllSupported;
+    },
+
+    sloOptions() {
+      return [
+        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.slo.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.slo.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.slo.sloOptions.choose') },
+      ];
+    },
+
+    sloTypeText() {
+      const sloOptionSelected = this.sloOptions.find((item) => item.value === this.sloType);
+
+      return sloOptionSelected?.label || '';
+    },
+
+    sloEndSessionEndpointUiEnabled() {
+      return this.sloType === SLO_OPTION_VALUES.all || this.sloType === SLO_OPTION_VALUES.both;
+    },
   },
 
   watch: {
@@ -179,6 +206,25 @@ export default {
       }
     },
 
+    // sloType is defined on shell/mixins/auth-config.js
+    sloType(neu) {
+      switch (neu) {
+      case SLO_OPTION_VALUES.rancher:
+        this.model.logoutAllEnabled = false;
+        this.model.logoutAllForced = false;
+        this.model.endSessionEndpoint = '';
+        break;
+      case SLO_OPTION_VALUES.all:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = true;
+        break;
+      case SLO_OPTION_VALUES.both:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = false;
+        break;
+      }
+    },
+
     model: {
       deep: true,
       handler() {
@@ -294,7 +340,21 @@ export default {
 
         return rule(this.model[path]);
       };
-    }
+    },
+
+    endSessionEndpointRule() {
+      return () => {
+        if (!this.isLogoutAllSupported || !this.sloEndSessionEndpointUiEnabled) {
+          return undefined;
+        }
+        if (!this.model.endSessionEndpoint) {
+          return this.t('validation.required', { key: this.t('authConfig.azuread.endSessionEndpoint.title') });
+        }
+        const rule = formRulesGenerator(this.$store.getters['i18n/t'], {}).url;
+
+        return rule(this.model.endSessionEndpoint);
+      };
+    },
   }
 };
 </script>
@@ -348,6 +408,14 @@ export default {
               <td>{{ t(`authConfig.azuread.authEndpoint.label`) }}:</td>
               <td>{{ model.authEndpoint }}</td>
             </tr>
+            <tr v-if="isLogoutAllSupported">
+              <td>{{ t('authConfig.slo.sloTitle') }}:</td>
+              <td>{{ sloTypeText }}</td>
+            </tr>
+            <tr v-if="isLogoutAllSupported && sloEndSessionEndpointUiEnabled">
+              <td>{{ t('authConfig.azuread.endSessionEndpoint.title') }}:</td>
+              <td>{{ model.endSessionEndpoint }}</td>
+            </tr>
           </template>
           <template
             v-if="needsUpdate"
@@ -521,6 +589,46 @@ export default {
             </div>
           </div>
         </div>
+
+        <!-- SLO logout -->
+        <div
+          v-if="isLogoutAllSupported"
+          class="mb-20"
+        >
+          <div class="row">
+            <div class="col span-12">
+              <h3>{{ t('authConfig.slo.sloTitle') }}</h3>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-4">
+              <RadioGroup
+                v-model:value="sloType"
+                :mode="mode"
+                :options="sloOptions"
+                :disabled="!model.logoutAllSupported"
+                name="sloTypeRadio"
+                data-testid="azuread-sloType"
+              />
+            </div>
+          </div>
+          <div
+            v-if="sloEndSessionEndpointUiEnabled"
+            class="row mt-20"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.endSessionEndpoint"
+                :tooltip="t('authConfig.azuread.endSessionEndpoint.tooltip', { tenantId: `${ tenantId || 'tenant-id' }` }, true)"
+                :label="t('authConfig.azuread.endSessionEndpoint.title')"
+                :mode="mode"
+                :rules="fvGetAndReportPathRules('endSessionEndpoint')"
+                :required="true"
+                data-testid="azuread-endSessionEndpoint"
+              />
+            </div>
+          </div>
+        </div>
       </template>
     </CruResource>
   </div>

package/edit/auth/oidc.vue

@@ -15,7 +15,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { BASE_SCOPES } from '@shell/store/auth';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
-import isUrl from 'is-url';
+import { isValidUrl } from '@shell/utils/validators/setting';
 
 const PKCE_S256 = 'S256';
 
@@ -105,7 +105,7 @@ export default {
       }
 
       // make sure that if SLO options are enabled on radio group, field "endSessionEndpoint" is required
-      if (this.isLogoutAllSupported && this.sloEndSessionEndpointUiEnabled && (!this.model.endSessionEndpoint || !isUrl(this.model.endSessionEndpoint))) {
+      if (this.isLogoutAllSupported && this.sloEndSessionEndpointUiEnabled && (!this.model.endSessionEndpoint || !isValidUrl(this.model.endSessionEndpoint))) {
         return false;
       }
 

package/edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -43,7 +43,9 @@ export default {
     const backend = get(this.value.spec, this.value.defaultBackendPath);
 
     this.serviceName = get(backend, this.value.serviceNamePath) || '';
-    this.servicePort = get(backend, this.value.servicePortPath) || '';
+    this.servicePort = get(backend, this.value.servicePortPath) ||
+      get(backend, this.value.servicePortNamePath) ||
+      '';
   },
   computed: {
     isView() {
@@ -75,10 +77,14 @@ export default {
   },
   methods: {
     update() {
-      const backend = get(this.value.spec, this.value.defaultBackendPath) || {};
+      // Fresh object so the old port path (name vs number) doesn't linger.
+      const backend = {};
+      const parsed = Number.parseInt(this.servicePort);
+      const servicePort = Number.isNaN(parsed) ? this.servicePort : parsed;
+      const portPath = typeof servicePort === 'number' ? this.value.servicePortPath : this.value.servicePortNamePath;
 
       set(backend, this.value.serviceNamePath, this.serviceName);
-      set(backend, this.value.servicePortPath, this.servicePort);
+      set(backend, portPath, servicePort);
       set(this.value.spec, this.value.defaultBackendPath, backend);
 
       this.$emit('update:value', this.value);
@@ -119,10 +125,12 @@ export default {
         class="col span-3"
         :style="{'margin-right': '0px'}"
       >
+        <!-- :required drives the asterisk; portRequired doesn't have .name === 'required' -->
         <LabeledInput
           v-if="portOptions.length === 0 || isView"
-          v-model:value.number="servicePort"
+          v-model:value="servicePort"
           :mode="mode"
+          :required="true"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
           :rules="rules.port"
@@ -132,6 +140,7 @@ export default {
           v-else
           v-model:value="servicePort"
           :mode="mode"
+          :required="true"
           :options="portOptions"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -79,20 +79,24 @@ export default {
     set(this.value, 'path', this.value.path || '');
     set(this.value, 'pathType', this.value.pathType || this.pathTypes[0]);
     set(this.value.backend, this.ingress.serviceNamePath, get(this.value.backend, this.ingress.serviceNamePath) || '');
-    set(this.value.backend, this.ingress.servicePortPath, get(this.value.backend, this.ingress.servicePortPath) || '');
 
     this.serviceName = get(this.value.backend, this.ingress.serviceNamePath);
-    this.servicePort = get(this.value.backend, this.ingress.servicePortPath);
+    this.servicePort = get(this.value.backend, this.ingress.servicePortPath) ||
+      get(this.value.backend, this.ingress.servicePortNamePath) ||
+      '';
   },
   methods: {
     update() {
-      const servicePort = Number.parseInt(this.servicePort) || this.servicePort;
+      const parsed = Number.parseInt(this.servicePort);
+      const servicePort = Number.isNaN(parsed) ? this.servicePort : parsed;
       const serviceName = this.serviceName.label || this.serviceName;
       const out = {
         id: this.value.id, backend: {}, path: this.path, pathType: this.pathType
       };
 
-      set(out.backend, this.ingress.servicePortPath, servicePort);
+      const portPath = typeof servicePort === 'number' ? this.ingress.servicePortPath : this.ingress.servicePortNamePath;
+
+      set(out.backend, portPath, servicePort);
       set(out.backend, this.ingress.serviceNamePath, serviceName);
 
       this.$emit('update:value', out);