From 401f2d153fcbaeeda73a6b4814d16c7c5cfd0218 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Wed, 27 Mar 2024 15:19:27 +0100 Subject: [PATCH] update storage breadcrumbs --- .../kubernetes/storage/PersistentVolume.tsx | 7 +--- .../storage/PersistentVolumeClaims.tsx | 37 ++++++++++++++++++- .../components/kubernetes/storage/Storage.tsx | 28 +------------- .../kubernetes/storage/StorageClasses.tsx | 33 ++++++++++++++++- 4 files changed, 69 insertions(+), 36 deletions(-) diff --git a/assets/src/components/kubernetes/storage/PersistentVolume.tsx b/assets/src/components/kubernetes/storage/PersistentVolume.tsx index dc10bd98c5..ac39dce627 100644 --- 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 ( -
- Info - {pv.status} -
- ) + return
TODO
} export function PersistentVolumeRaw(): ReactElement { diff --git a/assets/src/components/kubernetes/storage/PersistentVolumeClaims.tsx b/assets/src/components/kubernetes/storage/PersistentVolumeClaims.tsx index 23a7987003..0a298bcd0f 100644 --- 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) => [ + { + 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() 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 index 70e2a56f8c..78deab5771 100644 --- 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( () => ( ) => [ + { + 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() @@ -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(