@skyhook-io/k8s-ui 1.0.0

package/src/components/logs/LogsViewer.tsx

@@ -0,0 +1,146 @@
+import { useState, useEffect, useCallback } from 'react'
+import { parseLogLine, parseLogRange } from '../../utils/log-format'
+import { triggerDownload } from '../../utils/download'
+import { useLogBuffer } from './useLogBuffer'
+import { useLogStream } from './useLogStream'
+import { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
+import { LogCore } from './LogCore'
+import type { DownloadFormat } from './LogCore'
+import { Tooltip } from '../ui/Tooltip'
+import { useToast } from '../ui/Toast'
+
+export interface LogsFetchParams {
+  container: string
+  tailLines?: number
+  sinceSeconds?: number
+  previous?: boolean
+}
+
+export interface LogsViewerProps {
+  namespace: string
+  podName: string
+  containers: string[]
+  initialContainer?: string
+  /** Called to fetch logs. Return value is { [containerName]: rawLogText } */
+  fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>
+  /** If provided, the stream button is enabled. Called to open an SSE connection. */
+  createStream?: (params: Omit<LogsFetchParams, 'previous'>) => EventSource
+}
+
+export function LogsViewer({
+  namespace: _namespace,
+  podName,
+  containers,
+  initialContainer,
+  fetchLogs,
+  createStream,
+}: LogsViewerProps) {
+  const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
+  const [isLoading, setIsLoading] = useState(false)
+  const [fetchError, setFetchError] = 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, startStreaming, stopStreaming } = useLogStream()
+
+  const loadLogs = useCallback(async () => {
+    if (!selectedContainer) return
+    setIsLoading(true)
+    setFetchError(null)
+    try {
+      const data = await fetchLogs({ container: selectedContainer, tailLines, sinceSeconds, previous: showPrevious })
+      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) {
+      console.error('Failed to fetch logs:', err)
+      setFetchError(err instanceof Error ? err.message : 'Failed to fetch logs')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set])
+
+  useEffect(() => { loadLogs() }, [loadLogs])
+  useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
+
+  const handleStartStreaming = useCallback(() => {
+    if (!createStream) return
+    startStreaming(
+      () => createStream({ container: selectedContainer, tailLines: 100, sinceSeconds }),
+      {
+        onLog: (data: any) => append({
+          timestamp: data.timestamp || '',
+          content: data.content || '',
+          container: data.container || selectedContainer,
+        }),
+      },
+    )
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append])
+
+  const downloadLogs = useCallback((format: DownloadFormat) => {
+    let content: string
+    let mime: string
+    const filename = `${podName}-${selectedContainer}-logs.${format}`
+    switch (format) {
+      case 'json':
+        content = JSON.stringify(entries.map(l => ({ timestamp: l.timestamp, content: l.content, container: l.container })), null, 2)
+        mime = 'application/json'
+        break
+      case 'csv':
+        content = 'timestamp,container,content\n' + entries.map(l =>
+          `${l.timestamp},${l.container},"${l.content.replace(/"/g, '""')}"`)
+          .join('\n')
+        mime = 'text/csv'
+        break
+      default:
+        content = entries.map(l => `${l.timestamp} ${l.content}`).join('\n')
+        mime = 'text/plain'
+    }
+    try {
+      triggerDownload(content, mime, filename)
+      showSuccess('Log download started', `Saving ${filename}. Check your browser or desktop Downloads location.`)
+    } catch (err) {
+      showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
+    }
+  }, [entries, podName, selectedContainer, showError, showSuccess])
+
+  const toolbarExtra = (
+    <>
+      <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} />
+
+      <Tooltip content="Show logs from the pod's previous instance (if it was restarted). Useful for troubleshooting crashed containers." position="bottom">
+        <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary">
+          <input
+            type="checkbox"
+            checked={showPrevious}
+            onChange={(e) => setShowPrevious(e.target.checked)}
+            className="w-3 h-3 rounded border-theme-border-light bg-theme-elevated text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
+          />
+          <span className="border-b border-dotted border-theme-text-tertiary">Previous</span>
+        </label>
+      </Tooltip>
+
+      <LogRangeSelect value={logRange} onChange={setLogRange} />
+    </>
+  )
+
+  return (
+    <LogCore
+      entries={entries}
+      isLoading={isLoading}
+      errorMessage={fetchError}
+      isStreaming={isStreaming}
+      onStartStream={createStream ? handleStartStreaming : undefined}
+      onStopStream={stopStreaming}
+      onRefresh={loadLogs}
+      onDownload={downloadLogs}
+      onClear={clear}
+      toolbarExtra={toolbarExtra}
+    />
+  )
+}

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -0,0 +1,263 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { Filter, ChevronDown } from 'lucide-react'
+import { parseLogRange } from '../../utils/log-format'
+import { triggerDownload } from '../../utils/download'
+import { useLogBuffer } from './useLogBuffer'
+import { useLogStream } from './useLogStream'
+import { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
+import { LogCore } from './LogCore'
+import type { DownloadFormat } from './LogCore'
+import type { WorkloadPodInfo } from '../../types'
+import { useToast } from '../ui/Toast'
+
+export interface WorkloadRawLog {
+  pod: string
+  container: string
+  timestamp: string
+  content: string
+}
+
+export interface WorkloadLogsFetchParams {
+  container?: string
+  tailLines?: number
+  sinceSeconds?: number
+}
+
+export interface WorkloadLogsResult {
+  pods: WorkloadPodInfo[]
+  logs: WorkloadRawLog[]
+}
+
+export interface WorkloadLogsViewerProps {
+  /** Workload name — used for the download filename */
+  name: string
+  /**
+   * Called to fetch workload logs. Returns the pod list and merged log lines.
+   * The component owns the log range / container filter controls and passes
+   * the current params on every fetch.
+   */
+  fetchAll: (params: WorkloadLogsFetchParams) => Promise<WorkloadLogsResult>
+  /**
+   * If provided, the stream button is enabled.
+   * Called to open an SSE connection for the whole workload.
+   */
+  createStream?: (params: WorkloadLogsFetchParams) => EventSource
+}
+
+const POD_COLORS = [
+  'text-blue-400', 'text-green-400', 'text-yellow-400', 'text-purple-400',
+  'text-pink-400', 'text-cyan-400', 'text-orange-400', 'text-lime-400',
+]
+
+export function WorkloadLogsViewer({ name, fetchAll, createStream }: WorkloadLogsViewerProps) {
+  const [selectedContainer, setSelectedContainer] = useState<string>('')
+  const [pods, setPods] = useState<WorkloadPodInfo[]>([])
+  const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
+  const [isLoading, setIsLoading] = useState(false)
+  const [fetchError, setFetchError] = useState<string | null>(null)
+  const [showPodFilter, setShowPodFilter] = useState(false)
+  const [logRange, setLogRange] = useState('100')
+  const { showError, showSuccess } = useToast()
+
+  const { tailLines, sinceSeconds } = parseLogRange(logRange)
+  const { entries, append, set, clear } = useLogBuffer()
+  const { isStreaming, startStreaming, stopStreaming } = useLogStream()
+
+  const podColors = useMemo(() => {
+    const m = new Map<string, string>()
+    pods.forEach((pod, i) => m.set(pod.name, POD_COLORS[i % POD_COLORS.length]))
+    return m
+  }, [pods])
+
+  const podsInitialized = useRef(false)
+
+  const loadLogs = useCallback(async () => {
+    setIsLoading(true)
+    setFetchError(null)
+    try {
+      const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds })
+
+      setPods(result.pods)
+
+      if (!podsInitialized.current && result.pods.length > 0) {
+        podsInitialized.current = true
+        setSelectedPods(new Set(result.pods.map(p => p.name)))
+      }
+
+      const colors = new Map<string, string>()
+      result.pods.forEach((pod, i) => colors.set(pod.name, POD_COLORS[i % POD_COLORS.length]))
+
+      set(result.logs.map(log => ({
+        timestamp: log.timestamp,
+        content: log.content,
+        container: log.container,
+        pod: log.pod,
+        podColor: colors.get(log.pod),
+      })))
+    } catch (err) {
+      console.error('Failed to fetch workload logs:', err)
+      setFetchError(err instanceof Error ? err.message : 'Failed to fetch logs')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [fetchAll, selectedContainer, tailLines, sinceSeconds, set])
+
+  useEffect(() => { loadLogs() }, [loadLogs])
+  useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
+
+  const handleStartStreaming = useCallback(() => {
+    if (!createStream) return
+    startStreaming(
+      () => createStream({ container: selectedContainer || undefined, tailLines: 50, sinceSeconds }),
+      {
+        onConnected: (data: any) => {
+          if (data?.pods) {
+            setPods(data.pods)
+            if (selectedPods.size === 0) {
+              setSelectedPods(new Set((data.pods as WorkloadPodInfo[]).map((p: WorkloadPodInfo) => p.name)))
+            }
+          }
+        },
+        onLog: (data: any) => {
+          if (data?.pod && data.content !== undefined) {
+            append({
+              timestamp: data.timestamp || '',
+              content: data.content || '',
+              container: data.container || '',
+              pod: data.pod || '',
+              podColor: podColors.get(data.pod || ''),
+            })
+          }
+        },
+      },
+      'Workload log stream error',
+    )
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColors, selectedPods.size])
+
+  const allContainers = useMemo(() => {
+    const s = new Set<string>()
+    pods.forEach(pod => pod.containers.forEach(c => s.add(c)))
+    return Array.from(s)
+  }, [pods])
+
+  const togglePod = useCallback((podName: string) => {
+    setSelectedPods(prev => {
+      const next = new Set(prev)
+      if (next.has(podName)) next.delete(podName)
+      else next.add(podName)
+      return next
+    })
+  }, [])
+
+  const toggleAllPods = useCallback(() => {
+    setSelectedPods(selectedPods.size === pods.length ? new Set() : new Set(pods.map(p => p.name)))
+  }, [selectedPods.size, pods])
+
+  const filteredEntries = useMemo(
+    () => entries.filter(e => !e.pod || selectedPods.has(e.pod)),
+    [entries, selectedPods],
+  )
+
+  const downloadLogs = useCallback((format: DownloadFormat) => {
+    let content: string
+    let mime: string
+    const filename = `${name}-logs.${format}`
+    switch (format) {
+      case 'json':
+        content = JSON.stringify(filteredEntries.map(l => ({
+          timestamp: l.timestamp, pod: l.pod, container: l.container, content: l.content,
+        })), null, 2)
+        mime = 'application/json'
+        break
+      case 'csv':
+        content = 'timestamp,pod,container,content\n' + filteredEntries.map(l =>
+          `${l.timestamp},${l.pod || ''},${l.container},"${l.content.replace(/"/g, '""')}"`)
+          .join('\n')
+        mime = 'text/csv'
+        break
+      default:
+        content = filteredEntries.map(l => `${l.timestamp} [${l.pod}/${l.container}] ${l.content}`).join('\n')
+        mime = 'text/plain'
+    }
+    try {
+      triggerDownload(content, mime, filename)
+      showSuccess('Log download started', `Saving ${filename}. Check your browser or desktop Downloads location.`)
+    } catch (err) {
+      showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
+    }
+  }, [filteredEntries, name, showError, showSuccess])
+
+  const toolbarExtra = (
+    <>
+      {/* Pod filter */}
+      <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 ${
+            showPodFilter ? 'bg-blue-600 text-theme-text-primary' : 'bg-theme-elevated text-theme-text-secondary hover:bg-theme-hover'
+          }`}
+        >
+          <Filter className="w-3 h-3" />
+          <span>{selectedPods.size}/{pods.length} pods</span>
+          <ChevronDown className="w-3 h-3" />
+        </button>
+
+        {showPodFilter && (
+          <div className="absolute top-full left-0 mt-1 w-64 bg-theme-elevated border border-theme-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto">
+            <div className="p-2 border-b border-theme-border">
+              <button onClick={toggleAllPods} className="text-xs text-blue-400 hover:text-blue-300">
+                {selectedPods.size === pods.length ? 'Deselect all' : 'Select all'}
+              </button>
+            </div>
+            {pods.map(pod => (
+              <label key={pod.name} className="flex items-center gap-2 px-3 py-2 hover:bg-theme-hover">
+                <input
+                  type="checkbox"
+                  checked={selectedPods.has(pod.name)}
+                  onChange={() => togglePod(pod.name)}
+                  className="w-3 h-3 rounded border-theme-border-light bg-theme-elevated text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
+                />
+                <span className={`w-2 h-2 rounded-full ${podColors.get(pod.name)?.replace('text-', 'bg-')}`} />
+                <span className="text-xs text-theme-text-primary truncate flex-1">{pod.name}</span>
+                <span className={`text-xs ${pod.ready ? 'text-green-400' : 'text-yellow-400'}`}>
+                  {pod.ready ? 'Ready' : 'Not Ready'}
+                </span>
+              </label>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <ContainerSelect
+        containers={allContainers}
+        value={selectedContainer}
+        onChange={setSelectedContainer}
+        includeAll
+      />
+
+      <LogRangeSelect
+        value={logRange}
+        onChange={setLogRange}
+        lineOptions={[50, 100, 500, 1000]}
+        tooltip="How many logs to load per pod — by line count or time range"
+      />
+    </>
+  )
+
+  return (
+    <LogCore
+      entries={filteredEntries}
+      isLoading={isLoading}
+      isStreaming={isStreaming}
+      onStartStream={createStream ? handleStartStreaming : undefined}
+      onStopStream={stopStreaming}
+      onRefresh={loadLogs}
+      onDownload={downloadLogs}
+      onClear={clear}
+      toolbarExtra={toolbarExtra}
+      showPodName
+      emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
+      errorMessage={fetchError}
+    />
+  )
+}

package/src/components/logs/index.ts

@@ -0,0 +1,13 @@
+export { LogCore } from './LogCore'
+export type { DownloadFormat } from './LogCore'
+export { useLogBuffer, detectLogLevel } from './useLogBuffer'
+export type { LogLevel, LogEntry } from './useLogBuffer'
+export { useLogSearch } from './useLogSearch'
+export { useLogStream } from './useLogStream'
+export type { LogStreamHandlers } from './useLogStream'
+export { JsonLogLine } from './JsonLogLine'
+export { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
+export { LogsViewer } from './LogsViewer'
+export type { LogsViewerProps, LogsFetchParams } from './LogsViewer'
+export { WorkloadLogsViewer } from './WorkloadLogsViewer'
+export type { WorkloadLogsViewerProps, WorkloadLogsFetchParams, WorkloadRawLog, WorkloadLogsResult } from './WorkloadLogsViewer'

package/src/components/logs/useLogBuffer.ts

@@ -0,0 +1,138 @@
+import { useState, useRef, useCallback } from 'react'
+
+export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'unknown'
+
+export interface LogEntry {
+  id: number
+  timestamp: string
+  content: string
+  container: string
+  pod?: string
+  podColor?: string
+  level: LogLevel
+  isJson: boolean
+}
+
+const MAX_BUFFER_SIZE = 10_000
+
+/**
+ * Detect log level from content using word-boundary matching.
+ * For JSON logs, prefer the `level` or `severity` field.
+ */
+export function detectLogLevel(content: string): LogLevel {
+  // Fast path for JSON: check level/severity field
+  const trimmed = content.trimStart()
+  if (trimmed[0] === '{') {
+    try {
+      const obj = JSON.parse(trimmed)
+      const rawLevel = obj.level ?? obj.severity ?? obj.lvl ?? ''
+      // Numeric levels (pino/bunyan): 10=trace, 20=debug, 30=info, 40=warn, 50=error, 60=fatal
+      if (typeof rawLevel === 'number') {
+        if (rawLevel >= 50) return 'error'
+        if (rawLevel >= 40) return 'warn'
+        if (rawLevel >= 30) return 'info'
+        return 'debug'
+      }
+      const lvl = String(rawLevel).toLowerCase()
+      if (/^(error|err|fatal|panic|critical|crit)$/.test(lvl)) return 'error'
+      if (/^(warn|warning)$/.test(lvl)) return 'warn'
+      if (/^(info|information|notice)$/.test(lvl)) return 'info'
+      if (/^(debug|trace|verbose)$/.test(lvl)) return 'debug'
+    } catch {
+      // Not valid JSON, fall through to text matching
+    }
+  }
+
+  const lower = content.toLowerCase()
+  if (/\b(error|fatal|panic|critical|crit|exception)\b/.test(lower)) return 'error'
+  if (/\b(warn|warning)\b/.test(lower)) return 'warn'
+  if (/\b(debug|trace)\b/.test(lower)) return 'debug'
+  if (/\b(info)\b/.test(lower)) return 'info'
+  return 'unknown'
+}
+
+function isJsonContent(content: string): boolean {
+  const trimmed = content.trimStart()
+  return trimmed[0] === '{' && trimmed[trimmed.length - 1] === '}'
+}
+
+interface UseLogBufferReturn {
+  entries: LogEntry[]
+  append: (entry: Omit<LogEntry, 'id' | 'level' | 'isJson'>) => void
+  appendBatch: (entries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => void
+  set: (entries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => void
+  clear: () => void
+}
+
+export function useLogBuffer(): UseLogBufferReturn {
+  const [entries, setEntries] = useState<LogEntry[]>([])
+  const idCounter = useRef(0)
+  const pendingRef = useRef<Omit<LogEntry, 'id' | 'level' | 'isJson'>[]>([])
+  const rafRef = useRef<number | null>(null)
+
+  const enrichEntry = useCallback((raw: Omit<LogEntry, 'id' | 'level' | 'isJson'>): LogEntry => {
+    return {
+      ...raw,
+      id: idCounter.current++,
+      level: detectLogLevel(raw.content),
+      isJson: isJsonContent(raw.content),
+    }
+  }, [])
+
+  const flushPending = useCallback(() => {
+    rafRef.current = null
+    const batch = pendingRef.current
+    if (batch.length === 0) return
+    pendingRef.current = []
+
+    setEntries(prev => {
+      const enriched = batch.map(enrichEntry)
+      const combined = [...prev, ...enriched]
+      if (combined.length > MAX_BUFFER_SIZE) {
+        return combined.slice(combined.length - MAX_BUFFER_SIZE)
+      }
+      return combined
+    })
+  }, [enrichEntry])
+
+  const append = useCallback((entry: Omit<LogEntry, 'id' | 'level' | 'isJson'>) => {
+    pendingRef.current.push(entry)
+    if (rafRef.current === null) {
+      rafRef.current = requestAnimationFrame(flushPending)
+    }
+  }, [flushPending])
+
+  const appendBatch = useCallback((batch: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => {
+    pendingRef.current.push(...batch)
+    if (rafRef.current === null) {
+      rafRef.current = requestAnimationFrame(flushPending)
+    }
+  }, [flushPending])
+
+  const set = useCallback((rawEntries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => {
+    // Cancel any pending RAF
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current)
+      rafRef.current = null
+    }
+    pendingRef.current = []
+
+    const enriched = rawEntries.map(enrichEntry)
+    if (enriched.length > MAX_BUFFER_SIZE) {
+      setEntries(enriched.slice(enriched.length - MAX_BUFFER_SIZE))
+    } else {
+      setEntries(enriched)
+    }
+  }, [enrichEntry])
+
+  const clear = useCallback(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current)
+      rafRef.current = null
+    }
+    pendingRef.current = []
+    setEntries([])
+  }, [])
+
+  return { entries, append, appendBatch, set, clear }
+}