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(': ')}