@skyhook-io/k8s-ui 1.7.10 → 1.7.12

package/src/components/logs/LogsViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { parseLogLine, parseLogRange } from '../../utils/log-format'
 import { triggerDownload } from '../../utils/download'
 import { useLogBuffer } from './useLogBuffer'
@@ -30,6 +30,12 @@ export interface LogsViewerProps {
   overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
+  /**
+   * Open the stream automatically on mount (and on container switch) instead of
+   * loading a static snapshot. The user can still Stop, and a manual Stop is not
+   * re-armed. Requires `createStream`. Default: false.
+   */
+  autoStream?: boolean
 }
 
 export function LogsViewer({
@@ -41,6 +47,7 @@ export function LogsViewer({
   createStream,
   overrideDownload,
   forceDark,
+  autoStream = false,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
   const [isLoading, setIsLoading] = useState(false)
@@ -51,7 +58,14 @@ export function LogsViewer({
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
   const { entries, append, set, clear } = useLogBuffer()
-  const { isStreaming, startStreaming, stopStreaming } = useLogStream()
+  const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
+
+  const willAutoStream = autoStream && !!createStream
+  // Tracks the container we've already auto-started for, so re-renders don't
+  // re-open the stream, and a container switch arms a fresh auto-start.
+  const autoStartedForRef = useRef<string | null>(null)
+  // Once the user explicitly Stops, don't auto-resume for this viewer's lifetime.
+  const userStoppedRef = useRef(false)
 
   const loadLogs = useCallback(async () => {
     if (!selectedContainer) return
@@ -72,11 +86,30 @@ export function LogsViewer({
     }
   }, [selectedContainer, tailLines, sinceSeconds, showPrevious, fetchLogs, set])
 
-  useEffect(() => { loadLogs() }, [loadLogs])
+  // 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.
+  useEffect(() => {
+    if (!willAutoStream || userStoppedRef.current) loadLogs()
+  }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
 
+  // If auto-stream turns off while a stream is open (e.g. the pod went
+  // terminal), stop following so live appends don't race the snapshot.
+  const prevWillAutoStreamRef = useRef(willAutoStream)
+  useEffect(() => {
+    if (prevWillAutoStreamRef.current && !willAutoStream && isStreaming) stopStreaming()
+    prevWillAutoStreamRef.current = willAutoStream
+  }, [willAutoStream, isStreaming, stopStreaming])
+
   const handleStartStreaming = useCallback(() => {
     if (!createStream) return
+    // 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).
+    clear()
     startStreaming(
       () => createStream({ container: selectedContainer, tailLines: 100, sinceSeconds }),
       {
@@ -86,8 +119,26 @@ export function LogsViewer({
           container: data.container || selectedContainer,
         }),
       },
+      'Log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear])
+
+  const handleStopStreaming = useCallback(() => {
+    userStoppedRef.current = true
+    stopStreaming()
+  }, [stopStreaming])
+
+  useEffect(() => {
+    if (!willAutoStream || !selectedContainer) return
+    if (userStoppedRef.current) return
+    if (autoStartedForRef.current === selectedContainer) return
+    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 }
+  }, [willAutoStream, selectedContainer, handleStartStreaming])
 
   const downloadLogs = useCallback((format: DownloadFormat) => {
     let content: string
@@ -122,30 +173,35 @@ export function LogsViewer({
     <>
       <ContainerSelect containers={containers} value={selectedContainer} onChange={setSelectedContainer} isDark={isDark} />
 
-      <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 ${palette.textSecondary}`}>
+      <Tooltip content={isStreaming ? 'Stop streaming to view the previous instance' : "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 ${palette.textSecondary} ${isStreaming ? 'opacity-50 cursor-not-allowed' : ''}`}>
           <input
             type="checkbox"
             checked={showPrevious}
             onChange={(e) => setShowPrevious(e.target.checked)}
+            disabled={isStreaming}
             className={`w-3 h-3 rounded ${palette.borderLight} ${palette.elevatedBg} text-blue-500 focus:ring-blue-500 focus:ring-offset-0`}
           />
           <span className={`border-b border-dotted ${isDark ? 'border-slate-500' : 'border-slate-400'}`}>Previous</span>
         </label>
       </Tooltip>
 
-      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} />
+      <LogRangeSelect value={logRange} onChange={setLogRange} isDark={isDark} disabled={isStreaming} />
     </>
   )
 
+  // 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
+
   return (
     <LogCore
       entries={entries}
-      isLoading={isLoading}
-      errorMessage={fetchError}
+      isLoading={isLoading || isConnecting}
+      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
-      onStopStream={stopStreaming}
+      onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -47,9 +47,15 @@ export interface WorkloadLogsViewerProps {
   overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
+  /**
+   * Open the stream automatically on mount (and on container switch) instead of
+   * loading a static snapshot. The user can still Stop, and a manual Stop is not
+   * re-armed. Requires `createStream`. Default: false.
+   */
+  autoStream?: boolean
 }
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark, autoStream = false }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -61,7 +67,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
 
   const { tailLines, sinceSeconds } = parseLogRange(logRange)
   const { entries, append, set, clear } = useLogBuffer()
-  const { isStreaming, startStreaming, stopStreaming } = useLogStream()
+  const { isStreaming, streamError, connecting, startStreaming, stopStreaming } = useLogStream()
+
+  const willAutoStream = autoStream && !!createStream
+  // null sentinel so the initial selectedContainer ('' = all) still arms once.
+  const autoStartedForRef = useRef<string | null>(null)
+  const userStoppedRef = useRef(false)
 
   // Map pod.name → index. Color classes are resolved at render time from the
   // current palette (see LogCore / pod-filter dropdown below) so toggling
@@ -105,11 +116,30 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     }
   }, [fetchAll, selectedContainer, tailLines, sinceSeconds, set])
 
-  useEffect(() => { loadLogs() }, [loadLogs])
+  // 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 selection's lines.
+  useEffect(() => {
+    if (!willAutoStream || userStoppedRef.current) loadLogs()
+  }, [loadLogs, willAutoStream])
   useEffect(() => { stopStreaming() }, [selectedContainer, stopStreaming])
 
+  // If auto-stream turns off while a stream is open, stop following so live
+  // appends don't race the snapshot.
+  const prevWillAutoStreamRef = useRef(willAutoStream)
+  useEffect(() => {
+    if (prevWillAutoStreamRef.current && !willAutoStream && isStreaming) stopStreaming()
+    prevWillAutoStreamRef.current = willAutoStream
+  }, [willAutoStream, isStreaming, stopStreaming])
+
   const handleStartStreaming = useCallback(() => {
     if (!createStream) return
+    // The stream replays the last N lines per pod (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).
+    clear()
     startStreaming(
       () => createStream({ container: selectedContainer || undefined, tailLines: 50, sinceSeconds }),
       {
@@ -156,9 +186,26 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
           }
         },
       },
-      'Workload log stream error',
+      'Workload log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColorIndex, selectedPods.size])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColorIndex, selectedPods.size, clear])
+
+  const handleStopStreaming = useCallback(() => {
+    userStoppedRef.current = true
+    stopStreaming()
+  }, [stopStreaming])
+
+  useEffect(() => {
+    if (!willAutoStream) return
+    if (userStoppedRef.current) return
+    if (autoStartedForRef.current === selectedContainer) return
+    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 }
+  }, [willAutoStream, selectedContainer, handleStartStreaming])
 
   const allContainers = useMemo(() => {
     const s = new Set<string>()
@@ -280,24 +327,29 @@ 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}
       />
     </>
   )
 
+  // 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
+
   return (
     <LogCore
       entries={filteredEntries}
-      isLoading={isLoading}
+      isLoading={isLoading || isConnecting}
       isStreaming={isStreaming}
       onStartStream={createStream ? handleStartStreaming : undefined}
-      onStopStream={stopStreaming}
+      onStopStream={handleStopStreaming}
       onRefresh={loadLogs}
       onDownload={downloadLogs}
       onClear={clear}
       toolbarExtra={renderToolbarExtra}
       showPodName
       emptyMessage={pods.length === 0 ? 'No pods found' : 'No logs available'}
-      errorMessage={fetchError}
+      errorMessage={fetchError || (entries.length === 0 ? streamError : null)}
       forceDark={forceDark}
     />
   )

package/src/components/logs/useLogStream.ts

@@ -18,12 +18,24 @@ export interface LogStreamHandlers {
  */
 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)
+  // 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
+  // immediately instead of flashing the empty state.
+  const [connecting, setConnecting] = useState(true)
   const eventSourceRef = useRef<EventSource | null>(null)
+  // EventSource fires a generic 'error' on the normal close that follows the
+  // server's 'end'; this distinguishes a clean end from a real failure.
+  const endedRef = useRef(false)
 
   const stopStreaming = useCallback(() => {
     eventSourceRef.current?.close()
     eventSourceRef.current = null
     setIsStreaming(false)
+    setConnecting(false)
+    setStreamError(null)
   }, [])
 
   const startStreaming = useCallback((
@@ -32,10 +44,19 @@ export function useLogStream() {
     errorContext = 'Log stream error',
   ) => {
     eventSourceRef.current?.close()
+    endedRef.current = false
+    setStreamError(null)
+    setConnecting(true)
     const es = create()
+    // Ignore events from a superseded source: closing/replacing an EventSource
+    // (Stop, container switch, restart) can fire a late, async 'error' that
+    // would otherwise corrupt the new stream's state or show a false failure.
+    const isCurrent = () => eventSourceRef.current === es
 
     es.addEventListener('connected', (event) => {
+      if (!isCurrent()) return
       setIsStreaming(true)
+      setConnecting(false)
       if (handlers.onConnected) {
         try { handlers.onConnected(JSON.parse((event as MessageEvent).data)) } catch (e) {
           console.error('Failed to parse connected event:', e)
@@ -44,12 +65,15 @@ export function useLogStream() {
     })
 
     es.addEventListener('log', (event) => {
+      if (!isCurrent()) return
+      setConnecting(false)
       try { handlers.onLog(JSON.parse((event as MessageEvent).data)) } catch (e) {
         console.error('Failed to parse log event:', e)
       }
     })
 
     es.addEventListener('pod_added', (event) => {
+      if (!isCurrent()) return
       if (handlers.onPodAdded) {
         try { handlers.onPodAdded(JSON.parse((event as MessageEvent).data)) } catch (e) {
           console.error('Failed to parse pod_added event:', e)
@@ -58,6 +82,7 @@ export function useLogStream() {
     })
 
     es.addEventListener('pod_removed', (event) => {
+      if (!isCurrent()) return
       if (handlers.onPodRemoved) {
         try { handlers.onPodRemoved(JSON.parse((event as MessageEvent).data)) } catch (e) {
           console.error('Failed to parse pod_removed event:', e)
@@ -65,10 +90,23 @@ export function useLogStream() {
       }
     })
 
-    es.addEventListener('end', () => setIsStreaming(false))
+    es.addEventListener('end', () => {
+      if (!isCurrent()) return
+      endedRef.current = true
+      setIsStreaming(false)
+      setConnecting(false)
+    })
 
     es.addEventListener('error', (event) => {
-      handleSSEError(event, errorContext, () => { setIsStreaming(false); es.close() })
+      if (!isCurrent()) { es.close(); return }
+      setIsStreaming(false)
+      setConnecting(false)
+      es.close()
+      // The browser fires 'error' on the normal close that follows a clean
+      // 'end'; that's not a failure, so don't log it or surface it.
+      if (endedRef.current) return
+      handleSSEError(event, errorContext, () => {})
+      setStreamError(errorContext)
     })
 
     eventSourceRef.current = es
@@ -77,5 +115,5 @@ export function useLogStream() {
   // Cleanup on unmount
   useEffect(() => () => { eventSourceRef.current?.close() }, [])
 
-  return { isStreaming, startStreaming, stopStreaming }
+  return { isStreaming, streamError, connecting, startStreaming, stopStreaming }
 }