@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/CNPGClusterLogs.tsx

@@ -1,18 +1,23 @@
 import { useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { WorkloadLogsViewer, type WorkloadLogsFetchParams, type WorkloadLogsResult } from '@skyhook-io/k8s-ui'
-import { fetchJSON } from '../../api/client'
+import { useLocation, useSearchParams } from 'react-router-dom'
+import { PaneLoader, WorkloadLogsViewer, type WorkloadLogsFetchParams, type WorkloadLogsResult } from '@skyhook-io/k8s-ui'
+import { fetchJSON, useCapabilities, useRadarFeature } from '../../api/client'
 import { getApiBase, getCredentialsMode } from '../../api/config'
 import { useDesktopDownload } from '../../hooks/useDesktopDownload'
 import { useTheme } from '../../context/ThemeContext'
+import { CNPGIntervalBanner, useCNPGIntervalParams } from './CNPGTrends'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { cnpgClusterProblemsPath, cnpgWithinDetail } from './paths'
 
 function logsPath(namespace: string, name: string) {
   return `/cnpg/clusters/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/logs`
 }
 
-function query(params: WorkloadLogsFetchParams, tailDefault?: number) {
+export function query(params: WorkloadLogsFetchParams, tailDefault?: number, allContainersSupported = true) {
   const q = new URLSearchParams()
-  if (params.container) q.set('container', params.container)
+  const container = params.container || (allContainersSupported ? 'all' : '')
+  if (container && (container !== 'all' || allContainersSupported)) q.set('container', container)
   const tail = params.tailLines ?? tailDefault
   if (tail) q.set('tailLines', String(tail))
   if (params.sinceSeconds) q.set('sinceSeconds', String(params.sinceSeconds))
@@ -20,43 +25,95 @@ function query(params: WorkloadLogsFetchParams, tailDefault?: number) {
   return s ? `?${s}` : ''
 }
 
+// An interval is read from its start with both bounds applied server-side; the
+// viewer's line-count and since selectors do not apply to it.
+export function intervalQuery(params: WorkloadLogsFetchParams, since: string, until: string) {
+  const q = new URLSearchParams({ sinceTime: since, untilTime: until })
+  q.set('container', params.container || 'all')
+  return `?${q.toString()}`
+}
+
 /**
  * Logs merged from every instance Pod of a CloudNativePG Cluster. `?pod=`
- * preselects one instance (the fleet's "Logs" action and "Open instance logs").
+ * preselects one instance (the fleet's "Logs" action and "Open instance logs"),
+ * `?container=` one container (e.g. the plugin-barman-cloud sidecar);
+ * `?since=&until=` bounds them to an interval selected on a History chart.
  */
 export function CNPGClusterLogs({ namespace, name }: { namespace: string; name: string }) {
   const [searchParams] = useSearchParams()
+  const navigate = useCNPGNavigate()
+  const location = useLocation()
+  const { fleet } = useCNPGFleet([namespace])
+  const row = fleet?.rows.find((r) => r.namespace === namespace && r.name === name)
+  const problem = row?.problems.find((p) => p.job === 'initdb')
+  const overviewPath = `${cnpgClusterProblemsPath(namespace, name, searchParams.get('ctx') ?? undefined)}&tab=overview`
+  const inPlace = cnpgWithinDetail(location.pathname, location.search, overviewPath)
   const pod = searchParams.get('pod')
+  const container = searchParams.get('container')
+  const interval = useCNPGIntervalParams()
   const desktopDownload = useDesktopDownload()
   const { theme } = useTheme()
+  const since = interval?.since
+  const until = interval?.until
 
+  const { guard, support } = useRadarFeature('cnpgWorkspace')
+  const capabilities = useCapabilities()
+  const allContainersSupported = support === 'supported'
   const fetchAll = useCallback(
     (params: WorkloadLogsFetchParams) =>
-      fetchJSON<WorkloadLogsResult>(`${logsPath(namespace, name)}${query(params)}`, { signal: params.signal }),
-    [namespace, name],
+      since && until
+        ? guard(() => fetchJSON<WorkloadLogsResult>(`${logsPath(namespace, name)}${intervalQuery(params, since, until)}`, { signal: params.signal }))
+        : fetchJSON<WorkloadLogsResult>(`${logsPath(namespace, name)}${query(params, undefined, allContainersSupported)}`, { signal: params.signal }),
+    [guard, namespace, name, since, until, allContainersSupported],
   )
-  const createStream = useCallback(
+  const stream = useCallback(
     (params: WorkloadLogsFetchParams) =>
-      new EventSource(`${getApiBase()}${logsPath(namespace, name)}/stream${query(params, 50)}`, {
+      new EventSource(`${getApiBase()}${logsPath(namespace, name)}/stream${query(params, 50, allContainersSupported)}`, {
         withCredentials: getCredentialsMode() === 'include',
       }),
-    [namespace, name],
+    [namespace, name, allContainersSupported],
   )
 
+  if (interval && support === 'unknown') return capabilities.isPending && capabilities.fetchStatus !== 'paused'
+    ? <PaneLoader label="Checking interval support…" className="flex-1" />
+    : <div className="space-y-2 p-3">
+        <CNPGIntervalBanner since={interval.since} until={interval.until} note="Interval log support could not be checked. Clear this interval to read ordinary logs." onClear={interval.clear} />
+        <button type="button" className="btn-secondary" disabled={capabilities.isFetching || capabilities.fetchStatus === 'paused'} onClick={() => void capabilities.refetch()}>{capabilities.fetchStatus === 'paused' ? 'Waiting for connection' : capabilities.isFetching ? 'Checking…' : 'Retry'}</button>
+      </div>
+
   return (
-    <div className="h-full">
-      <WorkloadLogsViewer
-        key={pod ?? ''}
-        name={name}
-        fetchAll={fetchAll}
-        createStream={createStream}
-        overrideDownload={desktopDownload}
-        forceDark={theme === 'dark' ? true : undefined}
-        // Light logs on a dark app are never wanted: dark theme pins the palette,
-        // light theme only sets where it starts and leaves the toggle available.
-        defaultDark={false}
-        initialPods={pod ? [pod] : undefined}
-      />
+    <div className="flex h-full flex-col">
+      {interval && (
+        <div className="px-3 pt-3">
+          <CNPGIntervalBanner
+            since={interval.since}
+            until={interval.until}
+            note={support === 'unsupported' ? 'This interval needs a newer Radar. Clear it to read ordinary logs.' : 'Selected on a History chart. Lines from the start of the interval, up to 64 KiB per instance; the line-count selector does not apply and streaming is off.'}
+            onClear={interval.clear}
+          />
+        </div>
+      )}
+      <div className="min-h-0 flex-1">
+        <WorkloadLogsViewer
+          key={`${pod ?? ''}|${container ?? ''}|${since ?? ''}|${until ?? ''}|${allContainersSupported}`}
+          name={name}
+          allowAllContainers={allContainersSupported}
+          disableSourceControlsWithoutSource
+          emptySourceState={<div className="space-y-2 text-sm text-theme-text-secondary">
+            <p>No instance log source yet. {row?.hibernated ? 'The Cluster is hibernated.' : problem?.title}</p>
+            <button type="button" className="text-accent-text hover:underline" onClick={() => navigate(inPlace ?? overviewPath, { replace: !!inPlace, state: location.state })}>{problem ? 'See Overview’s problem →' : 'Open Overview →'}</button>
+          </div>}
+          fetchAll={fetchAll}
+          createStream={interval ? undefined : stream}
+          overrideDownload={desktopDownload}
+          forceDark={theme === 'dark' ? true : undefined}
+          // Light logs on a dark app are never wanted: dark theme pins the palette,
+          // light theme only sets where it starts and leaves the toggle available.
+          defaultDark={false}
+          initialPods={pod ? [pod] : undefined}
+          initialContainer={container && container !== 'all' ? container : allContainersSupported ? undefined : 'postgres'}
+        />
+      </div>
     </div>
   )
 }

package/src/components/cnpg/CNPGClusterTabs.test.tsx

@@ -0,0 +1,152 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, expect, it, vi } from 'vitest'
+import type { CNPGDimension } from '@skyhook-io/k8s-ui'
+import { CNPGBackupsTab, CNPGStorageTab } from './CNPGClusterTabs'
+const state = vi.hoisted(() => ({
+  coverage: 'full',
+  primary: {} as any,
+  storageProps: {} as any,
+  schedules: [] as any[],
+  dimensions: [] as CNPGDimension[],
+}))
+const cluster = {
+  apiVersion: 'postgresql.cnpg.io/v1',
+  kind: 'Cluster',
+  metadata: { name: 'pg', namespace: 'db' },
+  status: { currentPrimary: 'pg-1' } as any,
+  spec: {} as any,
+}
+vi.mock('../../api/client', () => ({ useRadarFeature: () => ({ support: 'supported' }) }))
+vi.mock('../../api/cnpg', () => ({
+  useCNPGRuntime: () => ({ data: { permission: { proxy: 'denied' }, instances: [state.primary] } }),
+}))
+vi.mock('./useCNPGClusterAssessment', () => ({
+  useCNPGClusterAssessment: () => ({
+    dimensions: state.dimensions,
+    row: {
+      cluster,
+      problems: [],
+      protection: { walArchiving: { text: 'Not archived: no destination configured', tone: 'neutral' } },
+    },
+    query: {
+      data: { coverage: { backups: { state: state.coverage } }, objects: { backups: [], clusters: [cluster] } },
+    },
+    runtime: {},
+  }),
+}))
+vi.mock('./useCNPGSidebarWorkspace', () => ({
+  useCNPGFleet: () => ({
+    query: {
+      data: {
+        installed: true,
+        coverage: { backups: { state: state.coverage } },
+        objects: { backups: [], scheduledBackups: state.schedules },
+      },
+    },
+    fleet: { rows: [{ name: 'pg', namespace: 'db', cluster }] },
+  }),
+}))
+vi.mock('../../api/cnpg-recovery', () => ({ useCNPGRestoreCapability: () => ({ data: { allowed: true } }) }))
+vi.mock('./CNPGProtection', () => ({ CNPGProtection: () => null }))
+vi.mock('./CNPGArchivingRepair', () => ({ CNPGArchivingRepair: () => null }))
+vi.mock('./CNPGStorage', () => ({
+  CNPGStorage: (props: any) => {
+    state.storageProps = props
+    return null
+  },
+}))
+vi.mock('./recovery/CNPGRestoreButton', () => ({
+  CNPGRestoreButton: ({ disabledReason }: { disabledReason?: string }) => (
+    <button disabled={!!disabledReason}>Restore</button>
+  ),
+}))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+beforeEach(() => {
+  state.coverage = 'full'
+  state.primary = {}
+  state.schedules = []
+  state.dimensions = []
+  cluster.spec = {}
+  delete cluster.status.lastSuccessfulBackup
+})
+it('passes primary identity through to Storage when database reads are denied', () => {
+  state.primary = { pod: 'pg-1', role: 'primary', metrics: { state: 'denied' } }
+  renderToStaticMarkup(<CNPGStorageTab namespace="db" name="pg" />)
+  expect(state.storageProps.primary).toBe(state.primary)
+  expect(state.storageProps.runtime.data.permission.proxy).toBe('denied')
+})
+it('uses the shared restore assessment for the Backups button', () => {
+  const render = () =>
+    renderToStaticMarkup(
+      <MemoryRouter>
+        <CNPGBackupsTab namespace="db" name="pg" onInspect={() => {}} />
+      </MemoryRouter>,
+    )
+  state.coverage = 'full'
+  expect(render()).toContain('disabled=""')
+  expect(render()).toContain('Nothing to restore from yet')
+  state.coverage = 'denied'
+  expect(render()).not.toContain('disabled=""')
+  expect(render()).not.toContain('Nothing to restore from yet')
+})
+
+it('starts a single guided setup path beside restore, without treating a schedule as protection', () => {
+  state.schedules = [{ metadata: { name: 'pg-nightly', namespace: 'db' }, spec: { cluster: { name: 'pg' } } }]
+  const html = renderToStaticMarkup(
+    <MemoryRouter>
+      <CNPGBackupsTab namespace="db" name="pg" onInspect={() => {}} onOpenYaml={() => {}} />
+    </MemoryRouter>,
+  )
+  expect(html).toContain('Set up backups…')
+  expect(html).toContain('Nothing to restore from yet')
+  expect(html).not.toContain('Configure spec.backup.barmanObjectStore')
+})
+
+it('keeps the protection verdict ahead of setup without repeating the blocker', () => {
+  state.schedules = [{ metadata: { name: 'pg-nightly', namespace: 'db' }, spec: { cluster: { name: 'pg' } } }]
+  state.dimensions = [
+    {
+      id: 'protection',
+      label: 'Backups',
+      tone: 'degraded',
+      text: 'Backup schedule pg-nightly cannot run: no backup destination',
+      source: 'ScheduledBackup method against its target Cluster spec',
+    },
+  ]
+  const html = renderToStaticMarkup(
+    <MemoryRouter>
+      <CNPGBackupsTab namespace="db" name="pg" onInspect={() => {}} onOpenYaml={() => {}} />
+    </MemoryRouter>,
+  )
+  expect(html.match(/cannot run:/g)).toHaveLength(1)
+  expect(html.indexOf(state.dimensions[0].text)).toBeLessThan(html.indexOf('Set up backups…'))
+})
+
+it('does not invent a missing destination for an enabled third-party plugin', () => {
+  cluster.spec.plugins = [{ name: 'third-party-backup' }]
+  const html = renderToStaticMarkup(
+    <MemoryRouter>
+      <CNPGBackupsTab namespace="db" name="pg" onInspect={() => {}} />
+    </MemoryRouter>,
+  )
+  expect(html).not.toContain('Configure spec.backup')
+  delete cluster.spec.plugins
+})
+
+it('passes recovery certainty instead of equating a destination with a usable backup', () => {
+  const renderStorage = () => renderToStaticMarkup(<CNPGStorageTab namespace="db" name="pg" />)
+  state.coverage = 'full'
+  cluster.spec.backup = { barmanObjectStore: { destinationPath: 's3://backups' } }
+  renderStorage()
+  expect(state.storageProps.restoreState).toBe('none')
+  cluster.status.lastSuccessfulBackup = '2026-10-01T00:00:00Z'
+  renderStorage()
+  expect(state.storageProps.restoreState).toBe('available')
+  delete cluster.status.lastSuccessfulBackup
+  state.coverage = 'denied'
+  renderStorage()
+  expect(state.storageProps.restoreState).toBe('unknown')
+  state.coverage = 'full'
+  delete cluster.spec.backup
+})

package/src/components/cnpg/CNPGClusterTabs.tsx

@@ -0,0 +1,187 @@
+import { useRef, type ReactNode } from 'react'
+import type { RenderDiagnoseAction } from '../../context/DiagnoseCustomization'
+import { useSearchParams } from 'react-router-dom'
+import { CNPGDimensionMark, CNPGDimensionVerdict, CNPGServingStatus, coverageReadable, toneTextClass, type CNPGDimension, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { useCNPGRuntime } from '../../api/cnpg'
+import { CNPGStorage } from './CNPGStorage'
+import { CNPGArchivingRepair } from './CNPGArchivingRepair'
+import { CNPGProtection } from './CNPGProtection'
+import { CNPGRestoreValidation } from './recovery/CNPGRestoreValidation'
+import { CNPGRestoreButton } from './recovery/CNPGRestoreButton'
+import { assessRestoreSources } from './recovery/restoreModel'
+import { useCNPGRestoreCapability } from '../../api/cnpg-recovery'
+import { CNPGScreenGate } from './shared'
+import { useCNPGClusterAssessment } from './useCNPGClusterAssessment'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { CNPGProtectionSetup } from './protection/CNPGProtectionSetup'
+
+/** The health mark beside a tab: the same assessment the Overview explains, for the dimension that tab holds. */
+export function CNPGTabMark({ namespace, name, id }: { namespace: string; name: string; id: CNPGDimension['id'] }) {
+  const { dimensions } = useCNPGClusterAssessment(namespace, name)
+  const dimension = dimensions?.find((d) => d.id === id)
+  return dimension ? <CNPGDimensionMark dimension={dimension} /> : null
+}
+
+/** Why a tab carries its mark, as the tab's first line; nothing when the dimension is fine. */
+export function CNPGTabVerdict({ namespace, name, id, className, alwaysShow }: { namespace: string; name: string; id: CNPGDimension['id']; className?: string; alwaysShow?: boolean }) {
+  const { dimensions } = useCNPGClusterAssessment(namespace, name)
+  const dimension = dimensions?.find((d) => d.id === id)
+  return dimension ? <CNPGDimensionVerdict dimension={dimension} className={className} alwaysShow={alwaysShow} /> : null
+}
+
+/** Whether the cluster serves writes, on its title line, opening the tab that explains it. */
+export function CNPGClusterServing({ namespace, name, onSelect }: { namespace: string; name: string; onSelect: () => void }) {
+  const { dimensions } = useCNPGClusterAssessment(namespace, name)
+  const dimension = dimensions?.find((d) => d.id === 'serving')
+  return dimension ? <CNPGServingStatus dimension={dimension} onSelect={onSelect} /> : null
+}
+
+/** Storage: volumes, what holds WAL, and resize, with the history of both one click away. */
+export function CNPGStorageTab({
+  namespace,
+  name,
+  onOpenHistory,
+  onOpenReplication,
+}: {
+  namespace: string
+  name: string
+  onOpenHistory?: () => void
+  onOpenReplication?: () => void
+}) {
+  const runtime = useCNPGRuntime(namespace, name)
+  const { row, query } = useCNPGClusterAssessment(namespace, name)
+  const clusterObject = row?.cluster
+  const primary = runtime.data?.instances.find((i) => i.role === 'primary')
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <h2 className="text-sm font-semibold text-theme-text-primary">Volumes and WAL</h2>
+        {onOpenHistory && (
+          <button type="button" onClick={onOpenHistory} className="ml-auto text-xs text-accent-text hover:underline">
+            Storage history →
+          </button>
+        )}
+      </div>
+      <CNPGTabVerdict namespace={namespace} name={name} id="storage" />
+      {row && <SlotRelief row={row} onOpenReplication={onOpenReplication} />}
+      <CNPGStorage namespace={namespace} name={name} primary={primary} runtime={runtime} clusterObject={clusterObject} restoreState={assessRestoreSources(query.data, namespace, clusterObject).recoveryState} walArchiving={row?.protection.walArchiving} />
+    </div>
+  )
+}
+
+/**
+ * What to do about WAL an inactive slot holds: the standby it is kept for,
+ * whether that standby receives anything, and the two ways the WAL is freed.
+ */
+function SlotRelief({ row, onOpenReplication }: { row: CNPGFleetRow; onOpenReplication?: () => void }) {
+  const slots = row.problems.filter((p) => p.reason === 'CNPGInactiveSlot')
+  if (slots.length === 0) return null
+  const gaps = new Set(row.problems.filter((p) => p.reason === 'CNPGStandbyNotReceiving').map((p) => p.subject.name))
+  return (
+    <section className="rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      {slots.map((p) => {
+        const standby = p.instance
+        return (
+          <div key={p.id} className="space-y-1 text-sm">
+            <div className={toneTextClass('degraded')}>{p.title}</div>
+            <p className="text-theme-text-secondary">
+              The primary keeps that WAL until {standby ?? 'the slot’s consumer'} catches up or the slot is dropped.
+              {standby && gaps.has(standby) ? ` ${standby} is not streaming from the primary, and the slot advances only while it does — even if ${standby} replays WAL from the archive meanwhile.` : ''}
+            </p>
+            {standby && (
+              <p className="text-theme-text-secondary">
+                To free it, get {standby} streaming again — restart it, after checking its logs for why it stopped — or destroy it so CloudNativePG recreates it from
+                a fresh copy of the primary; the operator drops the HA slot of an instance that no longer exists.
+              </p>
+            )}
+            {onOpenReplication && (
+              <button type="button" onClick={onOpenReplication} className="text-xs text-accent-text hover:underline">
+                {standby ? `${standby} on Replication →` : 'Replication →'}
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </section>
+  )
+}
+
+/** Backups: this cluster's recovery evidence, runs, schedules and destination, plus restore validation once it was restored. */
+export function CNPGBackupsTab({
+  namespace,
+  name,
+  onInspect,
+  onOpenLogs,
+  onOpenOperator,
+  onOpenYaml,
+}: {
+  namespace: string
+  name: string
+  onInspect: (r: SelectedResource) => void
+  onOpenLogs?: (pod: string, container: string) => void
+  onOpenOperator?: () => void
+  onOpenYaml?: () => void
+}) {
+  const { query, fleet } = useCNPGFleet([namespace])
+  const { row, runtime } = useCNPGClusterAssessment(namespace, name)
+  const primary = runtime.data?.instances.find((i) => i.role === 'primary')
+  const [searchParams] = useSearchParams()
+  const archivingRepairRef = useRef<HTMLDivElement>(null)
+  const restore = useCNPGRestoreCapability(namespace)
+  const restoreBlocked = restore.data ? (restore.data.allowed ? undefined : restore.data.reason ?? 'Not allowed') : restore.isLoading ? 'Checking whether you can create a Cluster here…' : undefined
+  return (
+    <CNPGScreenGate query={query} fleet={fleet}>
+      {(data, readyFleet) => {
+        const cluster = readyFleet.rows.find((r) => r.namespace === namespace && r.name === name)?.cluster
+        const nothing = assessRestoreSources(data, namespace, cluster).disabledReason
+        return (
+        <div className="flex min-h-0 flex-1 flex-col">
+          <CNPGTabVerdict namespace={namespace} name={name} id="protection" className="px-4 pt-4" />
+          <div className="flex flex-wrap items-center gap-2 px-4 pt-3">
+            <CNPGProtectionSetup key={`${namespace}/${name}`} namespace={namespace} name={name} onInspect={onInspect} onOpenYaml={onOpenYaml} onOpenOperator={onOpenOperator} onOpenArchivingRepair={() => archivingRepairRef.current?.scrollIntoView({ block: 'start' })} />
+            <CNPGRestoreButton namespace={namespace} entry={{ kind: 'cluster', name }} disabledReason={restoreBlocked ?? nothing} />
+            <span className="text-xs text-theme-text-tertiary">{restoreBlocked ?? nothing ?? 'Restores into a new Cluster beside this one; this cluster is not changed.'}</span>
+          </div>
+          {row && (
+            <div ref={archivingRepairRef} className="px-4 pt-4">
+              <CNPGArchivingRepair
+                row={row}
+                primary={primary}
+                objectStores={data.objects.objectStores ?? []}
+                backups={coverageReadable(data.coverage?.backups ?? { state: 'notInstalled' }, namespace) ? (data.objects.backups ?? []) : null}
+                onOpenLogs={onOpenLogs}
+                onOpenOperator={onOpenOperator}
+                onInspect={onInspect}
+              />
+            </div>
+          )}
+          {readyFleet.rows.find((r) => r.namespace === namespace && r.name === name)?.cluster?.spec?.bootstrap?.recovery && (
+            <CNPGRestoreValidation namespace={namespace} name={name} />
+          )}
+          <CNPGProtection
+            data={data}
+            fleet={readyFleet}
+            namespaces={[namespace]}
+            searchParams={searchParams}
+            onSetParams={() => {}}
+            onInspect={onInspect}
+            inspected={null}
+            onClearNamespaces={() => {}}
+            scopeCluster={{ namespace, name }}
+          />
+        </div>
+        )
+      }}
+    </CNPGScreenGate>
+  )
+}
+
+export function CNPGInvestigationAction({ namespace, name, render, context }: {
+  namespace: string; name: string; render: RenderDiagnoseAction; context: Parameters<RenderDiagnoseAction>[0]
+}): ReactNode {
+  const { row, dimensions } = useCNPGClusterAssessment(namespace, name)
+  const problem = !!row?.problems.length || dimensions?.some((d) => ['degraded', 'alert', 'unhealthy'].includes(d.tone))
+  const assessed = !!row && !!dimensions && dimensions.every((d) => d.tone !== 'unknown')
+  return render({ ...context, health: problem ? 'problem' : assessed ? 'healthy' : 'unknown' })
+}

package/src/components/cnpg/CNPGClustersKindView.tsx

@@ -0,0 +1,46 @@
+import type { SelectedResource } from '../../types'
+import { CNPGOverview } from './CNPGOverview'
+import { CNPGScreenGate } from './shared'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { useCNPGScreenParams } from './useCNPGScreenParams'
+
+/**
+ * The CloudNativePG Cluster kind's list on its Resources route: the Clusters
+ * view of /cnpg, over the same data and URL parameters, inspecting rows in the
+ * Resources page's drawer.
+ */
+export function CNPGClustersKindView({
+  namespaces,
+  inspected,
+  onInspect,
+  onClearNamespaces,
+  onCreate,
+}: {
+  namespaces: string[]
+  inspected: SelectedResource | null
+  onInspect: (resource: SelectedResource) => void
+  onClearNamespaces: () => void
+  onCreate: () => void
+}) {
+  const { query, fleet } = useCNPGFleet(namespaces)
+  const [searchParams, setParams] = useCNPGScreenParams()
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-theme-base">
+      <CNPGScreenGate query={query} fleet={fleet}>
+        {(data, readyFleet) => (
+          <CNPGOverview
+            data={data}
+            fleet={readyFleet}
+            namespaces={namespaces}
+            searchParams={searchParams}
+            onSetParams={setParams}
+            onInspect={onInspect}
+            inspected={inspected}
+            onClearNamespaces={onClearNamespaces}
+            onCreate={onCreate}
+          />
+        )}
+      </CNPGScreenGate>
+    </div>
+  )
+}