feat: add pv list page (#287)

Signed-off-by: Zzde <zhangxh1997@gmail.com>

Author: zxh326

ui/src/i18n/locales/en.json

@@ -459,6 +459,13 @@
     "capacity": "Capacity",
     "accessModes": "Access Modes"
   },
+  "pvs": {
+    "storageClass": "Storage Class",
+    "capacity": "Capacity",
+    "accessModes": "Access Modes",
+    "reclaimPolicy": "Reclaim Policy",
+    "claim": "Claim"
+  },
   "detail": {
     "buttons": {
       "refresh": "Refresh",

ui/src/i18n/locales/zh.json

@@ -590,5 +590,18 @@
     "hints": {
       "nameImmutable": "创建后名称不可更改"
     }
+  },
+  "pvcs": {
+    "volume": "卷",
+    "storageClass": "存储类",
+    "capacity": "容量",
+    "accessModes": "访问模式"
+  },
+  "pvs": {
+    "storageClass": "存储类",
+    "capacity": "容量",
+    "accessModes": "访问模式",
+    "reclaimPolicy": "回收策略",
+    "claim": "声明"
   }
 }

ui/src/pages/pv-list-page.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useMemo } from 'react'
+import { createColumnHelper } from '@tanstack/react-table'
+import { PersistentVolume } from 'kubernetes-types/core/v1'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import { formatDate, parseBytes } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { ResourceTable } from '@/components/resource-table'
+
+export function PVListPage() {
+  const { t } = useTranslation()
+  const columnHelper = createColumnHelper<PersistentVolume>()
+
+  // Define columns for the PV table
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor('metadata.name', {
+        header: t('common.name'),
+        cell: ({ row }) => (
+          <div className="font-medium text-blue-500 hover:underline">
+            <Link to={`/persistentvolumes/${row.original.metadata!.name}`}>
+              {row.original.metadata!.name}
+            </Link>
+          </div>
+        ),
+      }),
+      columnHelper.accessor('status.phase', {
+        header: t('common.status'),
+        enableColumnFilter: true,
+        cell: ({ getValue }) => {
+          const phase = getValue() || 'Unknown'
+          let variant: 'default' | 'destructive' | 'secondary' = 'secondary'
+
+          switch (phase) {
+            case 'Bound':
+              variant = 'default'
+              break
+            case 'Available':
+              variant = 'secondary'
+              break
+            case 'Released':
+            case 'Failed':
+              variant = 'destructive'
+              break
+          }
+
+          return <Badge variant={variant}>{phase}</Badge>
+        },
+      }),
+      columnHelper.accessor('spec.storageClassName', {
+        header: t('pvs.storageClass'),
+        enableColumnFilter: true,
+        cell: ({ getValue }) => {
+          const scName = getValue()
+          if (scName) {
+            return (
+              <div className="font-medium text-blue-500 hover:underline">
+                <Link to={`/storageclasses/${scName}`}>{scName}</Link>
+              </div>
+            )
+          }
+          return '-'
+        },
+      }),
+      columnHelper.accessor(
+        (row) => parseBytes(row.spec?.capacity?.storage || '0'),
+        {
+          header: t('pvs.capacity'),
+          cell: ({ row }) => row.original.spec?.capacity?.storage || '-',
+        }
+      ),
+      columnHelper.accessor('spec.accessModes', {
+        header: t('pvs.accessModes'),
+        cell: ({ getValue }) => {
+          const modes = getValue() || []
+          return modes.join(', ') || '-'
+        },
+      }),
+      columnHelper.accessor('spec.persistentVolumeReclaimPolicy', {
+        header: t('pvs.reclaimPolicy'),
+        cell: ({ getValue }) => {
+          const policy = getValue()
+          return policy || '-'
+        },
+      }),
+      columnHelper.accessor('spec.claimRef', {
+        header: t('pvs.claim'),
+        cell: ({ getValue }) => {
+          const claimRef = getValue()
+          if (claimRef && claimRef.name && claimRef.namespace) {
+            return (
+              <div className="font-medium text-blue-500 hover:underline">
+                <Link
+                  to={`/persistentvolumeclaims/${claimRef.namespace}/${claimRef.name}`}
+                >
+                  {claimRef.namespace}/{claimRef.name}
+                </Link>
+              </div>
+            )
+          }
+          return '-'
+        },
+      }),
+      columnHelper.accessor('metadata.creationTimestamp', {
+        header: t('common.created'),
+        cell: ({ getValue }) => {
+          const dateStr = formatDate(getValue() || '')
+
+          return (
+            <span className="text-muted-foreground text-sm">{dateStr}</span>
+          )
+        },
+      }),
+    ],
+    [columnHelper, t]
+  )
+
+  // Custom filter for PV search
+  const pvSearchFilter = useCallback((pv: PersistentVolume, query: string) => {
+    return (
+      pv.metadata!.name!.toLowerCase().includes(query) ||
+      (pv.spec!.storageClassName?.toLowerCase() || '').includes(query) ||
+      (pv.status!.phase?.toLowerCase() || '').includes(query) ||
+      (pv.spec!.claimRef?.name?.toLowerCase() || '').includes(query) ||
+      (pv.spec!.claimRef?.namespace?.toLowerCase() || '').includes(query)
+    )
+  }, [])
+
+  return (
+    <ResourceTable
+      resourceName={'PersistentVolumes'}
+      columns={columns}
+      clusterScope={true}
+      searchQueryFilter={pvSearchFilter}
+    />
+  )
+}

ui/src/pages/resource-list.tsx

@@ -17,6 +17,7 @@ import { JobListPage } from './job-list-page'
 import { NamespaceListPage } from './namespace-list-page'
 import { NodeListPage } from './node-list-page'
 import { PodListPage } from './pod-list-page'
+import { PVListPage } from './pv-list-page'
 import { PVCListPage } from './pvc-list-page'
 import { SecretListPage } from './secret-list-page'
 import { ServiceListPage } from './service-list-page'
@@ -59,6 +60,8 @@ export function ResourceList() {
       return <SecretListPage />
     case 'persistentvolumeclaims':
       return <PVCListPage />
+    case 'persistentvolumes':
+      return <PVListPage />
     case 'crds':
       return <CRDListPage />
     case 'gateways':