@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/operations/store.ts

@@ -0,0 +1,98 @@
+import { useSyncExternalStore } from 'react'
+import { getApiBase } from '../../../api/config'
+import { supersedeFor, type CNPGTrackedOperation } from './model'
+
+// Tracked operations for this browser session: they survive tab changes and
+// reloads of the page, and end with the session. Storage can be unavailable
+// (private windows, blocked site data); the tracker then lives in memory. One
+// key holds the records of every cluster a Radar Hub tab shows, so each record
+// carries the API base it was issued against.
+
+const STORAGE_KEY = 'radar.cnpg.operations.v1'
+const MAX_OPS = 50
+// Finished operations stay visible this long, then drop out on their own.
+const KEEP_FINISHED_MS = 30 * 60_000
+
+let ops: CNPGTrackedOperation[] = load()
+const listeners = new Set<() => void>()
+
+function load(): CNPGTrackedOperation[] {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY)
+    const parsed = raw ? JSON.parse(raw) : []
+    return Array.isArray(parsed) ? parsed : []
+  } catch {
+    return []
+  }
+}
+
+function save() {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(ops))
+  } catch {
+    // Storage unavailable: keep the in-memory copy.
+  }
+}
+
+function emit(next: CNPGTrackedOperation[]) {
+  const now = Date.now()
+  ops = next.filter((o) => !o.finishedAt || now - o.finishedAt < KEEP_FINISHED_MS).slice(-MAX_OPS)
+  save()
+  for (const l of listeners) l()
+}
+
+function subscribe(l: () => void) {
+  listeners.add(l)
+  return () => listeners.delete(l)
+}
+
+export interface TrackCNPGOperationInput {
+  kind: string
+  label: string
+  context: string
+  namespace: string
+  cluster: string
+  clusterUID?: string
+  target?: { name: string; uid?: string }
+  baseline?: Record<string, unknown>
+  link?: CNPGTrackedOperation['link']
+}
+
+/**
+ * Start following an operation the server accepted. Any unfinished operation
+ * the new one makes moot is marked superseded.
+ */
+export function trackCNPGOperation(input: TrackCNPGOperationInput): string {
+  const now = Date.now()
+  const op: CNPGTrackedOperation = {
+    id: `${now.toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+    kind: input.kind,
+    label: input.label,
+    apiBase: getApiBase(),
+    context: input.context,
+    namespace: input.namespace,
+    cluster: input.cluster,
+    clusterUID: input.clusterUID,
+    target: input.target,
+    startedAt: now,
+    baseline: input.baseline ?? {},
+    state: 'requested',
+    lastProgressAt: now,
+    link: input.link,
+  }
+  emit([...supersedeFor(ops, op), op])
+  return op.id
+}
+
+export function updateCNPGOperations(update: (all: CNPGTrackedOperation[]) => CNPGTrackedOperation[]) {
+  const next = update(ops)
+  if (next !== ops) emit(next)
+}
+
+export function dismissCNPGOperation(id: string) {
+  emit(ops.filter((o) => o.id !== id))
+}
+
+export function useCNPGOperations(): CNPGTrackedOperation[] {
+  return useSyncExternalStore(subscribe, () => ops, () => ops)
+}

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

@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest'
+import type { CNPGOperatorResponse, CNPGOperatorVerdict } from '../../api/cnpg'
+import { cnpgOperatorActionNote, cnpgOperatorBannerModel, cnpgOperatorConcerns, cnpgOperatorState, cnpgRestartHistory } from './operatorStatus'
+
+const down: CNPGOperatorVerdict = {
+  state: 'notReconciling',
+  reasons: ['no operator instance has renewed the leader lease cnpg-system/db9c8771.cnpg.io'],
+  webhookRejects: true,
+  webhookReason: 'the admission webhook Service cnpg-system/cnpg-webhook-service has no ready endpoint and fails closed, so the API server rejects writes to CloudNativePG objects',
+  operator: 'cnpg-system/cnpg-controller-manager',
+}
+const up: CNPGOperatorVerdict = { state: 'reconciling', webhookRejects: false }
+const unknown: CNPGOperatorVerdict = { state: 'unknown', unknown: 'the leader lease is not readable (needs get leases in cnpg-system)', webhookRejects: null }
+
+describe('cnpgOperatorBannerModel', () => {
+  it('names the namespaces whose operator is down and why', () => {
+    const m = cnpgOperatorBannerModel({ pg: down, other: up }, ['pg', 'other', 'pg'])
+    expect(m?.stale?.namespaces).toEqual(['pg'])
+    expect(m?.stale?.reasons[0]).toMatch(/^No operator instance has renewed the leader lease/)
+    expect(m?.rejects).toMatch(/no ready endpoint/)
+  })
+  it('stays quiet when reconciling or unknown', () => {
+    expect(cnpgOperatorBannerModel({ pg: up }, ['pg'])).toBeNull()
+    expect(cnpgOperatorBannerModel({ pg: unknown }, ['pg'])).toBeNull()
+    expect(cnpgOperatorBannerModel(undefined, ['pg'])).toBeNull()
+  })
+})
+
+describe('cnpgOperatorActionNote', () => {
+  it('warns when the operator is observed down and notes when unknown', () => {
+    expect(cnpgOperatorActionNote(down)?.tone).toBe('warning')
+    expect(cnpgOperatorActionNote(unknown)).toEqual({ tone: 'info', text: expect.stringContaining('needs get leases') })
+    expect(cnpgOperatorActionNote(up)).toBeNull()
+  })
+})
+
+describe('cnpgOperatorActionNote when unknown', () => {
+  it('says briefly what could not be confirmed', () => {
+    expect(cnpgOperatorActionNote({ state: 'unknown', unknown: "couldn't read its leader lease" } as never)).toEqual({
+      tone: 'info',
+      text: "Radar couldn't confirm the operator is running (couldn't read its leader lease).",
+    })
+  })
+})
+
+describe('operator current state', () => {
+  const now = Date.parse('2026-10-04T10:00:00Z')
+  const op = (pods: NonNullable<CNPGOperatorResponse['components'][number]['pods']>): CNPGOperatorResponse => ({
+    coverage: { deployments: { state: 'full' }, services: { state: 'full' } },
+    components: [{ role: 'operator', namespace: 'cnpg-system', deployment: 'cnpg-controller-manager', readyReplicas: 1, replicas: 1, pods }],
+    config: [],
+  })
+  it('words restart history with when the last one ended, and only a recent one as trouble', () => {
+    const old = op([{ name: 'm-1', ready: true, restarts: 33, lastTermination: { container: 'manager', reason: 'Error', exitCode: 1, finishedAt: '2026-10-04T07:53:31Z' } }])
+    expect(cnpgRestartHistory(old.components[0], now)).toMatchObject({ recent: false })
+    expect(cnpgRestartHistory(old.components[0], now)!.text).toMatch(/^33 restarts since the Pod was created · last ended .* ago \(Error, exit 1\)$/)
+    expect(cnpgOperatorConcerns(old, now)).toEqual([expect.objectContaining({ tone: 'neutral' })])
+    const fresh = op([{ name: 'm-1', ready: true, restarts: 2, lastTermination: { container: 'manager', reason: 'OOMKilled', exitCode: 137, finishedAt: '2026-10-04T09:40:00Z' } }])
+    expect(cnpgOperatorConcerns(fresh, now)[0]).toMatchObject({ tone: 'degraded' })
+    // Ready at this read is not "ready" for a component that just restarted.
+    expect(cnpgOperatorState(old, now).confirmed).toContain('every component is ready')
+    expect(cnpgOperatorState(fresh, now).confirmed).toContain('every component reports ready right now (see the restarts above)')
+  })
+  it('says nothing about restarts that never happened, and leads with readiness', () => {
+    expect(cnpgRestartHistory({ pods: [{ name: 'm-1', ready: true, restarts: 0 }] }, now)).toBeNull()
+    const notReady = op([{ name: 'm-1', ready: false, restarts: 0 }])
+    notReady.components[0].readyReplicas = 0
+    expect(cnpgOperatorConcerns(notReady, now)).toEqual([{ tone: 'unhealthy', text: 'The operator has 0 of 1 replicas ready.' }])
+  })
+})
+
+describe('operator current state claims only what it read', () => {
+  const diag = (webhooks: any[]) => ({
+    namespace: 'cnpg-system',
+    deployment: 'cnpg-controller-manager',
+    pods: [],
+    podCoverage: { state: 'ok' },
+    leader: { state: 'ok', holderIsCurrentPod: true, stale: false },
+    watch: { all: true, namespaces: [], source: '' },
+    webhooks,
+    webhookServices: [{ state: 'ok', namespace: 'cnpg-system', name: 'cnpg-webhook-service', readyEndpoints: 1, notReadyEndpoints: 0 }],
+    metricsPort: 8080,
+    reconcile: [],
+    events: { state: 'ok', items: [] },
+  })
+  const op = (webhooks: any[]): CNPGOperatorResponse =>
+    ({
+      coverage: { deployments: { state: 'full' }, services: { state: 'full' } },
+      components: [{ role: 'operator', namespace: 'cnpg-system', deployment: 'cnpg-controller-manager', readyReplicas: 1, replicas: 1, pods: [] }],
+      config: [],
+      diagnosis: [diag(webhooks)],
+    }) as unknown as CNPGOperatorResponse
+  const mutating = { state: 'ok', kind: 'MutatingWebhookConfiguration', name: 'cnpg-mutating', webhooks: [{ name: 'm', failurePolicy: 'Fail', caBundleSet: true, service: 'cnpg-system/cnpg-webhook-service', url: false }] }
+  it('confirms webhooks only when every configuration was read', () => {
+    expect(cnpgOperatorState(op([mutating])).confirmed).toContain('its webhooks have ready endpoints')
+    const partial = cnpgOperatorState(op([mutating, { state: 'denied', kind: 'ValidatingWebhookConfiguration', name: 'cnpg-validating', webhooks: [] }]))
+    expect(partial.confirmed).not.toContain('its webhooks have ready endpoints')
+    expect(partial.unread.join(' ')).toContain('cnpg-validating')
+  })
+  it('treats an operator scaled to zero as not reconciling', () => {
+    const scaled = op([mutating])
+    scaled.components[0].readyReplicas = 0
+    scaled.components[0].replicas = 0
+    expect(cnpgOperatorState(scaled).concerns[0]).toEqual({ tone: 'unhealthy', text: 'The operator is scaled to 0: nothing reconciles.' })
+  })
+})
+
+describe('clusters blocked on a plugin', () => {
+  it('joins the cluster’s plugin phase to that plugin’s Deployment, side by side', () => {
+    const op = {
+      coverage: { deployments: { state: 'full' }, services: { state: 'full' } },
+      components: [{ role: 'plugin', pluginName: 'barman-cloud.cloudnative-pg.io', namespace: 'cnpg-system', deployment: 'barman-cloud', readyReplicas: 1, replicas: 1, pods: [{ name: 'b-1', ready: true, restarts: 0 }] }],
+      config: [],
+    } as unknown as CNPGOperatorResponse
+    const row = {
+      namespace: 'pgrt',
+      name: 'pg-runtime',
+      cluster: { status: { phase: 'Cluster cannot proceed to reconciliation due to an unknown plugin being required' }, spec: { plugins: [{ name: 'barman-cloud.cloudnative-pg.io' }, { name: 'missing.example.io' }] } },
+    } as any
+    const out = cnpgOperatorState(op, Date.now(), [row]).concerns
+    expect(out[0]).toEqual({
+      tone: 'unhealthy',
+      text: 'Cluster pgrt/pg-runtime requires a plugin the operator does not know — barman-cloud.cloudnative-pg.io: 1/1 ready; missing.example.io: no Deployment serving it was found.',
+    })
+  })
+})
+
+it('qualifies unseen operator components without contradicting the ready components read', () => {
+  const data = { coverage: { deployments: { state: 'partial' }, services: { state: 'full' } }, components: [{ role: 'operator', namespace: 'system', deployment: 'cnpg', replicas: 1, readyReplicas: 1 }], config: [] } as unknown as CNPGOperatorResponse
+  const state = cnpgOperatorState(data)
+  expect(state.unread.join(' ')).toContain('Other operator or plugin components may be outside this read: Deployments not read in some namespaces')
+  expect(state.unread.join(' ')).not.toContain('Operator health cannot be assessed')
+  expect(state.confirmed.join(' ')).toContain('every component is ready')
+})

package/src/components/cnpg/operatorStatus.ts

@@ -0,0 +1,194 @@
+import { coverageLabel } from './shared'
+import type { CNPGOperatorComponent, CNPGOperatorResponse, CNPGOperatorVerdict } from '../../api/cnpg'
+import { cnpgClusterPlugins, cnpgPluginPhase, formatAge, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+
+export interface CNPGOperatorBannerModel {
+  /** The operator watching these namespaces is not leading, so their CNPG status may be stale. */
+  stale: { reasons: string[]; namespaces: string[] } | null
+  /** Why the admission webhook rejects CNPG writes, when it does. */
+  rejects: string | null
+}
+
+function sentence(s: string): string {
+  const t = s.trim()
+  if (!t) return t
+  return t[0].toUpperCase() + t.slice(1) + (/[.!?]$/.test(t) ? '' : '.')
+}
+
+/**
+ * What the fleet and cluster pages say about the operator for the namespaces
+ * they show. Only an observed "not leading" or "webhook rejects" raises
+ * anything: an unknown or unwatched state stays quiet here and the Operator
+ * screen explains it.
+ */
+export function cnpgOperatorBannerModel(verdicts: Record<string, CNPGOperatorVerdict> | undefined, namespaces: string[]): CNPGOperatorBannerModel | null {
+  if (!verdicts) return null
+  const staleNs: string[] = []
+  const reasons = new Set<string>()
+  let rejects: string | null = null
+  for (const ns of [...new Set(namespaces)].sort()) {
+    const v = verdicts[ns]
+    if (!v) continue
+    if (v.state === 'notReconciling') {
+      staleNs.push(ns)
+      for (const r of v.reasons ?? []) reasons.add(sentence(r))
+    }
+    if (v.webhookRejects === true && v.webhookReason) rejects = sentence(v.webhookReason)
+  }
+  if (staleNs.length === 0 && !rejects) return null
+  return { stale: staleNs.length > 0 ? { reasons: [...reasons], namespaces: staleNs } : null, rejects }
+}
+
+/** A dialog's note about the operator: a warning when it is observed down, a note when unknown. */
+export function cnpgOperatorActionNote(v: CNPGOperatorVerdict | undefined): { tone: 'warning' | 'info'; text: string } | null {
+  if (!v) return null
+  if (v.state === 'notReconciling') {
+    const why = (v.reasons ?? []).map(sentence).join(' ')
+    return {
+      tone: 'warning',
+      text: `The CloudNativePG operator is not reconciling this cluster. ${why} The API server may accept this change, but nothing acts on it until an operator instance leads again.`.replace(/\s+/g, ' ').trim(),
+    }
+  }
+  if (v.state === 'unknown' && v.unknown) {
+    return { tone: 'info', text: `Radar couldn't confirm the operator is running (${v.unknown}).` }
+  }
+  return null
+}
+
+/** A restart that ended within this long is "recent": the operator may still be crash-looping. */
+export const CNPG_OPERATOR_RECENT_RESTART_MS = 60 * 60 * 1000
+
+export interface CNPGOperatorConcern {
+  tone: 'unhealthy' | 'degraded' | 'neutral'
+  text: string
+}
+
+/** A component's restart history in one line, with when the last one ended and why; null when it never restarted. */
+export function cnpgRestartHistory(c: Pick<CNPGOperatorComponent, 'pods'>, now = Date.now()): { text: string; recent: boolean } | null {
+  const pods = c.pods ?? []
+  const restarts = pods.reduce((n, p) => n + p.restarts, 0)
+  if (restarts === 0) return null
+  const last = pods
+    .map((p) => p.lastTermination)
+    .filter((t): t is NonNullable<typeof t> => !!t?.finishedAt)
+    .sort((a, b) => Date.parse(b.finishedAt!) - Date.parse(a.finishedAt!))[0]
+  const ended = last?.finishedAt ? Date.parse(last.finishedAt) : NaN
+  const recent = Number.isFinite(ended) && now - ended <= CNPG_OPERATOR_RECENT_RESTART_MS
+  const why = last ? ` (${[last.reason, `exit ${last.exitCode}`].filter(Boolean).join(', ')})` : ''
+  const when = last?.finishedAt ? ` · last ended ${formatAge(last.finishedAt)} ago${why}` : ''
+  return { text: `${restarts} restart${restarts === 1 ? '' : 's'} since the Pod was created${when}`, recent }
+}
+
+function componentName(c: CNPGOperatorComponent): string {
+  return c.role === 'operator' ? 'The operator' : `Plugin ${c.pluginName ?? c.deployment}`
+}
+
+export interface CNPGOperatorState {
+  concerns: CNPGOperatorConcern[]
+  /** What was read and found in order, said only from evidence. */
+  confirmed: string[]
+  /** What could not be read, so its absence from `concerns` proves nothing. */
+  unread: string[]
+}
+
+/**
+ * What the Operator screen leads with: the states that stop or slow
+ * reconciliation, then restart history with when it last happened, and what
+ * could not be read. Restart totals are cumulative, so only a recent one is
+ * worded as current trouble.
+ */
+export function cnpgOperatorConcerns(op: CNPGOperatorResponse, now = Date.now()): CNPGOperatorConcern[] {
+  return cnpgOperatorState(op, now).concerns
+}
+
+export function cnpgOperatorState(op: CNPGOperatorResponse, now = Date.now(), clusters: CNPGFleetRow[] = []): CNPGOperatorState {
+  const concerns: CNPGOperatorConcern[] = cnpgPluginBlockedClusters(op, clusters, now)
+  const confirmed: string[] = []
+  const unread: string[] = []
+  const operators = op.components.filter((c) => c.role === 'operator')
+  const coverageGaps = (['deployments', 'services'] as const).filter((k) => op.coverage[k]?.state !== 'full')
+  if (coverageGaps.length > 0) unread.push(`${operators.length === 0 ? 'Operator health cannot be assessed with your access' : 'Other operator or plugin components may be outside this read'}: ${coverageGaps.map((k) => `${k === 'deployments' ? 'Deployments' : 'Services'} ${coverageLabel(op.coverage[k])}`).join('; ')}.`)
+  else if (operators.length === 0) unread.push('No operator Deployment was found in the namespaces you can read.')
+  let allReady = op.components.length > 0
+  for (const c of op.components) {
+    if (c.readyReplicas === null || c.replicas === null) {
+      allReady = false
+      unread.push(`${componentName(c)}: readiness not reported.`)
+    } else if (c.replicas === 0) {
+      allReady = false
+      concerns.push({ tone: c.role === 'operator' ? 'unhealthy' : 'degraded', text: `${componentName(c)} is scaled to 0${c.role === 'operator' ? ': nothing reconciles' : ''}.` })
+    } else if (c.readyReplicas < c.replicas) {
+      allReady = false
+      concerns.push({ tone: c.readyReplicas === 0 ? 'unhealthy' : 'degraded', text: `${componentName(c)} has ${c.readyReplicas} of ${c.replicas} replicas ready.` })
+    }
+  }
+  // Ready now says little about a component that keeps restarting.
+  const restartedRecently = op.components.some((c) => cnpgRestartHistory(c, now)?.recent)
+  if (allReady) confirmed.push(restartedRecently ? 'every component reports ready right now (see the restarts above)' : 'every component is ready')
+  const diagnoses = op.diagnosis ?? []
+  if (operators.length > 0 && diagnoses.length === 0) unread.push('Leadership and webhooks were not read.')
+  let leading = diagnoses.length > 0
+  let webhooksServed = diagnoses.length > 0
+  for (const d of diagnoses) {
+    if (d.leader.state === 'ok') {
+      if (d.leader.stale) {
+        leading = false
+        concerns.push({ tone: 'unhealthy', text: `No operator instance is leading in ${d.namespace}: the leader Lease was not renewed, so nothing reconciles.` })
+      }
+    } else if (d.leader.state !== 'disabled') {
+      leading = false
+      unread.push(`Leadership in ${d.namespace} not read${d.leader.reason ? `: ${d.leader.reason}` : ''}.`)
+    }
+    for (const svc of d.webhookServices) {
+      const fails = d.webhooks.some((w) => w.state === 'ok' && w.webhooks.some((h) => h.failurePolicy === 'Fail' && h.service === `${svc.namespace}/${svc.name}`))
+      if (svc.state !== 'ok' || svc.readyEndpoints === null) {
+        webhooksServed = false
+        unread.push(`Endpoints of the webhook Service ${svc.namespace}/${svc.name} not read.`)
+      } else if (svc.readyEndpoints === 0) {
+        webhooksServed = false
+        if (fails) concerns.push({ tone: 'unhealthy', text: `The admission webhook Service ${svc.namespace}/${svc.name} has no ready endpoint and its failure policy is Fail: every CloudNativePG write is rejected.` })
+      }
+    }
+    const unreadHooks = d.webhooks.filter((w) => w.state !== 'ok')
+    if (unreadHooks.length > 0) {
+      // Services are found through readable configurations only, so an unread
+      // one may name a Service with no endpoint.
+      webhooksServed = false
+      unread.push(`Admission webhook configurations not read (${unreadHooks.map((w) => w.name).join(', ')}).`)
+    }
+    if (d.webhookServices.length === 0) webhooksServed = false
+  }
+  if (leading) confirmed.push('the operator is leading')
+  if (webhooksServed) confirmed.push('its webhooks have ready endpoints')
+  for (const c of op.components) {
+    const h = cnpgRestartHistory(c, now)
+    if (h) concerns.push({ tone: h.recent ? 'degraded' : 'neutral', text: `${componentName(c)}: ${h.text}.` })
+    else if (!c.pods && c.podCoverage && c.podCoverage.state !== 'ok') unread.push(`${componentName(c)}: restart history not read${c.podCoverage.reason ? ` (${c.podCoverage.reason})` : ''}.`)
+  }
+  return { concerns, confirmed, unread }
+}
+
+/**
+ * Clusters whose phase says the operator is stuck on a plugin, joined to what
+ * this screen knows about that plugin: whether its Deployment is here, ready,
+ * and when it last restarted. Facts side by side; which one caused the other
+ * is not claimed.
+ */
+export function cnpgPluginBlockedClusters(op: CNPGOperatorResponse, clusters: CNPGFleetRow[], now = Date.now()): CNPGOperatorConcern[] {
+  const out: CNPGOperatorConcern[] = []
+  for (const r of clusters) {
+    const phase = cnpgPluginPhase(r.cluster)
+    if (!phase) continue
+    const what = phase === 'unknownPlugin' ? 'requires a plugin the operator does not know' : 'hit an error talking to a plugin'
+    const plugins = cnpgClusterPlugins(r.cluster)
+    const parts = plugins.map((name) => {
+      const c = op.components.find((x) => x.role === 'plugin' && x.pluginName === name)
+      if (!c) return `${name}: no Deployment serving it was found`
+      const ready = c.readyReplicas !== null && c.replicas !== null ? `${c.readyReplicas}/${c.replicas} ready` : 'readiness not reported'
+      const h = cnpgRestartHistory(c, now)
+      return `${name}: ${ready}${h ? `, ${h.text}` : ''}`
+    })
+    out.push({ tone: 'unhealthy', text: `Cluster ${r.namespace}/${r.name} ${what}${parts.length ? ` — ${parts.join('; ')}` : ''}.` })
+  }
+  return out
+}

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

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { cnpgClusterProblemsPath, cnpgDimensionPath, cnpgWithinDetail } from './paths'
+import { issuesPathForSubject } from '../../utils/page-links'
+import { writeViewParams } from '../../utils/navigation'
+import { issueSubjectFromParams } from '../issues/IssuesPane'
+
+describe('cnpgDimensionPath', () => {
+  it('opens each health dimension where it is explained', () => {
+    expect(cnpgDimensionPath('db', 'pg', 'kind', 'replication')).toBe('/cnpg/clusters/db/pg?ctx=kind&tab=replication')
+    expect(cnpgDimensionPath('db', 'pg', 'kind', 'serving')).toBe('/cnpg/clusters/db/pg?ctx=kind&tab=replication')
+    expect(cnpgDimensionPath('db', 'pg', 'kind', 'storage')).toBe('/cnpg/clusters/db/pg?ctx=kind&tab=storage')
+    expect(cnpgDimensionPath('db', 'pg', undefined, 'protection')).toBe('/cnpg/clusters/db/pg?tab=backups')
+  })
+})
+
+describe('cnpgWithinDetail', () => {
+  it('turns a link to the open Cluster page into a tab change that keeps its other params', () => {
+    expect(cnpgWithinDetail('/cnpg/clusters/db/pg', '?ctx=kind&tab=performance&section=history&charts=storage&drawer=x', '/cnpg/clusters/db/pg?ctx=kind&tab=backups')).toBe(
+      '/cnpg/clusters/db/pg?ctx=kind&tab=backups&drawer=x',
+    )
+    expect(cnpgWithinDetail('/cnpg/clusters/db/pg', '?ctx=kind', '/cnpg/clusters/db/pg?ctx=kind&tab=performance&section=history&charts=replication')).toBe(
+      '/cnpg/clusters/db/pg?ctx=kind&tab=performance&section=history&charts=replication',
+    )
+  })
+  it('leaves a link to another page alone', () => {
+    expect(cnpgWithinDetail('/cnpg', '', '/cnpg/clusters/db/pg?tab=replication')).toBeNull()
+    expect(cnpgWithinDetail('/cnpg/clusters/db/other', '', '/cnpg/clusters/db/pg?tab=replication')).toBeNull()
+  })
+})
+
+describe('cnpgClusterProblemsPath', () => {
+  it('opens the Cluster with its problems listed', () => {
+    expect(cnpgClusterProblemsPath('db', 'pg', 'kind')).toBe('/cnpg/clusters/db/pg?ctx=kind&problems=all')
+    expect(cnpgClusterProblemsPath('db', 'pg')).toBe('/cnpg/clusters/db/pg?problems=all')
+  })
+})
+
+describe('issuesPathForSubject', () => {
+  it('links to the Issues page narrowed to the subject', () => {
+    expect(issuesPathForSubject({ kind: 'Backup', namespace: 'pg', name: 'b-1' })).toBe('/issues?kind=Backup&resource=pg%2Fb-1')
+    expect(issuesPathForSubject({ kind: 'ClusterImageCatalog', namespace: '', name: 'pg' })).toBe('/issues?kind=ClusterImageCatalog&resource=pg')
+  })
+  it('keeps the current namespace view filter', () => {
+    expect(issuesPathForSubject({ kind: 'Cluster', namespace: 'pg', name: 'main' }, 'pg,app')).toBe('/issues?namespaces=pg%2Capp&kind=Cluster&resource=pg%2Fmain')
+  })
+  it('carries the API group through App URL synchronization', () => {
+    const subject = { kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'pg', name: 'main' }
+    const href = issuesPathForSubject(subject)
+    expect(href).toBe('/issues?kind=Cluster&apiGroup=postgresql.cnpg.io&resource=pg%2Fmain')
+    const params = new URLSearchParams(href.split('?')[1])
+    writeViewParams(params, ['pg'], null)
+    expect(issueSubjectFromParams(params)).toEqual(subject)
+  })
+})

package/src/components/cnpg/paths.ts

@@ -1,13 +1,56 @@
+import type { CNPGDimension } from '@skyhook-io/k8s-ui'
 import { cnpgDetailPath } from './routes'
 
 export function cnpgClusterFullPath(namespace: string, name: string, ctx?: string, tab?: string): string {
   return cnpgDetailPath({ plural: 'clusters', namespace, name }, ctx, tab)
 }
 
+/** The Cluster's page with its problems list open (`problems=all`). */
+export function cnpgClusterProblemsPath(namespace: string, name: string, ctx?: string): string {
+  const path = cnpgClusterFullPath(namespace, name, ctx)
+  return `${path}${path.includes('?') ? '&' : '?'}problems=all`
+}
+
+/** The Cluster page's tabs, in order: the task tabs, then the record (activity, logs, configuration, YAML). */
+export const CNPG_CLUSTER_TAB_ORDER = ['overview', 'replication', 'storage', 'performance', 'backups', 'activity', 'logs', 'spec', 'yaml']
+
+/** The tab that explains a health dimension: Serving and Replication in Replication, Storage in Storage, Backups in Backups. */
+export function cnpgDimensionTab(id: CNPGDimension['id']): string {
+  switch (id) {
+    case 'protection':
+      return 'backups'
+    case 'storage':
+      return 'storage'
+    default:
+      return 'replication'
+  }
+}
+
+const TAB_LABEL: Record<string, string> = { replication: 'Replication', storage: 'Storage', backups: 'Backups' }
+
+/** The name of the tab cnpgDimensionTab opens, for a link that leads there. */
+export function cnpgDimensionTabLabel(id: CNPGDimension['id']): string {
+  return TAB_LABEL[cnpgDimensionTab(id)]
+}
+
+/** The Cluster page tab where a health dimension is explained (see cnpgDimensionTab). */
+export function cnpgDimensionPath(namespace: string, name: string, ctx: string | undefined, id: CNPGDimension['id']): string {
+  return cnpgClusterFullPath(namespace, name, ctx, cnpgDimensionTab(id))
+}
+
 /**
- * The label for "← back" on the page a push lands on: the title of the page
- * being left, which Radar keeps in the document title.
+ * `target` as a tab change on the detail page already open, or null when it
+ * is another page. A tab change keeps the page's other params, drops the
+ * previous tab's section unless `target` names one, and is applied like a tab
+ * click (replacing the history entry) so the page's return label still leads
+ * where it says.
  */
-export function currentPageLabel(): string {
-  return document.title.replace(/\s*·\s*Radar$/, '') || 'previous page'
+export function cnpgWithinDetail(currentPathname: string, currentSearch: string, target: string): string | null {
+  const [path, query = ''] = target.split('?')
+  if (path !== currentPathname) return null
+  const params = new URLSearchParams(currentSearch)
+  for (const k of ['section', 'charts', 'instance', 'validate']) params.delete(k)
+  for (const [k, v] of new URLSearchParams(query)) params.set(k, v)
+  const qs = params.toString()
+  return qs ? `${path}?${qs}` : path
 }