Enhance StorageClass details view to display all specification fields

frontend/src/components/storage/ClassDetails.tsx

@@ -33,6 +33,14 @@ export default function StorageClassDetails(props: { name?: string; cluster?: st
       withEvents
       extraInfo={item =>
         item && [
+          {
+            name: t('translation|Default'),
+            value: item.isDefault ? t('translation|Yes') : t('translation|No'),
+          },
+          {
+            name: t('Provisioner'),
+            value: item.provisioner,
+          },
           {
             name: t('Reclaim Policy'),
             value: item.reclaimPolicy,
@@ -42,8 +50,48 @@ export default function StorageClassDetails(props: { name?: string; cluster?: st
             value: item.volumeBindingMode,
           },
           {
-            name: t('Provisioner'),
-            value: item.provisioner,
+            name: t('Allow Volume Expansion'),
+            value: item.allowVolumeExpansion ? t('translation|Yes') : t('translation|No'),
+            hide: item.allowVolumeExpansion === undefined,
+          },
+          {
+            name: t('Parameters'),
+            value: item.parameters ? (
+              <React.Fragment>
+                {Object.entries(item.parameters).map(([key, value], index) => (
+                  <div key={`${key}-${index}`}>
+                    {key}: {value}
+                  </div>
+                ))}
+              </React.Fragment>
+            ) : (
+              t('translation|None')
+            ),
+            hide: !item.parameters || Object.keys(item.parameters).length === 0,
+          },
+          {
+            name: t('Mount Options'),
+            value: item.mountOptions ? item.mountOptions.join(', ') : t('translation|None'),
+            hide: !item.mountOptions || item.mountOptions.length === 0,
+          },
+          {
+            name: t('Allowed Topologies'),
+            value: item.allowedTopologies ? (
+              <React.Fragment>
+                {item.allowedTopologies.map((topology, topologyIndex) => (
+                  <div key={`topology-${topologyIndex}`}>
+                    {topology.matchLabelExpressions?.map((expr, exprIndex) => (
+                      <div key={`expr-${exprIndex}`} style={{ marginLeft: '8px' }}>
+                        {expr.key}: {expr.values.join(', ')}
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </React.Fragment>
+            ) : (
+              t('translation|None')
+            ),
+            hide: !item.allowedTopologies || item.allowedTopologies.length === 0,
           },
         ]
       }

frontend/src/components/storage/storyHelper.ts

@@ -31,6 +31,23 @@ export const BASE_SC: KubeStorageClass = {
   reclaimPolicy: 'Delete',
   allowVolumeExpansion: true,
   volumeBindingMode: 'WaitForFirstConsumer',
+  parameters: {
+    type: 'gp3',
+    iopsPerGB: '10',
+    fsType: 'ext4',
+    encrypted: 'true',
+  },
+  mountOptions: ['debug', 'nfsvers=4.1'],
+  allowedTopologies: [
+    {
+      matchLabelExpressions: [
+        {
+          key: 'topology.kubernetes.io/zone',
+          values: ['us-east-1a', 'us-east-1b'],
+        },
+      ],
+    },
+  ],
 };
 
 export const BASE_PVC: KubePersistentVolumeClaim = {

frontend/src/i18n/locales/en/glossary.json

@@ -235,6 +235,8 @@
   "Provisioner": "Provisioner",
   "Volume Binding Mode": "Volume Binding Mode",
   "Allow Volume Expansion": "Allow Volume Expansion",
+  "Allowed Topologies": "Allowed Topologies",
+  "Mount Options": "Mount Options",
   "Claim": "Claim",
   "Update Policy": "Update Policy",
   "Update Mode": "Update Mode",

frontend/src/lib/k8s/storageClass.ts

@@ -22,6 +22,14 @@ export interface KubeStorageClass extends KubeObjectInterface {
   reclaimPolicy: string;
   volumeBindingMode: string;
   allowVolumeExpansion?: boolean;
+  parameters?: { [key: string]: string };
+  mountOptions?: string[];
+  allowedTopologies?: Array<{
+    matchLabelExpressions?: Array<{
+      key: string;
+      values: string[];
+    }>;
+  }>;
 }
 
 class StorageClass extends KubeObject<KubeStorageClass> {
@@ -63,6 +71,18 @@ class StorageClass extends KubeObject<KubeStorageClass> {
     return this.jsonData.allowVolumeExpansion;
   }
 
+  get parameters() {
+    return this.jsonData.parameters;
+  }
+
+  get mountOptions() {
+    return this.jsonData.mountOptions;
+  }
+
+  get allowedTopologies() {
+    return this.jsonData.allowedTopologies;
+  }
+
   static get listRoute() {
     return 'storageClasses';
   }