@skyhook-io/k8s-ui 1.0.0

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -0,0 +1,221 @@
+import { clsx } from 'clsx'
+import { CheckCircle2, AlertCircle, Loader2, Pause, HelpCircle, XCircle } from 'lucide-react'
+import type { GitOpsStatus, SyncStatus, GitOpsHealthStatus } from '../../types/gitops'
+
+interface GitOpsStatusBadgeProps {
+  status: GitOpsStatus
+  showHealth?: boolean
+  compact?: boolean
+}
+
+/**
+ * Unified status badge for GitOps resources (FluxCD and ArgoCD)
+ * Shows sync status with optional health indicator
+ */
+export function GitOpsStatusBadge({ status, showHealth = true, compact = false }: GitOpsStatusBadgeProps) {
+  const Icon = getStatusIcon(status)
+  const colorClass = getStatusColorClass(status)
+  const label = getStatusLabel(status)
+
+  if (compact) {
+    return (
+      <span
+        className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', colorClass)}
+        title={status.message}
+      >
+        <Icon className="w-3 h-3" />
+        {label}
+      </span>
+    )
+  }
+
+  // Don't show health indicator if the main badge already shows health status
+  // (i.e., when the main label is 'Degraded', 'Progressing', or 'Suspended')
+  const mainLabelShowsHealth = label === 'Degraded' || label === 'Progressing' || label === 'Suspended'
+
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', colorClass)}
+        title={status.message}
+      >
+        <Icon className="w-3.5 h-3.5" />
+        {label}
+      </span>
+      {showHealth && !mainLabelShowsHealth && status.health !== 'Unknown' && status.health !== getHealthFromSync(status.sync) && (
+        <HealthIndicator health={status.health} />
+      )}
+    </div>
+  )
+}
+
+function getHealthFromSync(sync: SyncStatus): GitOpsHealthStatus {
+  if (sync === 'Synced') return 'Healthy'
+  if (sync === 'Reconciling') return 'Progressing'
+  return 'Unknown'
+}
+
+function getStatusIcon(status: GitOpsStatus) {
+  if (status.suspended) return Pause
+  if (status.sync === 'Reconciling') return Loader2
+  if (status.sync === 'Synced' && status.health === 'Healthy') return CheckCircle2
+  if (status.health === 'Degraded') return XCircle
+  if (status.sync === 'OutOfSync') return AlertCircle
+  if (status.health === 'Progressing') return Loader2
+  return HelpCircle
+}
+
+function getStatusColorClass(status: GitOpsStatus): string {
+  if (status.suspended) {
+    return 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
+  }
+  if (status.sync === 'Synced' && status.health === 'Healthy') {
+    return 'bg-green-500/20 text-green-400 border border-green-500/30'
+  }
+  if (status.health === 'Degraded') {
+    return 'bg-red-500/20 text-red-400 border border-red-500/30'
+  }
+  if (status.sync === 'OutOfSync') {
+    return 'bg-orange-500/20 text-orange-400 border border-orange-500/30'
+  }
+  if (status.sync === 'Reconciling' || status.health === 'Progressing') {
+    return 'bg-blue-500/20 text-blue-400 border border-blue-500/30'
+  }
+  return 'bg-gray-500/20 text-gray-400 border border-gray-500/30'
+}
+
+function getStatusLabel(status: GitOpsStatus): string {
+  if (status.suspended) return 'Suspended'
+  if (status.sync === 'Reconciling') return 'Syncing'
+  if (status.sync === 'Synced' && status.health === 'Healthy') return 'Synced'
+  if (status.health === 'Degraded') return 'Degraded'
+  if (status.sync === 'OutOfSync') return 'OutOfSync'
+  if (status.health === 'Progressing') return 'Progressing'
+  return 'Unknown'
+}
+
+interface HealthIndicatorProps {
+  health: GitOpsHealthStatus
+}
+
+function HealthIndicator({ health }: HealthIndicatorProps) {
+  const { icon: Icon, color, label } = getHealthInfo(health)
+
+  return (
+    <span
+      className={clsx('px-1.5 py-0.5 rounded text-xs inline-flex items-center gap-1', color)}
+      title={`Health: ${label}`}
+    >
+      <Icon className="w-3 h-3" />
+      {label}
+    </span>
+  )
+}
+
+function getHealthInfo(health: GitOpsHealthStatus) {
+  switch (health) {
+    case 'Healthy':
+      return {
+        icon: CheckCircle2,
+        color: 'bg-green-500/10 text-green-400',
+        label: 'Healthy',
+      }
+    case 'Progressing':
+      return {
+        icon: Loader2,
+        color: 'bg-blue-500/10 text-blue-400',
+        label: 'Progressing',
+      }
+    case 'Degraded':
+      return {
+        icon: XCircle,
+        color: 'bg-red-500/10 text-red-400',
+        label: 'Degraded',
+      }
+    case 'Suspended':
+      return {
+        icon: Pause,
+        color: 'bg-yellow-500/10 text-yellow-400',
+        label: 'Suspended',
+      }
+    case 'Missing':
+      return {
+        icon: AlertCircle,
+        color: 'bg-orange-500/10 text-orange-400',
+        label: 'Missing',
+      }
+    default:
+      return {
+        icon: HelpCircle,
+        color: 'bg-gray-500/10 text-gray-400',
+        label: 'Unknown',
+      }
+  }
+}
+
+/**
+ * Simple sync status badge without health indicator
+ */
+export function SyncStatusBadge({ sync, suspended }: { sync: SyncStatus; suspended?: boolean }) {
+  if (suspended) {
+    return (
+      <span className="px-2 py-0.5 rounded text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 inline-flex items-center gap-1">
+        <Pause className="w-3 h-3" />
+        Suspended
+      </span>
+    )
+  }
+
+  const config = getSyncConfig(sync)
+  const Icon = config.icon
+
+  return (
+    <span className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', config.color)}>
+      <Icon className={clsx('w-3 h-3', sync === 'Reconciling' && 'animate-spin')} />
+      {config.label}
+    </span>
+  )
+}
+
+function getSyncConfig(sync: SyncStatus) {
+  switch (sync) {
+    case 'Synced':
+      return {
+        icon: CheckCircle2,
+        color: 'bg-green-500/20 text-green-400 border border-green-500/30',
+        label: 'Synced',
+      }
+    case 'OutOfSync':
+      return {
+        icon: AlertCircle,
+        color: 'bg-orange-500/20 text-orange-400 border border-orange-500/30',
+        label: 'OutOfSync',
+      }
+    case 'Reconciling':
+      return {
+        icon: Loader2,
+        color: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
+        label: 'Syncing',
+      }
+    default:
+      return {
+        icon: HelpCircle,
+        color: 'bg-gray-500/20 text-gray-400 border border-gray-500/30',
+        label: 'Unknown',
+      }
+  }
+}
+
+/**
+ * Simple health status badge
+ */
+export function HealthStatusBadge({ health }: { health: GitOpsHealthStatus }) {
+  const { icon: Icon, color, label } = getHealthInfo(health)
+
+  return (
+    <span className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', color)}>
+      <Icon className={clsx('w-3 h-3', health === 'Progressing' && 'animate-spin')} />
+      {label}
+    </span>
+  )
+}

package/src/components/gitops/ManagedResourcesList.tsx

@@ -0,0 +1,210 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronRight, Package, ExternalLink } from 'lucide-react'
+import { clsx } from 'clsx'
+import type { ManagedResource, GitOpsHealthStatus } from '../../types/gitops'
+import { groupManagedResourcesByKind } from '../../types/gitops'
+
+interface ManagedResourcesListProps {
+  resources: ManagedResource[]
+  /** Callback when a resource is clicked (for navigation) */
+  onResourceClick?: (resource: ManagedResource) => void
+  /** Maximum resources to show before collapsing */
+  maxVisible?: number
+  /** Title for the section */
+  title?: string
+  /** Whether to show health status for each resource */
+  showHealth?: boolean
+}
+
+/**
+ * Displays a list of managed resources grouped by kind
+ * Used for showing Flux inventory or ArgoCD managed resources
+ */
+export function ManagedResourcesList({
+  resources,
+  onResourceClick,
+  maxVisible = 20,
+  title = 'Managed Resources',
+  showHealth = false,
+}: ManagedResourcesListProps) {
+  const [expanded, setExpanded] = useState(resources.length <= 10)
+  const [showAll, setShowAll] = useState(false)
+
+  if (!resources || resources.length === 0) {
+    return null
+  }
+
+  const grouped = groupManagedResourcesByKind(resources)
+  const sortedGroups = Array.from(grouped.entries()).sort((a, b) => a[0].localeCompare(b[0]))
+  const hasMore = resources.length > maxVisible && !showAll
+
+  return (
+    <div className="border-b-subtle pb-4 last:border-0">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
+      >
+        {expanded ? (
+          <ChevronDown className="w-4 h-4 text-theme-text-tertiary" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-theme-text-tertiary" />
+        )}
+        <Package className="w-4 h-4 text-theme-text-secondary" />
+        <span className="text-sm font-medium text-theme-text-secondary">
+          {title} ({resources.length})
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="pl-6 space-y-3">
+          {sortedGroups.map(([kind, kindResources]) => (
+            <ResourceKindGroup
+              key={kind}
+              kind={kind}
+              resources={showAll ? kindResources : kindResources.slice(0, Math.ceil(maxVisible / sortedGroups.length))}
+              onResourceClick={onResourceClick}
+              showHealth={showHealth}
+            />
+          ))}
+
+          {hasMore && (
+            <button
+              onClick={() => setShowAll(true)}
+              className="text-xs text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              Show all {resources.length} resources...
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface ResourceKindGroupProps {
+  kind: string
+  resources: ManagedResource[]
+  onResourceClick?: (resource: ManagedResource) => void
+  showHealth?: boolean
+}
+
+function ResourceKindGroup({ kind, resources, onResourceClick, showHealth }: ResourceKindGroupProps) {
+  const [expanded, setExpanded] = useState(resources.length <= 5)
+
+  return (
+    <div>
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1.5 text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors mb-1"
+      >
+        {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        <span className="font-medium">{kind}</span>
+        <span className="text-theme-text-tertiary">({resources.length})</span>
+      </button>
+
+      {expanded && (
+        <div className="ml-4 space-y-0.5">
+          {resources.map((resource, idx) => (
+            <ResourceItem
+              key={`${resource.namespace}-${resource.name}-${idx}`}
+              resource={resource}
+              onClick={onResourceClick}
+              showHealth={showHealth}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface ResourceItemProps {
+  resource: ManagedResource
+  onClick?: (resource: ManagedResource) => void
+  showHealth?: boolean
+}
+
+function ResourceItem({ resource, onClick, showHealth }: ResourceItemProps) {
+  const displayName = resource.namespace
+    ? `${resource.namespace}/${resource.name}`
+    : resource.name
+
+  const content = (
+    <div className="flex items-center gap-2 py-0.5">
+      {showHealth && resource.health && (
+        <HealthDot health={resource.health} />
+      )}
+      <span className="text-xs text-theme-text-secondary truncate" title={displayName}>
+        {displayName}
+      </span>
+      {onClick && (
+        <ExternalLink className="w-3 h-3 text-theme-text-tertiary opacity-0 group-hover:opacity-100 transition-opacity" />
+      )}
+    </div>
+  )
+
+  if (onClick) {
+    return (
+      <button
+        onClick={() => onClick(resource)}
+        className="group w-full text-left hover:bg-theme-elevated/30 rounded px-1 -mx-1 transition-colors"
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return <div className="px-1 -mx-1">{content}</div>
+}
+
+function HealthDot({ health }: { health: GitOpsHealthStatus }) {
+  const colorClass = getHealthDotColor(health)
+  return (
+    <span
+      className={clsx('w-1.5 h-1.5 rounded-full shrink-0', colorClass)}
+      title={health}
+    />
+  )
+}
+
+function getHealthDotColor(health: GitOpsHealthStatus): string {
+  switch (health) {
+    case 'Healthy':
+      return 'bg-green-400'
+    case 'Progressing':
+      return 'bg-blue-400'
+    case 'Degraded':
+      return 'bg-red-400'
+    case 'Suspended':
+      return 'bg-yellow-400'
+    case 'Missing':
+      return 'bg-orange-400'
+    default:
+      return 'bg-gray-400'
+  }
+}
+
+/**
+ * Compact inventory count display for table cells
+ */
+export function InventoryCount({ count, healthy, unhealthy }: { count: number; healthy?: number; unhealthy?: number }) {
+  if (count === 0) {
+    return <span className="text-theme-text-tertiary">-</span>
+  }
+
+  if (healthy !== undefined && unhealthy !== undefined) {
+    return (
+      <span className="text-xs">
+        <span className="text-green-400">{healthy}</span>
+        <span className="text-theme-text-tertiary">/</span>
+        <span className={unhealthy > 0 ? 'text-red-400' : 'text-theme-text-secondary'}>{count}</span>
+      </span>
+    )
+  }
+
+  return (
+    <span className="text-xs text-theme-text-secondary">
+      {count} {count === 1 ? 'resource' : 'resources'}
+    </span>
+  )
+}

package/src/components/gitops/SyncCountdown.tsx

@@ -0,0 +1,146 @@
+import { useState, useEffect } from 'react'
+import { Clock, RefreshCw } from 'lucide-react'
+import { clsx } from 'clsx'
+
+interface SyncCountdownProps {
+  /** The reconciliation interval (e.g., "5m", "1h", "30s") */
+  interval: string
+  /** Last reconciliation time (ISO string) */
+  lastSyncTime?: string
+  /** Whether the resource is suspended */
+  suspended?: boolean
+  /** Whether to show a compact version */
+  compact?: boolean
+}
+
+/**
+ * Displays a countdown to the next reconciliation
+ */
+export function SyncCountdown({ interval, lastSyncTime, suspended, compact = false }: SyncCountdownProps) {
+  const [secondsRemaining, setSecondsRemaining] = useState<number | null>(null)
+
+  const intervalSeconds = parseInterval(interval)
+
+  useEffect(() => {
+    if (suspended || !lastSyncTime || intervalSeconds === null) {
+      setSecondsRemaining(null)
+      return
+    }
+
+    const calculateRemaining = () => {
+      const lastSync = new Date(lastSyncTime).getTime()
+      const nextSync = lastSync + intervalSeconds * 1000
+      const now = Date.now()
+      const remaining = Math.max(0, Math.floor((nextSync - now) / 1000))
+      return remaining
+    }
+
+    setSecondsRemaining(calculateRemaining())
+
+    const timer = setInterval(() => {
+      setSecondsRemaining(calculateRemaining())
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [interval, lastSyncTime, suspended, intervalSeconds])
+
+  if (suspended) {
+    return (
+      <div className={clsx('flex items-center gap-1.5', compact ? 'text-xs' : 'text-sm')}>
+        <Clock className={clsx('text-yellow-400', compact ? 'w-3 h-3' : 'w-3.5 h-3.5')} />
+        <span className="text-yellow-400">Paused</span>
+      </div>
+    )
+  }
+
+  if (secondsRemaining === null) {
+    return (
+      <div className={clsx('flex items-center gap-1.5 text-theme-text-tertiary', compact ? 'text-xs' : 'text-sm')}>
+        <Clock className={compact ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
+        <span>{interval}</span>
+      </div>
+    )
+  }
+
+  const isImminent = secondsRemaining < 30
+  const formatted = formatSecondsRemaining(secondsRemaining)
+
+  return (
+    <div
+      className={clsx(
+        'flex items-center gap-1.5',
+        compact ? 'text-xs' : 'text-sm',
+        isImminent ? 'text-blue-400' : 'text-theme-text-secondary'
+      )}
+      title={`Interval: ${interval}`}
+    >
+      {isImminent ? (
+        <RefreshCw className={clsx('animate-pulse', compact ? 'w-3 h-3' : 'w-3.5 h-3.5')} />
+      ) : (
+        <Clock className={compact ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
+      )}
+      <span>
+        {secondsRemaining === 0 ? 'Now' : `in ${formatted}`}
+      </span>
+    </div>
+  )
+}
+
+/**
+ * Parses a Kubernetes duration string (e.g., "5m", "1h30m", "30s") into seconds
+ */
+function parseInterval(interval: string): number | null {
+  if (!interval) return null
+
+  let totalSeconds = 0
+  const regex = /(\d+)(h|m|s)/g
+  let match
+
+  while ((match = regex.exec(interval)) !== null) {
+    const value = parseInt(match[1], 10)
+    const unit = match[2]
+
+    switch (unit) {
+      case 'h':
+        totalSeconds += value * 3600
+        break
+      case 'm':
+        totalSeconds += value * 60
+        break
+      case 's':
+        totalSeconds += value
+        break
+    }
+  }
+
+  return totalSeconds > 0 ? totalSeconds : null
+}
+
+/**
+ * Formats seconds into a human-readable duration
+ */
+function formatSecondsRemaining(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`
+  }
+  if (seconds < 3600) {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`
+  }
+  const hours = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`
+}
+
+/**
+ * Simple interval display without countdown
+ */
+export function IntervalDisplay({ interval, compact = false }: { interval: string; compact?: boolean }) {
+  return (
+    <div className={clsx('flex items-center gap-1.5 text-theme-text-secondary', compact ? 'text-xs' : 'text-sm')}>
+      <Clock className={compact ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
+      <span>{interval}</span>
+    </div>
+  )
+}

package/src/components/gitops/index.ts

@@ -0,0 +1,4 @@
+export { GitOpsStatusBadge, SyncStatusBadge, HealthStatusBadge } from './GitOpsStatusBadge'
+export { SyncCountdown, IntervalDisplay } from './SyncCountdown'
+export { ManagedResourcesList, InventoryCount } from './ManagedResourcesList'
+export { GitOpsActions, SyncButton, SuspendToggle } from './GitOpsActions'

package/src/components/logs/JsonLogLine.tsx

@@ -0,0 +1,90 @@
+import { useState, useMemo } from 'react'
+import { ChevronRight, ChevronDown } from 'lucide-react'
+import { getLevelColor } from '../../utils/log-format'
+import type { LogLevel } from './useLogBuffer'
+
+interface JsonLogLineProps {
+  content: string
+  level: LogLevel
+  wordWrap: boolean
+}
+
+export function JsonLogLine({ content, level, wordWrap }: JsonLogLineProps) {
+  const [expanded, setExpanded] = useState(false)
+  const levelColor = getLevelColor(level)
+
+  const parsed = useMemo(() => {
+    try {
+      return JSON.parse(content.trim())
+    } catch {
+      return null
+    }
+  }, [content])
+
+  if (!parsed) {
+    return (
+      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${levelColor}`}>
+        {content}
+      </span>
+    )
+  }
+
+  const summary = buildSummary(parsed)
+  const fieldCount = Object.keys(parsed).length
+
+  return (
+    <span className={levelColor}>
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="inline-flex items-center gap-0.5 hover:bg-theme-surface/50 rounded px-0.5 -ml-0.5 align-middle"
+      >
+        {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" />
+        }
+      </button>
+      {!expanded ? (
+        <span className={wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}>
+          {summary}
+          <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'}`}>
+          {formatJsonExpanded(parsed)}
+        </span>
+      )}
+    </span>
+  )
+}
+
+function buildSummary(obj: Record<string, unknown>): string {
+  const parts: string[] = []
+
+  // Level
+  const lvl = obj.level || obj.severity || obj.lvl
+  if (typeof lvl === 'string') {
+    parts.push(lvl.toUpperCase())
+  }
+
+  // Message
+  const msg = obj.msg || obj.message
+  if (typeof msg === 'string') {
+    parts.push(msg)
+  }
+
+  // Error
+  const err = obj.error || obj.err
+  if (typeof err === 'string') {
+    parts.push(`error=${err}`)
+  }
+
+  return parts.join('  ')
+}
+
+function formatJsonExpanded(obj: Record<string, unknown>): string {
+  try {
+    return JSON.stringify(obj, null, 2)
+  } catch {
+    return String(obj)
+  }
+}