Enhance StorageClass details view to display all specification fields

[Copilot]

Problem

Users had to switch to the YAML view to understand StorageClass configuration because the details view was not displaying most of the specification fields. Critical information like driver parameters, mount options, volume expansion settings, and topology constraints were completely hidden from the UI.

Solution

Enhanced the StorageClass details view to display all relevant specification information, making it easy to understand storage configuration at a glance.

Fields Now Displayed

The details view now shows:

• Default - Whether this is the default storage class
• Provisioner - The storage provisioner (e.g., kubernetes.io/aws-ebs, csi.test)
• Reclaim Policy - How volumes are reclaimed (Delete/Retain/Recycle)
• Binding Mode - Volume binding mode (Immediate/WaitForFirstConsumer)
• Allow Volume Expansion - Whether volumes can be dynamically expanded
• Parameters - Driver-specific parameters displayed as key-value pairs (e.g., type: gp3, iopsPerGB: 10, fsType: ext4)
• Mount Options - Mount options for the volumes (e.g., debug, nfsvers=4.1)
• Allowed Topologies - Topology constraints for volume provisioning (e.g., zone restrictions)

All optional fields are conditionally hidden when not present in the resource, keeping the UI clean.

Implementation Details

• Updated KubeStorageClass interface to include parameters, mountOptions, and allowedTopologies fields
• Added corresponding getter methods to the StorageClass class
• Enhanced the details view component to display complex data structures:
  • Parameters: Rendered as individual key-value pairs
  • Mount Options: Displayed as comma-separated list
  • Allowed Topologies: Shows topology constraints with proper nesting
• Added translation entries for new field labels
• Updated test data with realistic example values

Screenshot

Before: Only basic fields were shown (Provisioner, Reclaim Policy, Binding Mode)

After: All storage class specification fields are displayed:

Impact

This enhancement significantly improves the user experience for anyone working with PVs and PVCs. Users can now:

• View complete storage configuration without switching to YAML view
• Quickly understand driver-specific settings and constraints
• Make informed decisions about storage class selection
• Debug storage issues more efficiently

Fixes #4024

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: node /home/REDACTED/work/headlamp/headlamp/frontend/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Enhance Storage views</issue_title>
<issue_description>## Is your feature request related to a problem? Please describe the impact that the lack of the feature requested is creating.

I have recently noticed that we are not displaying almost any relevant info for storage classes. E.g., it doesn't show me any info from the spec, meaning I have to open the YAML to understand exactly what a persistent volume refers to.

Describe the solution you'd like

Ideally, the relevant info about each storage class resource will appear in its details view.

What users will benefit from this feature?

Anyone using PVs and PVCs.
</issue_description>

<agent_instructions>Name your new branch hl-ci-enhance-storage-views. Keep commits atomic and always show the screenshots when changing anything graphical.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes #4028

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vyncent-t]

@joaquimrocha

Tried the changes locally and they look good, also sourced from the community slack and the feedback was pretty okay with these changes. Not sure what else we could display here, it covers most everything seen in the docs.

I think these should be okay, just needs a rebase I think.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Copilot, vyncent-t
Once this PR has been reviewed and has the lgtm label, please ask for approval from joaquimrocha. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment