@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/logs/LogsViewer.tsx

@@ -40,6 +40,22 @@ export interface LogsViewerProps {
   autoStream?: boolean
 }
 
+// Kubernetes' answers that there are no logs to show, such as "no earlier run".
+// They describe the pod, not a failure in Radar, so they are shown like an
+// empty pane rather than as an error.
+const CLUSTER_ANSWER_CODES = new Set(['no_previous_run', 'logs_unavailable'])
+
+function isClusterAnswerCode(code: unknown): boolean {
+  return typeof code === 'string' && CLUSTER_ANSWER_CODES.has(code)
+}
+
+function clusterAnswerOf(err: unknown): string | null {
+  if (!(err instanceof Error) || !('data' in err)) return null
+  const { data } = err
+  if (typeof data !== 'object' || data === null || !('error_code' in data)) return null
+  return isClusterAnswerCode(data.error_code) ? err.message : null
+}
+
 export function LogsViewer({
   namespace: _namespace,
   podName,
@@ -55,13 +71,14 @@ export function LogsViewer({
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
   const [isLoading, setIsLoading] = useState(false)
   const [fetchError, setFetchError] = useState<string | null>(null)
+  const [emptyMessage, setEmptyMessage] = useState<string | null>(null)
   const [logRange, setLogRange] = useState('500')
   const [showPrevious, setShowPrevious] = useState(false)
   const { showError, showSuccess } = useToast()
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
   const { entries, append, set, clear } = useLogBuffer()
-  const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
+  const { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming } = useLogStream()
 
   const willAutoStream = autoStream && !!createStream
   // Tracks the container we've already auto-started for, so re-renders don't
@@ -69,33 +86,61 @@ export function LogsViewer({
   const autoStartedForRef = useRef<string | null>(null)
   // Once the user explicitly Stops, don't auto-resume for this viewer's lifetime.
   const userStoppedRef = useRef(false)
+  // Set when starting a stream unticks Previous, so that change does not also
+  // load a snapshot over the stream.
+  const skipSnapshotRef = useRef(false)
+  // Numbers each snapshot load; a load superseded by a newer one or by a
+  // stream start must not write over what replaced it.
+  const loadSeqRef = useRef(0)
+  // Whether a stream is open or opening, read where its end must not itself
+  // trigger anything.
+  const streamOpenRef = useRef(false)
+  useEffect(() => { streamOpenRef.current = isStreaming || connecting }, [isStreaming, connecting])
 
   const loadLogs = useCallback(async () => {
     if (!selectedContainer) return
+    const seq = ++loadSeqRef.current
+    // The snapshot now owns the pane, so an ended stream's answer or failure
+    // must not outlive it. A stream still open or opening is left alone.
+    if (!streamOpenRef.current) stopStreaming()
     setIsLoading(true)
     setFetchError(null)
+    setEmptyMessage(null)
     try {
       const data = await fetchLogs({ container: selectedContainer, tailLines, sinceSeconds, previous: showPrevious })
+      if (seq !== loadSeqRef.current) return
       const logText = data[selectedContainer] ?? Object.values(data)[0] ?? ''
       set(logText.split('\n').filter(Boolean).map(line => {
         const { timestamp, content } = parseLogLine(line)
         return { timestamp, content, container: selectedContainer }
       }))
     } catch (err) {
+      if (seq !== loadSeqRef.current) return
+      const answer = clusterAnswerOf(err)
+      if (answer) {
+        set([])
+        setEmptyMessage(answer)
+        return
+      }
       console.error('Failed to fetch logs:', err)
       setFetchError(err instanceof Error ? err.message : 'Failed to fetch logs')
     } finally {
-      setIsLoading(false)
+      if (seq === loadSeqRef.current) setIsLoading(false)
     }
-  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set])
+  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set, stopStreaming])
 
   // When auto-streaming the stream supplies the initial tail, so the static
   // snapshot fetch is skipped to avoid a redundant request and a flash of
   // snapshot content before the stream takes over. If the user has Stopped we
   // won't auto-start, so fall back to the snapshot — otherwise a container
-  // switch would keep showing the previous container's lines.
+  // switch would keep showing the previous container's lines. Once the stream
+  // has ended by itself, Previous and the range load a snapshot too.
   useEffect(() => {
-    if (!willAutoStream || userStoppedRef.current) loadLogs()
+    if (skipSnapshotRef.current) {
+      skipSnapshotRef.current = false
+      return
+    }
+    if (!willAutoStream || userStoppedRef.current || !streamOpenRef.current) loadLogs()
   }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
 
@@ -109,6 +154,18 @@ export function LogsViewer({
 
   const handleStartStreaming = useCallback(() => {
     if (!createStream) return
+    // The stream always shows the current run, so starting one leaves the
+    // Previous view without loading a snapshot over the stream. The updater
+    // reads Previous so this callback does not depend on it: a new identity
+    // would re-run the auto-start effect and reopen the stream.
+    setShowPrevious(previous => {
+      if (previous) skipSnapshotRef.current = true
+      return false
+    })
+    loadSeqRef.current++
+    setIsLoading(false)
+    setFetchError(null)
+    setEmptyMessage(null)
     // The stream replays the last N lines (TailLines + Follow); clear first so
     // they don't duplicate lines already in the buffer (the snapshot on the
     // manual path, or an earlier stream on restart).
@@ -134,13 +191,15 @@ export function LogsViewer({
   useEffect(() => {
     if (!willAutoStream || !selectedContainer) return
     if (userStoppedRef.current) return
-    if (autoStartedForRef.current === selectedContainer) return
-    autoStartedForRef.current = selectedContainer
-    handleStartStreaming()
+    if (autoStartedForRef.current !== selectedContainer) {
+      autoStartedForRef.current = selectedContainer
+      handleStartStreaming()
+    }
     // Reset the arm latch on teardown so a re-run re-streams — without this,
     // React Strict Mode's mount→unmount→mount closes the stream but the latch
-    // stays set, leaving the viewer static.
-    return () => { autoStartedForRef.current = null }
+    // stays set, leaving the viewer static. Only while a stream is open: one
+    // that ended by itself stays ended, and a range change loads a snapshot.
+    return () => { if (streamOpenRef.current) autoStartedForRef.current = null }
   }, [willAutoStream, selectedContainer, handleStartStreaming])
 
   const downloadLogs = useCallback(({ content, mime, extension }: LogExportPayload) => {
@@ -179,18 +238,20 @@ export function LogsViewer({
   // While the auto-stream is opening (before it first settles), show the
   // loading state rather than the empty-logs placeholder.
   const isConnecting = willAutoStream && connecting && entries.length === 0
+  const streamAnswer = isClusterAnswerCode(streamErrorCode) ? streamError : null
 
   return (
     <LogCore
       entries={entries}
       isLoading={isLoading || isConnecting}
-      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
+      errorMessage={fetchError || (entries.length === 0 && !emptyMessage && !streamAnswer ? streamError : null)}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
+      emptyMessage={emptyMessage ?? streamAnswer ?? undefined}
       toolbarExtra={renderToolbarExtra}
       forceDark={forceDark}
       defaultDark={defaultDark}

package/src/components/logs/StructuredLogLine.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { StructuredLogLine } from './StructuredLogLine'
+
+const render = (content: string) => renderToStaticMarkup(<StructuredLogLine content={content} level="info" wordWrap={false} />)
+
+describe('StructuredLogLine summary', () => {
+  it('shows a CloudNativePG PostgreSQL record by its own message and severity', () => {
+    const html = render(
+      JSON.stringify({
+        level: 'info',
+        logger: 'postgres',
+        msg: 'record',
+        record: { error_severity: 'FATAL', message: 'terminating connection due to administrator command' },
+      }),
+    )
+    expect(html).toContain('terminating connection due to administrator command')
+    expect(html).toContain('FATAL')
+    expect(html).not.toContain('>record<')
+  })
+
+  it('keeps msg for ordinary structured lines', () => {
+    const html = render(JSON.stringify({ level: 'info', msg: 'Fencing status changed', record: 'not an object' }))
+    expect(html).toContain('Fencing status changed')
+  })
+
+  it.each([
+    { msg: 'record' },
+    { logger: 'worker', msg: 'record' },
+    { logger: 'postgres', msg: 'wrapper message' },
+  ])('keeps unrelated record fields out of the summary: %j', (fields) => {
+    const html = render(JSON.stringify({ level: 'info', ...fields, record: { error_severity: 'FATAL', message: 'unrelated nested text' } }))
+    expect(html).toContain(`>${fields.msg}<`)
+    expect(html).toContain('INFO')
+    expect(html).not.toContain('unrelated nested text')
+    expect(html).not.toContain('FATAL')
+  })
+
+  it('requires PostgreSQL record evidence before selecting a nested message', () => {
+    const html = render(JSON.stringify({ level: 'info', logger: 'postgres', msg: 'record', record: { message: 'unverified nested text' } }))
+    expect(html).toContain('>record<')
+    expect(html).not.toContain('unverified nested text')
+  })
+})
+
+it.each([false, true])('keeps annotations intact with word wrapping, expanded=%s', (expanded) => {
+  const html = renderToStaticMarkup(<StructuredLogLine content={JSON.stringify({ level: 'info', msg: 'normal words', token: 'x'.repeat(400) })} level="info" wordWrap defaultExpanded={expanded} />)
+  expect(html).toMatch(/inline-block whitespace-nowrap[^>]*>\{3 fields\}/)
+  expect(html).toContain('[overflow-wrap:anywhere]')
+  expect(html).not.toContain('break-all')
+})
+
+it('filters expanded strings, numbers and booleans by their displayed value', () => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  const filter = vi.fn()
+  const message = 'true null 123 "quoted"\nnext'
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  try {
+    act(() => root.render(<StructuredLogLine content={JSON.stringify({ msg: message, number: -12.5, ready: true, empty: null, html: '<script>unsafe</script>' })} level="info" wordWrap defaultExpanded onFilterValue={filter} />))
+    const buttons = [...host.querySelectorAll('button')]
+    for (const value of [message, '-12.5', 'true', '<script>unsafe</script>']) {
+      const button = buttons.find((button) => button.getAttribute('aria-label') === `Filter to lines containing ${value}`)
+      expect(button).toBeDefined()
+      act(() => button!.click())
+      expect(filter).toHaveBeenLastCalledWith(value)
+    }
+    expect(host.querySelector('script')).toBeNull()
+    expect(buttons.some((button) => button.getAttribute('aria-label') === 'Filter to lines containing null')).toBe(false)
+  } finally {
+    act(() => root.unmount())
+  }
+})

package/src/components/logs/StructuredLogLine.tsx

@@ -1,8 +1,8 @@
 import { useState, useMemo } from 'react'
 import { ChevronRight, ChevronDown, Filter } from 'lucide-react'
 import type { LogLevel } from './useLogBuffer'
-import { selectLevelField } from '../../utils/log-level'
-import { unescapeJsonStrings, parseLogfmt } from '../../utils/log-format'
+import { selectLevelField, selectPostgresRecord } from '../../utils/log-level'
+import { unescapeJsonStrings, parseLogfmt, tokenizeJson } from '../../utils/log-format'
 import { getLogPalette, getLogLevelColor, type LogPalette } from './log-palette'
 
 interface StructuredLogLineProps {
@@ -44,7 +44,7 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
 
   if (!parsed) {
     return (
-      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${getLogLevelColor(level, isDark)}`}>
+      <span className={`${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'} ${getLogLevelColor(level, isDark)}`}>
         {content}
       </span>
     )
@@ -63,11 +63,11 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
         // Collapsed: entire summary line is clickable
         <span
           onClick={toggle}
-          className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
+          className={`cursor-pointer ${palette.hoverSurface} rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'}`}
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
           <SummaryLine obj={parsed} level={level} palette={palette} />
-          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
+          <span className={`${palette.textTertiary} ml-1 inline-block whitespace-nowrap`}>{`{${fieldCount} fields}`}</span>
         </span>
       ) : (
         // Expanded: summary header is clickable to collapse, JSON content is selectable
@@ -78,9 +78,9 @@ export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultE
         >
           <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
           <SummaryLine obj={parsed} level={level} palette={palette} />
-          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
+          <span className={`${palette.textTertiary} ml-1 inline-block whitespace-nowrap`}>{`{${fieldCount} fields}`}</span>
         </span>
-        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
+        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap [overflow-wrap:anywhere]' : 'whitespace-pre'}`}>
           {isLogfmt ? (
             <ExpandedLogfmt obj={parsed} onFilterValue={onFilterValue} palette={palette} />
           ) : (
@@ -129,48 +129,40 @@ function FilterableValue({
  * and emits React nodes so the hover chip can be wired per value.
  */
 function JsonExpanded({ text, onFilterValue, palette }: { text: string; onFilterValue?: (v: string) => void; palette: LogPalette }) {
-  const tokenRe = /("(?:\\.|[^"\\])*")\s*:|("(?:\\.|[^"\\])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false)\b|\b(null)\b/g
   const nodes: React.ReactNode[] = []
-  let lastIndex = 0
-  let match: RegExpExecArray | null
   let idx = 0
-  while ((match = tokenRe.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex, match.index)}</span>)
-    }
-    const [, key, str, num, bool, nil] = match
-    if (key !== undefined) {
-      nodes.push(<span key={`k${idx++}`} style={{ color: palette.syntaxKey }}>{key}</span>)
+  for (const { type, value } of tokenizeJson(text)) {
+    if (type === 'key') {
+      nodes.push(<span key={`k${idx++}`} style={{ color: palette.syntaxKey }}>{value}</span>)
       nodes.push(<span key={`c${idx++}`}>:</span>)
-    } else if (str !== undefined) {
+    } else if (type === 'string') {
       // Unescape the quoted string for the filter value (users expect to filter on
       // the displayed string, not JSON-escaped bytes).
-      const inner = str.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\')
+      const inner = value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\')
       nodes.push(
         <FilterableValue key={`s${idx++}`} value={inner} onFilter={onFilterValue} color={palette.syntaxString} palette={palette} />
       )
-    } else if (num !== undefined) {
+    } else if (type === 'number') {
       nodes.push(
-        <FilterableValue key={`n${idx++}`} value={num} onFilter={onFilterValue} color={palette.syntaxNumber} palette={palette} />
+        <FilterableValue key={`n${idx++}`} value={value} onFilter={onFilterValue} color={palette.syntaxNumber} palette={palette} />
       )
-    } else if (bool !== undefined) {
+    } else if (type === 'boolean') {
       nodes.push(
-        <FilterableValue key={`b${idx++}`} value={bool} onFilter={onFilterValue} color={palette.syntaxBoolean} palette={palette} />
+        <FilterableValue key={`b${idx++}`} value={value} onFilter={onFilterValue} color={palette.syntaxBoolean} palette={palette} />
       )
-    } else if (nil !== undefined) {
-      nodes.push(<span key={`z${idx++}`} style={{ color: palette.syntaxNull }}>{nil}</span>)
+    } else if (type === 'null') {
+      nodes.push(<span key={`z${idx++}`} style={{ color: palette.syntaxNull }}>{value}</span>)
+    } else {
+      nodes.push(<span key={`t${idx++}`}>{value}</span>)
     }
-    lastIndex = tokenRe.lastIndex
-  }
-  if (lastIndex < text.length) {
-    nodes.push(<span key={`t${idx++}`}>{text.slice(lastIndex)}</span>)
   }
   return <>{nodes}</>
 }
 
 function SummaryLine({ obj, level, palette }: { obj: Record<string, unknown>; level: LogLevel; palette: LogPalette }) {
   const lvl = selectLevelField(obj)?.raw
-  const msg = obj.msg ?? obj.message
+  const pgRecord = selectPostgresRecord(obj)
+  const msg = pgRecord?.record.message ?? obj.msg ?? obj.message
   const rawErr = obj.error ?? obj.err
   const err = typeof rawErr === 'string'
     ? rawErr

package/src/components/logs/WorkloadLogsViewer.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { WorkloadLogsViewer, type WorkloadLogsResult } from './WorkloadLogsViewer'
+vi.mock('../ui/Toast', () => ({ useToast: () => ({ showError: vi.fn(), showSuccess: vi.fn() }) }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+it('uses a host empty state and disables source controls until a source is read', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  let result: WorkloadLogsResult = { pods: [], logs: [], emptyMessage: 'No instance Pods yet' }
+  const stream = vi.fn()
+  const fetchAll = vi.fn(async () => result)
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} createStream={stream} disableSourceControlsWithoutSource emptySourceState={<><p>The first instance cannot start.</p><a href="?tab=overview">Overview’s problem</a></>} />))
+  expect(host.textContent).toContain('The first instance cannot start')
+  expect(host.querySelector('a')?.getAttribute('href')).toBe('?tab=overview')
+  expect(host.querySelector('fieldset')?.disabled).toBe(true)
+  expect([...host.querySelectorAll('select')].every((el) => el.matches(':disabled'))).toBe(true)
+  const streamButton = [...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.textContent === 'Stream')!
+  expect(streamButton.disabled).toBe(true)
+  act(() => streamButton.click())
+  expect(stream).not.toHaveBeenCalled()
+  result = { pods: [{ name: 'analytics-1', containers: ['postgres'], ready: true }], logs: [] }
+  await act(async () => [...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.querySelector('.lucide-rotate-ccw'))!.click())
+  expect(host.querySelector('fieldset')?.disabled).toBe(false)
+  expect(streamButton.disabled).toBe(false)
+  expect(host.textContent).not.toContain('The first instance cannot start')
+  await act(async () => root.unmount())
+})
+
+it('keeps streaming available for hosts that wait for Pods to appear', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  await act(async () => root.render(<WorkloadLogsViewer name="pending-job" fetchAll={async () => ({ pods: [], logs: [] })} createStream={vi.fn()} />))
+  expect([...host.querySelectorAll<HTMLButtonElement>('button')].find((el) => el.textContent === 'Stream')?.disabled).toBe(false)
+  expect(host.querySelector('fieldset')?.disabled).toBe(false)
+  await act(async () => root.unmount())
+})
+
+
+it('keeps the all-container choice available by default', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const fetchAll = vi.fn(async () => ({ pods: [{ name: 'analytics-1', containers: ['postgres', 'plugin-barman-cloud'], ready: true }], logs: [] }))
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} />))
+  const select = host.querySelector<HTMLSelectElement>('select')!
+  expect([...select.options].map((option) => option.value)).toEqual(['', 'postgres', 'plugin-barman-cloud'])
+  expect(select.options[0].text).toBe('All containers')
+  expect(fetchAll).toHaveBeenCalledWith(expect.objectContaining({ container: undefined }))
+  await act(async () => root.unmount())
+})
+
+it('offers only named containers when the backend cannot read all containers', async () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  const fetchAll = vi.fn(async (_params: unknown) => ({ pods: [{ name: 'analytics-1', containers: ['postgres', 'plugin-barman-cloud'], ready: true }], logs: [] }))
+  await act(async () => root.render(<WorkloadLogsViewer name="analytics" fetchAll={fetchAll} initialContainer="postgres" allowAllContainers={false} />))
+  const select = host.querySelector<HTMLSelectElement>('select')!
+  expect([...select.options].map((option) => option.value)).toEqual(['postgres', 'plugin-barman-cloud'])
+  expect(host.textContent).not.toContain('All containers')
+  expect(select.value).toBe('postgres')
+  expect(fetchAll).toHaveBeenCalledWith(expect.objectContaining({ container: 'postgres' }))
+  await act(async () => {
+    select.value = 'plugin-barman-cloud'
+    select.dispatchEvent(new Event('change', { bubbles: true }))
+  })
+  expect(fetchAll).toHaveBeenLastCalledWith(expect.objectContaining({ container: 'plugin-barman-cloud' }))
+  await act(async () => root.unmount())
+})

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Filter, ChevronDown } from 'lucide-react'
+import { useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from 'react'
+import { Filter, ChevronDown, AlertTriangle } from 'lucide-react'
 import { parseLogRange } from '../../utils/log-format'
 import { triggerDownload } from '../../utils/download'
 import { useLogBuffer } from './useLogBuffer'
@@ -10,6 +10,7 @@ import type { LogExportPayload } from '../../utils/log-export'
 import type { LogPalette } from './log-palette'
 import type { WorkloadPodInfo } from '../../types'
 import { useToast } from '../ui/Toast'
+import { toneTextClass } from '../ui/status-tone'
 
 export interface WorkloadRawLog {
   pod: string
@@ -38,6 +39,8 @@ export interface WorkloadLogsResult {
 }
 
 export interface WorkloadLogsViewerProps {
+  /** Disable streaming and the source filters while no log source exists. Off by default: streams can wait for Pods to appear. */
+  disableSourceControlsWithoutSource?: boolean
   /** Workload name — used for the download filename */
   name: string
   /**
@@ -65,14 +68,20 @@ export interface WorkloadLogsViewerProps {
   autoStream?: boolean
   /** Pods selected when the pod list first loads; all pods when empty or none match. */
   initialPods?: string[]
+  /** Container selected on mount; all containers when unset. */
+  initialContainer?: string
+  /** Whether the backend supports reading all containers. Defaults to true; set initialContainer when false. */
+  allowAllContainers?: boolean
+  /** Rendered only when the loaded source list is empty. */
+  emptySourceState?: ReactNode
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, defaultDark, autoStream = false, initialPods, initialContainer, allowAllContainers = true, emptySourceState, disableSourceControlsWithoutSource = false }: WorkloadLogsViewerProps) {
   const initialSelection = (names: string[]) => {
     const wanted = names.filter((n) => initialPods?.includes(n))
     return new Set(wanted.length > 0 ? wanted : names)
   }
-  const [selectedContainer, setSelectedContainer] = useState<string>('')
+  const [selectedContainer, setSelectedContainer] = useState<string>(initialContainer ?? '')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
   const [isLoading, setIsLoading] = useState(false)
@@ -92,6 +101,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
 
   const willAutoStream = autoStream && !!createStream
+  const sourceUnavailable = disableSourceControlsWithoutSource && pods.length === 0
   // null sentinel so the initial selectedContainer ('' = all) still arms once.
   const autoStartedForRef = useRef<string | null>(null)
   const userStoppedRef = useRef(false)
@@ -317,10 +327,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
   const renderToolbarExtra = ({ isDark, palette }: { isDark: boolean; palette: LogPalette }) => (
     <>
       {/* Pod filter */}
+      <fieldset disabled={sourceUnavailable} className="flex items-center gap-2 disabled:opacity-50">
       <div className="relative">
         <button
           onClick={() => setShowPodFilter(v => !v)}
-          className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded transition-colors ${
+          className={`flex items-center gap-1.5 px-2 py-1.5 text-xs rounded whitespace-nowrap transition-colors ${
             showPodFilter ? palette.toolbarActive : `${palette.elevatedBg} ${palette.textSecondary} ${palette.hoverBg}`
           }`}
         >
@@ -376,7 +387,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         containers={allContainers}
         value={selectedContainer}
         onChange={setSelectedContainer}
-        includeAll
+        includeAll={allowAllContainers}
         isDark={isDark}
       />
 
@@ -386,8 +397,10 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
         lineOptions={[50, 100, 500, 1000]}
         tooltip="How many logs to load per pod — by line count or time range"
         isDark={isDark}
-        disabled={isStreaming}
+        disabled={isStreaming || sourceUnavailable}
+        disabledReason={sourceUnavailable ? 'No log source is available yet' : undefined}
       />
+      </fieldset>
     </>
   )
 
@@ -397,8 +410,23 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-    {notice && <div role="status" className="shrink-0 border-b border-theme-border bg-theme-elevated px-3 py-2 text-xs text-theme-text-secondary">{notice}</div>}
-    {capturedAt && <div className="shrink-0 border-b border-theme-border px-3 py-1 text-xs text-theme-text-secondary">Snapshot captured {new Date(capturedAt).toLocaleTimeString()}</div>}
+    {/* One status line. A notice says what the snapshot could not show, so it
+        stays marked; the capture time alone is quiet. */}
+    {(notice || capturedAt) && (
+      <div
+        role="status"
+        className={`flex shrink-0 flex-wrap items-baseline gap-x-2 border-b border-theme-border px-3 py-1 text-xs ${notice ? 'bg-theme-elevated text-theme-text-secondary' : 'text-theme-text-tertiary'}`}
+      >
+        {capturedAt && <span className="whitespace-nowrap">Snapshot {new Date(capturedAt).toLocaleTimeString()}</span>}
+        {capturedAt && notice && <span aria-hidden>·</span>}
+        {notice && (
+          <span className="inline-flex min-w-0 items-baseline gap-1.5">
+            <AlertTriangle className={`h-3 w-3 shrink-0 self-center ${toneTextClass('degraded')}`} aria-hidden />
+            <span>{notice}</span>
+          </span>
+        )}
+      </div>
+    )}
     {(fetchError || streamError) && entries.length > 0 && <div role="alert" className="shrink-0 border-b border-theme-border bg-theme-surface px-3 py-2 text-xs text-theme-text-secondary">{fetchError || streamError} · Previously loaded logs remain below.</div>}
     <div className="min-h-0 flex-1"><LogCore
       entries={filteredEntries}
@@ -406,13 +434,14 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
+      sourceUnavailable={sourceUnavailable}
       onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
-      emptyMessage={emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
+      emptyMessage={pods.length === 0 && emptySourceState ? emptySourceState : emptyMessage || (pods.length === 0 ? 'No pods found' : 'No logs available')}
       emptyCommand={emptyCommand}
       errorMessage={entries.length === 0 ? fetchError || streamError : null}
       forceDark={forceDark}

package/src/components/logs/useLogBuffer.test.ts

@@ -14,4 +14,12 @@ describe('detectLogLevel with CloudNativePG records', () => {
     expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'request failed', record: { error_severity: 20 } }))).toBe('error')
     expect(detectLogLevel(JSON.stringify({ level: 'error', msg: 'x', record: { error_severity: 'minor' } }))).toBe('error')
   })
+
+  it.each([
+    { msg: 'record' },
+    { logger: 'worker', msg: 'record' },
+    { logger: 'postgres', msg: 'wrapper message' },
+  ])('does not override an unrelated workload severity: %j', (fields) => {
+    expect(detectLogLevel(JSON.stringify({ level: 'info', ...fields, record: { error_severity: 'FATAL', message: 'unrelated nested text' } }))).toBe('info')
+  })
 })

package/src/components/logs/useLogStream.ts

@@ -16,6 +16,17 @@ export interface LogStreamHandlers {
   onEnd?: (data: unknown) => void
 }
 
+function errorCodeOf(event: Event): string | null {
+  if (!(event instanceof MessageEvent) || typeof event.data !== 'string') return null
+  try {
+    const data: unknown = JSON.parse(event.data)
+    if (typeof data === 'object' && data !== null && 'error_code' in data && typeof data.error_code === 'string') return data.error_code
+  } catch {
+    // Not JSON: no code.
+  }
+  return null
+}
+
 /**
  * Manages an SSE log stream: EventSource lifecycle, isStreaming state, cleanup.
  * Callers provide a factory function that creates the EventSource with current params.
@@ -24,6 +35,8 @@ export function useLogStream() {
   const [isStreaming, setIsStreaming] = useState(false)
   // Set when the connection fails (and not on a clean end — see endedRef).
   const [streamError, setStreamError] = useState<string | null>(null)
+  // The server's error_code for that failure, when it sent one.
+  const [streamErrorCode, setStreamErrorCode] = useState<string | null>(null)
   // True from a start attempt until the stream first settles (connected / end /
   // error / stop). Lets callers show a connecting spinner that won't reappear
   // after a clean end. Starts true so an auto-stream viewer paints the spinner
@@ -40,6 +53,7 @@ export function useLogStream() {
     setIsStreaming(false)
     setConnecting(false)
     setStreamError(null)
+    setStreamErrorCode(null)
   }, [])
 
   const startStreaming = useCallback((
@@ -50,6 +64,7 @@ export function useLogStream() {
     eventSourceRef.current?.close()
     endedRef.current = false
     setStreamError(null)
+    setStreamErrorCode(null)
     setConnecting(true)
     const es = create()
     // Ignore events from a superseded source: closing/replacing an EventSource
@@ -124,6 +139,7 @@ export function useLogStream() {
       // 'end'; that's not a failure, so don't log it or surface it.
       if (endedRef.current) return
       setStreamError(handleSSEError(event, errorContext, () => {}))
+      setStreamErrorCode(errorCodeOf(event))
     })
 
     eventSourceRef.current = es
@@ -132,5 +148,5 @@ export function useLogStream() {
   // Cleanup on unmount
   useEffect(() => () => { eventSourceRef.current?.close() }, [])
 
-  return { isStreaming, streamError, connecting, startStreaming, stopStreaming }
+  return { isStreaming, streamError, streamErrorCode, connecting, startStreaming, stopStreaming }
 }

package/src/components/problems/index.ts

@@ -0,0 +1 @@
+export * from './problems'