@skyhook-io/radar-app 1.16.2 → 1.16.3

package/src/components/cnpg/CNPGOperator.tsx

@@ -0,0 +1,234 @@
+import { useMemo } from 'react'
+import { Badge, getCNPGImageCatalogEntries, isApiGroup, PaneLoader, Tooltip } from '@skyhook-io/k8s-ui'
+import { useCNPGOperator, type CNPGOperatorComponent, type CNPGOperatorConfig } from '../../api/cnpg'
+import { Notice } from '../capacity/shared'
+import {
+  CNPGWorkspaceHeader,
+  CoverageNotice,
+  coverageEmpty,
+  worstCoverage,
+  Mono,
+  ScreenBody,
+  SectionTable,
+  Sub,
+  cnpgResource,
+  type CNPGScreenProps,
+} from './shared'
+
+interface CatalogRow {
+  key: string
+  kind: 'ImageCatalog' | 'ClusterImageCatalog'
+  namespace: string
+  name: string
+  images: { major: number; image: string }[]
+  users: { namespace: string; name: string; major?: number }[]
+}
+
+function readiness(c: CNPGOperatorComponent) {
+  if (c.readyReplicas === null || c.replicas === null) return <span className="text-theme-text-tertiary">Unknown</span>
+  if (c.replicas === 0) return <Badge severity="warning" size="sm">Scaled to 0</Badge>
+  const ok = c.readyReplicas >= c.replicas
+  return <Badge severity={ok ? 'success' : c.readyReplicas === 0 ? 'error' : 'warning'} size="sm">{c.readyReplicas}/{c.replicas} ready</Badge>
+}
+
+export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenProps) {
+  const operator = useCNPGOperator()
+
+  const catalogs = useMemo<CatalogRow[]>(() => {
+    const out: CatalogRow[] = []
+    const clusters = fleet.rows
+    for (const [key, kind] of [['imageCatalogs', 'ImageCatalog'], ['clusterImageCatalogs', 'ClusterImageCatalog']] as const) {
+      for (const cat of data.objects[key] ?? []) {
+        if (!isApiGroup(cat.apiVersion, 'postgresql.cnpg.io')) continue
+        const ns = cat.metadata?.namespace ?? ''
+        const name = cat.metadata?.name ?? ''
+        const users = clusters
+          .filter((r) => {
+            const ref = r.cluster?.spec?.imageCatalogRef
+            if (!ref || ref.name !== name) return false
+            const refKind = ref.kind || 'ImageCatalog'
+            if (refKind !== kind) return false
+            return kind === 'ClusterImageCatalog' || r.namespace === ns
+          })
+          .map((r) => ({ namespace: r.namespace, name: r.name, major: r.cluster?.spec?.imageCatalogRef?.major }))
+        out.push({ key: `${kind}/${ns}/${name}`, kind, namespace: ns, name, images: getCNPGImageCatalogEntries(cat), users })
+      }
+    }
+    return out
+  }, [data.objects, fleet.rows])
+
+  const direct = fleet.rows.filter((r) => !r.cluster?.spec?.imageCatalogRef)
+  const op = operator.data
+  const coverageGaps = op
+    ? (['deployments', 'services'] as const).filter((k) => op.coverage[k]?.state !== 'full')
+    : []
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <CNPGWorkspaceHeader
+        title="Operator"
+        subtitle="Operator and plugin workloads, their versions, image catalogs and operator configuration."
+      />
+      <ScreenBody>
+        <CoverageNotice fleet={fleet} data={data} />
+        {operator.isLoading && !op ? (
+          <PaneLoader label="Loading operator…" className="h-32" />
+        ) : !op ? (
+          <Notice>Operator details could not be loaded{operator.error instanceof Error ? `: ${operator.error.message}` : '.'}</Notice>
+        ) : (
+          <>
+            {coverageGaps.length > 0 && (
+              <Notice>
+                Some workloads are not readable ({coverageGaps.map((k) => `${k}: ${op.coverage[k].state}`).join(', ')}), so an operator or plugin running in those namespaces may be missing below.
+              </Notice>
+            )}
+            <SectionTable
+              title="Operator and plugins"
+              columns={[
+                {
+                  header: 'Component',
+                  width: '30%',
+                  cell: (c: CNPGOperatorComponent) => (
+                    <>
+                      <div className="font-medium">{c.role === 'operator' ? 'CloudNativePG operator' : c.pluginName ?? 'Plugin'}</div>
+                      <Sub>{c.role === 'operator' ? 'controller manager' : 'CNPG-I plugin'}</Sub>
+                    </>
+                  ),
+                },
+                {
+                  header: 'Version',
+                  width: '14%',
+                  cell: (c) => (
+                    <Tooltip content={c.image || 'No image recorded'}>
+                      {c.version ? <Mono>{c.version}</Mono> : <span className="text-theme-text-tertiary">Unknown</span>}
+                    </Tooltip>
+                  ),
+                },
+                { header: 'Ready', width: '14%', cell: readiness },
+                {
+                  header: 'Workload',
+                  width: '42%',
+                  cell: (c) =>
+                    c.deployment ? (
+                      <>Deployment <Mono>{c.deployment}</Mono><Sub>{c.namespace}</Sub></>
+                    ) : (
+                      <>
+                        <span className="text-theme-text-tertiary">No Deployment matches its Service</span>
+                        <Sub>{c.namespace}</Sub>
+                      </>
+                    ),
+                },
+              ]}
+              rows={op.components}
+              rowKey={(c) => `${c.namespace}/${c.deployment}/${c.pluginName ?? c.role}`}
+              rowResource={(c) => (c.deployment ? { kind: 'deployments', group: 'apps', namespace: c.namespace, name: c.deployment } : null)}
+              onInspect={onInspect}
+              inspected={inspected}
+              empty="No operator or plugin Deployments found in the namespaces you can read."
+            />
+          </>
+        )}
+
+        <SectionTable
+          title="Image catalogs"
+          columns={[
+            { header: 'Catalog', width: '22%', cell: (c: CatalogRow) => <>{c.name}<Sub>{c.kind}</Sub></> },
+            { header: 'Scope', width: '14%', cell: (c) => (c.kind === 'ClusterImageCatalog' ? 'Cluster-wide' : `Namespace ${c.namespace}`) },
+            {
+              header: 'Images',
+              width: '40%',
+              cell: (c) =>
+                c.images.length === 0 ? (
+                  <span className="text-theme-text-tertiary">None</span>
+                ) : (
+                  <div className="space-y-0.5">
+                    {c.images.map((i) => (
+                      <div key={i.major} className="flex gap-2">
+                        <span className="w-6 shrink-0 font-mono text-theme-text-tertiary">{i.major}</span>
+                        <Mono>{i.image}</Mono>
+                      </div>
+                    ))}
+                  </div>
+                ),
+            },
+            {
+              header: 'Used by',
+              width: '24%',
+              cell: (c) =>
+                c.users.length === 0 ? (
+                  <span className="text-theme-text-tertiary">No visible cluster</span>
+                ) : (
+                  c.users.map((u) => `${u.name}${u.major !== undefined ? ` (${u.major})` : ''}`).join(', ')
+                ),
+            },
+          ]}
+          rows={catalogs}
+          rowKey={(c) => c.key}
+          rowResource={(c) => cnpgResource(c.kind === 'ImageCatalog' ? 'imagecatalogs' : 'clusterimagecatalogs', c.namespace, c.name)}
+          onInspect={onInspect}
+          inspected={inspected}
+          empty={coverageEmpty(worstCoverage(data.coverage.imageCatalogs, data.coverage.clusterImageCatalogs), 'image catalogs')}
+          footer={
+            <>
+              Used-by lists only clusters you can see; the catalog detail asks the server for every user.
+              {direct.length > 0 && <> Not using a catalog (direct <span className="font-mono">imageName</span>): {direct.map((r) => r.name).join(', ')}.</>}
+            </>
+          }
+        />
+
+        {op && op.config.length > 0 && (
+          <section>
+            <h2 className="mb-2 text-sm font-semibold text-theme-text-primary">Operator configuration</h2>
+            <div className="space-y-3">
+              {op.config.map((c) => (
+                <ConfigBlock key={`${c.kind}/${c.namespace}/${c.name}`} config={c} onInspect={onInspect} />
+              ))}
+            </div>
+          </section>
+        )}
+      </ScreenBody>
+    </div>
+  )
+}
+
+function ConfigBlock({ config, onInspect }: { config: CNPGOperatorConfig; onInspect: CNPGScreenProps['onInspect'] }) {
+  const open = () => onInspect({ kind: config.kind === 'ConfigMap' ? 'configmaps' : 'secrets', group: '', namespace: config.namespace, name: config.name })
+  const title = (
+    <div className="flex flex-wrap items-baseline gap-x-2 border-b border-theme-border px-4 py-2.5">
+      <span className="text-xs text-theme-text-tertiary">{config.kind}</span>
+      <button type="button" onClick={open} className="font-mono text-sm text-accent-text hover:underline">{config.name}</button>
+      <span className="text-xs text-theme-text-tertiary">
+        {config.namespace} · {config.purpose === 'monitoring' ? 'monitoring queries' : 'operator settings'}
+      </span>
+    </div>
+  )
+  let body
+  if (config.kind === 'Secret') {
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-secondary">Referenced by the operator. Secret contents are not shown here.</div>
+  } else if (config.exists === false) {
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-secondary">Referenced but does not exist; the operator runs with its defaults.</div>
+  } else if (!config.readable) {
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-tertiary">{config.reason ?? 'Not readable with your access.'}</div>
+  } else {
+    const entries = Object.entries(config.data ?? {})
+    body =
+      entries.length === 0 ? (
+        <div className="px-4 py-2.5 text-sm text-theme-text-tertiary">No keys set.</div>
+      ) : (
+        <dl className="grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)] gap-x-4 gap-y-1.5 px-4 py-2.5 text-sm">
+          {entries.map(([k, v]) => (
+            <div key={k} className="contents">
+              <dt className="min-w-0 font-mono text-theme-text-secondary"><Tooltip content={k} wrapperClassName="block min-w-0"><span className="block truncate">{k}</span></Tooltip></dt>
+              <dd className="break-all font-mono text-theme-text-primary">{v.length > 400 ? `${v.slice(0, 400)}…` : v}</dd>
+            </div>
+          ))}
+        </dl>
+      )
+  }
+  return (
+    <div className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+      {title}
+      {body}
+    </div>
+  )
+}

package/src/components/cnpg/CNPGOverview.tsx

@@ -0,0 +1,307 @@
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { clsx } from 'clsx'
+import { ArrowRight, Database, FileText, Search } from 'lucide-react'
+import {
+  CNPG_PROBLEM_CATEGORIES,
+  FactValue,
+  StatusDot,
+  Tooltip,
+  toneTextClass,
+  type CNPGFleetRow,
+  type CNPGProblemCategory,
+} from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { useConnection } from '../../context/ConnectionContext'
+import { EmptyState, ROW_HOVER, TABLE_HEAD, TABLE_WRAP, TBODY, TD, TH } from '../capacity/shared'
+import { CNPGWorkspaceHeader, CoverageNotice, FilterChips, type CNPGScreenProps } from './shared'
+import { cnpgClusterFullPath, currentPageLabel } from './paths'
+import { sameResource } from './routes'
+
+type Filter = 'attention' | 'all'
+
+function InstancePills({ row }: { row: CNPGFleetRow }) {
+  if (row.pods.length === 0) return null
+  return (
+    <div className="mt-1 flex flex-wrap gap-1">
+      {row.pods.map((p) => {
+        const tone = p.ready === true ? 'healthy' : p.ready === false ? 'unhealthy' : 'unknown'
+        return (
+          <Tooltip key={p.name} content={`${p.name} · ${p.role} · ${p.ready === true ? 'ready' : p.ready === false ? 'not ready' : 'readiness unknown'}`}>
+            <span className="inline-flex items-center gap-1 rounded border border-theme-border bg-theme-base px-1 text-[10.5px] font-mono text-theme-text-secondary">
+              <StatusDot tone={tone} size="xs" />
+              {p.role === 'primary' ? 'P' : p.role === 'replica' ? 'R' : '?'}
+            </span>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+}
+
+function AttentionCell({ row }: { row: CNPGFleetRow }) {
+  const top = row.problems.find((p) => p.severity !== 'posture') ?? row.problems[0]
+  if (!top) return <span className="text-theme-text-tertiary">—</span>
+  const tone = top.severity === 'critical' ? 'unhealthy' : top.severity === 'warning' ? 'degraded' : 'neutral'
+  const more = row.problems.length - 1
+  return (
+    <div className="min-w-0">
+      <Tooltip content={top.title} wrapperClassName="block">
+        <div className={clsx('line-clamp-2 break-words', toneTextClass(tone))}>{top.title}</div>
+      </Tooltip>
+      {more > 0 && <div className="text-xs text-theme-text-tertiary">+{more} more</div>}
+    </div>
+  )
+}
+
+export function CNPGOverview({
+  data,
+  fleet,
+  namespaces,
+  searchParams,
+  onSetParams,
+  onInspect,
+  inspected,
+  onClearNamespaces,
+}: CNPGScreenProps) {
+  const navigate = useNavigate()
+  const { connection } = useConnection()
+  const q = searchParams.get('q') ?? ''
+  const cat = (searchParams.get('cat') as CNPGProblemCategory | null) ?? null
+  const rawFilter = searchParams.get('filter') as Filter | null
+  const filter: Filter = rawFilter ?? (fleet.attentionCount > 0 ? 'attention' : 'all')
+
+  const rows = useMemo(() => {
+    let list = fleet.rows
+    if (filter === 'attention') list = list.filter((r) => r.attention)
+    if (cat) list = list.filter((r) => r.categories.has(cat))
+    if (q) {
+      const needle = q.toLowerCase()
+      list = list.filter((r) => r.name.toLowerCase().includes(needle) || r.namespace.toLowerCase().includes(needle))
+    }
+    return list
+  }, [fleet, filter, cat, q])
+
+  const clustersCov = data.coverage.clusters
+  const total = fleet.rows.length
+  const context = connection.context || data.context
+
+  if (total === 0) {
+    const state = clustersCov?.state ?? 'notInstalled'
+    const empty =
+      state === 'denied'
+        ? { title: 'No access to PostgreSQL clusters', detail: 'Your identity cannot list CloudNativePG Clusters. Other CloudNativePG kinds may still be browsable under Resource kinds.' }
+        : state === 'syncing'
+          ? { title: 'Loading PostgreSQL clusters', detail: 'Radar is still syncing CloudNativePG Clusters from the API server.' }
+          : state === 'error'
+            ? { title: 'PostgreSQL clusters could not be read', detail: 'Reading CloudNativePG Clusters failed; see the Radar server log.' }
+            : state === 'partial'
+              ? { title: 'No visible PostgreSQL clusters', detail: 'None in the namespaces you can read. Clusters in namespaces you cannot list are not shown.' }
+              : namespaces.length > 0
+                ? { title: `No PostgreSQL clusters in ${context}`, detail: `None in namespace ${namespaces.join(', ')}. Clear the namespace filter to see the whole cluster.` }
+                : { title: `No PostgreSQL clusters in ${context}`, detail: 'The CloudNativePG CRDs are installed. Clusters, backups and declarations appear here once they exist.' }
+    return (
+      <div className="flex min-h-0 flex-1 flex-col">
+        <CNPGWorkspaceHeader title="Overview" />
+        <EmptyState
+          icon={Database}
+          title={empty.title}
+          detail={empty.detail}
+          action={
+            namespaces.length > 0 ? (
+              <button type="button" onClick={onClearNamespaces} className="mt-3 text-sm font-medium text-accent-text hover:underline">
+                Clear namespace filter
+              </button>
+            ) : undefined
+          }
+        />
+      </div>
+    )
+  }
+
+  const chips: { label: string; onClear: () => void }[] = []
+  if (cat) chips.push({ label: `Problem: ${CNPG_PROBLEM_CATEGORIES.find((c) => c.id === cat)?.label ?? cat}`, onClear: () => onSetParams({ cat: null }) })
+  if (q) chips.push({ label: `Search: ${q}`, onClear: () => onSetParams({ q: null }) })
+  if (namespaces.length > 0) chips.push({ label: `Namespace: ${namespaces.join(', ')}`, onClear: onClearNamespaces })
+
+  const segment = (id: Filter, label: string, n: number) => {
+    const on = filter === id
+    return (
+      <button
+        key={id}
+        type="button"
+        role="tab"
+        aria-selected={on}
+        onClick={() => onSetParams({ filter: id })}
+        className={clsx(
+          'inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-sm font-medium transition-colors',
+          on ? 'bg-theme-surface text-theme-text-primary shadow-theme-sm' : 'text-theme-text-secondary hover:text-theme-text-primary',
+        )}
+      >
+        {label}
+        <span className="font-mono text-xs text-theme-text-tertiary">{n}</span>
+      </button>
+    )
+  }
+
+  const lowerBound = fleet.incompleteKinds.length > 0
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <CNPGWorkspaceHeader
+        title="Overview"
+        subtitle={
+          <>
+            {total} PostgreSQL {total === 1 ? 'cluster' : 'clusters'} · {fleet.attentionCount}
+            {lowerBound ? '+' : ''} need attention
+            <span className="text-theme-text-tertiary"> · {context}</span>
+          </>
+        }
+      />
+      <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+        <div className="space-y-3 px-5 pb-6 pt-3 xl:px-7">
+          <CoverageNotice fleet={fleet} data={data} />
+
+          <div className="flex flex-wrap items-center gap-2">
+            <div role="tablist" aria-label="Clusters" className="inline-flex rounded-lg bg-theme-elevated p-0.5">
+              {segment('attention', 'Needs attention', fleet.attentionCount)}
+              {segment('all', 'All clusters', total)}
+            </div>
+            {CNPG_PROBLEM_CATEGORIES.filter((c) => fleet.categoryCounts[c.id] > 0).map((c) => {
+              const on = cat === c.id
+              return (
+                <button
+                  key={c.id}
+                  type="button"
+                  aria-pressed={on}
+                  onClick={() => onSetParams({ cat: on ? null : c.id })}
+                  className={clsx(
+                    'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs transition-colors',
+                    on ? 'border-accent bg-accent-muted text-accent-text' : 'border-theme-border text-theme-text-secondary hover:bg-theme-hover',
+                  )}
+                >
+                  {c.label}
+                  <span className="font-mono">{fleet.categoryCounts[c.id]}</span>
+                </button>
+              )
+            })}
+            <div className="ml-auto flex h-8 w-56 items-center gap-2 rounded-lg border border-theme-border bg-theme-surface px-2.5">
+              <Search className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+              <input
+                value={q}
+                onChange={(e) => onSetParams({ q: e.target.value })}
+                placeholder="Filter clusters…"
+                aria-label="Filter clusters"
+                className="min-w-0 flex-1 bg-transparent text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <FilterChips chips={chips} />
+
+          <div className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+            <div className={TABLE_WRAP}>
+              <table className="w-full min-w-[980px] table-fixed">
+                <colgroup>
+                  <col className="w-[22%]" />
+                  <col className="w-[7%]" />
+                  <col className="w-[15%]" />
+                  <col className="w-[15%]" />
+                  <col className="w-[12%]" />
+                  <col className="w-[5%]" />
+                  <col className="w-[14%]" />
+                  <col className="w-[10%]" />
+                </colgroup>
+                <thead className={TABLE_HEAD}>
+                  <tr>
+                    <th className={TH}>Cluster</th>
+                    <th className={TH}>Ready</th>
+                    <th className={TH}>Replication</th>
+                    <th className={TH}>Protection</th>
+                    <th className={TH}>Declarations</th>
+                    <th className={TH}>PG</th>
+                    <th className={TH}>Needs attention</th>
+                    <th className={TH}><span className="sr-only">Actions</span></th>
+                  </tr>
+                </thead>
+                <tbody className={TBODY}>
+                  {rows.map((row) => {
+                    const ref: SelectedResource = { kind: 'clusters', group: 'postgresql.cnpg.io', namespace: row.namespace, name: row.name }
+                    const active = sameResource(inspected, ref)
+                    return (
+                      <tr
+                        key={row.key}
+                        onClick={() => onInspect(ref)}
+                        className={clsx('cursor-pointer', ROW_HOVER, active && 'selection')}
+                        aria-selected={active}
+                      >
+                        <td className={TD}>
+                          <div className="flex items-center gap-2 min-w-0">
+                            <StatusDot tone={row.attention ? (row.problems.some((p) => p.severity === 'critical') ? 'unhealthy' : 'degraded') : row.controllerStatus.level} />
+                            <Tooltip content={row.name} wrapperClassName="min-w-0"><span className="block truncate font-medium">{row.name}</span></Tooltip>
+                          </div>
+                          <div className="truncate pl-4 text-xs text-theme-text-tertiary">{row.namespace}</div>
+                          <div className="pl-4"><InstancePills row={row} /></div>
+                        </td>
+                        <td className={clsx(TD, 'font-mono')}>
+                          {row.instances.ready ?? '–'}/{row.instances.desired ?? '–'}
+                        </td>
+                        <td className={TD}><FactValue fact={row.replication} /></td>
+                        <td className={TD}><FactValue fact={row.protection.summary} /></td>
+                        <td className={TD}><FactValue fact={row.declarations.summary} /></td>
+                        <td className={clsx(TD, 'font-mono')}>{row.pgVersion ?? '—'}</td>
+                        <td className={TD}><AttentionCell row={row} /></td>
+                        <td className={clsx(TD, 'text-right')}>
+                          <div className="flex items-center justify-end gap-1">
+                            <button
+                              type="button"
+                              aria-label={`Logs from every instance of ${row.name}`}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                const podProblem = row.problems.find((p) => p.subject.kind === 'Pod')
+                                const path = cnpgClusterFullPath(row.namespace, row.name, connection.context || undefined, 'logs')
+                                navigate(podProblem ? `${path}&pod=${encodeURIComponent(podProblem.subject.name)}` : path, {
+                                  state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                                })
+                              }}
+                              className="inline-flex items-center gap-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+                            >
+                              <FileText className="h-3 w-3" /> Logs
+                            </button>
+                            <button
+                              type="button"
+                              aria-label={`Open ${row.name}`}
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                navigate(cnpgClusterFullPath(row.namespace, row.name, connection.context || undefined), {
+                                  state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                                })
+                              }}
+                              className="inline-flex items-center gap-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium text-accent-text hover:bg-theme-hover"
+                            >
+                              Open <ArrowRight className="h-3 w-3" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+            {rows.length === 0 && (
+              <div className="px-4 py-6 text-sm text-theme-text-tertiary">
+                {filter === 'attention' && !cat && !q
+                  ? 'No clusters need attention.'
+                  : 'No clusters match these filters.'}{' '}
+                <button type="button" onClick={() => onSetParams({ filter: 'all', cat: null, q: null })} className="font-medium text-accent-text hover:underline">
+                  Show all clusters
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/cnpg/CNPGPooling.tsx

@@ -0,0 +1,116 @@
+import { useMemo } from 'react'
+import {
+  Badge,
+  getCNPGPoolerMode,
+  getCNPGPoolerStatus,
+  getCNPGPoolerType,
+  isApiGroup,
+  type HealthLevel,
+} from '@skyhook-io/k8s-ui'
+import {
+  CNPGWorkspaceHeader,
+  CoverageNotice,
+  FilterChips,
+  Mono,
+  ScreenBody,
+  SectionTable,
+  Sub,
+  cnpgResource,
+  coverageEmpty,
+  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',
+}
+
+export function CNPGPooling({ data, fleet, namespaces, searchParams, onSetParams, onInspect, inspected, onClearNamespaces }: CNPGScreenProps) {
+  const clusterFilter = searchParams.get('cluster')
+  const poolers = useMemo(
+    () =>
+      (data.objects.poolers ?? [])
+        .filter((p) => isApiGroup(p.apiVersion, 'postgresql.cnpg.io'))
+        .filter((p) => !clusterFilter || `${p.metadata?.namespace}/${p.spec?.cluster?.name}` === clusterFilter),
+    [data.objects.poolers, clusterFilter],
+  )
+  const chips = [
+    ...(clusterFilter ? [{ label: `Cluster: ${clusterFilter}`, onClear: () => onSetParams({ cluster: null }) }] : []),
+    ...namespaceChip(namespaces, onClearNamespaces),
+  ]
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <CNPGWorkspaceHeader
+        title="Pooling"
+        subtitle="PgBouncer Poolers, the clusters they front, and their readiness."
+      />
+      <ScreenBody>
+        <CoverageNotice fleet={fleet} data={data} />
+        <FilterChips chips={chips} />
+        <SectionTable
+          title="Poolers"
+          columns={[
+            { header: 'Pooler', width: '22%', cell: (p: any) => <>{p.metadata?.name}<Sub>{p.metadata?.namespace}</Sub></> },
+            {
+              header: 'Target cluster',
+              width: '18%',
+              cell: (p) => {
+                const name = p.spec?.cluster?.name
+                const visible = fleet.rows.some((r) => r.namespace === p.metadata?.namespace && r.name === name)
+                return (
+                  <>
+                    {name ?? '—'}
+                    {name && !visible && <Sub>not visible in this scope</Sub>}
+                  </>
+                )
+              },
+            },
+            { header: 'Type', width: '8%', cell: (p) => <Mono>{getCNPGPoolerType(p)}</Mono> },
+            { header: 'Mode', width: '12%', cell: (p) => getCNPGPoolerMode(p) },
+            {
+              header: 'Instances',
+              width: '10%',
+              cell: (p) => (
+                <span className="font-mono">
+                  {typeof p.status?.instances === 'number' ? p.status.instances : '–'}/{typeof p.spec?.instances === 'number' ? p.spec.instances : '–'}
+                </span>
+              ),
+            },
+            {
+              header: 'Status',
+              width: '14%',
+              cell: (p) => {
+                const st = getCNPGPoolerStatus(p)
+                return <Badge severity={SEVERITY[st.level]} size="sm">{st.text}</Badge>
+              },
+            },
+            {
+              header: 'Connection pressure',
+              width: '16%',
+              cell: () => (
+                <>
+                  <span className="text-theme-text-tertiary">Not measured</span>
+                  <Sub>Needs PgBouncer metrics</Sub>
+                </>
+              ),
+            },
+          ]}
+          rows={poolers}
+          rowKey={(p) => `${p.metadata?.namespace}/${p.metadata?.name}`}
+          rowResource={(p) => cnpgResource('poolers', p.metadata?.namespace, p.metadata?.name)}
+          onInspect={onInspect}
+          inspected={inspected}
+          minWidth={880}
+          empty={coverageEmpty(data.coverage.poolers, 'Poolers')}
+          footer="Instances are the Pooler’s own ready count. Client waits and server-pool saturation come from PgBouncer metrics, which Radar does not read yet."
+        />
+      </ScreenBody>
+    </div>
+  )
+}