@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/cnpg/actions/CNPGConnectButton.read.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { MemoryRouter } from 'react-router-dom'
+import { expect, it, vi } from 'vitest'
+vi.mock('../../../api/cnpg-ha', () => ({ useCNPGClusterHA: () => ({ data: { rwEndpoints: { state: 'ok', pods: ['orders-1'] }, pods: { state: 'ok' }, instances: [{ pod: 'orders-1', role: 'primary', ready: true }] } }) }))
+vi.mock('../useCNPGKubectlContext', () => ({ useCNPGKubectlContext: () => ({ name: 'kind-test', source: 'test-config' }) }))
+import { CNPGConnectButton } from './CNPGConnectButton'
+const state = vi.hoisted(() => ({ refetch: vi.fn(), retained: false, row: undefined as any }))
+vi.mock('../useCNPGSidebarWorkspace', () => ({ useCNPGFleet: () => ({ fleet: state.row ? { rows: [state.row] } : state.retained ? { rows: [] } : null, query: { data: state.retained ? { installed: true } : undefined, error: new Error('Read failed'), refetch: state.refetch, isRefetchError: state.retained, dataUpdatedAt: Date.now() - 120_000 } }) }))
+vi.mock('@skyhook-io/k8s-ui', async (original) => ({ ...(await original<typeof import('@skyhook-io/k8s-ui')>()), DialogPortal: ({ open, children }: { open: boolean; children: ReactNode }) => open ? <div>{children}</div> : null }))
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+it('shows and retries a failed Cluster read in Connect', () => {
+  const host = document.createElement('div'); document.body.append(host); const root = createRoot(host)
+  act(() => root.render(<MemoryRouter><CNPGConnectButton namespace="db" name="pg" /></MemoryRouter>))
+  act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Connect')!.click())
+  expect(host.textContent).toContain('Cluster could not be read: Read failed')
+  expect(host.textContent).not.toContain('Reading the Cluster')
+  act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Retry')!.click())
+  expect(state.refetch).toHaveBeenCalledTimes(1)
+  state.retained = true
+  act(() => root.render(<MemoryRouter><CNPGConnectButton namespace="db" name="pg" /></MemoryRouter>))
+  expect(host.textContent).toContain('Radar cannot read this Cluster with your access')
+  expect(host.textContent).toContain('Last refresh failed: Read failed')
+  expect(host.textContent).toContain('2m ago')
+  expect(host.textContent).not.toContain('Cluster could not be read:')
+  act(() => root.unmount()); host.remove()
+})
+
+it('passes the known host context and independently read HA availability into the Connect dialog', () => {
+  state.row = { namespace: 'db', name: 'orders', cluster: { metadata: { name: 'orders', namespace: 'db' }, spec: {} } }
+  const host = document.createElement('div'); document.body.append(host); const root = createRoot(host)
+  act(() => root.render(<MemoryRouter><CNPGConnectButton namespace="db" name="orders" /></MemoryRouter>))
+  act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Connect')!.click())
+  expect(host.textContent).toContain('kubectl --context kind-test -n db port-forward service/orders-rw')
+  expect(host.textContent).toContain('Context as named in your kubeconfig (test-config); kubectl must read the same kubeconfig file.')
+  expect(host.textContent).toContain('Unavailable: no ready standby')
+  expect(host.textContent).toContain('Ready endpoints')
+  act(() => root.unmount()); host.remove(); state.row = undefined
+})

package/src/components/cnpg/actions/CNPGConnectButton.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { claimConnectRequest, cnpgConnectParamValue, registerConnectButton } from './CNPGConnectButton'
+
+describe('Connect requests', () => {
+  it('names the Cluster and the surface', () => {
+    expect(cnpgConnectParamValue('db', 'pg', 'page')).toBe('db/pg')
+    expect(cnpgConnectParamValue('db', 'pg', 'drawer')).toBe('db/pg@drawer')
+  })
+
+  it('lets one mounted button answer a request, and a remount answer it again', () => {
+    const page = Symbol('page')
+    const drawer = Symbol('drawer')
+    const unregisterPage = registerConnectButton(page)
+    const unregisterDrawer = registerConnectButton(drawer)
+    expect(claimConnectRequest('entry-1', page)).toBe(true)
+    expect(claimConnectRequest('entry-1', drawer)).toBe(false)
+    expect(claimConnectRequest('entry-2', drawer)).toBe(true)
+
+    unregisterPage()
+    const remounted = Symbol('page again')
+    registerConnectButton(remounted)
+    unregisterDrawer()
+    expect(claimConnectRequest('entry-2', remounted)).toBe(true)
+  })
+})

package/src/components/cnpg/actions/CNPGConnectButton.tsx

@@ -0,0 +1,131 @@
+import { useCNPGClusterHA } from '../../../api/cnpg-ha'
+import { useCNPGKubectlContext } from '../useCNPGKubectlContext'
+import { useEffect, useId, useMemo, useState } from 'react'
+import { useLocation, useSearchParams } from 'react-router-dom'
+import { Plug, X } from 'lucide-react'
+import { CNPGConnectSection, DialogPortal, Tooltip, type ResourceRef, type NavigateToResource } from '@skyhook-io/k8s-ui'
+import { buildWorkloadPath, refToSelectedResource } from '../../../utils/navigation'
+import { useCNPGFleet } from '../useCNPGSidebarWorkspace'
+import { Notice, RefreshFailedNotice } from '../../workspace/layout'
+import { useCNPGNavigate } from '../useCNPGNavigate'
+
+// A link can ask for the dialog (the restore "Next steps") with this param;
+// the button opens it and drops the param, so closing it and following a link
+// from it never write the URL at once. The value names the Cluster and the
+// surface, so a drawer showing the page's own Cluster never opens a second one.
+export const CNPG_CONNECT_PARAM = 'connect'
+
+export function cnpgConnectParamValue(namespace: string, name: string, surface: 'page' | 'drawer'): string {
+  return surface === 'drawer' ? `${namespace}/${name}@drawer` : `${namespace}/${name}`
+}
+
+// A request is answered by one button: a full-screen drawer can carry the
+// same surface as the page beneath it, and both see the request in the same
+// commit. A button that answered and then unmounted (before the param was
+// dropped) gives the request back, so its remount can answer it.
+const mountedButtons = new Set<symbol>()
+let answered: { key: string; by: symbol } | null = null
+
+export function registerConnectButton(id: symbol): () => void {
+  mountedButtons.add(id)
+  return () => {
+    mountedButtons.delete(id)
+  }
+}
+
+/** True when this button should open the dialog for the request at locationKey. */
+export function claimConnectRequest(locationKey: string, id: symbol): boolean {
+  if (answered && answered.key === locationKey && answered.by !== id && mountedButtons.has(answered.by)) return false
+  answered = { key: locationKey, by: id }
+  return true
+}
+
+export function CNPGConnectButton({
+  namespace,
+  name,
+  compact = false,
+  onNavigate,
+}: {
+  namespace: string
+  name: string
+  compact?: boolean
+  onNavigate?: NavigateToResource
+}) {
+  const kubeconfigContext = useCNPGKubectlContext()
+  const titleId = useId()
+  const location = useLocation()
+  const [params, setParams] = useSearchParams()
+  const [open, setOpen] = useState(false)
+  const ha = useCNPGClusterHA(namespace, name, { enabled: open, refetchInterval: false })
+  const id = useMemo(() => Symbol('cnpg-connect'), [])
+  useEffect(() => registerConnectButton(id), [id])
+  const requested = params.get(CNPG_CONNECT_PARAM) === cnpgConnectParamValue(namespace, name, compact ? 'drawer' : 'page')
+  useEffect(() => {
+    if (!requested || !claimConnectRequest(location.key, id)) return
+    setOpen(true)
+    // Keeps the page's return label, which lives in the history state.
+    setParams(
+      (prev) => {
+        const p = new URLSearchParams(prev)
+        p.delete(CNPG_CONNECT_PARAM)
+        return p
+      },
+      { replace: true, state: location.state },
+    )
+  }, [requested, id, setParams, location.key, location.state])
+  const { query, fleet } = useCNPGFleet([namespace], open)
+  const row = fleet?.rows.find((r) => r.namespace === namespace && r.name === name)
+  const go = onNavigate
+    ? (ref: ResourceRef) => {
+        setOpen(false)
+        onNavigate(refToSelectedResource(ref))
+      }
+    : undefined
+  const navigate = useCNPGNavigate()
+  const openReachability = (svc: { namespace: string; name: string }) => {
+    setOpen(false)
+    navigate(buildWorkloadPath({ kind: 'services', group: '', namespace: svc.namespace, name: svc.name, tab: 'reachability' }))
+  }
+
+  return (
+    <>
+      <Tooltip content="Hosts, database, owner and the credentials Secret applications use" position="bottom">
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          aria-label={compact ? 'Connect' : undefined}
+          className="btn-secondary inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap px-2.5 py-1.5 text-xs font-medium"
+        >
+          <Plug className="h-3.5 w-3.5" />
+          {!compact && 'Connect'}
+        </button>
+      </Tooltip>
+      <DialogPortal open={open} onClose={() => setOpen(false)} className="w-full max-w-3xl" ariaLabelledBy={titleId}>
+        <div className="flex items-start gap-3 border-b border-theme-border p-4">
+          <div className="min-w-0 flex-1">
+            <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">
+              Connect to {name}
+            </h3>
+            <p className="mt-0.5 text-xs text-theme-text-tertiary">From the Cluster spec · hosts resolve inside the Kubernetes cluster</p>
+          </div>
+          <button type="button" onClick={() => setOpen(false)} aria-label="Close" className="rounded p-1 text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto p-4">
+          <RefreshFailedNotice queries={[query, ha]} />
+          {row?.cluster ? (
+            <CNPGConnectSection ha={ha.data} haUnavailableReason={ha.isLoading ? 'Reading availability…' : ha.error instanceof Error ? `Availability could not be read: ${ha.error.message}` : undefined} kubeconfigContext={kubeconfigContext?.name} kubeconfigSource={kubeconfigContext?.source} cluster={row.cluster} poolers={row.poolerObjects} poolersKnown={row.poolersKnown} onNavigate={go} onOpenReachability={openReachability} showHeading={false} />
+          ) : query.error && !query.data ? (
+            <Notice>
+              Cluster could not be read: {query.error instanceof Error ? query.error.message : 'unknown error'}.{' '}
+              <button type="button" onClick={() => void query.refetch()} disabled={query.isFetching} className="text-accent-text hover:underline">Retry</button>
+            </Notice>
+          ) : (
+            <div className="text-sm text-theme-text-tertiary">{fleet ? 'Radar cannot read this Cluster with your access.' : 'Reading the Cluster…'}</div>
+          )}
+        </div>
+      </DialogPortal>
+    </>
+  )
+}

package/src/components/cnpg/actions/CNPGDestroyInstanceDialog.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { ActionConfirmDialog, PaneLoader } from '@skyhook-io/k8s-ui'
+import { cnpgActionErrorCode, useCNPGAction } from '../../../api/cnpg'
+import { actionCompleted, actionDialogResult } from '../../../api/actions'
+import { useCNPGDestroyPlan } from '../../../api/cnpg-sessions'
+import { useToast } from '../../ui/Toast'
+import { trackCNPGOperation } from '../operations/store'
+import { cnpgDestroyBlocker } from './actionModel'
+
+/**
+ * `kubectl cnpg destroy` for one standby: its volumes are deleted (or kept,
+ * detached), then its Pod and its Jobs. The operator replaces it with a new
+ * instance under a new name. Binds the Pod and volume identities reviewed.
+ */
+export function CNPGDestroyInstanceDialog({
+  namespace,
+  cluster,
+  pod,
+  onClose,
+  onFenceFirst,
+}: {
+  namespace: string
+  cluster: string
+  pod: string
+  onClose: () => void
+  /** Opens the fence dialog for this instance; destroy requires the fence. */
+  onFenceFirst?: () => void
+}) {
+  const plan = useCNPGDestroyPlan(namespace, cluster, pod)
+  const mutation = useCNPGAction('clusters', namespace, cluster, plan.data?.context)
+  const { showSuccess } = useToast()
+  const [keep, setKeep] = useState(false)
+  const data = plan.data
+  const cap = data ? (keep ? data.actions.keep : data.actions.delete) : undefined
+  const pvcNames = data?.pvcs.map((p) => p.name) ?? []
+  const partial = cnpgActionErrorCode(mutation.outcomeError ?? mutation.error) === 'partial'
+  const fenced = !!data && (data.facts.fencedInstances.all || data.facts.fencedInstances.instances.includes(pod))
+  const completed = actionCompleted(mutation.outcomeError ?? mutation.error)
+  const fenceOffered = !!data && !fenced && !!onFenceFirst
+
+  return (
+    <ActionConfirmDialog
+      open
+      onClose={onClose}
+      onConfirm={() => {
+        if (!data) return
+        mutation.mutate(
+          {
+            action: 'destroyInstance',
+            request: {
+              reviewedContext: data.context,
+              uid: data.uid,
+              facts: data.facts,
+              params: { pod, podUID: data.podUID, keepPVC: keep, pvcs: data.pvcs.map((p) => ({ name: p.name, uid: p.uid })), jobs: data.jobs },
+            },
+          },
+          {
+            onSuccess: (r) => {
+              showSuccess(r.message)
+              trackCNPGOperation({
+                kind: 'destroyInstance',
+                label: `Destroy ${pod}`,
+                context: data.context,
+                namespace,
+                cluster,
+                clusterUID: data.uid,
+                target: { name: pod, uid: data.podUID },
+                baseline: { instances: data.facts.instances.map((i) => i.pod) },
+              })
+              onClose()
+            },
+          },
+        )
+      }}
+      title={`Destroy instance ${pod}?`}
+      subject={{ kind: 'Cluster', namespace, name: cluster }}
+      context={data?.context}
+      effect={
+        keep
+          ? `Deletes the Pod ${pod} and detaches its volumes from the cluster, keeping their data. The operator then creates a new instance with a new name and fresh volumes, which joins as a standby.`
+          : `Deletes the Pod ${pod} and its volumes${pvcNames.length ? ` (${pvcNames.join(', ')})` : ''}; their data is gone. The operator then creates a new instance with a new name and fresh volumes, which joins as a standby.`
+      }
+      disruptive
+      typedConfirmation={pod}
+      confirmLabel={keep ? 'Destroy, keep volumes' : 'Destroy instance'}
+      writes={
+        data
+          ? [
+              ...data.pvcs.map((p) =>
+                keep && p.owned
+                  ? { summary: `update PersistentVolumeClaim ${namespace}/${p.name}`, detail: `ownerReferences: Cluster ${cluster} removed\nmetadata.annotations["cnpg.io/pvcStatus"] = "detached"` }
+                  : keep
+                    ? { summary: `leave PersistentVolumeClaim ${namespace}/${p.name}`, detail: 'already detached' }
+                    : { summary: `delete PersistentVolumeClaim ${namespace}/${p.name}`, detail: `preconditions.uid = ${p.uid}` },
+              ),
+              { summary: `delete Pod ${namespace}/${pod}`, detail: data.podUID ? `preconditions.uid = ${data.podUID}` : 'the Pod no longer exists' },
+              { summary: `delete reviewed Jobs of ${pod}`, detail: data.jobsReadable ? (data.jobs.length ? data.jobs.map((j) => `${j.name} · preconditions.uid = ${j.uid}`).join('\n') : 'none now') : 'not readable; review is unavailable' },
+              { summary: `patch Cluster ${namespace}/${cluster}`, detail: `metadata.annotations["cnpg.io/fencedInstances"]: ${pod} removed (unless fenced with ["*"])` },
+            ]
+          : []
+      }
+      notes={[
+        'The volumes are handled before the Pod, as kubectl cnpg destroy does, so the operator never recreates this Pod on them.',
+        fenceOffered
+          ? `Once ${pod} is destroyed its name is removed from the fence (a fence on every instance, ["*"], stays).`
+          : `${pod} must be fenced first; its name is removed from the fence once it is destroyed (a fence on every instance, ["*"], stays).`,
+        'Use this for a standby that cannot rejoin (for example after a failed pg_rewind or a corrupted volume). A plain restart deletes only the Pod and keeps the volumes attached.',
+        'Only volumes owned by this Cluster or detached by Radar from this Cluster are included.',
+        keep ? 'Kept volumes stay in the namespace, no longer owned by the cluster; delete them yourself once you no longer need them.' : null,
+      ].filter(Boolean) as string[]}
+      disabledReason={
+        plan.isLoading
+          ? 'Reading the instance’s volumes…'
+          : !data
+            ? plan.error instanceof Error ? plan.error.message : 'The destroy plan could not be read'
+            : cnpgDestroyBlocker(cap, fenceOffered)
+      }
+      guardSatisfied={!!cap?.allowed}
+      isLoading={mutation.isPending}
+      result={actionDialogResult(mutation.outcomeError ?? mutation.error, { unknown: 'An earlier write to this Cluster may have taken effect', partial: 'Earlier writes to this Cluster partially completed' })}
+    >
+      {partial && completed.length > 0 && (
+        <div className="rounded-lg border border-theme-border bg-theme-elevated p-3 text-sm">
+          <div className="mb-1 text-xs text-theme-text-secondary">Writes completed by that earlier attempt</div>
+          <ul className="space-y-0.5">
+            {completed.map((c) => (
+              <li key={c} className="font-mono text-xs text-theme-text-primary">
+                {c}
+              </li>
+            ))}
+          </ul>
+          <div className="mt-2 text-xs text-theme-text-tertiary">Check the resources named above before doing anything else; writes to this Cluster are disabled.</div>
+        </div>
+      )}
+      {plan.isLoading && <PaneLoader label="Reading the instance’s volumes…" className="h-16" />}
+      {fenceOffered && (
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-theme-border bg-theme-elevated p-3 text-sm text-theme-text-secondary">
+          <span>{pod} must be fenced before it is destroyed: the operator never promotes a fenced instance, so a failover cannot make it primary meanwhile.</span>
+          <button type="button" onClick={onFenceFirst} className="btn-brand rounded-lg px-3 py-1.5 text-sm font-medium">
+            Fence {pod} first
+          </button>
+        </div>
+      )}
+      {data && (
+        <div className="space-y-3">
+          <div>
+            <div className="mb-1 text-xs text-theme-text-secondary">Volumes of {pod}</div>
+            {!data.pvcsReadable ? (
+              <div className="text-sm text-theme-text-tertiary">Not readable: {data.pvcReason}</div>
+            ) : data.pvcs.length === 0 ? (
+              <div className="text-sm text-theme-text-tertiary">None found for this instance.</div>
+            ) : (
+              <ul className="space-y-0.5 text-sm">
+                {data.pvcs.map((p) => (
+                  <li key={p.uid} className="font-mono text-xs">
+                    {p.name}
+                    <span className="font-sans text-theme-text-tertiary">
+                      {' · '}
+                      {[p.role, p.tablespace, p.capacity, p.storageClass, p.detached ? 'detached earlier' : null].filter(Boolean).join(' · ')}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+          <fieldset className="space-y-1.5">
+            <legend className="mb-1 text-xs text-theme-text-secondary">Volumes</legend>
+            <label className="flex items-start gap-2 text-sm">
+              <input type="radio" name="cnpg-destroy-pvc" checked={!keep} onChange={() => setKeep(false)} className="mt-1" />
+              <span>
+                Delete them <span className="text-theme-text-tertiary">— the data on this standby is lost; the primary and the other standbys are unaffected</span>
+              </span>
+            </label>
+            <label className="flex items-start gap-2 text-sm">
+              <input type="radio" name="cnpg-destroy-pvc" checked={keep} onChange={() => setKeep(true)} className="mt-1" />
+              <span>
+                Keep them, detached <span className="text-theme-text-tertiary">(--keep-pvc) — for inspecting the old data; they still use storage</span>
+              </span>
+            </label>
+          </fieldset>
+        </div>
+      )}
+    </ActionConfirmDialog>
+  )
+}

package/src/components/cnpg/actions/CNPGInstanceActions.test.tsx

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { CNPGInstanceActions } from './CNPGInstanceActions'
+
+const state = vi.hoisted(() => ({ data: {} as any }))
+vi.mock('../../../api/cnpg', () => ({ useCNPGClusterCapabilities: () => ({ data: state.data }) }))
+vi.mock('./useOpenCNPGPsql', () => ({ useOpenCNPGPsql: () => vi.fn() }))
+vi.mock('./CNPGClusterActions', () => ({ ClusterActionDialog: () => <div>Restart review opened</div> }))
+vi.mock('./CNPGDestroyInstanceDialog', () => ({ CNPGDestroyInstanceDialog: () => null }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: ReturnType<typeof createRoot>
+let host: HTMLDivElement
+afterEach(() => { act(() => root?.unmount()); host?.remove(); vi.useRealTimers() })
+it('keeps blocked restart focusable, reveals its reason on hover, focus and click, and never opens the write dialog', () => {
+  vi.useFakeTimers()
+  const reason = 'A standby is still joining; wait until it is ready'
+  state.data = { facts: { instances: [{ pod: 'orders-1' }], currentPrimary: 'orders-1', fencedInstances: { all: false, instances: [] } }, actions: {}, instanceActions: { 'orders-1': { restart: { allowed: false, reason }, psql: { allowed: true }, fence: { allowed: true } } } }
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host)
+  act(() => root.render(<CNPGInstanceActions namespace="db" cluster="orders" pod="orders-1" />))
+  const restart = [...host.querySelectorAll('button')].find((b) => b.textContent === 'Restart')!
+  expect(restart.disabled).toBe(false)
+  expect(restart.getAttribute('aria-disabled')).toBe('true')
+  act(() => { restart.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); vi.advanceTimersByTime(350) })
+  expect(document.body.textContent).toContain(reason)
+  act(() => { restart.focus(); vi.advanceTimersByTime(350) })
+  expect(document.activeElement).toBe(restart)
+  expect(document.body.textContent).toContain(reason)
+  act(() => restart.click())
+  expect(host.querySelector('[role="status"]')?.textContent).toBe(reason)
+  expect(host.textContent).not.toContain('Restart review opened')
+  state.data.instanceActions['orders-1'].restart = { allowed: true }
+  act(() => root.render(<CNPGInstanceActions namespace="db" cluster="orders" pod="orders-1" />))
+  expect(host.querySelector('[role="status"]')).toBeNull()
+  act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Restart')!.click())
+  expect(host.textContent).toContain('Restart review opened')
+})

package/src/components/cnpg/actions/CNPGInstanceActions.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { useCNPGClusterCapabilities, type CNPGClusterActionName } from '../../../api/cnpg'
+import { type ActionCapability, capabilityReason } from '../../../api/actions'
+import { ClusterActionDialog } from './CNPGClusterActions'
+import { CNPGDestroyInstanceDialog } from './CNPGDestroyInstanceDialog'
+import { useOpenCNPGPsql } from './useOpenCNPGPsql'
+import { Tooltip } from '@skyhook-io/k8s-ui'
+
+const LINK = 'text-accent-text hover:underline aria-disabled:cursor-not-allowed aria-disabled:text-theme-text-disabled aria-disabled:no-underline'
+
+/** Per-instance operations shown on a replication row. */
+export function CNPGInstanceActions({ namespace, cluster, pod }: { namespace: string; cluster: string; pod: string }) {
+  const caps = useCNPGClusterCapabilities(namespace, cluster)
+  const [open, setOpen] = useState<CNPGClusterActionName | null>(null)
+  const [blockedAction, setBlockedAction] = useState<CNPGClusterActionName | 'psql' | 'destroy'>()
+  const [destroying, setDestroying] = useState(false)
+  const openPsql = useOpenCNPGPsql()
+  const data = caps.data
+  if (!data) return null
+  const inst = data.facts.instances.find((i) => i.pod === pod)
+  if (!inst) return null
+  const isPrimary = pod === data.facts.currentPrimary
+  const allFenced = data.facts.fencedInstances.all
+  const isFenced = allFenced || data.facts.fencedInstances.instances.includes(pod)
+  const per = data.instanceActions?.[pod]
+  const capFor = (id: CNPGClusterActionName) =>
+    id === 'switchover' ? per?.switchoverTarget : id === 'restartInstance' ? per?.restart : id === 'fence' ? per?.fence : id === 'unfence' ? per?.unfence : data.actions[id]
+
+  const button = (key: CNPGClusterActionName | 'psql' | 'destroy', label: string, reason: string | undefined, onClick: () => void) => (
+    <Tooltip key={key} content={reason}>
+      <button type="button" aria-disabled={!!reason} onClick={() => { if (reason) setBlockedAction(key); else { setBlockedAction(undefined); onClick() } }} className={LINK}>
+        {label}
+      </button>
+    </Tooltip>
+  )
+  const link = (id: CNPGClusterActionName, label: string, extraReason?: string) => {
+    const cap = capFor(id) ?? data.actions[id]
+    return button(id, label, extraReason ?? capabilityReason(cap), () => setOpen(id))
+  }
+  const reasonOf = (cap: ActionCapability | undefined) => (!cap ? 'Not available for this instance' : capabilityReason(cap))
+
+  const blockedReason = blockedAction === 'psql' ? reasonOf(per?.psql) : blockedAction === 'destroy' ? (isFenced ? reasonOf(per?.destroy) : undefined) : blockedAction === 'unfence' && allFenced ? 'The whole cluster is fenced; lift it from the cluster menu' : blockedAction ? capabilityReason(capFor(blockedAction) ?? data.actions[blockedAction]) : undefined
+
+  return (
+    <>
+      {button('psql', 'psql', reasonOf(per?.psql), () => openPsql(namespace, pod, isPrimary))}
+      {!isPrimary && link('switchover', 'Promote')}
+      {link('restartInstance', 'Restart')}
+      {isFenced
+        ? link('unfence', 'Lift fence', allFenced ? 'The whole cluster is fenced; lift it from the cluster menu' : undefined)
+        : link('fence', 'Fence')}
+      {/* Unfenced, the dialog opens anyway: it explains the fence and offers it. */}
+      {!isPrimary && button('destroy', 'Destroy…', isFenced ? reasonOf(per?.destroy) : undefined, () => setDestroying(true))}
+      {blockedReason && <div role="status" className="basis-full text-xs text-theme-text-secondary">{blockedReason}</div>}
+      {open && <ClusterActionDialog kind={open} caps={data} namespace={namespace} name={cluster} initialPod={pod} onClose={() => setOpen(null)} />}
+      {destroying && (
+        <CNPGDestroyInstanceDialog
+          namespace={namespace}
+          cluster={cluster}
+          pod={pod}
+          onClose={() => setDestroying(false)}
+          onFenceFirst={
+            per?.fence?.allowed
+              ? () => {
+                  setDestroying(false)
+                  setOpen('fence')
+                }
+              : undefined
+          }
+        />
+      )}
+    </>
+  )
+}

package/src/components/cnpg/actions/CNPGMaintenanceBanner.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import { AlertBanner, Tooltip } from '@skyhook-io/k8s-ui'
+import { useCNPGClusterCapabilities } from '../../../api/cnpg'
+import { ClusterActionDialog } from './CNPGClusterActions'
+import { capabilityReason } from '../../../api/actions'
+
+/**
+ * Standing notice while spec.nodeMaintenanceWindow.inProgress is true. The
+ * mode suspends self-healing, so it must never be forgotten on: the way out is
+ * on the banner itself.
+ */
+export function CNPGMaintenanceBanner({
+  namespace,
+  name,
+  maintenance,
+}: {
+  namespace: string
+  name: string
+  maintenance?: { inProgress: boolean; reusePVC: boolean }
+}) {
+  const caps = useCNPGClusterCapabilities(namespace, name, !!maintenance?.inProgress)
+  const [open, setOpen] = useState(false)
+  if (!maintenance?.inProgress) return null
+  const cap = caps.data?.actions.unsetMaintenance
+  return (
+    <div className="mb-3">
+      <AlertBanner
+        variant="warning"
+        title="Node maintenance in progress"
+        message={
+          maintenance.reusePVC
+            ? 'Self-healing, rolling updates and disruption budgets are limited: an instance on a drained node waits for that node and keeps its volume. Lift this as soon as the node work is done.'
+            : 'Self-healing, rolling updates and disruption budgets are limited: an instance on a drained node is rebuilt elsewhere on a new volume. Lift this as soon as the node work is done.'
+        }
+      >
+        <div className="mt-2">
+          <Tooltip content={cap ? capabilityReason(cap) : undefined}>
+            <button
+              type="button"
+              disabled={!cap?.allowed}
+              onClick={() => setOpen(true)}
+              className="btn-brand px-3 py-1 text-xs font-medium disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Lift maintenance…
+            </button>
+          </Tooltip>
+          <span className="ml-2 text-xs text-theme-text-tertiary">spec.nodeMaintenanceWindow.inProgress</span>
+        </div>
+      </AlertBanner>
+      {open && caps.data && <ClusterActionDialog kind="unsetMaintenance" caps={caps.data} namespace={namespace} name={name} onClose={() => setOpen(false)} />}
+    </div>
+  )
+}

package/src/components/cnpg/actions/CNPGPoolerActions.test.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { CNPGPoolerActions } from './CNPGPoolerActions'
+
+const mocks = vi.hoisted(() => ({ mutate: vi.fn(), success: vi.fn() }))
+vi.mock('../../ui/Toast', () => ({ useToast: () => ({ showSuccess: mocks.success }) }))
+vi.mock('./useCNPGWriteGuard', () => ({ useCNPGWriteGuard: () => ({ node: null, satisfied: true }) }))
+vi.mock('../../../api/cnpg', () => ({ useCNPGAction: () => ({ mutate: mocks.mutate, isPending: false }) }))
+vi.mock('../../../api/cnpg-sessions', () => ({
+  useCNPGPoolerCapabilities: () => ({ data: {
+    uid: 'pooler-uid', resourceVersion: '9', context: 'kind-test',
+    facts: { generation: 4, cluster: 'payments', type: 'rw', paused: true, parameters: {}, terminating: false, deployment: { name: 'pooler', state: 'ok', readyReplicas: 2 }, service: { name: 'pooler', state: 'ok' } },
+    actions: { pause: { allowed: true }, resume: { allowed: true }, observeState: { allowed: true } },
+  } }),
+}))
+
+it('binds the reviewed generation along with the paused state', async () => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const host = document.createElement('div')
+  document.body.append(host)
+  const root = createRoot(host)
+  try {
+    await act(async () => root.render(<CNPGPoolerActions namespace="prod" name="pooler" />))
+    await act(async () => [...host.querySelectorAll('button')].find((button) => button.textContent === 'Resume')!.click())
+    const confirm = [...document.querySelectorAll<HTMLButtonElement>('[role="dialog"] button')].find((button) => button.textContent === 'Resume')!
+    expect(confirm).toBeDefined()
+    await act(async () => confirm.click())
+    expect(mocks.mutate.mock.calls[0][0]).toMatchObject({ action: 'resume', request: { reviewedContext: 'kind-test', uid: 'pooler-uid', facts: { paused: true, generation: 4 } } })
+  } finally {
+    await act(async () => root.unmount())
+    host.remove()
+  }
+})