@skyhook-io/k8s-ui 1.2.4 → 1.3.1

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx'
+import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import {
   getPodStatus,
   getWorkloadStatus,
@@ -550,9 +551,9 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   // Contour HTTPProxy
   if (k === 'httpproxies') {
     const s = getHTTPProxyStatus(data)
-    if (s.status === 'healthy') return { text: s.label, color: 'bg-green-500/20 text-green-400' }
-    if (s.status === 'unhealthy') return { text: s.label, color: 'bg-red-500/20 text-red-400' }
-    if (s.status === 'degraded') return { text: s.label, color: 'bg-yellow-500/20 text-yellow-400' }
+    if (s.status === 'healthy') return { text: s.label, color: SEVERITY_BADGE.success }
+    if (s.status === 'unhealthy') return { text: s.label, color: SEVERITY_BADGE.error }
+    if (s.status === 'degraded') return { text: s.label, color: SEVERITY_BADGE.warning }
     return null
   }
 
@@ -587,9 +588,9 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
       const isWarning = warningPhases.includes(phase)
       return {
         text: phase,
-        color: isHealthy ? 'bg-green-500/20 text-green-400' :
-               isWarning ? 'bg-yellow-500/20 text-yellow-400' :
-               'bg-red-500/20 text-red-400'
+        color: isHealthy ? SEVERITY_BADGE.success :
+               isWarning ? SEVERITY_BADGE.warning :
+               SEVERITY_BADGE.error
       }
     }
 
@@ -601,7 +602,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
         const isReady = readyCondition.status === 'True'
         return {
           text: isReady ? 'Ready' : 'Not Ready',
-          color: isReady ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
+          color: isReady ? SEVERITY_BADGE.success : SEVERITY_BADGE.warning
         }
       }
     }

package/src/components/timeline/DiffViewer.tsx

@@ -0,0 +1,131 @@
+import { memo } from 'react'
+import { clsx } from 'clsx'
+import { ArrowRight, Plus, Minus, RefreshCw } from 'lucide-react'
+import type { DiffInfo, FieldChange } from '../../types'
+
+interface DiffViewerProps {
+  diff: DiffInfo
+  compact?: boolean
+}
+
+export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: DiffViewerProps) {
+  if (!diff || diff.fields.length === 0) {
+    return null
+  }
+
+  if (compact) {
+    return (
+      <div className="text-xs text-theme-text-secondary flex items-center gap-1">
+        <RefreshCw className="w-3 h-3" />
+        <span>{diff.summary || `${diff.fields.length} field(s) changed`}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Summary */}
+      {diff.summary && (
+        <div className="text-sm font-medium text-theme-text-secondary flex items-center gap-2">
+          <RefreshCw className="w-4 h-4 text-blue-400" />
+          {diff.summary}
+        </div>
+      )}
+
+      {/* Field changes */}
+      <div className="space-y-1.5">
+        {diff.fields.map((field, idx) => (
+          <FieldChangeRow key={`${field.path}-${idx}`} field={field} />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+interface FieldChangeRowProps {
+  field: FieldChange
+}
+
+function FieldChangeRow({ field }: FieldChangeRowProps) {
+  const isAdded = field.oldValue === null || field.oldValue === undefined
+  const isRemoved = field.newValue === null || field.newValue === undefined
+  const isModified = !isAdded && !isRemoved
+
+  return (
+    <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
+      {/* Field path */}
+      <div className="text-xs font-mono text-theme-text-tertiary mb-1">{field.path}</div>
+
+      {/* Values */}
+      <div className="flex items-center gap-2 text-sm">
+        {isAdded ? (
+          <>
+            <Plus className="w-3.5 h-3.5 text-green-400 shrink-0" />
+            <span className="text-green-400">
+              {formatValue(field.newValue)}
+            </span>
+          </>
+        ) : isRemoved ? (
+          <>
+            <Minus className="w-3.5 h-3.5 text-red-400 shrink-0" />
+            <span className="text-red-400 line-through">
+              {formatValue(field.oldValue)}
+            </span>
+          </>
+        ) : isModified ? (
+          <>
+            <span className="text-red-400 line-through">
+              {formatValue(field.oldValue)}
+            </span>
+            <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+            <span className="text-green-400">
+              {formatValue(field.newValue)}
+            </span>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) {
+    return 'null'
+  }
+  if (typeof value === 'object') {
+    try {
+      const str = JSON.stringify(value)
+      // Truncate long values
+      if (str.length > 100) {
+        return str.slice(0, 97) + '...'
+      }
+      return str
+    } catch {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+// Inline diff badge for use in event cards
+interface DiffBadgeProps {
+  diff: DiffInfo
+}
+
+export const DiffBadge = memo(function DiffBadge({ diff }: DiffBadgeProps) {
+  if (!diff || !diff.summary) {
+    return null
+  }
+
+  return (
+    <span
+      className={clsx(
+        'badge',
+        'bg-skyhook-500/10 text-skyhook-400 border border-skyhook-500/20'
+      )}
+    >
+      <RefreshCw className="w-3 h-3" />
+      {diff.summary}
+    </span>
+  )
+})