@skyhook-io/radar-app 1.16.2 → 1.17.0

package/src/components/cnpg/CNPGProtection.tsx

@@ -0,0 +1,320 @@
+import { useMemo } from 'react'
+import { formatRelativeAgeTime } from '@skyhook-io/k8s-ui/utils/format'
+import {
+  Badge,
+  FactValue,
+  formatDuration,
+  getCNPGBackupStatus,
+  getCNPGClusterBarmanPlugin,
+  getCNPGObjectStoreDestination,
+  getCNPGScheduledBackupStatus,
+  inferredObjectStoreHealth,
+  isApiGroup,
+  toneTextClass,
+  usersOfObjectStore,
+  type CNPGFleetRow,
+  type HealthLevel,
+} from '@skyhook-io/k8s-ui'
+import {
+  CNPGWorkspaceHeader,
+  CoverageNotice,
+  FilterChips,
+  Mono,
+  ScreenBody,
+  SectionTable,
+  Sub,
+  clusterResource,
+  coverageEmpty,
+  cnpgResource,
+  namespaceChip,
+  type CNPGScreenProps,
+} from './shared'
+
+const SEVERITY: Record<HealthLevel, 'success' | 'warning' | 'alert' | 'error' | 'neutral'> = {
+  healthy: 'success',
+  degraded: 'warning',
+  alert: 'alert',
+  unhealthy: 'error',
+  unknown: 'neutral',
+  neutral: 'neutral',
+}
+
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+
+function backupTime(b: any): string | undefined {
+  return b?.status?.stoppedAt || b?.status?.startedAt || b?.metadata?.creationTimestamp
+}
+
+function backupStart(b: any): string | undefined {
+  return b?.status?.startedAt || b?.metadata?.creationTimestamp
+}
+
+function ageText(ts?: string): string {
+  return formatRelativeAgeTime(ts, '—')
+}
+
+interface StoreRow {
+  key: string
+  namespace: string
+  name: string
+  destination: string
+  users: CNPGFleetRow[]
+  health: { text: string; tone: HealthLevel; evidence: string }
+}
+
+// The same inference the ObjectStore summary shows, so the two never disagree:
+// only the recovery windows of clusters that use the store now count.
+function storeHealth(store: any, users: CNPGFleetRow[]): StoreRow['health'] {
+  const { summary, evidence } = inferredObjectStoreHealth(store, usersOfObjectStore(store, users.map((u) => u.cluster)))
+  const names = (list: typeof evidence) => list.map((e) => e.cluster.name).join(', ')
+  if (evidence.length === 0) return { text: 'Unknown', tone: 'unknown', evidence: summary.text }
+  if (summary.tone === 'unhealthy') {
+    const archiving = evidence.filter((e) => e.archiving.tone === 'unhealthy')
+    const backups = evidence.filter((e) => e.window?.failingSinceLastSuccess)
+    const parts = [
+      archiving.length > 0 ? `WAL archiving failing on ${names(archiving)}` : null,
+      backups.length > 0 ? `a backup failed after the last success for ${names(backups)}` : null,
+    ].filter(Boolean)
+    return { text: summary.text, tone: summary.tone, evidence: `Inferred: ${parts.join('; ')}` }
+  }
+  const archiving = evidence.filter((e) => e.archiving.tone === 'healthy')
+  if (summary.tone === 'healthy') {
+    return { text: summary.text, tone: summary.tone, evidence: `Inferred from WAL archiving on ${names(archiving)}` }
+  }
+  return {
+    text: summary.text,
+    tone: summary.tone,
+    evidence: archiving.length > 0
+      ? `Archiving on ${names(archiving)}; no archiving result from the others`
+      : 'Its clusters report no archiving result yet',
+  }
+}
+
+export function CNPGProtection({
+  data,
+  fleet,
+  namespaces,
+  searchParams,
+  onSetParams,
+  onInspect,
+  inspected,
+  onClearNamespaces,
+  scopeCluster,
+}: CNPGScreenProps & { scopeCluster?: { namespace: string; name: string } }) {
+  const clusterFilter = scopeCluster ? `${scopeCluster.namespace}/${scopeCluster.name}` : searchParams.get('cluster')
+  const rows = useMemo(
+    () => fleet.rows.filter((r) => !clusterFilter || `${r.namespace}/${r.name}` === clusterFilter),
+    [fleet.rows, clusterFilter],
+  )
+
+  const failed = useMemo(() => {
+    const now = Date.now()
+    return (data.objects.backups ?? [])
+      .filter((b) => isApiGroup(b.apiVersion, 'postgresql.cnpg.io'))
+      .filter((b) => {
+        const level = getCNPGBackupStatus(b).level
+        if (level !== 'unhealthy' && level !== 'alert') return false
+        const t = Date.parse(backupTime(b) ?? '')
+        return Number.isFinite(t) && now - t <= WEEK_MS
+      })
+      .filter((b) => !clusterFilter || `${b.metadata?.namespace}/${b.spec?.cluster?.name}` === clusterFilter)
+      .sort((a, b) => Date.parse(backupTime(b) ?? '') - Date.parse(backupTime(a) ?? ''))
+  }, [data.objects.backups, clusterFilter])
+
+  const stores = useMemo<StoreRow[]>(() => {
+    return (data.objects.objectStores ?? []).map((s) => {
+      const ns = s.metadata?.namespace ?? ''
+      const name = s.metadata?.name ?? ''
+      const users = fleet.rows.filter(
+        (r) => r.namespace === ns && getCNPGClusterBarmanPlugin(r.cluster)?.barmanObjectName === name,
+      )
+      return { key: `${ns}/${name}`, namespace: ns, name, destination: getCNPGObjectStoreDestination(s), users, health: storeHealth(s, users) }
+    }).filter((s) => !clusterFilter || s.users.some((u) => `${u.namespace}/${u.name}` === clusterFilter))
+  }, [data.objects.objectStores, fleet.rows, clusterFilter])
+
+  const schedules = useMemo(
+    () =>
+      (data.objects.scheduledBackups ?? []).filter(
+        (s) => !clusterFilter || `${s.metadata?.namespace}/${s.spec?.cluster?.name}` === clusterFilter,
+      ),
+    [data.objects.scheduledBackups, clusterFilter],
+  )
+
+  const chips = scopeCluster ? [] : [
+    ...(clusterFilter ? [{ label: `Cluster: ${clusterFilter}`, onClear: () => onSetParams({ cluster: null }) }] : []),
+    ...namespaceChip(namespaces, onClearNamespaces),
+  ]
+  const backupsReadable = data.coverage.backups?.state === 'full'
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {!scopeCluster && (
+        <CNPGWorkspaceHeader
+          title="Protection"
+          subtitle="Backup outcomes, schedules, destinations and recovery evidence for every cluster. Configured, backed up and restore-tested are separate facts."
+        />
+      )}
+      <ScreenBody>
+        <CoverageNotice fleet={fleet} data={data} />
+        <FilterChips chips={chips} />
+
+        <SectionTable
+          title={scopeCluster ? 'Recovery evidence' : 'Recovery evidence by cluster'}
+          columns={[
+            {
+              header: 'Cluster',
+              width: '14%',
+              cell: (r: CNPGFleetRow) => (
+                <>
+                  <div className="truncate font-medium">{r.name}</div>
+                  <Sub>{r.namespace}</Sub>
+                </>
+              ),
+            },
+            { header: 'Schedule', width: '13%', cell: (r) => <FactValue fact={r.protection.schedule} /> },
+            {
+              header: 'Last successful backup',
+              width: '16%',
+              cell: (r) => (
+                <>
+                  <FactValue fact={r.protection.lastSuccessfulBackup} />
+                  {r.protection.lastSuccessfulBackup.source && <Sub>{r.protection.lastSuccessfulBackup.source}</Sub>}
+                </>
+              ),
+            },
+            { header: 'WAL archiving', width: '16%', cell: (r) => <FactValue fact={r.protection.walArchiving} className="line-clamp-2 break-words" /> },
+            {
+              header: 'Recovery window',
+              width: '13%',
+              cell: (r) =>
+                r.protection.recoveryWindow.from ? (
+                  <>
+                    <span className={toneTextClass(r.protection.recoveryWindow.tone)}>
+                      from {ageText(r.protection.recoveryWindow.from)}
+                    </span>
+                    <Sub>
+                      {r.protection.recoveryWindow.tone === 'degraded' ? 'not advancing: archiving failing' : 'to the newest archived WAL'}
+                    </Sub>
+                  </>
+                ) : (
+                  <FactValue fact={r.protection.recoveryWindow} />
+                ),
+            },
+            {
+              header: 'Restore validation',
+              width: '13%',
+              cell: (r) => (
+                <FactValue fact={r.protection.restoreValidation} />
+              ),
+            },
+            {
+              header: 'Destination',
+              width: '15%',
+              cell: (r) => <FactValue fact={r.protection.destination} className={r.protection.destination.method === 'barmanObjectStore' ? 'break-all font-mono text-[12.5px]' : 'break-words'} />,
+            },
+          ]}
+          rows={rows}
+          rowKey={(r) => r.key}
+          rowResource={(r) => clusterResource(r.namespace, r.name)}
+          onInspect={onInspect}
+          inspected={inspected}
+          minWidth={1000}
+          empty={coverageEmpty(data.coverage.clusters, 'PostgreSQL clusters')}
+          footer="Kubernetes records no restore tests, so restore validation is never shown as passed. Recovery windows come from ObjectStore status."
+        />
+
+        <SectionTable
+          title="Failed backups"
+          subtitle="last 7 days"
+          columns={[
+            { header: 'Backup', width: '28%', cell: (b: any) => <Mono>{b.metadata?.name}</Mono> },
+            { header: 'Cluster', width: '16%', cell: (b) => <>{b.spec?.cluster?.name ?? '—'}<Sub>{b.metadata?.namespace}</Sub></> },
+            { header: 'Started', width: '12%', cell: (b) => ageText(backupStart(b)) },
+            {
+              header: 'Error',
+              width: '44%',
+              cell: (b) => <span className={toneTextClass('unhealthy')}>{b.status?.error || getCNPGBackupStatus(b).text}</span>,
+            },
+          ]}
+          rows={failed}
+          rowKey={(b) => `${b.metadata?.namespace}/${b.metadata?.name}`}
+          rowResource={(b) => cnpgResource('backups', b.metadata?.namespace, b.metadata?.name)}
+          onInspect={onInspect}
+          inspected={inspected}
+          empty={backupsReadable && data.coverage.backups?.state === 'full' ? 'No failed backups in the last 7 days.' : coverageEmpty(data.coverage.backups, 'failed backups')}
+        />
+
+        <SectionTable
+          title="Destinations"
+          subtitle="ObjectStores (barman-cloud plugin)"
+          columns={[
+            { header: 'ObjectStore', width: '18%', cell: (s: StoreRow) => <>{s.name}<Sub>{s.namespace}</Sub></> },
+            { header: 'Destination', width: '30%', cell: (s) => <Mono>{s.destination}</Mono> },
+            { header: 'Used by', width: '20%', cell: (s) => (s.users.length ? s.users.map((u) => u.name).join(', ') : <span className="text-theme-text-tertiary">None visible</span>) },
+            {
+              header: 'Upload health (inferred)',
+              width: '32%',
+              cell: (s) => (
+                <>
+                  <Badge severity={SEVERITY[s.health.tone]} size="sm">{s.health.text}</Badge>
+                  <Sub>{s.health.evidence}</Sub>
+                </>
+              ),
+            },
+          ]}
+          rows={stores}
+          rowKey={(s) => s.key}
+          rowResource={(s) => cnpgResource('objectstores', s.namespace, s.name, 'barmancloud.cnpg.io')}
+          onInspect={onInspect}
+          inspected={inspected}
+          empty={data.coverage.objectStores?.state === 'notInstalled' ? 'The barman-cloud plugin’s ObjectStore kind is not installed.' : coverageEmpty(data.coverage.objectStores, 'ObjectStores')}
+          footer="ObjectStore has no health status of its own; upload health is inferred from its clusters’ WAL archiving and backup results."
+        />
+
+        <SectionTable
+          title="Schedules"
+          columns={[
+            { header: 'ScheduledBackup', width: '24%', cell: (s: any) => <>{s.metadata?.name}<Sub>{s.metadata?.namespace}</Sub></> },
+            { header: 'Cluster', width: '16%', cell: (s) => s.spec?.cluster?.name ?? '—' },
+            {
+              header: 'Schedule',
+              width: '24%',
+              cell: (s) => (
+                <>
+                  <Mono>{s.spec?.schedule ?? '—'}</Mono>
+                  <Sub>CNPG cron, seconds first</Sub>
+                </>
+              ),
+            },
+            {
+              header: 'Status',
+              width: '12%',
+              cell: (s) => {
+                const st = getCNPGScheduledBackupStatus(s)
+                return <Badge severity={SEVERITY[st.level]} size="sm">{st.text}</Badge>
+              },
+            },
+            { header: 'Last run', width: '12%', cell: (s) => ageText(s.status?.lastScheduleTime) },
+            {
+              header: 'Next run',
+              width: '12%',
+              cell: (s) => {
+                const next = s.status?.nextScheduleTime
+                if (!next) return '—'
+                const ms = Date.parse(next) - Date.now()
+                return ms >= 0 ? `in ${formatDuration(ms)}` : `${formatDuration(-ms)} overdue`
+              },
+            },
+          ]}
+          rows={schedules}
+          rowKey={(s) => `${s.metadata?.namespace}/${s.metadata?.name}`}
+          rowResource={(s) => cnpgResource('scheduledbackups', s.metadata?.namespace, s.metadata?.name)}
+          onInspect={onInspect}
+          inspected={inspected}
+          empty={coverageEmpty(data.coverage.scheduledBackups, 'ScheduledBackups')}
+          footer={data.backupsOmitted > 0 ? `${data.backupsOmitted} settled backups older than 7 days are not listed.` : undefined}
+        />
+      </ScreenBody>
+    </div>
+  )
+}

package/src/components/cnpg/CNPGSummaryHost.tsx

@@ -0,0 +1,143 @@
+import type { ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  CNPG_BARMAN_OBJECTSTORE_GROUP,
+  CNPG_GROUP,
+  CNPGBackupSummary,
+  CNPGClusterSummary,
+  CNPGDatabaseSummary,
+  CNPGImageCatalogSummary,
+  CNPGObjectStoreSummary,
+  CNPGPoolerSummary,
+  CNPGPublicationSummary,
+  CNPGScheduledBackupSummary,
+  CNPGSubscriptionSummary,
+  PaneLoader,
+  isApiGroup,
+  refToSelectedResource,
+  type CNPGNavigate,
+  type CNPGRef,
+  type CNPGWorkspaceResponse,
+  type NavigateToResource,
+} from '@skyhook-io/k8s-ui'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { cnpgClusterFullPath, currentPageLabel } from './paths'
+import { useConnection } from '../../context/ConnectionContext'
+
+interface SummaryContext {
+  apiKind: string
+  namespace: string
+  name: string
+  group?: string
+  resource: any
+  context: 'drawer' | 'expanded'
+  onNavigate?: NavigateToResource
+}
+
+function ClusterSummaryHost({ namespace, name, context, onNavigate }: SummaryContext) {
+  const navigate = useNavigate()
+  const { connection } = useConnection()
+  // The workspace is read for the object's own namespace: an explicitly opened
+  // Cluster shows its facts whatever the namespace filter is.
+  const { query, fleet } = useCNPGFleet([namespace])
+  const row = fleet?.rows.find((r) => r.namespace === namespace && r.name === name)
+  if (!row) {
+    if (query.isLoading) return <PaneLoader label="Loading summary…" className="h-40" />
+    return (
+      <div className="px-4 py-4 text-sm text-theme-text-secondary">
+        {query.error instanceof Error
+          ? `The CloudNativePG summary could not be loaded: ${query.error.message}`
+          : 'This Cluster is not in the CloudNativePG workspace for your identity.'}{' '}
+        Spec & status still shows everything the object reports.
+      </div>
+    )
+  }
+  const go = onNavigate ? (ref: CNPGRef) => onNavigate(refToSelectedResource(ref)) : undefined
+  return (
+    <CNPGClusterSummary
+      row={row}
+      onNavigate={go}
+      actions={
+        context === 'drawer'
+          ? [
+              {
+                label: 'Open cluster',
+                primary: true,
+                onClick: () =>
+                  navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined), {
+                    state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                  }),
+              },
+              {
+                label: 'Logs',
+                onClick: () =>
+                  navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined, 'logs'), {
+                    state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                  }),
+              },
+              {
+                label: 'Protection',
+                onClick: () =>
+                  navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined, 'protection'), {
+                    state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                  }),
+              },
+            ]
+          : undefined
+      }
+    />
+  )
+}
+
+type ObjectSummary = (props: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: CNPGNavigate }) => ReactNode
+
+const OBJECT_SUMMARIES: Record<string, ObjectSummary> = {
+  Backup: CNPGBackupSummary,
+  ScheduledBackup: CNPGScheduledBackupSummary,
+  Pooler: CNPGPoolerSummary,
+  Database: CNPGDatabaseSummary,
+  Publication: CNPGPublicationSummary,
+  Subscription: CNPGSubscriptionSummary,
+  ImageCatalog: CNPGImageCatalogSummary,
+  ClusterImageCatalog: CNPGImageCatalogSummary,
+}
+
+function ObjectSummaryHost({ ctx, Summary }: { ctx: SummaryContext; Summary: ObjectSummary }) {
+  // A ClusterImageCatalog is referenced from any namespace, so its users are
+  // read across every namespace the caller can see.
+  const clusterScoped = ctx.resource?.kind === 'ClusterImageCatalog'
+  const { query } = useCNPGFleet(clusterScoped ? [] : [ctx.namespace])
+  if (query.isLoading) return <PaneLoader label="Loading summary…" className="h-40" />
+  const workspace = query.data?.installed ? query.data : null
+  const go = ctx.onNavigate ? (ref: CNPGRef) => ctx.onNavigate?.(refToSelectedResource(ref)) : undefined
+  return <Summary resource={ctx.resource} workspace={workspace} onNavigate={go} />
+}
+
+// The object's own apiVersion decides: Velero also ships a Backup kind.
+function groupOf(ctx: SummaryContext): string | undefined {
+  const apiVersion = ctx.resource?.apiVersion
+  if (typeof apiVersion !== 'string') return ctx.group
+  if (isApiGroup(apiVersion, CNPG_GROUP)) return CNPG_GROUP
+  if (isApiGroup(apiVersion, CNPG_BARMAN_OBJECTSTORE_GROUP)) return CNPG_BARMAN_OBJECTSTORE_GROUP
+  return undefined
+}
+
+function renderSummaryFor(ctx: SummaryContext): ReactNode {
+  const group = groupOf(ctx)
+  const kind = ctx.resource?.kind
+  if (group === CNPG_BARMAN_OBJECTSTORE_GROUP && kind === 'ObjectStore') {
+    return <ObjectSummaryHost ctx={ctx} Summary={CNPGObjectStoreSummary} />
+  }
+  if (group !== CNPG_GROUP) return null
+  if (kind === 'Cluster') return <ClusterSummaryHost {...ctx} />
+  const Summary = OBJECT_SUMMARIES[kind]
+  return Summary ? <ObjectSummaryHost ctx={ctx} Summary={Summary} /> : null
+}
+
+/**
+ * The composed Overview for CloudNativePG kinds. Returns null for kinds
+ * without one, which keeps the default Overview.
+ */
+export function renderCNPGSummary(ctx: SummaryContext): ReactNode {
+  return renderSummaryFor(ctx)
+}

package/src/components/cnpg/CNPGView.tsx

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { ResourcesSidebar, type SelectedKindInfo } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { useAPIResources } from '../../api/apiResources'
+import { usePinnedKinds } from '../../hooks/useFavorites'
+import { useResourceCounts } from '../../hooks/useResourceCounts'
+import { CNPGOverview } from './CNPGOverview'
+import { CNPGProtection } from './CNPGProtection'
+import { CNPGDeclarations } from './CNPGDeclarations'
+import { CNPGPooling } from './CNPGPooling'
+import { CNPGOperator } from './CNPGOperator'
+import { CNPGScreenGate } from './shared'
+import { CNPGDetailPage } from './CNPGDetailPage'
+import { decodeDrawerTrail, encodeDrawerTrail, parseCNPGRoute, sameResource } from './routes'
+import { useCNPGFleet, useCNPGSidebarWorkspace } from './useCNPGSidebarWorkspace'
+
+interface CNPGViewProps {
+  namespaces: string[]
+  selectedResource: SelectedResource | null
+  onOpenResource: (resource: SelectedResource) => void
+  onCloseResource: () => void
+  onClearNamespaces: () => void
+}
+
+/**
+ * The CloudNativePG workspace. Lives inside Resources (the rail keeps
+ * Resources highlighted) and renders the same Resources sidebar, with the
+ * workspace destinations above the exact CNPG kinds.
+ *
+ * The drawer is the app's single resource drawer. `?drawer=` backs it so a
+ * refresh, a shared link and browser Back restore the inspected object.
+ */
+export function CNPGView({ namespaces, selectedResource, onOpenResource, onCloseResource, onClearNamespaces }: CNPGViewProps) {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const route = parseCNPGRoute(location.pathname)
+  const { data: apiResources } = useAPIResources()
+  const { data: counts } = useResourceCounts(namespaces)
+  const { pinned, togglePin, isPinned } = usePinnedKinds()
+  const sidebarWorkspace = useCNPGSidebarWorkspace({
+    apiResources,
+    namespaces,
+    active: { screen: route.screen, child: route.detail ? { label: route.detail.name, title: `${route.detail.plural} ${route.detail.namespace}/${route.detail.name}` } : undefined },
+  })
+  const { query, fleet } = useCNPGFleet(namespaces)
+
+  const drawerParam = searchParams.get('drawer')
+  const trail = useMemo(() => decodeDrawerTrail(drawerParam), [drawerParam])
+  const drawerTarget = trail.length > 0 ? trail[trail.length - 1] : null
+
+  // Two-way sync between ?drawer= and the app drawer. Whichever side changed
+  // since the last sync wins, so URL navigation (Back, a pasted link) opens the
+  // drawer and drawer navigation (close, a link inside it) rewrites the URL.
+  const lastSynced = useRef<string | null>(null)
+  const selectedKey = selectedResource ? encodeDrawerTrail([selectedResource]) : ''
+  const targetKey = drawerTarget ? encodeDrawerTrail([drawerTarget]) : ''
+  useEffect(() => {
+    if (targetKey !== (lastSynced.current ?? '')) {
+      lastSynced.current = targetKey
+      if (drawerTarget && !sameResource(drawerTarget, selectedResource)) onOpenResource(drawerTarget)
+      else if (!drawerTarget && selectedResource) onCloseResource()
+      return
+    }
+    if (selectedKey !== targetKey) {
+      lastSynced.current = selectedKey
+      const params = new URLSearchParams(searchParams)
+      if (!selectedResource) {
+        params.delete('drawer')
+      } else {
+        const idx = trail.findIndex((r) => sameResource(r, selectedResource))
+        const next = idx >= 0 ? trail.slice(0, idx + 1) : [...trail, selectedResource]
+        params.set('drawer', encodeDrawerTrail(next))
+      }
+      setSearchParams(params, { replace: true, state: location.state })
+    }
+  }, [targetKey, selectedKey]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const inspect = useCallback(
+    (resource: SelectedResource) => {
+      const params = new URLSearchParams(searchParams)
+      params.set('drawer', encodeDrawerTrail([resource]))
+      setSearchParams(params, { replace: true, state: location.state })
+    },
+    [searchParams, setSearchParams, location.state],
+  )
+
+  const setParams = useCallback(
+    (update: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams)
+      for (const [k, v] of Object.entries(update)) {
+        if (v === null || v === '') params.delete(k)
+        else params.set(k, v)
+      }
+      setSearchParams(params, { replace: true, state: location.state })
+    },
+    [searchParams, setSearchParams, location.state],
+  )
+
+  const selectKind = useCallback(
+    (kind: SelectedKindInfo) => {
+      navigate(`/resources/${kind.name}${kind.group ? `?apiGroup=${encodeURIComponent(kind.group)}` : ''}`)
+    },
+    [navigate],
+  )
+
+  return (
+    <div className="flex h-full min-h-0 w-full">
+      <ResourcesSidebar
+        selectedKind={null}
+        onSelectedKindChange={selectKind}
+        apiResources={apiResources}
+        resourceCounts={counts?.counts}
+        resourceForbidden={counts?.forbidden}
+        resourceUnavailable={counts?.unavailable}
+        pinned={pinned}
+        togglePin={togglePin}
+        isPinned={(kind: string, group?: string) => isPinned(kind, group ?? '')}
+        categoryWorkspaces={sidebarWorkspace}
+      />
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-theme-base">
+        {route.detail ? (
+          <CNPGDetailPage target={route.detail} namespaces={namespaces} onOpenResource={onOpenResource} />
+        ) : (
+        <CNPGScreenGate query={query} fleet={fleet}>
+          {(data, readyFleet) => {
+            const props = {
+              data,
+              fleet: readyFleet,
+              namespaces,
+              searchParams,
+              onSetParams: setParams,
+              onInspect: inspect,
+              inspected: drawerTarget,
+              onClearNamespaces,
+            }
+            switch (route.screen) {
+              case 'protection':
+                return <CNPGProtection {...props} />
+              case 'declarations':
+                return <CNPGDeclarations {...props} />
+              case 'pooling':
+                return <CNPGPooling {...props} />
+              case 'operator':
+                return <CNPGOperator {...props} />
+              default:
+                return <CNPGOverview {...props} />
+            }
+          }}
+        </CNPGScreenGate>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/cnpg/paths.ts

@@ -0,0 +1,13 @@
+import { cnpgDetailPath } from './routes'
+
+export function cnpgClusterFullPath(namespace: string, name: string, ctx?: string, tab?: string): string {
+  return cnpgDetailPath({ plural: 'clusters', namespace, name }, ctx, tab)
+}
+
+/**
+ * The label for "← back" on the page a push lands on: the title of the page
+ * being left, which Radar keeps in the document title.
+ */
+export function currentPageLabel(): string {
+  return document.title.replace(/\s*·\s*Radar$/, '') || 'previous page'
+}