@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/cnpg/CNPGActionHost.compatibility.test.tsx

@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { cnpgHost } from './host'
+import { renderCNPGHeaderActions } from './actions/renderCNPGHeaderActions'
+import { radarFeatureSupport } from '../../api/radarFeatures'
+const state = vi.hoisted(() => ({ capabilities: { features: { resourceIssues: true } } as any }))
+vi.mock('../../api/client', async original => ({ ...await original<typeof import('../../api/client')>(), useRadarFeature: () => ({ support: radarFeatureSupport('cnpgWorkspace', state.capabilities, 'v1.16.0') }) }))
+vi.mock('./CNPGClusterTabs', () => ({ CNPGInvestigationAction: () => <span>CNPG investigation</span> }))
+vi.mock('./actions/CNPGClusterActions', () => ({ CNPGClusterActions: () => <span>CNPG write actions</span> }))
+vi.mock('./actions/CNPGConnectButton', () => ({ CNPGConnectButton: () => null }))
+vi.mock('./actions/CNPGScheduleActions', () => ({ CNPGScheduleActions: () => null }))
+vi.mock('./actions/CNPGPoolerActions', () => ({ CNPGPoolerActions: () => null }))
+vi.mock('./operations/CNPGOperationTracker', () => ({ CNPGOperationTracker: () => null }))
+vi.mock('./recovery/CNPGRestoreButton', () => ({ CNPGRestoreButton: () => null }))
+beforeEach(() => { state.capabilities = { features: { resourceIssues: true } } })
+const context = { kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'db', name: 'pg', compact: false }
+const resource = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'pg', namespace: 'db', uid: 'uid-pg' } }
+it('preserves ordinary Diagnose and omits new action affordances on the shipped missing-flag state', () => {
+  const original = vi.fn(() => <span>ordinary investigation</span>)
+  expect(renderToStaticMarkup(cnpgHost.diagnoseAction(original)!(context))).toContain('ordinary investigation')
+  expect(original).toHaveBeenCalledWith(context)
+  expect(renderToStaticMarkup(renderCNPGHeaderActions({ resource, namespace: 'db', name: 'pg', compact: false }))).toBe('')
+})
+it('mounts the CNPG decorations once their contracts are advertised', () => {
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  const original = vi.fn(() => <span>ordinary investigation</span>)
+  expect(renderToStaticMarkup(cnpgHost.diagnoseAction(original)!(context))).toContain('CNPG investigation')
+  expect(original).not.toHaveBeenCalled()
+  expect(renderToStaticMarkup(renderCNPGHeaderActions({ resource, namespace: 'db', name: 'pg', compact: false }))).toContain('CNPG write actions')
+})

package/src/components/cnpg/CNPGArchivingRepair.tsx

@@ -0,0 +1,191 @@
+import { cnpgClusterPlugins, cnpgPluginPhase, formatAge, getCNPGClusterBarmanPlugin, StatusDot, toneTextClass, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import type { CNPGRuntimeInstance } from '../../api/cnpg'
+import { backupMethod, cnpgArchiveDestination, cnpgRecoveryBase, resumeBoundary, type CNPGRecoveryBase } from './archivingRepair'
+
+const RESUMED_WINDOW_MS = 24 * 60 * 60 * 1000
+
+/**
+ * WAL archiving, as a repair: why it fails, where the destination and its
+ * credentials are declared, where the archiver logs, then whether archiving
+ * resumed and a fresh base backup exists. Shown while archiving fails, and
+ * for a day after it resumes so the fix can be confirmed here.
+ */
+export function CNPGArchivingRepair({
+  row,
+  primary,
+  objectStores,
+  backups,
+  onOpenLogs,
+  onOpenOperator,
+  onInspect,
+}: {
+  row: CNPGFleetRow
+  primary?: CNPGRuntimeInstance
+  objectStores: any[]
+  /** This namespace's CNPG Backups, or null when they could not be read. */
+  backups: any[] | null
+  onOpenLogs?: (pod: string, container: string) => void
+  onOpenOperator?: () => void
+  onInspect: (r: SelectedResource) => void
+}) {
+  const wal = row.protection.walArchiving
+  const arch = primary && (primary.status.state === 'ok' || primary.status.state === 'partial') ? primary.status.archiving : undefined
+  const failedAt = arch?.lastFailedAt ? Date.parse(arch.lastFailedAt) : NaN
+  const archivedAt = arch?.lastArchivedAt ? Date.parse(arch.lastArchivedAt) : NaN
+  const failingNow = wal.tone === 'unhealthy' || (Number.isFinite(failedAt) && (!Number.isFinite(archivedAt) || failedAt > archivedAt))
+  // Only the instance manager records that archiving failed: the condition
+  // turning True also happens when archiving is first set up, so it marks a
+  // resume only after a failure the instance manager saw. Its stats restart
+  // with the primary, and the panel then has nothing left to show.
+  const runtimeResumed = Number.isFinite(failedAt) && Number.isFinite(archivedAt) && archivedAt > failedAt
+  const boundary = resumeBoundary(row.cluster, failedAt)
+  const resumed = !failingNow && wal.tone === 'healthy' && runtimeResumed && Number.isFinite(boundary) && Date.now() - boundary < RESUMED_WINDOW_MS
+  if (!failingNow && !resumed) return null
+
+  // A plugin archives WAL only when it is marked isWALArchiver; otherwise the
+  // in-tree barmanObjectStore (if any) does, from the postgres container.
+  const barman = getCNPGClusterBarmanPlugin(row.cluster)
+  const plugin = barman?.isWALArchiver ? barman : null
+  const storeName = plugin?.barmanObjectName
+  const store = storeName ? objectStores.find((s) => s?.metadata?.namespace === row.namespace && s?.metadata?.name === storeName) : undefined
+  const inTree = row.cluster?.spec?.backup?.barmanObjectStore
+  const dest = store
+    ? cnpgArchiveDestination(store.spec?.configuration, `ObjectStore ${storeName}`)
+    : inTree
+      ? cnpgArchiveDestination(inTree, 'the Cluster’s spec.backup.barmanObjectStore')
+      : undefined
+  const archiverContainer = plugin ? 'plugin-barman-cloud' : 'postgres'
+  const pluginPhase = cnpgPluginPhase(row.cluster)
+  const primaryPod = primary?.pod ?? row.cluster?.status?.currentPrimary
+  const lastBackup = row.protection.lastSuccessfulBackup
+  const base = resumed ? cnpgRecoveryBase(row, backups, boundary, plugin ? { method: 'plugin', plugin: plugin.name } : { method: 'barmanObjectStore' }, arch?.lastFailedWal) : undefined
+  const baseDone = base?.state === 'verified'
+
+  return (
+    <section className="rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      <h3 className={`text-sm font-semibold ${failingNow ? toneTextClass('unhealthy') : toneTextClass('healthy')}`}>
+        {failingNow ? 'WAL archiving is failing' : 'WAL archiving resumed'}
+      </h3>
+      <div className="mt-1.5 space-y-1.5 text-sm">
+        {failingNow && (
+          <p className="text-theme-text-primary">
+            {wal.tone === 'unhealthy' ? (
+              wal.detail ? (
+                <>
+                  The operator reports: <span className="font-mono text-xs">{wal.detail}</span>
+                </>
+              ) : (
+                'The operator reports ContinuousArchiving False without a message.'
+              )
+            ) : (
+              `The primary’s instance manager reports a failed archive after its last archived WAL${wal.tone === 'healthy' ? '; the operator’s ContinuousArchiving condition still reads True' : ''}.`
+            )}
+          </p>
+        )}
+        {arch && (
+          <p className="text-xs text-theme-text-secondary">
+            {arch.lastArchivedAt ? `Last archived ${formatAge(arch.lastArchivedAt)} ago${arch.lastArchivedWal ? ` (${arch.lastArchivedWal})` : ''}` : 'Nothing archived since the instance manager started'}
+            {arch.lastFailedAt ? ` · last failure ${formatAge(arch.lastFailedAt)} ago${arch.lastFailedWal ? ` (${arch.lastFailedWal})` : ''}` : ''}
+            {arch.readyWalFiles !== undefined ? ` · ${arch.readyWalFiles} files waiting` : ''} · from the primary’s instance manager
+          </p>
+        )}
+        {failingNow && dest && (
+          <div className="text-xs text-theme-text-secondary">
+            <div>
+              Destination <span className="font-mono text-theme-text-primary">{dest.path ?? 'path not declared'}</span>
+              {dest.endpointURL && <> via <span className="font-mono">{dest.endpointURL}</span></>}, declared in{' '}
+              {store ? (
+                <button type="button" className="text-accent-text hover:underline" onClick={() => onInspect({ kind: 'objectstores', group: 'barmancloud.cnpg.io', namespace: row.namespace, name: storeName! })}>
+                  {dest.declaredIn}
+                </button>
+              ) : (
+                dest.declaredIn
+              )}
+              .
+            </div>
+            <div className="mt-0.5">
+              Credentials:{' '}
+              {dest.identity && (
+                <>
+                  {dest.identity}
+                  {dest.secrets.length > 0 && ' · '}
+                </>
+              )}
+              {!dest.identity && dest.secrets.length === 0
+                ? 'none referenced'
+                : dest.secrets.map((s, i) => (
+                      <span key={`${s.secret}/${s.key}/${s.what}`}>
+                        {i > 0 && ' · '}
+                        {s.what} in Secret{' '}
+                        <button type="button" className="font-mono text-accent-text hover:underline" onClick={() => onInspect({ kind: 'secrets', group: '', namespace: row.namespace, name: s.secret })}>
+                          {s.secret}
+                        </button>
+                        {s.key ? <span className="font-mono">/{s.key}</span> : null}
+                      </span>
+                    ))}
+              . Radar names them and does not read them.
+            </div>
+          </div>
+        )}
+        {failingNow && primaryPod && (
+          <p className="text-xs text-theme-text-secondary">
+            The primary archives from its <span className="font-mono">{archiverContainer}</span> container; the failing command’s output is in its logs.{' '}
+            {onOpenLogs && (
+              <button type="button" className="text-accent-text hover:underline" onClick={() => onOpenLogs(primaryPod, archiverContainer)}>
+                {archiverContainer} logs of {primaryPod} →
+              </button>
+            )}
+          </p>
+        )}
+        {failingNow && pluginPhase && (
+          <p className="text-xs text-theme-text-secondary">
+            Separately, the Cluster’s phase says the operator {pluginPhase === 'unknownPlugin' ? 'does not know a plugin this cluster requires' : 'hit an error talking to one of this cluster’s plugins'} (spec.plugins:{' '}
+            {cnpgClusterPlugins(row.cluster).join(', ') || 'none listed'}), so it cannot reconcile this cluster until that clears.{' '}
+            {onOpenOperator && (
+              <button type="button" className="text-accent-text hover:underline" onClick={onOpenOperator}>
+                Operator and plugins →
+              </button>
+            )}
+          </p>
+        )}
+        <ol className="mt-1 space-y-1 text-xs">
+          <li className="flex items-start gap-2">
+            <span className="flex h-4 shrink-0 items-center"><StatusDot tone={failingNow ? 'unknown' : 'healthy'} /></span>
+            <span className={failingNow ? 'text-theme-text-secondary' : 'text-theme-text-primary'}>
+              Archiving resumes: the operator reports ContinuousArchiving True and a WAL file archives after the last failure.
+              {failingNow ? ' Not yet.' : ` Done${arch?.lastArchivedAt ? `, ${formatAge(arch.lastArchivedAt)} ago` : ''}.`}
+            </span>
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="flex h-4 shrink-0 items-center"><StatusDot tone={baseDone ? 'healthy' : 'unknown'} /></span>
+            <span className={baseDone ? 'text-theme-text-primary' : 'text-theme-text-secondary'}>
+              A base backup that begins after the last WAL that failed to archive completes (Back up now, above), so a restore from it needs none of that WAL.{' '}
+              {failingNow || !base
+                ? `Not yet. Newest successful backup: ${lastBackup.at ? `${formatAge(lastBackup.at)} ago` : lastBackup.text.toLowerCase()}.`
+                : recoveryBaseText(base)}
+            </span>
+          </li>
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+function recoveryBaseText(base: CNPGRecoveryBase): string {
+  const label = (b: any) => `Backup ${b?.metadata?.name} (${backupMethod(b)})`
+  switch (base.state) {
+    case 'unread':
+      return 'Radar cannot read this namespace’s Backups, so it cannot tell.'
+    case 'none':
+      return 'No completed Backup of this cluster has started since archiving resumed.'
+    case 'verified':
+      return `Done: ${label(base.backup)} begins at WAL ${base.backup.status.beginWal}, after ${base.failedWal}, and completed ${formatAge(base.backup.status.stoppedAt ?? base.backup.status.startedAt)} ago.`
+    case 'beginsBefore':
+      return `${label(base.backup)} started after archiving resumed but begins at WAL ${base.backup?.status?.beginWal ?? '(not reported)'}, not after ${base.failedWal} — likely from a standby that had not replayed past it. Take another.`
+    case 'unverifiable':
+      return base.missing === 'beginWal'
+        ? `${label(base.backup)} started after archiving resumed and completed, but its status does not say which WAL it begins at, so Radar cannot compare it with the last failed one.`
+        : `${label(base.backup)} started after archiving resumed and completed; Radar cannot compare where it begins with the last failed WAL, which only the primary’s instance manager reports and is not reporting now.`
+  }
+}

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

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+const state = vi.hoisted(() => ({ data: { pod: 'pg-1', state: 'denied', permission: { exec: 'denied', grant: { verb: 'create', resource: 'pods', subresource: 'exec', namespace: 'db' } }, instances: [] } as any, navigate: vi.fn() }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => state.navigate }))
+vi.mock('react-router-dom', async (original) => ({ ...await original<typeof import('react-router-dom')>(), useLocation: () => ({ pathname: '/cnpg/clusters/db/pg', search: '?ctx=test&tab=performance&drawer=x', state: { returnLabel: 'Clusters' } }) }))
+vi.mock('@tanstack/react-query', async (original) => ({ ...await original<typeof import('@tanstack/react-query')>(), useQueries: () => [{ data: { containers: [] } }] }))
+vi.mock('../../api/client', () => ({ podMetricsQuery: () => ({}), usePodMetrics: () => ({ data: { containers: [{ name: 'postgres', usage: { cpu: '30000000n', memory: '59Mi' } }] } }) }))
+vi.mock('../../api/cnpg-sessions', () => ({
+  useCNPGSessions: () => ({
+    data: state.data,
+    isLoading: false,
+    error: null,
+    isRefetchError: false,
+    dataUpdatedAt: Date.now(),
+  }),
+}))
+
+const { CNPGBlockingSessions } = await import('./CNPGBlockingSessions')
+
+describe('CNPGBlockingSessions with exec denied', () => {
+  it('explains only the exec grant for blocking detail', () => {
+    const html = renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)
+    expect(html).toContain('Who blocks whom is read inside PostgreSQL')
+    expect(html).toContain('create pods/exec')
+    expect(html).not.toContain('aggregate')
+    expect(html).not.toContain('get pods/proxy')
+  })
+})
+
+it('keeps query-text prose out of unavailable states while the host owns the prerequisite', () => {
+  expect(renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)).not.toContain('Query text')
+  state.data = { pod: '', state: 'unavailable', permission: { exec: 'unknown' }, instances: [] }
+  const html = renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)
+  expect(html).toContain('Blocking detail not measured')
+  expect(html).not.toContain('Available once the primary is running')
+  expect(html).not.toContain('See Overview')
+  expect(html).not.toContain('could not be read')
+  expect(html).not.toContain('Query text')
+})
+it('keeps CPU and memory measurements and limits on separate rows with unbreakable units', () => {
+  state.data = { pod: 'pg-1', state: 'ok', permission: { exec: 'allowed' }, sessions: [], instances: [{ pod: 'pg-1', role: 'primary', memoryLimit: '384Mi' }] }
+  const html = renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)
+  expect(html).toMatch(/CPU <span class="whitespace-nowrap">0.03 cores<\/span>/)
+  expect(html).toMatch(/Memory <span class="whitespace-nowrap">59 MiB<\/span>/)
+  expect(html).toContain('limit <span class="whitespace-nowrap">384 MiB</span>')
+  expect(html).not.toContain('Query text')
+  expect(html.indexOf('No session is waiting')).toBeLessThan(html.indexOf('Resource usage'))
+})

package/src/components/cnpg/CNPGBlockingSessions.tsx

@@ -0,0 +1,333 @@
+import { useState, type ReactNode } from 'react'
+import { useQueries } from '@tanstack/react-query'
+import { clsx } from 'clsx'
+import { ActionConfirmDialog, PaneLoader, Tooltip, formatAge, toneFillClass, toneTextClass, formatGrant } from '@skyhook-io/k8s-ui'
+import { formatCPUString, formatMemoryString, parseCPUToNanocores, parseMemoryToBytes } from '@skyhook-io/k8s-ui/utils/format'
+import { podMetricsQuery, usePodMetrics } from '../../api/client'
+import { useCNPGAction, useCNPGClusterCapabilities } from '../../api/cnpg'
+import { actionDialogResult } from '../../api/actions'
+import { useCNPGSessions, type CNPGBackend, type CNPGSessionInstance, type CNPGSessionsResponse } from '../../api/cnpg-sessions'
+import { useToast } from '../ui/Toast'
+import { buildBlockingTree, cnpgConnectionFigure, cnpgNoMetricsReadings, countVictims, type BlockingNode } from './blocking'
+import { RefreshFailedNotice } from '../workspace/layout'
+import { Denied } from './runtimeParts'
+
+function age(s?: number): string {
+  if (s === undefined || s === null) return '—'
+  if (s < 1) return `${Math.round(s * 1000)} ms`
+  if (s < 90) return `${s.toFixed(0)} s`
+  if (s < 5400) return `${Math.round(s / 60)} min`
+  return `${(s / 3600).toFixed(1)} h`
+}
+
+/**
+ * Who blocks whom, on one instance, read from pg_stat_activity with
+ * pg_blocking_pids over the caller's pods/exec — plus connection headroom and
+ * each instance's CPU and memory, so lock waits and resource pressure can be
+ * told apart. The instance is chosen by the Sessions section's picker.
+ */
+export function CNPGBlockingSessions({
+  namespace,
+  cluster,
+  pod,
+  headroom = true,
+}: {
+  namespace: string
+  cluster: string
+  /** The instance to read; undefined reads the primary. */
+  pod?: string
+  /** false when the host already shows the connection figure. */
+  headroom?: boolean
+}) {
+  const q = useCNPGSessions(namespace, cluster, pod)
+  const data = q.data
+
+  return (
+    <section className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+      <div className="flex flex-wrap items-center gap-3 border-b border-theme-border px-4 py-2.5">
+        <div className="text-sm font-semibold text-theme-text-primary">Blocking{data?.pod ? <> on <span className="font-mono">{data.pod}</span></> : null}</div>
+        {data?.capturedAt && <span className="text-xs text-theme-text-tertiary">read {formatAge(data.capturedAt)} ago</span>}
+      </div>
+      <div className="space-y-4 p-4">
+        {!data && q.isLoading && <PaneLoader label="Reading pg_stat_activity…" className="h-20" />}
+        {!data && !q.isLoading && <div className="text-sm text-theme-text-tertiary">Sessions could not be read: {q.error instanceof Error ? q.error.message : 'unknown error'}</div>}
+        <RefreshFailedNotice queries={[q]} />
+        {data && <Body namespace={namespace} cluster={cluster} data={data} headroom={headroom} />}
+      </div>
+      <div className="border-t border-theme-border px-4 py-2 text-xs text-theme-text-tertiary">
+        Source: pg_stat_activity and pg_blocking_pids over pods/exec.
+        {data?.state === 'ok' && !!data.sessions?.length && <> Query text is cut at 200 characters.</>}
+      </div>
+    </section>
+  )
+}
+
+function Body({
+  namespace,
+  cluster,
+  data,
+  headroom,
+}: {
+  namespace: string
+  cluster: string
+  data: CNPGSessionsResponse
+  headroom: boolean
+}) {
+  if (data.state === 'denied') return <Denied title="No access to blocking detail" grant={formatGrant(data.permission.grant) ?? 'create pods/exec'}>
+    Who blocks whom is read inside PostgreSQL, which needs exec into the instance.
+  </Denied>
+  if (data.state === 'unavailable') return <div className="text-sm text-theme-text-tertiary">Blocking detail not measured.</div>
+  if (data.state !== 'ok') {
+    return (
+      <>
+        <div className="text-sm text-theme-text-tertiary">
+          Sessions on {data.pod || 'the primary'} could not be read ({data.state}){data.error ? `: ${data.error}` : ''}.
+        </div>
+        <Resources namespace={namespace} instances={data.instances} />
+      </>
+    )
+  }
+  const sessions = data.sessions ?? []
+  const roots = buildBlockingTree(sessions)
+  return (
+    <>
+      {headroom && <Headroom data={data} />}
+      {roots.length === 0 ? (
+        <div className="text-sm text-theme-text-secondary">No session is waiting on another session’s lock on {data.pod}.</div>
+      ) : (
+        <div className="space-y-2">
+          {data.truncated && (
+            <div className={clsx('text-xs', toneTextClass('degraded'))}>
+              Showing {sessions.length} of {data.involvedTotal} sessions involved in blocking (oldest transactions first).
+            </div>
+          )}
+          {roots.map((r) => (
+            <Tree key={`${r.session.pid}`} node={r} depth={0} namespace={namespace} cluster={cluster} data={data} />
+          ))}
+        </div>
+      )}
+      <Resources namespace={namespace} instances={data.instances} />
+    </>
+  )
+}
+
+function Headroom({ data }: { data: CNPGSessionsResponse }) {
+  const figure = cnpgConnectionFigure(data)
+  if (!figure) return null
+  return (
+    <div>
+      <div className="flex flex-wrap items-baseline gap-x-3 text-sm">
+        <span className="text-xs text-theme-text-tertiary">Connections</span>
+        <span className={clsx('font-mono', figure.tone && toneTextClass(figure.tone))}>{figure.value}</span>
+        <Tooltip content={figure.detail}>
+          <span className="text-xs text-theme-text-secondary">{figure.limit}</span>
+        </Tooltip>
+      </div>
+      <div className="mt-1 h-1.5 overflow-hidden rounded bg-theme-elevated">
+        <div className={clsx('h-full', figure.tone ? toneFillClass(figure.tone) : 'bg-accent')} style={{ width: `${Math.min(100, (figure.ratio ?? 0) * 100)}%` }} />
+      </div>
+    </div>
+  )
+}
+
+function Resources({ namespace, instances }: { namespace: string; instances: CNPGSessionInstance[] }) {
+  const metrics = useQueries({ queries: instances.map((i) => podMetricsQuery(namespace, i.pod)) })
+  if (instances.length === 0) return null
+  // No readings for any Pod is said once rather than on every card; it may be
+  // a missing metrics API or a cluster too new to have been sampled.
+  if (cnpgNoMetricsReadings(metrics.map((m) => m.data))) {
+    return <div><h3 className="mb-1 text-sm font-semibold text-theme-text-primary">Resource usage</h3><div className="text-xs text-theme-text-tertiary">CPU and memory not measured: the metrics API has no readings for these Pods (metrics-server may be missing, or has not sampled them yet).</div></div>
+  }
+  return (
+    <div>
+      <h3 className="mb-1 text-sm font-semibold text-theme-text-primary">Resource usage</h3>
+      <div className="mb-1 text-xs text-theme-text-tertiary">CPU and memory of each instance’s postgres container (metrics-server)</div>
+      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        {instances.map((i) => (
+          <InstanceResources key={i.pod} namespace={namespace} inst={i} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function usage(value: number, limit: number | undefined): { pct?: number; tone?: 'degraded' | 'unhealthy' } {
+  if (!limit) return {}
+  const pct = value / limit
+  return { pct, tone: pct >= 0.9 ? 'unhealthy' : pct >= 0.75 ? 'degraded' : undefined }
+}
+
+function InstanceResources({ namespace, inst }: { namespace: string; inst: CNPGSessionInstance }) {
+  const m = usePodMetrics(namespace, inst.pod)
+  const c = m.data?.containers.find((x) => x.name === 'postgres')
+  let body: ReactNode
+  if (m.isLoading) body = <span className="text-theme-text-tertiary">reading…</span>
+  else if (m.data === null) body = <span className="text-theme-text-tertiary">not measured yet: no metrics for this Pod</span>
+  else if (!c) body = <span className="text-theme-text-tertiary">not measured{m.error instanceof Error ? `: ${m.error.message}` : ''}</span>
+  else {
+    const cpu = usage(parseCPUToNanocores(c.usage.cpu), inst.cpuLimit ? parseCPUToNanocores(inst.cpuLimit) : undefined)
+    const mem = usage(parseMemoryToBytes(c.usage.memory), inst.memoryLimit ? parseMemoryToBytes(inst.memoryLimit) : undefined)
+    body = (
+      <div className="space-y-0.5 font-mono text-xs">
+        <div className={cpu.tone && toneTextClass(cpu.tone)}>
+          CPU <span className="whitespace-nowrap">{formatCPUString(c.usage.cpu)}</span>
+           · {inst.cpuLimit ? <>limit <span className="whitespace-nowrap">{formatCPUString(inst.cpuLimit)}</span></> : 'no limit'}
+        </div>
+        <div className={mem.tone && toneTextClass(mem.tone)}>
+          Memory <span className="whitespace-nowrap">{formatMemoryString(c.usage.memory)}</span>
+           · {inst.memoryLimit ? <>limit <span className="whitespace-nowrap">{formatMemoryString(inst.memoryLimit)}</span></> : 'no limit'}
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div className="rounded-lg border border-theme-border bg-theme-base px-3 py-2 text-sm">
+      <div className="font-mono text-xs font-semibold">
+        {inst.pod} <span className="font-sans font-normal text-theme-text-tertiary">{inst.role}</span>
+      </div>
+      <div className="mt-0.5">{body}</div>
+    </div>
+  )
+}
+
+function Tree({ node, depth, namespace, cluster, data }: { node: BlockingNode; depth: number; namespace: string; cluster: string; data: CNPGSessionsResponse }) {
+  return (
+    <div className={clsx(depth > 0 && 'ml-5 border-l border-theme-border pl-3')}>
+      <SessionRow node={node} depth={depth} namespace={namespace} cluster={cluster} data={data} />
+      {node.children.map((c) => (
+        <Tree key={`${node.session.pid}-${c.session.pid}`} node={c} depth={depth + 1} namespace={namespace} cluster={cluster} data={data} />
+      ))}
+    </div>
+  )
+}
+
+function SessionRow({ node, depth, namespace, cluster, data }: { node: BlockingNode; depth: number; namespace: string; cluster: string; data: CNPGSessionsResponse }) {
+  const s = node.session
+  const [signal, setSignal] = useState<'cancelBackend' | 'terminateBackend' | null>(null)
+  const victims = countVictims(node)
+  const waiting = s.waitEventType === 'Lock'
+  return (
+    <div className="my-1 rounded-lg border border-theme-border bg-theme-base p-3">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+        <span className="font-mono font-semibold">pid {s.pid}</span>
+        {depth === 0 && victims > 0 && <span className={clsx('text-xs font-medium', toneTextClass('unhealthy'))}>blocks {victims}</span>}
+        {waiting && <span className={clsx('text-xs', toneTextClass('degraded'))}>waiting on {s.waitEvent ?? 'a lock'}</span>}
+        {node.cycle && <span className={clsx('text-xs', toneTextClass('unhealthy'))}>lock cycle</span>}
+        {node.alsoWaitsOn.length > 0 && <span className="text-xs text-theme-text-tertiary">also waits on {node.alsoWaitsOn.join(', ')}</span>}
+        <span className={clsx('text-xs', s.state?.startsWith('idle in transaction') ? toneTextClass('degraded') : 'text-theme-text-secondary')}>{s.state ?? '—'}</span>
+        <span className="ml-auto flex gap-3 text-xs">
+          <Tooltip content="pg_cancel_backend: stops the statement it is running now. An idle-in-transaction session is running nothing, so it keeps its locks.">
+            <button type="button" className="text-accent-text hover:underline" onClick={() => setSignal('cancelBackend')}>
+              Stop query
+            </button>
+          </Tooltip>
+          <Tooltip content="pg_terminate_backend: ends the session and rolls back its open transaction.">
+            <button type="button" className="text-accent-text hover:underline" onClick={() => setSignal('terminateBackend')}>
+              Terminate…
+            </button>
+          </Tooltip>
+        </span>
+      </div>
+      <div className="mt-1 flex flex-wrap gap-x-3 text-xs text-theme-text-secondary">
+        <span className="font-mono">
+          {s.user ?? '—'}@{s.database ?? '—'}
+        </span>
+        {s.application && <span>{s.application}</span>}
+        {s.clientAddr && <span className="font-mono">{s.clientAddr}</span>}
+        {s.waitEventType && !waiting && (
+          <span>
+            wait {s.waitEventType}/{s.waitEvent}
+          </span>
+        )}
+        <span>transaction {age(s.xactAgeSeconds)}</span>
+        <span>query {age(s.queryAgeSeconds)}</span>
+        <span>connected {age(s.backendAgeSeconds)}</span>
+      </div>
+      {s.query && (
+        <pre className="mt-1.5 whitespace-pre-wrap break-all rounded bg-theme-elevated px-2 py-1 font-mono text-[11.5px] text-theme-text-primary">
+          {s.query}
+          {s.queryTruncated ? ' …' : ''}
+        </pre>
+      )}
+      {signal && <SignalDialog kind={signal} session={s} namespace={namespace} cluster={cluster} data={data} onClose={() => setSignal(null)} />}
+    </div>
+  )
+}
+
+function SignalDialog({
+  kind,
+  session,
+  namespace,
+  cluster,
+  data,
+  onClose,
+}: {
+  kind: 'cancelBackend' | 'terminateBackend'
+  session: CNPGBackend
+  namespace: string
+  cluster: string
+  data: CNPGSessionsResponse
+  onClose: () => void
+}) {
+  const caps = useCNPGClusterCapabilities(namespace, cluster)
+  const mutation = useCNPGAction('clusters', namespace, cluster, caps.data?.context)
+  const { showSuccess } = useToast()
+  const terminate = kind === 'terminateBackend'
+  const fn = terminate ? 'pg_terminate_backend' : 'pg_cancel_backend'
+  const idle = session.state?.startsWith('idle in transaction')
+  const ctx = caps.data?.context
+  return (
+    <ActionConfirmDialog
+      open
+      onClose={onClose}
+      onConfirm={() => {
+        if (!caps.data) return
+        mutation.mutate(
+          {
+            action: kind,
+            request: {
+              reviewedContext: caps.data.context,
+              uid: caps.data.uid,
+              facts: {},
+              params: { pod: data.pod, podUID: data.podUID, pid: session.pid, backendStart: session.backendStart },
+            },
+          },
+          {
+            onSuccess: (r) => {
+              showSuccess(r.message)
+              onClose()
+            },
+          },
+        )
+      }}
+      title={terminate ? `Terminate backend ${session.pid}?` : `Cancel the query of backend ${session.pid}?`}
+      subject={{ kind: 'Cluster', namespace, name: cluster }}
+      context={ctx}
+      effect={
+        terminate
+          ? `Ends the session of ${session.user ?? 'this user'} on ${data.pod}. Its open transaction is rolled back — work it did since the transaction began is lost — and its locks are released. The client sees its connection close.`
+          : `Stops the statement backend ${session.pid} is running on ${data.pod}. The client gets an error for that statement; the session and its transaction stay open.`
+      }
+      warnings={[
+        !terminate && idle ? 'This session is idle in a transaction: it is running no statement, so cancelling does nothing and it keeps its locks. Terminate it to release them.' : null,
+        terminate && session.xactAgeSeconds !== undefined ? `The transaction has been open for ${age(session.xactAgeSeconds)}.` : null,
+      ].filter(Boolean) as string[]}
+      notes={[
+        `Sent only if backend ${session.pid} still has the start time you reviewed (${session.backendStart}); a reused pid is a different session and is left alone.`,
+      ]}
+      writes={[
+        {
+          summary: `exec psql in Pod ${namespace}/${data.pod} (container postgres)`,
+          detail: `SELECT ${fn}(pid) FROM pg_stat_activity\nWHERE pid = ${session.pid} AND backend_start = '${session.backendStart}'\n  AND backend_type = 'client backend'`,
+        },
+      ]}
+      typedConfirmation={terminate ? String(session.pid) : undefined}
+      confirmLabel={terminate ? 'Terminate backend' : 'Stop query'}
+      disruptive={terminate}
+      disabledReason={caps.data && data.permission.exec === 'denied' ? `Needs ${formatGrant(data.permission.grant) ?? 'create pods/exec'}` : undefined}
+      incompleteReason={!caps.data ? 'Reading the cluster…' : undefined}
+      isLoading={mutation.isPending}
+      result={actionDialogResult(mutation.outcomeError ?? mutation.error, { unknown: "An earlier write to this Cluster may have taken effect" })}
+    />
+  )
+}

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

@@ -0,0 +1,11 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { CNPGClusterActivity } from './CNPGClusterActivity'
+vi.mock('../../api/cnpg', () => ({ useCNPGClusterActivity: () => ({ data: { events: [], oldest: null, attributionSince: null }, isRefetchError: true, error: new Error('Activity timeout'), dataUpdatedAt: Date.now() - 180_000 }) }))
+vi.mock('../../api/cnpg-history', () => ({ useCNPGClusterActivityWindow: () => ({}) }))
+vi.mock('./CNPGTrends', () => ({ useCNPGIntervalParams: () => null }))
+it('labels retained activity after a failed refresh', () => {
+  const html = renderToStaticMarkup(<CNPGClusterActivity namespace="db" name="pg" />)
+  expect(html).toContain('Last refresh failed: Activity timeout')
+  expect(html).toContain('3m ago')
+})