diff --git a/assets/src/components/kubernetes/Kubernetes.tsx b/assets/src/components/kubernetes/Kubernetes.tsx index c359e0c932..dd5f364dd7 100644 --- a/assets/src/components/kubernetes/Kubernetes.tsx +++ b/assets/src/components/kubernetes/Kubernetes.tsx @@ -141,7 +141,7 @@ export const useKubernetesContext = () => { return ctx } -const NAMESPACE_PARAM = 'namespace' +export const NAMESPACE_PARAM = 'namespace' const directory: Directory = [ { path: WORKLOADS_REL_PATH, label: 'Workloads' }, diff --git a/assets/src/components/kubernetes/configuration/ConfigMap.tsx b/assets/src/components/kubernetes/configuration/ConfigMap.tsx index 8d3379d66c..849da25628 100644 --- a/assets/src/components/kubernetes/configuration/ConfigMap.tsx +++ b/assets/src/components/kubernetes/configuration/ConfigMap.tsx @@ -1,5 +1,5 @@ import { ReactElement, useMemo } from 'react' -import { Code } from '@pluralsh/design-system' +import { Code, useSetBreadcrumbs } from '@pluralsh/design-system' import { useParams } from 'react-router-dom' import { useTheme } from 'styled-components' import { isEmpty } from 'lodash' @@ -13,11 +13,20 @@ import { KubernetesClient } from '../../../helpers/kubernetes.client' import LoadingIndicator from '../../utils/LoadingIndicator' import { ResponsivePageFullWidth } from '../../utils/layout/ResponsivePageFullWidth' import { SubTitle } from '../../cluster/nodes/SubTitle' -import { Metadata } from '../utils' +import { Metadata, useKubernetesCluster } from '../utils' +import { NAMESPACE_PARAM } from '../Kubernetes' +import { + CONFIG_MAPS_REL_PATH, + getConfigurationAbsPath, + getResourceDetailsAbsPath, +} from '../../../routes/kubernetesRoutesConsts' + +import { getBreadcrumbs } from './ConfigMaps' export default function ConfigMap(): ReactElement { const theme = useTheme() - const { clusterId, name, namespace } = useParams() + const cluster = useKubernetesCluster() + const { clusterId, name = '', namespace = '' } = useParams() const { data, loading } = useConfigMapQuery({ client: KubernetesClient(clusterId ?? ''), skip: !clusterId, @@ -48,7 +57,29 @@ export default function ConfigMap(): ReactElement { [cm?.data] ) - // TODO: Breadcrumbs here and on the list. + useSetBreadcrumbs( + useMemo( + () => [ + ...getBreadcrumbs(cluster), + { + label: namespace ?? '', + url: `${getConfigurationAbsPath( + cluster?.id + )}/${CONFIG_MAPS_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`, + }, + { + label: name ?? '', + url: getResourceDetailsAbsPath( + clusterId, + 'configmap', + name, + namespace + ), + }, + ], + [cluster, clusterId, name, namespace] + ) + ) if (loading) return diff --git a/assets/src/components/kubernetes/configuration/ConfigMaps.tsx b/assets/src/components/kubernetes/configuration/ConfigMaps.tsx index 740865a2d0..506330070c 100644 --- a/assets/src/components/kubernetes/configuration/ConfigMaps.tsx +++ b/assets/src/components/kubernetes/configuration/ConfigMaps.tsx @@ -2,6 +2,8 @@ import { useMemo } from 'react' import { createColumnHelper } from '@tanstack/react-table' +import { useSetBreadcrumbs } from '@pluralsh/design-system' + import { useDefaultColumns } from '../utils' import { ResourceList } from '../ResourceList' import { @@ -9,12 +11,43 @@ import { Configmap_ConfigMap as ConfigMapT, ConfigMapsQuery, ConfigMapsQueryVariables, + Maybe, useConfigMapsQuery, } from '../../../generated/graphql-kubernetes' +import { + CONFIG_MAPS_REL_PATH, + getConfigurationAbsPath, + getKubernetesAbsPath, +} from '../../../routes/kubernetesRoutesConsts' +import { ClusterTinyFragment } from '../../../generated/graphql' +import { useKubernetesContext } from '../Kubernetes' + +export const getBreadcrumbs = (cluster?: Maybe) => [ + { + label: 'kubernetes', + url: getKubernetesAbsPath(cluster?.id), + }, + { + label: cluster?.name ?? '', + url: getKubernetesAbsPath(cluster?.id), + }, + { + label: 'configuration', + url: getConfigurationAbsPath(cluster?.id), + }, + { + label: 'config maps', + url: `${getConfigurationAbsPath(cluster?.id)}/${CONFIG_MAPS_REL_PATH}`, + }, +] const columnHelper = createColumnHelper() export default function ConfigMaps() { + 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/configuration/Configuration.tsx b/assets/src/components/kubernetes/configuration/Configuration.tsx index d61bd81092..073a5f93cb 100644 --- a/assets/src/components/kubernetes/configuration/Configuration.tsx +++ b/assets/src/components/kubernetes/configuration/Configuration.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 { CONFIG_MAPS_REL_PATH, SECRETS_REL_PATH, getConfigurationAbsPath, - getKubernetesAbsPath, } from '../../../routes/kubernetesRoutesConsts' import { ScrollablePage } from '../../utils/layout/ScrollablePage' @@ -46,26 +40,6 @@ export default function Configuration() { 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: 'configuration', - url: getConfigurationAbsPath(cluster?.id), - }, - ], - [cluster] - ) - ) - const headerContent = useMemo( () => ( mapExistingNodes(data?.clusters), + [data?.clusters] + ) + + return useMemo( + () => clusters.find(({ id }) => id === clusterId), + [clusterId, clusters] + ) +} + +// TODO: Add size to prop and use bigger version here, use medium chips as well then. export function Metadata({ objectMeta }: { objectMeta?: Maybe }) { const theme = useTheme() @@ -178,6 +201,7 @@ export function Metadata({ objectMeta }: { objectMeta?: Maybe }) { label.join(': ')} @@ -185,6 +209,7 @@ export function Metadata({ objectMeta }: { objectMeta?: Maybe }) { annotation.join(': ')}