@skyhook-io/radar-app 1.16.3 → 1.17.1

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')
+})

package/src/components/cnpg/CNPGClusterActivity.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react'
 import { PaneLoader, TimelineList, formatAge, type NavigateToResource } from '@skyhook-io/k8s-ui'
 import { useCNPGClusterActivity } from '../../api/cnpg'
-import { Notice } from '../capacity/shared'
-import { Segments } from './shared'
+import { useCNPGClusterActivityWindow } from '../../api/cnpg-history'
+import { CNPGIntervalBanner, useCNPGIntervalParams } from './CNPGTrends'
+import { Notice, RefreshFailedNotice, Segments } from '../workspace/layout'
 
 const RANGES = [
   { id: '6', label: '6 h' },
@@ -18,22 +19,30 @@ const RANGES = [
  */
 export function CNPGClusterActivity({ namespace, name, onNavigate }: { namespace: string; name: string; onNavigate?: NavigateToResource }) {
   const [hours, setHours] = useState<string>('24')
-  const q = useCNPGClusterActivity(namespace, name, Number(hours))
+  const interval = useCNPGIntervalParams()
+  const ranged = useCNPGClusterActivity(namespace, name, Number(hours))
+  const windowed = useCNPGClusterActivityWindow(namespace, name, interval?.since ?? '', interval?.until ?? '', !!interval)
+  const q = interval ? windowed : ranged
 
   return (
     <div className="flex h-full min-h-0 flex-col gap-3 p-4">
-      <div className="flex flex-wrap items-center gap-3">
-        <Segments label="Range" value={hours} onChange={setHours} options={RANGES.map((r) => ({ id: r.id, label: r.label }))} />
-        <span className="text-xs text-theme-text-tertiary">
-          Kubernetes events and changes for the Cluster, its instances, Backups, Poolers and declarations.
-        </span>
-      </div>
+      {interval ? (
+        <CNPGIntervalBanner since={interval.since} until={interval.until} note="Selected on a History chart: events and changes inside this interval only." onClear={interval.clear} />
+      ) : (
+        <div className="flex flex-wrap items-center gap-3">
+          <Segments label="Range" value={hours} onChange={setHours} options={RANGES.map((r) => ({ id: r.id, label: r.label }))} />
+          <span className="text-xs text-theme-text-tertiary">
+            Kubernetes events and changes for the Cluster, its instances, Backups, Poolers and declarations.
+          </span>
+        </div>
+      )}
       <div className="text-xs text-theme-text-tertiary">
         {q.data?.attributionSince
           ? `The earliest recorded event linking a Backup, Pooler or declaration to this cluster is ${formatAge(q.data.attributionSince)} old. Deleted child objects from before Radar recorded that link are not shown.`
           : 'Radar has not recorded any Backup, Pooler or declaration events linked to this cluster yet, so deleted child objects may be missing.'}
         {' '}Events for kinds you cannot list are omitted.
       </div>
+      <RefreshFailedNotice queries={[q]} />
       {q.data?.truncated && <Notice>Showing the most recent events only; narrow the range to see all of them.</Notice>}
       {q.error && !q.data ? (
         <Notice>Activity could not be loaded: {q.error instanceof Error ? q.error.message : 'unknown error'}</Notice>

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

@@ -0,0 +1,130 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { CNPGClusterLogs } from './CNPGClusterLogs'
+import { guardRadarFeature, radarFeatureSupport } from '../../api/radarFeatures'
+import { fetchJSON } from '../../api/client'
+
+const state = vi.hoisted(() => ({ props: undefined as any, capabilities: { features: { resourceIssues: true } } as any, capabilitiesPending: false, fetchStatus: 'idle' as 'idle' | 'fetching' | 'paused', interval: null as null | { since: string; until: string; clear: () => void } }))
+vi.mock('@skyhook-io/k8s-ui', async (original) => ({ ...await original<typeof import('@skyhook-io/k8s-ui')>(), WorkloadLogsViewer: (props: any) => { state.props = props; return <div>logs</div> } }))
+vi.mock('../../api/client', () => ({ fetchJSON: vi.fn(async () => ({ pods: [], logs: [] })), useCapabilities: () => ({ isPending: state.capabilitiesPending, isFetching: state.fetchStatus === 'fetching', fetchStatus: state.fetchStatus, refetch: vi.fn() }), useRadarFeature: () => {
+  const support = radarFeatureSupport('cnpgWorkspace', state.capabilities, 'v1.16.0')
+  return { support, guard: (fn: () => Promise<unknown>) => guardRadarFeature('cnpgWorkspace', support, {}, fn) }
+} }))
+vi.mock('../../hooks/useDesktopDownload', () => ({ useDesktopDownload: () => undefined }))
+vi.mock('../../context/ThemeContext', () => ({ useTheme: () => ({ theme: 'light' }) }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => vi.fn() }))
+vi.mock('./useCNPGSidebarWorkspace', () => ({ useCNPGFleet: () => ({ fleet: null }) }))
+vi.mock('./CNPGTrends', () => ({ useCNPGIntervalParams: () => state.interval, CNPGIntervalBanner: ({ note }: { note: string }) => <div>{note}</div> }))
+beforeEach(() => { state.props = undefined; state.capabilities = { features: { resourceIssues: true } }; state.capabilitiesPending = false; state.fetchStatus = 'idle'; state.interval = null; vi.clearAllMocks(); vi.unstubAllGlobals() })
+function mount(search = '') { return renderToStaticMarkup(<MemoryRouter initialEntries={[{ pathname: '/cnpg/clusters/db/pg', search }]}><CNPGClusterLogs namespace="db" name="pg" /></MemoryRouter>) }
+
+it('retains ordinary snapshot selectors and follows on the actual missing-flag capability state', async () => {
+  mount()
+  await state.props.fetchAll({ container: 'postgres', tailLines: 40, sinceSeconds: 60 })
+  expect(fetchJSON).toHaveBeenCalledWith('/cnpg/clusters/db/pg/logs?container=postgres&tailLines=40&sinceSeconds=60', { signal: undefined })
+  const eventSource = vi.fn(function (url: string) { return { url } })
+  vi.stubGlobal('EventSource', eventSource)
+  state.props.createStream({ container: 'postgres' })
+  expect(eventSource).toHaveBeenCalledWith('/api/cnpg/clusters/db/pg/logs/stream?container=postgres&tailLines=50', { withCredentials: false })
+})
+it('uses the old postgres default for empty and all selectors in both snapshot and SSE requests', async () => {
+  mount()
+  expect(state.props.initialContainer).toBe('postgres')
+  expect(state.props.allowAllContainers).toBe(false)
+  mount('?container=all')
+  expect(state.props.initialContainer).toBe('postgres')
+  expect(state.props.allowAllContainers).toBe(false)
+  const eventSource = vi.fn(function (url: string) { return { url } })
+  vi.stubGlobal('EventSource', eventSource)
+  for (const container of [undefined, 'all']) {
+    await state.props.fetchAll({ container, tailLines: 40, sinceSeconds: 60 })
+    const path = vi.mocked(fetchJSON).mock.lastCall![0]
+    expect(Object.fromEntries(new URL(path, 'http://radar.test').searchParams)).toEqual({ tailLines: '40', sinceSeconds: '60' })
+    state.props.createStream({ container, sinceSeconds: 60 })
+    const streamPath = eventSource.mock.lastCall![0]
+    expect(Object.fromEntries(new URL(streamPath, 'http://radar.test').searchParams)).toEqual({ tailLines: '50', sinceSeconds: '60' })
+  }
+})
+it('retains exact plugin-container selection supported by the old producer', async () => {
+  mount('?container=plugin-barman-cloud')
+  expect(state.props.initialContainer).toBe('plugin-barman-cloud')
+  await state.props.fetchAll({ container: 'plugin-barman-cloud' })
+  expect(fetchJSON).toHaveBeenCalledWith('/cnpg/clusters/db/pg/logs?container=plugin-barman-cloud', { signal: undefined })
+  const eventSource = vi.fn(function (url: string) { return { url } })
+  vi.stubGlobal('EventSource', eventSource)
+  state.props.createStream({ container: 'plugin-barman-cloud' })
+  expect(eventSource).toHaveBeenCalledWith('/api/cnpg/clusters/db/pg/logs/stream?container=plugin-barman-cloud&tailLines=50', { withCredentials: false })
+})
+it('only requests all-container snapshots and SSE after confirmed support', async () => {
+  const eventSource = vi.fn(function (url: string) { return { url } })
+  vi.stubGlobal('EventSource', eventSource)
+  state.capabilities = undefined
+  mount()
+  expect(state.props.initialContainer).toBe('postgres')
+  expect(state.props.allowAllContainers).toBe(false)
+  await state.props.fetchAll({})
+  expect(fetchJSON).toHaveBeenLastCalledWith('/cnpg/clusters/db/pg/logs', { signal: undefined })
+  state.props.createStream({})
+  expect(eventSource).toHaveBeenLastCalledWith('/api/cnpg/clusters/db/pg/logs/stream?tailLines=50', { withCredentials: false })
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  mount()
+  expect(state.props.initialContainer).toBeUndefined()
+  expect(state.props.allowAllContainers).toBe(true)
+  mount('?container=all')
+  expect(state.props.initialContainer).toBeUndefined()
+  await state.props.fetchAll({})
+  expect(fetchJSON).toHaveBeenLastCalledWith('/cnpg/clusters/db/pg/logs?container=all', { signal: undefined })
+  state.props.createStream({})
+  expect(eventSource).toHaveBeenLastCalledWith('/api/cnpg/clusters/db/pg/logs/stream?container=all&tailLines=50', { withCredentials: false })
+})
+it('refuses both-bound interval semantics on that old server without an unbounded request', async () => {
+  state.interval = { since: '2026-10-13T00:00:00Z', until: '2026-10-13T01:00:00Z', clear: vi.fn() }
+  expect(mount()).toContain('Clear it to read ordinary logs')
+  await expect(state.props.fetchAll({ tailLines: 40 })).rejects.toMatchObject({ feature: 'cnpgWorkspace' })
+  expect(fetchJSON).not.toHaveBeenCalled()
+  expect(state.props.createStream).toBeUndefined()
+})
+it('uses the advertised interval contract without tailing or streaming', async () => {
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  state.interval = { since: '2026-10-13T00:00:00Z', until: '2026-10-13T01:00:00Z', clear: vi.fn() }
+  mount()
+  await state.props.fetchAll({ tailLines: 40, sinceSeconds: 60 })
+  const path = vi.mocked(fetchJSON).mock.calls[0][0]
+  const params = new URL(path, 'http://radar.test').searchParams
+  expect(Object.fromEntries(params)).toEqual({ sinceTime: state.interval.since, untilTime: state.interval.until, container: 'all' })
+  expect(state.props.createStream).toBeUndefined()
+})
+it('waits for capabilities before offering interval semantics, while ordinary logs remain immediate', () => {
+  state.capabilities = undefined
+  state.capabilitiesPending = true
+  state.interval = { since: '2026-10-13T00:00:00Z', until: '2026-10-13T01:00:00Z', clear: vi.fn() }
+  expect(mount()).toContain('Checking interval support')
+  expect(state.props).toBeUndefined()
+  state.interval = null
+  mount()
+  expect(state.props.createStream).toBeTypeOf('function')
+})
+it('settles a failed capabilities read without loading forever or issuing an interval request', () => {
+  state.capabilities = undefined
+  state.interval = { since: '2026-10-13T00:00:00Z', until: '2026-10-13T01:00:00Z', clear: vi.fn() }
+  const html = mount()
+  expect(html).toContain('Interval log support could not be checked')
+  expect(html).toContain('Clear this interval to read ordinary logs')
+  expect(html).toContain('Retry')
+  expect(html).not.toContain('Checking interval support')
+  expect(state.props).toBeUndefined()
+  expect(fetchJSON).not.toHaveBeenCalled()
+})
+it('keeps the clear-interval fallback available while an offline request is paused', () => {
+  state.capabilities = undefined
+  state.capabilitiesPending = true
+  state.fetchStatus = 'paused'
+  state.interval = { since: '2026-10-13T00:00:00Z', until: '2026-10-13T01:00:00Z', clear: vi.fn() }
+  const html = mount()
+  expect(html).toContain('Clear this interval to read ordinary logs')
+  expect(html).toContain('Waiting for connection')
+  expect(html).not.toContain('Checking interval support')
+  expect(state.props).toBeUndefined()
+  expect(fetchJSON).not.toHaveBeenCalled()
+})

package/src/components/cnpg/CNPGClusterLogs.empty.test.tsx

@@ -0,0 +1,29 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { expect, it, vi } from 'vitest'
+import { CNPGClusterLogs } from './CNPGClusterLogs'
+const state = vi.hoisted(() => ({ props: {} as any, navigate: vi.fn(), problems: [{ job: 'initdb', severity: 'critical', title: 'First instance cannot be scheduled' }] as any[] }))
+vi.mock('@skyhook-io/k8s-ui', async (original) => ({ ...await original<typeof import('@skyhook-io/k8s-ui')>(), WorkloadLogsViewer: (props: any) => { state.props = props; return <div>{props.emptySourceState}</div> } }))
+vi.mock('../../api/client', () => ({ useCapabilities: () => ({ isPending: false }), useRadarFeature: () => ({ guard: (fn: () => unknown) => fn(), support: 'supported' }), fetchJSON: vi.fn() }))
+vi.mock('../../hooks/useDesktopDownload', () => ({ useDesktopDownload: () => undefined }))
+vi.mock('../../context/ThemeContext', () => ({ useTheme: () => ({ theme: 'light' }) }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => state.navigate }))
+vi.mock('./useCNPGSidebarWorkspace', () => ({ useCNPGFleet: () => ({ fleet: { rows: [{ namespace: 'db', name: 'analytics', problems: state.problems }] } }) }))
+vi.mock('./CNPGTrends', () => ({ useCNPGIntervalParams: () => null }))
+it('supplies the first-instance problem and Overview link from the CNPG host', () => {
+  const html = renderToStaticMarkup(<MemoryRouter initialEntries={[{ pathname: '/cnpg/clusters/db/analytics', search: '?ctx=test&tab=logs&drawer=x', state: { returnLabel: 'Clusters' } }]}><CNPGClusterLogs namespace="db" name="analytics" /></MemoryRouter>)
+  expect(html).toContain('First instance cannot be scheduled')
+  expect(html).toContain('See Overview’s problem')
+  state.props.emptySourceState.props.children[1].props.onClick()
+  expect(state.navigate).toHaveBeenCalledWith('/cnpg/clusters/db/analytics?ctx=test&tab=overview&drawer=x&problems=all', { replace: true, state: { returnLabel: 'Clusters' } })
+  expect(state.props.disableSourceControlsWithoutSource).toBe(true)
+})
+
+it('does not invent a first-instance cause or use an unrelated problem', () => {
+  state.problems = [{ severity: 'critical', title: 'Backup failed' }]
+  const html = renderToStaticMarkup(<MemoryRouter><CNPGClusterLogs namespace="db" name="analytics" /></MemoryRouter>)
+  expect(html).toContain('No instance log source yet')
+  expect(html).toContain('Open Overview')
+  expect(html).not.toContain('first instance has not started')
+  expect(html).not.toContain('Backup failed')
+})

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

@@ -0,0 +1,9 @@
+import { expect, it } from 'vitest'
+import { query, intervalQuery } from './CNPGClusterLogs'
+it('requests all containers explicitly for snapshots, streams and bounded intervals', () => {
+  expect(new URLSearchParams(query({}).slice(1)).get('container')).toBe('all')
+  expect(new URLSearchParams(query({}, 50).slice(1)).get('container')).toBe('all')
+  expect(new URLSearchParams(intervalQuery({}, 'from', 'to').slice(1)).get('container')).toBe('all')
+  expect(new URLSearchParams(query({ container: 'plugin-barman-cloud' }).slice(1)).get('container')).toBe('plugin-barman-cloud')
+  expect(new URLSearchParams(intervalQuery({ container: 'postgres' }, 'from', 'to').slice(1)).get('container')).toBe('postgres')
+})