update storage breadcrumbs

pluralsh · Mar 27, 2024 · 401f2d1 · 401f2d1
1 parent 134a769
commit 401f2d1
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 36 deletions.
diff --git a/assets/src/components/kubernetes/storage/PersistentVolume.tsx b/assets/src/components/kubernetes/storage/PersistentVolume.tsx
@@ -64,12 +64,7 @@ export default function PersistentVolume(): ReactElement {
 export function PersistentVolumeInfo(): ReactElement {
   const pv = useOutletContext() as PersistentVolumeT
 
-  return (
-    <section>
-      <SubTitle>Info</SubTitle>
-      {pv.status}
-    </section>
-  )
+  return <section>TODO</section>
 }
 
 export function PersistentVolumeRaw(): ReactElement {

diff --git a/assets/src/components/kubernetes/storage/PersistentVolumeClaims.tsx b/assets/src/components/kubernetes/storage/PersistentVolumeClaims.tsx
@@ -1,9 +1,10 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { ChipList } from '@pluralsh/design-system'
+import { ChipList, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { Link } from 'react-router-dom'
 
 import {
+  Maybe,
   Persistentvolumeclaim_PersistentVolumeClaimList as PersistentVolumeClaimListT,
   Persistentvolumeclaim_PersistentVolumeClaim as PersistentVolumeClaimT,
   PersistentVolumeClaimsQuery,
@@ -14,10 +15,38 @@ import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
 import { ClusterTinyFragment } from '../../../generated/graphql'
 import { InlineLink } from '../../utils/typography/InlineLink'
-import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+import {
+  PERSISTENT_VOLUME_CLAIMS_REL_PATH,
+  getKubernetesAbsPath,
+  getResourceDetailsAbsPath,
+  getStorageAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+
+import { useKubernetesContext } from '../Kubernetes'
 
 import { PVCStatusChip } from './utils'
 
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'storage',
+    url: getStorageAbsPath(cluster?.id),
+  },
+  {
+    label: 'persistent volume claims',
+    url: `${getStorageAbsPath(
+      cluster?.id
+    )}/${PERSISTENT_VOLUME_CLAIMS_REL_PATH}`,
+  },
+]
+
 const columnHelper = createColumnHelper<PersistentVolumeClaimT>()
 
 const colStatus = columnHelper.accessor((pvc) => pvc.status, {
@@ -87,6 +116,10 @@ const colAccessModes = columnHelper.accessor((pvc) => pvc.accessModes, {
 })
 
 export default function PersistentVolumeClaims() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colNamespace, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

diff --git a/assets/src/components/kubernetes/storage/Storage.tsx b/assets/src/components/kubernetes/storage/Storage.tsx
@@ -1,17 +1,11 @@
 import { Outlet, useMatch } from 'react-router-dom'
-import {
-  SubTab,
-  TabList,
-  TabPanel,
-  useSetBreadcrumbs,
-} from '@pluralsh/design-system'
+import { SubTab, TabList, TabPanel } from '@pluralsh/design-system'
 import { Suspense, useMemo, useRef, useState } from 'react'
 
 import {
   PERSISTENT_VOLUMES_REL_PATH,
   PERSISTENT_VOLUME_CLAIMS_REL_PATH,
   STORAGE_CLASSES_REL_PATH,
-  getKubernetesAbsPath,
   getStorageAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
 
@@ -51,26 +45,6 @@ export default function Storage() {
   const tab = pathMatch?.params?.tab || ''
   const currentTab = directory.find(({ path }) => path === tab)
 
-  useSetBreadcrumbs(
-    useMemo(
-      () => [
-        {
-          label: 'kubernetes',
-          url: getKubernetesAbsPath(cluster?.id),
-        },
-        {
-          label: cluster?.name ?? '',
-          url: getKubernetesAbsPath(cluster?.id),
-        },
-        {
-          label: 'storage',
-          url: getStorageAbsPath(cluster?.id),
-        },
-      ],
-      [cluster]
-    )
-  )
-
   const headerContent = useMemo(
     () => (
       <TabList

diff --git a/assets/src/components/kubernetes/storage/StorageClasses.tsx b/assets/src/components/kubernetes/storage/StorageClasses.tsx
@@ -2,9 +2,10 @@ import { createColumnHelper } from '@tanstack/react-table'
 
 import { useMemo } from 'react'
 
-import { ChipList } from '@pluralsh/design-system'
+import { ChipList, useSetBreadcrumbs } from '@pluralsh/design-system'
 
 import {
+  Maybe,
   Storageclass_StorageClassList as StorageClassListT,
   Storageclass_StorageClass as StorageClassT,
   StorageClassesQuery,
@@ -13,6 +14,32 @@ import {
 } from '../../../generated/graphql-kubernetes'
 import { useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+import {
+  STORAGE_CLASSES_REL_PATH,
+  getKubernetesAbsPath,
+  getStorageAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { useKubernetesContext } from '../Kubernetes'
+
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'storage',
+    url: getStorageAbsPath(cluster?.id),
+  },
+  {
+    label: 'storage classes',
+    url: `${getStorageAbsPath(cluster?.id)}/${STORAGE_CLASSES_REL_PATH}`,
+  },
+]
 
 const columnHelper = createColumnHelper<StorageClassT>()
 
@@ -47,6 +74,10 @@ const colParameters = columnHelper.accessor(
 )
 
 export default function StorageClasses() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(