@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/trendSamples.test.ts

@@ -0,0 +1,148 @@
+import { describe, expect, it } from 'vitest'
+import type { CNPGRuntimeResponse } from '../../api/cnpg'
+import type { CNPGClusterHistoryResponse } from '../../api/cnpg-history'
+import { cacheHitSeries, chartedDatabases, historyLatest, latestRate, rateSeries, sampleFrom, sessionStateSeries, type Sample } from './trendSamples'
+
+const sample = (t: number, metricsAt: number | undefined, over: Partial<Sample>, source = 'pg-1/uid-1'): Sample => ({
+  t: t * 1000,
+  metricsAt: metricsAt === undefined ? undefined : metricsAt * 1000,
+  source,
+  replayLag: {},
+  ...over,
+})
+
+describe('rates between exporter generations', () => {
+  it('uses the generation time and counts a cached reading once', () => {
+    // Fetched at 0, 25 and 50 s; the exporter reran its queries at 0 and 50 s.
+    const samples = [sample(0, 0, { archived: 100 }), sample(25, 0, { archived: 100 }), sample(50, 50, { archived: 150 })]
+    expect(rateSeries(samples, 'archived', 60).dataPoints).toEqual([{ timestamp: 50, value: 60 }])
+  })
+
+  it('never takes a delta across a change of primary', () => {
+    const samples = [sample(0, 0, { checkpointsTimed: 10 }, 'pg-1/a'), sample(30, 30, { checkpointsTimed: 1000 }, 'pg-2/b'), sample(60, 60, { checkpointsTimed: 1002 }, 'pg-2/b')]
+    expect(rateSeries(samples, 'checkpointsTimed', 60).dataPoints).toEqual([
+      { timestamp: 30, value: null },
+      { timestamp: 60, value: 4 },
+    ])
+  })
+
+  it('leaves a gap for a reset and for a sample without a source', () => {
+    const samples = [sample(0, 0, { deadlocks: 5 }), sample(30, 30, { deadlocks: 2 }), sample(60, 60, { deadlocks: 3, source: undefined })]
+    const pts = rateSeries(samples, 'deadlocks', 60).dataPoints
+    expect(pts[0]).toEqual({ timestamp: 30, value: null })
+    expect(pts[1].value).toBeNull()
+  })
+
+  it('computes cache hit ratio from deltas and never shows 100 % for no reads', () => {
+    const samples = [sample(0, 0, { blksHit: 100, blksRead: 10 }), sample(30, 30, { blksHit: 190, blksRead: 20 }), sample(60, 60, { blksHit: 190, blksRead: 20 })]
+    const pts = cacheHitSeries(samples).dataPoints
+    expect(pts).toEqual([
+      { timestamp: 30, value: 90 },
+      { timestamp: 60, value: null },
+    ])
+  })
+
+  it('gives the latest rate only from two generations of one source', () => {
+    expect(latestRate([sample(0, 0, { commits: 10 }), sample(10, 0, { commits: 10 })], 'commits')).toBeUndefined()
+    expect(latestRate([sample(0, 0, { commits: 10 }), sample(10, 10, { commits: 30 })], 'commits')).toBe(2)
+  })
+})
+
+describe('sampleFrom', () => {
+  const rt = (primaryMetrics: any, replicaMetrics: any = { state: 'ok', sessionsTotal: 1, sessionsByState: { active: 1 } }): CNPGRuntimeResponse => ({
+    cluster: { namespace: 'db', name: 'pg', uid: 'u' },
+    sampledAt: '2026-09-30T10:00:10Z',
+    permission: { proxy: 'allowed' },
+    instances: [
+      { pod: 'pg-1', podUID: 'uid-1', role: 'primary', status: { state: 'ok' }, metrics: primaryMetrics },
+      { pod: 'pg-2', podUID: 'uid-2', role: 'replica', status: { state: 'ok' }, metrics: replicaMetrics },
+    ],
+  })
+
+  it('records the source Pod and the exporter generation, falling back to the fetch time as approximate', () => {
+    const exact = sampleFrom(rt({ state: 'ok', capturedAt: '2026-09-30T10:00:09Z', lastUpdateTimestamp: 1790000000, xactCommitTotal: 5 }))
+    expect(exact).toMatchObject({ source: 'pg-1/uid-1', metricsAt: 1790000000000, approximate: false, commits: 5 })
+    const approx = sampleFrom(rt({ state: 'ok', capturedAt: '2026-09-30T10:00:09Z' }))
+    expect(approx.metricsAt).toBe(Date.parse('2026-09-30T10:00:09Z'))
+    expect(approx.approximate).toBe(true)
+    expect(sampleFrom(rt({ state: 'denied' })).source).toBeUndefined()
+  })
+
+  it('records sessions for every instance that answered, and none for one that did not', () => {
+    const s = sampleFrom(rt({ state: 'ok', sessionsTotal: 0 }, { state: 'unreachable' }))
+    expect(s.instances).toEqual({ 'pg-1': { byState: {}, total: 0, waiting: undefined } })
+  })
+
+  it('keeps lock waits when the session-count query is missing, and leaves session states a gap', () => {
+    const s = sampleFrom(rt({ state: 'partial', waitingBackends: 3 }, { state: 'unreachable' }))
+    expect(s.instances?.['pg-1']).toEqual({ byState: undefined, total: undefined, waiting: 3 })
+    const states = sessionStateSeries([s], 'pg-1')
+    expect(states.every((series) => series.dataPoints[0].value === null)).toBe(true)
+  })
+})
+
+describe('sessionStateSeries', () => {
+  it('groups states and gaps a sample where the instance did not answer', () => {
+    const samples = [
+      sample(0, 0, { instances: { 'pg-2': { byState: { active: 2, 'idle in transaction': 1, 'idle in transaction (aborted)': 1, idle: 5, 'fastpath function call': 1 }, total: 10 } } }),
+      sample(5, 5, { instances: {} }),
+    ]
+    const series = sessionStateSeries(samples, 'pg-2')
+    expect(series.map((x) => [x.labels.series, x.dataPoints[0].value])).toEqual([
+      ['active', 2],
+      ['idle', 5],
+      ['idle in transaction', 2],
+      ['other', 1],
+    ])
+    expect(series.every((x) => x.dataPoints[1].value === null)).toBe(true)
+  })
+})
+
+describe('chartedDatabases', () => {
+  const samples = [
+    sample(0, 0, { dbSizes: { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, tiny: 0.5 } }),
+    sample(5, 5, { dbSizes: { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 } }),
+  ]
+  it('defaults to the five largest and follows any database the viewer picks', () => {
+    expect(chartedDatabases(samples, null).shown).toEqual(['f', 'e', 'd', 'c', 'b'])
+    expect(chartedDatabases(samples, ['tiny', 'a']).shown).toEqual(['a', 'tiny'])
+    expect(chartedDatabases(samples, 'all').shown).toHaveLength(7)
+  })
+})
+
+describe('historyLatest', () => {
+  const history = (over: Partial<CNPGClusterHistoryResponse> = {}, chartState = 'ok') =>
+    ({
+      source: 'prometheus',
+      state: 'ok',
+      charts: [
+        {
+          id: 'tps',
+          seriesBy: 'series',
+          state: chartState,
+          source: 'rate of xact_commit',
+          series: [{ labels: { series: 'commits' }, dataPoints: [{ timestamp: 1, value: 4 }, { timestamp: 2, value: 7.5 }, { timestamp: 3, value: null }] }],
+        },
+      ],
+      ...over,
+    }) as unknown as CNPGClusterHistoryResponse
+
+  it('takes the newest recorded point of the named series', () => {
+    expect(historyLatest(history({ end: new Date(3 * 1000).toISOString(), stepSeconds: 1 }), 'tps', 'commits')).toEqual({
+      value: 7.5,
+      at: 2,
+      source: 'rate of xact_commit',
+      stale: false,
+    })
+    expect(historyLatest(history(), 'tps', 'rollbacks')).toBeUndefined()
+  })
+  it('marks a value stale when the series stopped more than two steps before the end', () => {
+    const got = historyLatest(history({ end: new Date(600 * 1000).toISOString(), stepSeconds: 60 }), 'tps', 'commits')
+    expect(got).toMatchObject({ value: 7.5, stale: true })
+  })
+  it('has nothing without Prometheus history', () => {
+    expect(historyLatest(history({ source: 'none' }), 'tps', 'commits')).toBeUndefined()
+    expect(historyLatest(history({}, 'noSeries'), 'tps', 'commits')).toBeUndefined()
+    expect(historyLatest(undefined, 'tps', 'commits')).toBeUndefined()
+  })
+})

package/src/components/cnpg/trendSamples.ts

@@ -0,0 +1,222 @@
+import type { TimeSeries } from '@skyhook-io/k8s-ui/components/charts'
+import type { CNPGRuntimeResponse } from '../../api/cnpg'
+import type { CNPGClusterHistoryResponse } from '../../api/cnpg-history'
+
+/** Sessions on one instance at one sample, by pg_stat_activity state. */
+// Session totals and lock waits come from separate exporter queries: each is
+// kept when its own query answered, so one missing never hides the other.
+export interface InstanceSessions {
+  byState?: Record<string, number>
+  total?: number
+  waiting?: number
+}
+
+// A ring buffer of samples taken while this view is open: the Trends section
+// without Prometheus. It says so, and starts empty.
+export interface Sample {
+  t: number
+  /**
+   * The Pod the primary's counters came from (name and UID). Counters are per
+   * instance, so a rate is never taken across a change of source.
+   */
+  source?: string
+  /**
+   * When the exporter generated these values (ms): cnpg_last_update_timestamp
+   * when the operator publishes it, else Radar's fetch time.
+   */
+  metricsAt?: number
+  /** metricsAt is Radar's fetch time: the exporter published no generation time. */
+  approximate?: boolean
+  replayLag: Record<string, number | undefined>
+  commits?: number
+  rollbacks?: number
+  archived?: number
+  failed?: number
+  blksHit?: number
+  blksRead?: number
+  walBytes?: number
+  deadlocks?: number
+  tempBytes?: number
+  checkpointsTimed?: number
+  checkpointsRequested?: number
+  /** Database sizes by name (gauges), every database the exporter reported. */
+  dbSizes?: Record<string, number>
+  /** Sessions per instance Pod, for every instance whose exporter answered. */
+  instances?: Record<string, InstanceSessions>
+}
+
+export type CounterKey = 'commits' | 'rollbacks' | 'archived' | 'failed' | 'blksHit' | 'blksRead' | 'deadlocks' | 'tempBytes' | 'checkpointsTimed' | 'checkpointsRequested'
+
+export const SAMPLE_BUFFER_LIMIT = 720
+
+export function sampleFrom(data: CNPGRuntimeResponse): Sample {
+  const primary = data.instances.find((i) => i.role === 'primary')
+  const replayLag: Record<string, number | undefined> = {}
+  for (const r of primary?.status.replication ?? []) replayLag[r.applicationName] = r.replayLag
+  const m = primary?.metrics
+  const read = m && (m.state === 'ok' || m.state === 'partial') ? m : undefined
+  const generation = read?.lastUpdateTimestamp !== undefined ? read.lastUpdateTimestamp * 1000 : undefined
+  const fetched = read?.capturedAt ? Date.parse(read.capturedAt) || undefined : undefined
+  const instances: Record<string, InstanceSessions> = {}
+  for (const inst of data.instances) {
+    const im = inst.metrics
+    if (im.state !== 'ok' && im.state !== 'partial') continue
+    if (im.sessionsTotal === undefined && im.waitingBackends === undefined) continue
+    instances[inst.pod] = {
+      byState: im.sessionsTotal !== undefined ? { ...(im.sessionsByState ?? {}) } : undefined,
+      total: im.sessionsTotal,
+      waiting: im.waitingBackends,
+    }
+  }
+  return {
+    t: Date.parse(data.sampledAt) || Date.now(),
+    source: read && primary ? `${primary.pod}/${primary.podUID ?? ''}` : undefined,
+    metricsAt: generation ?? fetched,
+    approximate: read ? generation === undefined : undefined,
+    replayLag,
+    commits: read?.xactCommitTotal,
+    rollbacks: read?.xactRollbackTotal,
+    archived: read?.archiver?.archivedCount,
+    failed: read?.archiver?.failedCount,
+    blksHit: read?.blksHit,
+    blksRead: read?.blksRead,
+    walBytes: read?.walBytes,
+    deadlocks: read?.deadlocksTotal,
+    tempBytes: read?.tempBytesTotal,
+    checkpointsTimed: read?.checkpoints?.timed,
+    checkpointsRequested: read?.checkpoints?.requested,
+    dbSizes: read?.databaseSizes ? Object.fromEntries(read.databaseSizes.map((d) => [d.database, d.bytes])) : undefined,
+    instances,
+  }
+}
+
+/**
+ * Walks consecutive exporter generations of the same source. Samples that
+ * share a generation are one reading (the exporter and Radar both cache), so
+ * only the first counts; a change of source is a gap, never a delta.
+ */
+function generationPairs(
+  samples: Sample[],
+  has: (s: Sample) => boolean,
+  value: (prev: Sample, s: Sample, seconds: number) => number | null,
+): TimeSeries['dataPoints'] {
+  const points: TimeSeries['dataPoints'] = []
+  let prev: Sample | undefined
+  for (const s of samples) {
+    if (!has(s) || s.metricsAt === undefined || s.source === undefined) {
+      points.push({ timestamp: s.t / 1000, value: null })
+      continue
+    }
+    if (prev && prev.source !== s.source) {
+      points.push({ timestamp: s.t / 1000, value: null })
+      prev = s
+      continue
+    }
+    if (prev && prev.metricsAt === s.metricsAt) continue
+    if (prev) {
+      const dt = ((s.metricsAt as number) - (prev.metricsAt as number)) / 1000
+      points.push({ timestamp: s.t / 1000, value: dt > 0 ? value(prev, s, dt) : null })
+    }
+    prev = s
+  }
+  return points
+}
+
+/** A counter as a rate between generations; a decrease is a reset and leaves a gap. `per` scales to per-minute. */
+export function rateSeries(samples: Sample[], key: CounterKey, per = 1, label: string = key): TimeSeries {
+  return {
+    labels: { series: label },
+    dataPoints: generationPairs(
+      samples,
+      (s) => s[key] !== undefined,
+      (prev, s, dt) => {
+        const dv = (s[key] as number) - (prev[key] as number)
+        return dv >= 0 ? (dv / dt) * per : null
+      },
+    ),
+  }
+}
+
+/** Cache hit ratio (%) of the blocks read between generations; no reads leaves a gap, not 100 %. */
+export function cacheHitSeries(samples: Sample[]): TimeSeries {
+  return {
+    labels: { series: 'hit ratio' },
+    dataPoints: generationPairs(
+      samples,
+      (s) => s.blksHit !== undefined && s.blksRead !== undefined,
+      (prev, s) => {
+        const hit = (s.blksHit as number) - (prev.blksHit as number)
+        const read = (s.blksRead as number) - (prev.blksRead as number)
+        return hit >= 0 && read >= 0 && hit + read > 0 ? (hit / (hit + read)) * 100 : null
+      },
+    ),
+  }
+}
+
+/** The latest per-second rate of a counter, or undefined until two generations of one source were seen. */
+export function latestRate(samples: Sample[], key: CounterKey): number | undefined {
+  const pts = rateSeries(samples, key).dataPoints
+  const last = pts[pts.length - 1]
+  return last?.value ?? undefined
+}
+
+/** How many trailing steps without a point still count as the latest reading. */
+export const HISTORY_RECENT_STEPS = 2
+
+/**
+ * The newest value of one labelled series of a Prometheus history chart, or
+ * undefined when history is not from Prometheus or that chart has no point.
+ * `stale` when that value is more than HISTORY_RECENT_STEPS steps older than
+ * the query's end: the series stopped, so it is not a current rate.
+ */
+export function historyLatest(
+  history: CNPGClusterHistoryResponse | undefined,
+  chartId: string,
+  series: string,
+): { value: number; at: number; source: string; stale: boolean } | undefined {
+  if (history?.source !== 'prometheus' || history.state !== 'ok') return undefined
+  const chart = history.charts.find((c) => c.id === chartId)
+  if (!chart || chart.state !== 'ok') return undefined
+  const pts = chart.series.find((s) => s.labels[chart.seriesBy] === series)?.dataPoints ?? []
+  const endMs = Date.parse(history.end ?? history.sampledAt)
+  const step = history.stepSeconds ?? 60
+  for (let i = pts.length - 1; i >= 0; i--) {
+    const v = pts[i].value
+    if (v === null) continue
+    const stale = Number.isFinite(endMs) && endMs / 1000 - pts[i].timestamp > HISTORY_RECENT_STEPS * step
+    return { value: v, at: pts[i].timestamp, source: chart.source, stale }
+  }
+  return undefined
+}
+
+export const SESSION_STATE_GROUPS: { id: string; label: string; states: (state: string) => boolean }[] = [
+  { id: 'active', label: 'active', states: (s) => s === 'active' },
+  { id: 'idle', label: 'idle', states: (s) => s === 'idle' },
+  { id: 'idleInTx', label: 'idle in transaction', states: (s) => s.startsWith('idle in transaction') },
+  { id: 'other', label: 'other', states: (s) => s !== 'active' && s !== 'idle' && !s.startsWith('idle in transaction') },
+]
+
+/** One instance's sessions by state group; a sample where the instance did not answer is a gap. */
+export function sessionStateSeries(samples: Sample[], pod: string): TimeSeries[] {
+  return SESSION_STATE_GROUPS.map((g) => ({
+    labels: { series: g.label },
+    dataPoints: samples.map((s) => {
+      const inst = s.instances?.[pod]
+      if (!inst?.byState) return { timestamp: s.t / 1000, value: null }
+      let v = 0
+      for (const [state, n] of Object.entries(inst.byState)) if (g.states(state)) v += n
+      return { timestamp: s.t / 1000, value: v }
+    }),
+  }))
+}
+
+/** The databases to chart: the five largest in the latest sample unless the viewer picked some. */
+export function chartedDatabases(samples: Sample[], picked: string[] | 'all' | null): { all: string[]; shown: string[] } {
+  const seen = new Set<string>()
+  for (const s of samples) for (const d of Object.keys(s.dbSizes ?? {})) seen.add(d)
+  const latest = [...samples].reverse().find((s) => s.dbSizes)?.dbSizes ?? {}
+  const all = [...seen].sort((a, b) => (latest[b] ?? -1) - (latest[a] ?? -1) || a.localeCompare(b))
+  if (picked === 'all') return { all, shown: all }
+  if (picked && picked.length > 0) return { all, shown: all.filter((d) => picked.includes(d)) }
+  return { all, shown: all.slice(0, 5) }
+}

package/src/components/cnpg/useCNPGClusterAssessment.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react'
+import { cnpgDimensions } from '@skyhook-io/k8s-ui'
+import { useCNPGRuntime } from '../../api/cnpg'
+import { useCNPGClusterHA } from '../../api/cnpg-ha'
+import { cnpgReplicationGap, cnpgReplicationLive, withLiveReplication } from './runtimeAssessment'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+
+/**
+ * One Cluster's assessment, shared by the page header's chips, the Overview
+ * and the tabs: the fleet row (cached objects, issues, Prometheus) enriched
+ * with what the instance managers report, and the four dimensions derived
+ * from it. Every consumer reads this, so none can read calmer than another.
+ */
+export function useCNPGClusterAssessment(namespace: string, name: string) {
+  // The workspace is read for the object's own namespace: an explicitly opened
+  // Cluster shows its facts whatever the namespace filter is.
+  const { query, fleet } = useCNPGFleet([namespace])
+  const runtime = useCNPGRuntime(namespace, name)
+  const ha = useCNPGClusterHA(namespace, name)
+  const baseRow = fleet?.rows.find((r) => r.namespace === namespace && r.name === name)
+  const row = useMemo(() => (baseRow ? withLiveReplication(baseRow, runtime.data) : undefined), [baseRow, runtime.data])
+  const dimensions = useMemo(
+    () =>
+      row
+        ? cnpgDimensions({ row, ha: ha.data, replication: cnpgReplicationLive(runtime.data), replicationGap: cnpgReplicationGap(runtime.data, runtime.error) })
+        : undefined,
+    [row, ha.data, runtime.data, runtime.error],
+  )
+  return { query, fleet, runtime, ha, row, dimensions }
+}

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

@@ -0,0 +1,45 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, expect, it, vi } from 'vitest'
+import { cnpgPortForwardCommand } from '@skyhook-io/k8s-ui'
+import { useCNPGKubectlContext } from './useCNPGKubectlContext'
+const state = vi.hoisted(() => ({ context: 'kind-orders', mode: 'local' as string | undefined, embedded: false, contexts: [{ name: 'kind-orders', source: 'orders' }] as { name: string; originalName?: string; source?: string }[] | undefined }))
+vi.mock('../../api/client', () => ({
+  useCapabilities: () => ({ data: state.mode ? { deployment: { mode: state.mode } } : undefined }),
+  useContexts: () => ({ data: state.contexts }),
+}))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: state.context } }) }))
+vi.mock('../../context/NavCustomization', () => ({ useNavCustomization: () => ({ embedded: state.embedded }) }))
+function Context() {
+  const context = useCNPGKubectlContext()
+  return <span>{cnpgPortForwardCommand({ name: 'orders-rw', port: 5432 } as any, 'db', 5432, context?.name)} · {context?.source ?? 'current kubectl context'}</span>
+}
+const render = () => renderToStaticMarkup(<Context />)
+afterEach(() => {
+  state.context = 'kind-orders'; state.mode = 'local'; state.embedded = false; state.contexts = [{ name: 'kind-orders', source: 'orders' }]
+})
+it('only supplies a known local kubeconfig context, never a Hub or in-cluster identity', () => {
+  expect(render()).toContain('kind-orders')
+  state.embedded = true; expect(render()).toContain('current kubectl context'); expect(render()).not.toContain('--context')
+  state.embedded = false; state.mode = 'in-cluster'; expect(render()).toContain('current kubectl context'); expect(render()).not.toContain('--context')
+  state.mode = undefined; expect(render()).toContain('current kubectl context')
+  state.mode = 'local'; state.context = ''; expect(render()).toContain('current kubectl context')
+})
+it('uses the in-file name and source for a collision-qualified context', () => {
+  state.context = 'prod (staging)'
+  state.contexts = [{ name: 'prod', source: 'production' }, { name: 'prod (staging)', originalName: 'prod', source: 'staging' }]
+  expect(render()).toContain('kubectl --context prod -n db')
+  expect(render()).toContain('staging')
+  expect(render()).not.toContain('prod (staging)')
+})
+it('uses a plain context name when it has no originalName', () => {
+  expect(render()).toContain('kubectl --context kind-orders -n db')
+  expect(render()).toContain('orders')
+})
+it('leaves kubectl context selection to the shell when the context cannot be resolved', () => {
+  state.context = 'prod (staging)'
+  expect(render()).not.toContain('--context')
+  expect(render()).toContain('current kubectl context')
+  state.contexts = undefined
+  expect(render()).not.toContain('--context')
+  expect(render()).not.toContain('prod (staging)')
+})

package/src/components/cnpg/useCNPGKubectlContext.ts

@@ -0,0 +1,13 @@
+import { useCapabilities, useContexts } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
+import { useNavCustomization } from '../../context/NavCustomization'
+
+export function useCNPGKubectlContext(): { name: string; source?: string } | undefined {
+  const { connection } = useConnection()
+  const { data } = useCapabilities()
+  const { data: contexts } = useContexts()
+  const { embedded } = useNavCustomization()
+  if (embedded || data?.deployment?.mode !== 'local') return undefined
+  const context = contexts?.find((context) => context.name === connection.context)
+  return context ? { name: context.originalName || context.name, source: context.source } : undefined
+}

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

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { act, useEffect } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { MemoryRouter, useLocation } from 'react-router-dom'
+import { afterEach, describe, expect, it } from 'vitest'
+import { useCNPGNavigate } from './useCNPGNavigate'
+
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+afterEach(() => {
+  act(() => root?.unmount())
+  container?.remove()
+  root = null
+})
+
+function Probe({ to, onLocation }: { to: string; onLocation: (path: string) => void }) {
+  const navigate = useCNPGNavigate()
+  const location = useLocation()
+  useEffect(() => {
+    onLocation(location.pathname + location.search)
+  }, [location, onLocation])
+  return (
+    <button type="button" onClick={() => navigate(to)}>
+      go
+    </button>
+  )
+}
+
+function landAt(start: string, to: string): string {
+  let at = ''
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() =>
+    root!.render(
+      <MemoryRouter initialEntries={[start]}>
+        <Probe to={to} onLocation={(p) => (at = p)} />
+      </MemoryRouter>,
+    ),
+  )
+  act(() => container!.querySelector('button')!.click())
+  return at
+}
+
+describe('useCNPGNavigate', () => {
+  it('keeps the namespace filter, which the app would otherwise reset to All namespaces', () => {
+    expect(landAt('/cnpg?namespaces=pg', '/cnpg/operator')).toBe('/cnpg/operator?namespaces=pg')
+    expect(landAt('/cnpg?namespaces=pg', '/workload/services/pg/pg-rw?tab=reachability')).toBe('/workload/services/pg/pg-rw?tab=reachability&namespaces=pg')
+  })
+  it('leaves a destination that names its own namespaces alone', () => {
+    expect(landAt('/cnpg?namespaces=pg', '/cnpg?namespaces=other')).toBe('/cnpg?namespaces=other')
+  })
+  it('keeps namespace and investigation parameters when opening cluster-scoped Declarations', () => {
+    expect(landAt('/cnpg/clusters/db/pg?tab=spec&namespaces=db&ai-run=run-1', '/cnpg/declarations?cluster=db%2Fpg')).toBe('/cnpg/declarations?cluster=db%2Fpg&namespaces=db&ai-run=run-1')
+  })
+})

package/src/components/cnpg/useCNPGNavigate.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { useLocation, useNavigate, type NavigateOptions, type To } from 'react-router-dom'
+import { withCrossViewParams } from '../../utils/navigation'
+
+/**
+ * navigate() for the CloudNativePG screens: a string path keeps the current
+ * cross-view params (the namespace filter, an open investigation), as the
+ * app's own navigation does. Without them the app reads the missing
+ * ?namespaces= as "All namespaces" and saves that as the user's choice.
+ */
+export function useCNPGNavigate() {
+  const navigate = useNavigate()
+  const { search } = useLocation()
+  return useCallback(
+    (to: To | number, options?: NavigateOptions) => {
+      if (typeof to === 'number') return navigate(to)
+      return navigate(typeof to === 'string' ? withCrossViewParams(to, search) : to, options)
+    },
+    [navigate, search],
+  )
+}

package/src/components/cnpg/useCNPGPoolerLive.ts

@@ -0,0 +1,46 @@
+import type { UseQueryResult } from '@tanstack/react-query'
+import type { CNPGPoolerLive } from '@skyhook-io/k8s-ui'
+import { useCNPGPoolerRuntime } from '../../api/cnpg'
+import { useCNPGPgBouncerState, useCNPGPoolerCapabilities } from '../../api/cnpg-sessions'
+import { formatGrant } from '@skyhook-io/k8s-ui'
+
+/**
+ * The live reads the Pooler summary shows beside the spec, and the queries
+ * behind them so a host can say when a refresh failed over cached values.
+ */
+export function useCNPGPoolerLive(namespace: string, name: string): { live: CNPGPoolerLive; queries: Pick<UseQueryResult<unknown>, 'isRefetchError' | 'error' | 'dataUpdatedAt'>[] } {
+  const caps = useCNPGPoolerCapabilities(namespace, name)
+  const runtime = useCNPGPoolerRuntime(namespace, name)
+  const observeDenied = caps.data?.actions.observeState.permission === 'denied'
+  const state = useCNPGPgBouncerState(namespace, name, !!caps.data && !observeDenied)
+
+  const live: CNPGPoolerLive = {}
+  if (caps.data) {
+    live.deployment = caps.data.facts.deployment
+    live.service = caps.data.facts.service
+  }
+  if (runtime.data) {
+    const denied = runtime.data.permission.proxy === 'denied'
+    live.pressure = {
+      state: denied ? 'denied' : 'ok',
+      reason: denied ? `needs ${formatGrant(runtime.data.permission.grant) ?? 'get pods/proxy'}` : undefined,
+      pods: runtime.data.pods,
+    }
+  } else {
+    live.pressure = runtime.isLoading
+      ? { state: 'loading', pods: [] }
+      : { state: 'error', reason: runtime.error instanceof Error ? runtime.error.message : 'read failed', pods: [] }
+  }
+  if (caps.data) {
+    if (observeDenied) {
+      live.observed = { state: 'denied', grant: caps.data.actions.observeState.grant, pods: [] }
+    } else if (state.data) {
+      live.observed = { state: state.data.permission.exec === 'denied' ? 'denied' : 'ok', grant: state.data.permission.grant, pods: state.data.pods }
+    } else {
+      live.observed = state.isLoading
+        ? { state: 'loading', pods: [] }
+        : { state: 'error', reason: state.error instanceof Error ? state.error.message : undefined, pods: [] }
+    }
+  }
+  return { live, queries: [caps, runtime, state] }
+}

package/src/components/cnpg/useCNPGScreenParams.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+import { useLocation, useSearchParams } from 'react-router-dom'
+
+/**
+ * A CloudNativePG screen's own URL parameters (`q`, `cat`, `filter`, …),
+ * written in place: an empty value removes the parameter, history is replaced
+ * and its state (the return to the previous page) is kept.
+ */
+export function useCNPGScreenParams(): [URLSearchParams, (update: Record<string, string | null>) => void] {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const location = useLocation()
+  const setParams = useCallback(
+    (update: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams)
+      for (const [k, v] of Object.entries(update)) {
+        if (v === null || v === '') params.delete(k)
+        else params.set(k, v)
+      }
+      setSearchParams(params, { replace: true, state: location.state })
+    },
+    [searchParams, setSearchParams, location.state],
+  )
+  return [searchParams, setParams]
+}