@skyhook-io/k8s-ui 1.5.1 → 1.5.3

package/src/components/logs/log-palette.ts

@@ -0,0 +1,222 @@
+/**
+ * Explicit color palettes for the log viewer.
+ *
+ * The log viewer is intentionally self-contained: it does NOT use theme tokens
+ * (`text-theme-*`, `bg-theme-*`, etc.) because those are driven by CSS
+ * `light-dark()` and don't resolve correctly through the log viewer's forced
+ * `color-scheme` container. Instead it flips between two explicit palettes
+ * based on its own `isDark` state (toggled by a Sun/Moon button in the
+ * toolbar, persisted to `localStorage['radar-logs-dark']`).
+ *
+ * All class strings are static literals so Tailwind's class scanner picks them
+ * up — do not construct them dynamically.
+ */
+
+/** All color-related class strings used inside the log viewer. */
+export interface LogPalette {
+  // Container / surfaces
+  containerBg: string
+  toolbarBg: string
+  toolbarBgMuted: string
+  menuBg: string
+  elevatedBg: string
+
+  // Borders
+  border: string
+  borderLight: string
+
+  // Text
+  textPrimary: string
+  textSecondary: string
+  textTertiary: string
+  textDisabled: string
+  /** Standalone error text (inline "error=..." in structured lines, inline validation errors). */
+  textError: string
+  /** Accent/link text — blue-family. Used for toolbar toggles, "select all" etc. */
+  textAccent: string
+
+  // Placeholder (plain class, applied via `placeholder-*` below)
+  placeholder: string
+
+  // Hover states
+  hoverBg: string
+  hoverSurface: string
+  hoverText: string
+  /** Active/selected toolbar controls inside the viewer. */
+  toolbarActive: string
+
+  // Row highlight (current search match)
+  currentMatchBg: string
+
+  // Level-filter button active colors (per-level, full className)
+  levelActiveError: string
+  levelActiveWarn: string
+  levelActiveInfo: string
+  levelActiveDebug: string
+
+  // Level-badge colors used inside StructuredLogLine
+  levelBadgeError: string
+  levelBadgeWarn: string
+  levelBadgeInfo: string
+  levelBadgeDebug: string
+  levelBadgeNeutral: string
+
+  /**
+   * Pod label colors for WorkloadLogsViewer (aggregated logs across pods).
+   * Pairs: one class for the name text, one for the filter-list dot.
+   * Pods are round-robined through this array.
+   */
+  podColors: Array<{ text: string; bg: string }>
+
+  /**
+   * Syntax-highlight colors for structured JSON/logfmt renderings.
+   * Applied as inline `style={{ color }}` (not classes) because the values
+   * come from log-format.ts and feed React's style prop.
+   */
+  syntaxKey: string
+  syntaxString: string
+  syntaxNumber: string
+  syntaxBoolean: string
+  syntaxNull: string
+}
+
+const DARK_PALETTE: LogPalette = {
+  containerBg: 'bg-slate-950',
+  toolbarBg: 'bg-slate-900',
+  toolbarBgMuted: 'bg-slate-900/60',
+  menuBg: 'bg-slate-900',
+  elevatedBg: 'bg-slate-800',
+
+  border: 'border-slate-800',
+  borderLight: 'border-slate-700',
+
+  textPrimary: 'text-slate-100',
+  textSecondary: 'text-slate-400',
+  textTertiary: 'text-slate-500',
+  textDisabled: 'text-slate-600',
+  textError: 'text-red-400',
+  textAccent: 'text-blue-400',
+
+  placeholder: 'placeholder-slate-600',
+
+  hoverBg: 'hover:bg-slate-800',
+  hoverSurface: 'hover:bg-slate-800/50',
+  hoverText: 'hover:text-slate-100',
+  toolbarActive: 'bg-slate-700 text-slate-100 hover:bg-slate-600',
+
+  currentMatchBg: 'bg-yellow-500/10',
+
+  levelActiveError: 'bg-red-500/20 text-red-400 border-red-500/40',
+  levelActiveWarn: 'bg-amber-500/20 text-amber-400 border-amber-500/40',
+  levelActiveInfo: 'bg-blue-500/20 text-blue-400 border-blue-500/40',
+  levelActiveDebug: 'bg-slate-700 text-slate-300 border-slate-600',
+
+  levelBadgeError: 'bg-red-500/20 text-red-400 border border-red-500/40',
+  levelBadgeWarn: 'bg-amber-500/20 text-amber-400 border border-amber-500/40',
+  levelBadgeInfo: 'bg-blue-500/20 text-blue-400 border border-blue-500/40',
+  levelBadgeDebug: 'bg-slate-700 text-slate-300 border border-slate-600',
+  levelBadgeNeutral: 'bg-slate-800 text-slate-400 border border-slate-700',
+
+  podColors: [
+    { text: 'text-blue-400', bg: 'bg-blue-400' },
+    { text: 'text-emerald-400', bg: 'bg-emerald-400' },
+    { text: 'text-amber-400', bg: 'bg-amber-400' },
+    { text: 'text-purple-400', bg: 'bg-purple-400' },
+    { text: 'text-pink-400', bg: 'bg-pink-400' },
+    { text: 'text-cyan-400', bg: 'bg-cyan-400' },
+    { text: 'text-orange-400', bg: 'bg-orange-400' },
+    { text: 'text-lime-400', bg: 'bg-lime-400' },
+  ],
+
+  // Hex values tuned for the `bg-slate-950` container.
+  syntaxKey: '#7cacf8',
+  syntaxString: '#73c991',
+  syntaxNumber: '#e5c07b',
+  syntaxBoolean: '#c678dd',
+  syntaxNull: '#808080',
+}
+
+const LIGHT_PALETTE: LogPalette = {
+  containerBg: 'bg-slate-50',
+  toolbarBg: 'bg-slate-100',
+  toolbarBgMuted: 'bg-slate-100/60',
+  menuBg: 'bg-white',
+  elevatedBg: 'bg-white',
+
+  border: 'border-slate-200',
+  borderLight: 'border-slate-300',
+
+  textPrimary: 'text-slate-900',
+  textSecondary: 'text-slate-600',
+  textTertiary: 'text-slate-400',
+  textDisabled: 'text-slate-300',
+  textError: 'text-red-700',
+  textAccent: 'text-blue-700',
+
+  placeholder: 'placeholder-slate-400',
+
+  hoverBg: 'hover:bg-slate-200',
+  hoverSurface: 'hover:bg-slate-200/60',
+  hoverText: 'hover:text-slate-900',
+  toolbarActive: 'bg-slate-200 text-slate-900 hover:bg-slate-300',
+
+  currentMatchBg: 'bg-yellow-200/60',
+
+  levelActiveError: 'bg-red-100 text-red-700 border-red-400',
+  levelActiveWarn: 'bg-amber-100 text-amber-700 border-amber-400',
+  levelActiveInfo: 'bg-blue-100 text-blue-700 border-blue-400',
+  levelActiveDebug: 'bg-slate-200 text-slate-700 border-slate-400',
+
+  levelBadgeError: 'bg-red-100 text-red-700 border border-red-400',
+  levelBadgeWarn: 'bg-amber-100 text-amber-700 border border-amber-400',
+  levelBadgeInfo: 'bg-blue-100 text-blue-700 border border-blue-400',
+  levelBadgeDebug: 'bg-slate-200 text-slate-700 border border-slate-400',
+  levelBadgeNeutral: 'bg-slate-100 text-slate-600 border border-slate-300',
+
+  podColors: [
+    { text: 'text-blue-700', bg: 'bg-blue-700' },
+    { text: 'text-emerald-700', bg: 'bg-emerald-700' },
+    { text: 'text-amber-700', bg: 'bg-amber-700' },
+    { text: 'text-purple-700', bg: 'bg-purple-700' },
+    { text: 'text-pink-700', bg: 'bg-pink-700' },
+    { text: 'text-cyan-700', bg: 'bg-cyan-700' },
+    { text: 'text-orange-700', bg: 'bg-orange-700' },
+    { text: 'text-lime-700', bg: 'bg-lime-700' },
+  ],
+
+  // Hex values tuned for the `bg-slate-50` container — darker so they read
+  // on a near-white background.
+  syntaxKey: '#0b63c0',
+  syntaxString: '#2b8a3e',
+  syntaxNumber: '#b95f00',
+  syntaxBoolean: '#7c3aed',
+  syntaxNull: '#6b7280',
+}
+
+/** Get the palette for the current dark/light mode. */
+export function getLogPalette(isDark: boolean): LogPalette {
+  return isDark ? DARK_PALETTE : LIGHT_PALETTE
+}
+
+/** Per-level content color (log text body). */
+export function getLogLevelColor(
+  level: 'error' | 'warn' | 'info' | 'debug' | 'unknown',
+  isDark: boolean,
+): string {
+  if (isDark) {
+    switch (level) {
+      case 'error': return 'text-red-400'
+      case 'warn': return 'text-amber-400'
+      case 'info': return 'text-blue-400'
+      case 'debug': return 'text-slate-400'
+      default: return 'text-slate-100'
+    }
+  }
+  switch (level) {
+    case 'error': return 'text-red-700'
+    case 'warn': return 'text-amber-600'
+    case 'info': return 'text-blue-700'
+    case 'debug': return 'text-slate-500'
+    default: return 'text-slate-900'
+  }
+}

package/src/components/logs/useLogBuffer.ts

@@ -9,7 +9,12 @@ export interface LogEntry {
   content: string
   container: string
   pod?: string
-  podColor?: string
+  /**
+   * Index into the current palette's `podColors` array. Stored as an index
+   * (not a resolved class) so the pod-label color can re-theme when the
+   * viewer's isDark state toggles at runtime.
+   */
+  podColorIndex?: number
   level: LogLevel
   isJson: boolean
   isLogfmt: boolean

package/src/components/logs/useLogSearch.ts

@@ -8,10 +8,12 @@ interface UseLogSearchReturn {
   setQuery: (q: string) => void
   isRegex: boolean
   toggleRegex: () => void
+  setIsRegex: (v: boolean) => void
   isCaseSensitive: boolean
   toggleCaseSensitive: () => void
   isFilterMode: boolean
   toggleFilterMode: () => void
+  setFilterMode: (v: boolean) => void
   matchCount: number
   currentMatch: number
   /** Indices into the entries array that match */
@@ -121,6 +123,7 @@ export function useLogSearch(
   const toggleRegex = useCallback(() => setIsRegex(p => !p), [])
   const toggleCaseSensitive = useCallback(() => setIsCaseSensitive(p => !p), [])
   const toggleFilterMode = useCallback(() => setIsFilterMode(p => !p), [])
+  const setFilterMode = useCallback((v: boolean) => setIsFilterMode(v), [])
 
   const open = useCallback(() => setIsOpen(true), [])
   const close = useCallback(() => {
@@ -133,10 +136,12 @@ export function useLogSearch(
     setQuery,
     isRegex,
     toggleRegex,
+    setIsRegex,
     isCaseSensitive,
     toggleCaseSensitive,
     isFilterMode,
     toggleFilterMode,
+    setFilterMode,
     matchCount: matchIndices.length,
     currentMatch,
     matchIndices,

package/src/components/resources/resource-utils-argo.ts

@@ -12,9 +12,16 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   const sync = app.status?.sync?.status
   const opPhase = app.status?.operationState?.phase
 
-  // Check for suspended (no automated sync policy)
+  // Check for suspended (no automated sync policy). Honor both the current
+  // "radarhq.io/suspended-prune" annotation and the legacy "skyhook.io/..."
+  // key still present on Applications suspended by older Radar builds.
+  // The annotation value stores the prior prune state as "true"/"false" for
+  // restore on resume — both strings are truthy in JS, which is intentional:
+  // the *presence* of the annotation is what signals suspended, not its value.
   const hasAutomatedSync = !!app.spec?.syncPolicy?.automated
-  if (health === 'Suspended' || (!hasAutomatedSync && app.metadata?.annotations?.['radar.skyhook.io/suspended-prune'])) {
+  const annotations = app.metadata?.annotations
+  const suspendedByRadar = annotations?.['radarhq.io/suspended-prune'] || annotations?.['skyhook.io/suspended-prune']
+  if (health === 'Suspended' || (!hasAutomatedSync && suspendedByRadar)) {
     return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
   }
 

package/src/utils/log-format.ts

@@ -5,22 +5,87 @@
 
 import type { LogLevel } from '../components/logs/useLogBuffer'
 
+export type TimestampFormat =
+  | 'time-local'
+  | 'time-utc'
+  | 'iso-local'
+  | 'iso-utc'
+  | 'relative'
+  | 'epoch'
+
+export const TIMESTAMP_FORMAT_LABELS: Record<TimestampFormat, string> = {
+  'time-local': 'Time (local)',
+  'time-utc': 'Time (UTC)',
+  'iso-local': 'ISO (local)',
+  'iso-utc': 'ISO (UTC)',
+  'relative': 'Relative',
+  'epoch': 'Epoch',
+}
+
+function pad2(n: number): string {
+  return n < 10 ? '0' + n : String(n)
+}
+
+function formatIsoLocal(date: Date): string {
+  const offset = -date.getTimezoneOffset()
+  const sign = offset >= 0 ? '+' : '-'
+  const abs = Math.abs(offset)
+  return (
+    date.getFullYear() +
+    '-' + pad2(date.getMonth() + 1) +
+    '-' + pad2(date.getDate()) +
+    'T' + pad2(date.getHours()) +
+    ':' + pad2(date.getMinutes()) +
+    ':' + pad2(date.getSeconds()) +
+    sign + pad2(Math.floor(abs / 60)) + ':' + pad2(abs % 60)
+  )
+}
+
+function formatRelative(date: Date, now: number): string {
+  const diffSec = Math.round((now - date.getTime()) / 1000)
+  const abs = Math.abs(diffSec)
+  const suffix = diffSec >= 0 ? ' ago' : ' from now'
+  if (abs < 2) return 'just now'
+  if (abs < 60) return `${abs}s${suffix}`
+  if (abs < 3600) return `${Math.floor(abs / 60)}m${suffix}`
+  if (abs < 86400) return `${Math.floor(abs / 3600)}h${suffix}`
+  return `${Math.floor(abs / 86400)}d${suffix}`
+}
+
 /**
  * Format a K8s log timestamp for display.
- * Extracts and formats the time portion (HH:MM:SS).
+ * Supports multiple display formats and UTC/local time zones.
+ * `now` is accepted for testability; defaults to Date.now().
  */
-export function formatLogTimestamp(ts: string): string {
+export function formatLogTimestamp(
+  ts: string,
+  format: TimestampFormat = 'time-local',
+  now?: number,
+): string {
   const date = new Date(ts)
   if (isNaN(date.getTime())) {
-    // Fallback: extract HH:MM:SS from ISO timestamp
     return ts.slice(11, 19) || ts
   }
-  return date.toLocaleTimeString('en-US', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
+  switch (format) {
+    case 'time-utc':
+      return date.toISOString().slice(11, 19)
+    case 'iso-local':
+      return formatIsoLocal(date)
+    case 'iso-utc':
+      return date.toISOString()
+    case 'relative':
+      return formatRelative(date, now ?? Date.now())
+    case 'epoch':
+      return String(Math.floor(date.getTime() / 1000))
+    case 'time-local':
+    default:
+      return date.toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      })
+  }
 }
 
 /** Map a detected LogLevel to a Tailwind color class. */
@@ -294,9 +359,9 @@ export function parseLogRange(logRange: string): { tailLines?: number; sinceSeco
 // Syntax highlight colors shared between JSON and logfmt rendering
 export const SYNTAX_COLOR_KEY = '#7cacf8'
 export const SYNTAX_COLOR_STRING = '#73c991'
-const SYNTAX_COLOR_NUMBER = '#e5c07b'
-const SYNTAX_COLOR_BOOLEAN = '#c678dd'
-const SYNTAX_COLOR_NULL = '#808080'
+export const SYNTAX_COLOR_NUMBER = '#e5c07b'
+export const SYNTAX_COLOR_BOOLEAN = '#c678dd'
+export const SYNTAX_COLOR_NULL = '#808080'
 
 /**
  * Syntax-highlight a pretty-printed JSON string for HTML display.