Fix Ingress form editor to handle backend.service.port.name

[codyrancher]

Summary

Fixes #17105

Occurred changes and/or fixed issues

The Ingress form editor only read/wrote backend.service.port.number, so Ingresses using backend.service.port.name showed a blank port field. This adds support for both across reading, writing, validation, and the port dropdown.

Technical notes summary

• Added servicePortNamePath getter to the Ingress model
• findAndMapServiceTargets now includes port names in dropdown options
• RulePath.vue and DefaultBackend.vue read from both port.number and port.name, write to the correct path based on type
• Replaced single portNumberOrName validator with portRequired (presence check) and portRange (1-65535), both handling scalar and object inputs
• Fixed Number.parseInt fallthrough when port value is falsy (e.g. 0)
• Restored required asterisk on DefaultBackend port fields
• List/detail view falls back to port name when port number is not set

Reproduction resources

Apply these to create a Service with named ports and two Ingresses (one using port.name, one using port.number):

apiVersion: v1
kind: Service
metadata:
  name: test-web-service
  namespace: default
spec:
  ports:
    - name: http
      port: 80
      targetPort: 8080
    - name: https
      port: 443
      targetPort: 8443
  selector:
    app: test-web

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-port-name
  namespace: default
spec:
  rules:
    - host: name.example.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: test-web-service
                port:
                  name: http

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-port-number
  namespace: default
spec:
  rules:
    - host: number.example.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: test-web-service
                port:
                  number: 80

The bug: editing ingress-port-name in the form editor shows a blank port field. Editing ingress-port-number works fine.

Areas or cases that should be tested

• Edit ingress-port-name and verify the port field shows "http"
• Edit ingress-port-number and verify the port field shows "80"
• Create a new Ingress, select test-web-service, and verify both port numbers and names appear in the dropdown
• Save with a port name and verify the YAML uses port.name; same for port.number
• Verify the Default Backend tab works with both formats
• Verify the form blocks saving without a port specified
• Verify port range validation rejects values outside 1-65535

Areas which could experience regressions

• Ingress form creation and editing (rules and default backend)
• Ingress list page port display
• Form validation for port fields

Screenshot/Video

Before (bug): YAML shows port.name: http is defined, but the form editor's port field is empty (red highlight)

before.webm

After (fix): port name "http" is correctly displayed in the form (green highlight), save succeeds

after.webm

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

[aalves08]

There's a scenario where this is failing @codyrancher :

• User edits an Ingress, goes to the Default Backend tab
• Selects a service and picks port http (a named port) from the dropdown
• The DefaultBackend.vue update() method correctly detects that "http" is a string and writes it to service.port.name — leaving service.port.number empty
• User clicks Save
• willSave() fires. It reads service.port.number — which is empty/undefined because the port was stored under service.port.name
• !servicePort evaluates to true
• The hook concludes "the default backend is incomplete" and runs set(this.value.spec, path, null), which deletes the entire default backend
• The Ingress is saved without the default backend the user just configured

[codyrancher]

There's a scenario where this is failing @codyrancher :

• User edits an Ingress, goes to the Default Backend tab
• Selects a service and picks port http (a named port) from the dropdown
• The DefaultBackend.vue update() method correctly detects that "http" is a string and writes it to service.port.name — leaving service.port.number empty
• User clicks Save
• willSave() fires. It reads service.port.number — which is empty/undefined because the port was stored under service.port.name
• !servicePort evaluates to true
• The hook concludes "the default backend is incomplete" and runs set(this.value.spec, path, null), which deletes the entire default backend
• The Ingress is saved without the default backend the user just configured

That was a good find. I had to make some changes to validation to get the field requirements correct but it should be fixed now.

[aalves08]

Sorry for the delay and thanks for the fix! LGTM!

[codyrancher]

Sorry for the delay and thanks for the fix! LGTM!

@aalves08 No worries, you're way more on top of things than I am. Thanks for the review!