@skyhook-io/k8s-ui 1.1.0 → 1.2.0

package/src/components/logs/LogCore.tsx

@@ -1,9 +1,9 @@
 import { useRef, useCallback, useState, useMemo, useEffect, type ReactNode } from 'react'
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso'
-import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter } from 'lucide-react'
+import { Play, Square, Download, Search, X, Terminal, RotateCcw, ChevronUp, ChevronDown, CaseSensitive, Regex, WrapText, Clock, Copy, Trash2, Filter, Braces } from 'lucide-react'
 import type { LogEntry, LogLevel } from './useLogBuffer'
 import { useLogSearch } from './useLogSearch'
-import { JsonLogLine } from './JsonLogLine'
+import { StructuredLogLine } from './StructuredLogLine'
 import { Tooltip } from '../ui/Tooltip'
 import {
   formatLogTimestamp,
@@ -65,6 +65,7 @@ export function LogCore({
     new Set(['error', 'warn', 'info', 'debug'])
   )
   const [showDownloadMenu, setShowDownloadMenu] = useState(false)
+  const [expandAllStructured, setExpandAllStructured] = useState(false)
 
   // Level-filtered entries
   // 'unknown' logs are shown when all 4 known levels are enabled (no active filtering)
@@ -83,6 +84,8 @@ export function LogCore({
     return counts
   }, [entries])
 
+  const hasStructuredEntries = useMemo(() => entries.some(e => e.isJson || e.isLogfmt), [entries])
+
   // Search
   const search = useLogSearch(levelFilteredEntries, virtuosoRef)
 
@@ -225,6 +228,20 @@ export function LogCore({
 
         <div className="flex-1" />
 
+        {/* Expand all structured logs toggle */}
+        {hasStructuredEntries && (
+          <Tooltip content={expandAllStructured ? 'Collapse all structured' : 'Expand all structured'} delay={TIP_DELAY} position="bottom">
+            <button
+              onClick={() => setExpandAllStructured(prev => !prev)}
+              className={`p-1.5 rounded transition-colors ${
+                expandAllStructured ? 'bg-blue-600/50 text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
+              }`}
+            >
+              <Braces className="w-4 h-4" />
+            </button>
+          </Tooltip>
+        )}
+
         {/* Timestamp toggle */}
         <Tooltip content={showTimestamps ? 'Hide timestamps' : 'Show timestamps'} delay={TIP_DELAY} position="bottom">
           <button
@@ -438,6 +455,7 @@ export function LogCore({
                 showTimestamp={showTimestamps}
                 isCurrentMatch={entry.id === currentHighlightId}
                 wordWrap={wordWrap}
+                defaultExpanded={expandAllStructured}
               />
             )}
             className="h-full font-mono text-xs"
@@ -483,6 +501,7 @@ function LogLine({
   showTimestamp,
   isCurrentMatch,
   wordWrap,
+  defaultExpanded,
 }: {
   entry: LogEntry
   searchQuery: string
@@ -492,6 +511,7 @@ function LogLine({
   showTimestamp: boolean
   isCurrentMatch: boolean
   wordWrap: boolean
+  defaultExpanded: boolean
 }) {
   const levelColor = getLevelColor(entry.level)
 
@@ -506,9 +526,15 @@ function LogLine({
         dangerouslySetInnerHTML={{ __html: highlighted }}
       />
     )
-  } else if (entry.isJson) {
+  } else if (entry.isJson || entry.isLogfmt) {
     contentElement = (
-      <JsonLogLine content={entry.content} level={entry.level} wordWrap={wordWrap} />
+      <StructuredLogLine
+        content={entry.content}
+        level={entry.level}
+        wordWrap={wordWrap}
+        isLogfmt={entry.isLogfmt}
+        defaultExpanded={defaultExpanded}
+      />
     )
   } else {
     const html = ansiToHtml(entry.content)

package/src/components/logs/StructuredLogLine.tsx

@@ -0,0 +1,168 @@
+import { useState, useMemo } from 'react'
+import { ChevronRight, ChevronDown } from 'lucide-react'
+import type { LogLevel } from './useLogBuffer'
+import {
+  getLevelColor,
+  highlightJson,
+  unescapeJsonStrings,
+  parseLogfmt,
+  SYNTAX_COLOR_KEY,
+  SYNTAX_COLOR_STRING,
+} from '../../utils/log-format'
+import { SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
+
+interface StructuredLogLineProps {
+  content: string
+  level: LogLevel
+  wordWrap: boolean
+  isLogfmt?: boolean
+  defaultExpanded?: boolean
+}
+
+export function StructuredLogLine({ content, level, wordWrap, isLogfmt, defaultExpanded }: StructuredLogLineProps) {
+  // null = user hasn't toggled this line; defers to defaultExpanded (global toggle)
+  const [localExpanded, setLocalExpanded] = useState<boolean | null>(null)
+  const expanded = localExpanded ?? defaultExpanded ?? false
+
+  const parsed = useMemo(() => {
+    try {
+      if (isLogfmt) {
+        return parseLogfmt(content)
+      }
+      return JSON.parse(content.trim())
+    } catch {
+      return null
+    }
+  }, [content, isLogfmt])
+
+  if (!parsed) {
+    return (
+      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${getLevelColor(level)}`}>
+        {content}
+      </span>
+    )
+  }
+
+  const fieldCount = Object.keys(parsed).length
+
+  const toggle = () => setLocalExpanded(!expanded)
+  const chevron = expanded
+    ? <ChevronDown className="w-3 h-3 shrink-0 text-theme-text-tertiary" />
+    : <ChevronRight className="w-3 h-3 shrink-0 text-theme-text-tertiary" />
+
+  return (
+    <span>
+      {!expanded ? (
+        // Collapsed: entire summary line is clickable
+        <span
+          onClick={toggle}
+          className={`cursor-pointer hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}
+        >
+          <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
+          <SummaryLine obj={parsed} />
+          <span className="text-theme-text-tertiary ml-1">{`{${fieldCount} fields}`}</span>
+        </span>
+      ) : (
+        // Expanded: summary header is clickable to collapse, JSON content is selectable
+        <>
+        <span
+          onClick={toggle}
+          className="cursor-pointer hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5"
+        >
+          <span className="inline-flex items-center align-middle mr-0.5">{chevron}</span>
+          <SummaryLine obj={parsed} />
+          <span className="text-theme-text-tertiary ml-1">{`{${fieldCount} fields}`}</span>
+        </span>
+        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
+          {isLogfmt ? (
+            <ExpandedLogfmt obj={parsed} />
+          ) : (
+            <span dangerouslySetInnerHTML={{
+              __html: highlightJson(unescapeJsonStrings(JSON.stringify(parsed, null, 2)))
+            }} />
+          )}
+        </span>
+        </>
+      )}
+    </span>
+  )
+}
+
+function SummaryLine({ obj }: { obj: Record<string, unknown> }) {
+  const lvl = obj.level ?? obj.severity ?? obj.lvl ?? nestedField(obj, 'log', 'level')
+  const msg = obj.msg ?? obj.message
+  const rawErr = obj.error ?? obj.err
+  const err = typeof rawErr === 'string'
+    ? rawErr
+    : nestedField(obj, 'error', 'message') ?? nestedField(obj, 'err', 'message')
+  const caller = obj.caller ?? obj.source
+
+  return (
+    <>
+      {lvl != null && (
+        <span className={`${getLevelBadgeColor(lvl)} text-[10px] font-semibold px-1 py-px rounded mr-1.5 inline-block`}>
+          {formatLevel(lvl)}
+        </span>
+      )}
+      {typeof msg === 'string' && (
+        <span className="text-theme-text-primary">{msg}</span>
+      )}
+      {typeof err === 'string' && (
+        <span className="text-red-400 ml-2">error={err}</span>
+      )}
+      {typeof caller === 'string' && (
+        <span className="text-theme-text-disabled ml-2">{caller}</span>
+      )}
+    </>
+  )
+}
+
+function ExpandedLogfmt({ obj }: { obj: Record<string, unknown> }) {
+  return (
+    <>
+      {Object.entries(obj).map(([key, val]) => (
+        <div key={key}>
+          <span style={{ color: SYNTAX_COLOR_KEY }}>{key}</span>
+          <span className="text-theme-text-tertiary">=</span>
+          <span style={{ color: SYNTAX_COLOR_STRING }}>{String(val)}</span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+function nestedField(obj: Record<string, unknown>, parent: string, child: string): unknown {
+  const p = obj[parent]
+  if (p && typeof p === 'object' && !Array.isArray(p)) {
+    return (p as Record<string, unknown>)[child]
+  }
+  return undefined
+}
+
+function formatLevel(lvl: unknown): string {
+  if (typeof lvl === 'number') {
+    if (lvl >= 50) return 'ERR'
+    if (lvl >= 40) return 'WARN'
+    if (lvl >= 30) return 'INFO'
+    return 'DBG'
+  }
+  return String(lvl).toUpperCase()
+}
+
+function getLevelBadgeColor(lvl: unknown): string {
+  let normalized: string
+  if (typeof lvl === 'number') {
+    // Pino/bunyan numeric levels: 10=trace, 20=debug, 30=info, 40=warn, 50=error, 60=fatal
+    if (lvl >= 50) normalized = 'error'
+    else if (lvl >= 40) normalized = 'warn'
+    else if (lvl >= 30) normalized = 'info'
+    else normalized = 'debug'
+  } else {
+    normalized = String(lvl).toLowerCase()
+  }
+  if (/^(error|err|fatal|panic|critical|crit)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.error
+  if (/^(warn|warning)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.warning
+  if (/^(info|information|notice)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.info
+  if (/^(debug|dbg|trace|verbose)$/.test(normalized)) return SEVERITY_BADGE_BORDERED.debug
+  return SEVERITY_BADGE_BORDERED.neutral
+}

package/src/components/logs/index.ts

@@ -5,7 +5,7 @@ export type { LogLevel, LogEntry } from './useLogBuffer'
 export { useLogSearch } from './useLogSearch'
 export { useLogStream } from './useLogStream'
 export type { LogStreamHandlers } from './useLogStream'
-export { JsonLogLine } from './JsonLogLine'
+export { StructuredLogLine } from './StructuredLogLine'
 export { ContainerSelect, LogRangeSelect } from './LogToolbarSelects'
 export { LogsViewer } from './LogsViewer'
 export type { LogsViewerProps, LogsFetchParams } from './LogsViewer'

package/src/components/logs/useLogBuffer.ts

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from 'react'
+import { isLogfmt } from '../../utils/log-format'
 
 export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'unknown'
 
@@ -11,13 +12,14 @@ export interface LogEntry {
   podColor?: string
   level: LogLevel
   isJson: boolean
+  isLogfmt: 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.
+ * For JSON logs, prefer the `level`, `severity`, or `lvl` field.
  */
 export function detectLogLevel(content: string): LogLevel {
   // Fast path for JSON: check level/severity field
@@ -56,26 +58,30 @@ function isJsonContent(content: string): boolean {
   return trimmed[0] === '{' && trimmed[trimmed.length - 1] === '}'
 }
 
+type RawLogEntry = Omit<LogEntry, 'id' | 'level' | 'isJson' | 'isLogfmt'>
+
 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
+  append: (entry: RawLogEntry) => void
+  appendBatch: (entries: RawLogEntry[]) => void
+  set: (entries: RawLogEntry[]) => 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 pendingRef = useRef<RawLogEntry[]>([])
   const rafRef = useRef<number | null>(null)
 
-  const enrichEntry = useCallback((raw: Omit<LogEntry, 'id' | 'level' | 'isJson'>): LogEntry => {
+  const enrichEntry = useCallback((raw: RawLogEntry): LogEntry => {
+    const isJ = isJsonContent(raw.content)
     return {
       ...raw,
       id: idCounter.current++,
       level: detectLogLevel(raw.content),
-      isJson: isJsonContent(raw.content),
+      isJson: isJ,
+      isLogfmt: !isJ && isLogfmt(raw.content),
     }
   }, [])
 
@@ -95,21 +101,21 @@ export function useLogBuffer(): UseLogBufferReturn {
     })
   }, [enrichEntry])
 
-  const append = useCallback((entry: Omit<LogEntry, 'id' | 'level' | 'isJson'>) => {
+  const append = useCallback((entry: RawLogEntry) => {
     pendingRef.current.push(entry)
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
-  const appendBatch = useCallback((batch: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => {
+  const appendBatch = useCallback((batch: RawLogEntry[]) => {
     pendingRef.current.push(...batch)
     if (rafRef.current === null) {
       rafRef.current = requestAnimationFrame(flushPending)
     }
   }, [flushPending])
 
-  const set = useCallback((rawEntries: Omit<LogEntry, 'id' | 'level' | 'isJson'>[]) => {
+  const set = useCallback((rawEntries: RawLogEntry[]) => {
     // Cancel any pending RAF
     if (rafRef.current !== null) {
       cancelAnimationFrame(rafRef.current)