@skyhook-io/k8s-ui 1.8.13 → 1.8.15

package/README.md

@@ -0,0 +1,9 @@
+# @skyhook-io/k8s-ui
+
+Shared, source-distributed Kubernetes UI components used by Radar.
+
+## YAML editor bundling
+
+`YamlEditor` and `YamlDiffEditor` bundle Monaco, its editor worker, and the YAML language worker into the consuming application. They make no runtime CDN or internet requests, so they work in air-gapped environments.
+
+Consumers must use a bundler that supports module workers created with `new Worker(new URL(..., import.meta.url), { type: 'module' })`. The source package is compatible with Vite and webpack 5. Monaco and `monaco-yaml` are intentionally pinned as a compatible pair because their worker-factory APIs must move together. The package declares that exact Monaco version as a peer so the host and YAML runtime share one Monaco instance.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.13",
+  "version": "1.8.15",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -69,7 +69,8 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "html-to-image": "^1.11.0",
-    "react-virtuoso": "^4.18.10",
+    "monaco-yaml": "5.5.1",
+    "react-virtuoso": "^4.18.11",
     "shiki": "^4.2.0"
   },
   "peerDependencies": {
@@ -81,12 +82,13 @@
     "diff": ">=5.0.0",
     "elkjs": ">=0.9.0",
     "lucide-react": ">=0.400.0",
+    "monaco-editor": "0.55.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^26.0.1",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",
@@ -97,6 +99,7 @@
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
     "lucide-react": "^1.24.0",
+    "monaco-editor": "0.55.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.2",

package/src/components/resources/get-pod-phase-display.test.ts

@@ -26,6 +26,210 @@ describe('getPodStatus', () => {
     }
     expect(getPodStatus(crashing).level).toBe('unhealthy')
   })
+
+  it('deranks a serving container with unsettled crash history', () => {
+    const recovered = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [{
+          name: 'app',
+          ready: true,
+          restartCount: 2,
+          state: { running: {} },
+          lastState: { terminated: { reason: 'Error', exitCode: 1 } },
+        }],
+      },
+    }
+    expect(getPodStatus(recovered)).toMatchObject({ text: 'Restarted (2)', level: 'degraded' })
+    expect(getPodPhaseDisplay(recovered)).toMatchObject({
+      text: 'Running — Recently restarted (2 restarts)',
+      level: 'degraded',
+    })
+  })
+
+  it('keeps a non-serving container with crash history unhealthy', () => {
+    const down = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [{
+          name: 'app',
+          ready: false,
+          restartCount: 2,
+          state: { running: {} },
+          lastState: { terminated: { reason: 'Error', exitCode: 1 } },
+        }],
+      },
+    }
+    expect(getPodStatus(down).level).toBe('unhealthy')
+    expect(getPodPhaseDisplay(down).level).toBe('unhealthy')
+  })
+
+  it('keeps a readiness-probed flapper visible until the settle window', () => {
+    const flapper = {
+      spec: { containers: [{ name: 'app', readinessProbe: { tcpSocket: { port: 8080 } } }] },
+      status: {
+        phase: 'Running',
+        containerStatuses: [{
+          name: 'app',
+          ready: true,
+          restartCount: 2,
+          state: { running: { startedAt: new Date(Date.now() - 60 * 1000).toISOString() } },
+          lastState: {
+            terminated: {
+              reason: 'Error',
+              exitCode: 1,
+              finishedAt: new Date(Date.now() - 60 * 1000).toISOString(),
+            },
+          },
+        }],
+      },
+    }
+    expect(getPodStatus(flapper).level).toBe('degraded')
+
+    const settled = structuredClone(flapper)
+    settled.status.containerStatuses[0].state.running.startedAt = new Date(Date.now() - 6 * 60 * 1000).toISOString()
+    expect(getPodStatus(settled).level).toBe('healthy')
+  })
+
+  it('lets an active sibling failure outrank recovered crash history', () => {
+    const pod = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [
+          {
+            name: 'app',
+            ready: true,
+            restartCount: 2,
+            state: { running: {} },
+            lastState: { terminated: { reason: 'Error', exitCode: 1 } },
+          },
+          {
+            name: 'image',
+            ready: false,
+            state: { waiting: { reason: 'ImagePullBackOff' } },
+          },
+        ],
+      },
+    }
+    expect(getPodStatus(pod)).toMatchObject({ text: 'ImagePullBackOff', level: 'unhealthy' })
+    expect(getPodPhaseDisplay(pod)).toMatchObject({
+      text: 'Running — ImagePullBackOff',
+      level: 'unhealthy',
+    })
+  })
+
+  it('keeps a not-ready sibling visible ahead of recovered crash history', () => {
+    const pod = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [
+          {
+            name: 'app',
+            ready: true,
+            restartCount: 1,
+            state: { running: {} },
+            lastState: { terminated: { reason: 'Error', exitCode: 1 } },
+          },
+          {
+            name: 'sidecar',
+            ready: false,
+            restartCount: 0,
+            state: { running: {} },
+          },
+        ],
+      },
+    }
+    expect(getPodStatus(pod)).toMatchObject({ text: 'Running (1/2)', level: 'degraded' })
+    expect(getPodPhaseDisplay(pod)).toMatchObject({
+      text: 'Running — Not Ready (1/2)',
+      level: 'degraded',
+    })
+  })
+
+  it('counts only crash history still inside the settle window', () => {
+    const pod = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [
+          {
+            name: 'app',
+            ready: true,
+            restartCount: 1,
+            state: { running: {} },
+            lastState: { terminated: { reason: 'Error', exitCode: 1 } },
+          },
+          {
+            name: 'settled-sidecar',
+            ready: true,
+            restartCount: 40,
+            state: { running: { startedAt: new Date(Date.now() - 60 * 60 * 1000).toISOString() } },
+            lastState: {
+              terminated: {
+                reason: 'Error',
+                exitCode: 1,
+                finishedAt: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
+              },
+            },
+          },
+        ],
+      },
+    }
+    expect(getPodStatus(pod)).toMatchObject({ text: 'Restarted (1)', level: 'degraded' })
+    expect(getPodPhaseDisplay(pod)).toMatchObject({
+      text: 'Running — Recently restarted (1 restart)',
+      level: 'degraded',
+    })
+  })
+
+  it('does not revive old crash history after a long node outage', () => {
+    const pod = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [{
+          name: 'app',
+          ready: true,
+          restartCount: 5,
+          state: { running: { startedAt: new Date(Date.now() - 30 * 1000).toISOString() } },
+          lastState: {
+            terminated: {
+              reason: 'Error',
+              exitCode: 1,
+              finishedAt: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),
+            },
+          },
+        }],
+      },
+    }
+    expect(getPodStatus(pod)).toMatchObject({ text: 'Running', level: 'healthy' })
+
+    const maxBackoffContinuation = structuredClone(pod)
+    maxBackoffContinuation.status.containerStatuses[0].state.running.startedAt =
+      new Date(Date.now() - 60 * 1000).toISOString()
+    maxBackoffContinuation.status.containerStatuses[0].lastState.terminated.finishedAt =
+      new Date(Date.now() - 6 * 60 * 1000).toISOString()
+    expect(getPodStatus(maxBackoffContinuation).level).toBe('degraded')
+  })
+
+  it('shows Terminating instead of a recovered-crash warning during graceful deletion', () => {
+    const terminating = {
+      metadata: { deletionTimestamp: new Date().toISOString() },
+      status: {
+        phase: 'Running',
+        containerStatuses: [{
+          name: 'app',
+          ready: true,
+          restartCount: 2,
+          state: { running: {} },
+          lastState: { terminated: { reason: 'Error', exitCode: 1 } },
+        }],
+      },
+    }
+    expect(getPodStatus(terminating)).toMatchObject({ text: 'Terminating', level: 'neutral' })
+    expect(getPodPhaseDisplay(terminating)).toMatchObject({
+      text: 'Running — Terminating',
+      level: 'neutral',
+    })
+  })
 })
 
 const podRunningHealthy = {

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

@@ -171,6 +171,63 @@ function firstFatalContainer(pod: any): { name: string; reason: string } | null
   return null
 }
 
+const CRASH_SETTLE_MS = 5 * 60 * 1000
+const STALE_CRASH_STATE_GAP_MS = 2 * CRASH_SETTLE_MS
+
+function stableCrashHistory(cs: any): boolean {
+  if (!cs?.restartCount) return false
+
+  const startedAt = cs?.state?.running?.startedAt
+  const finishedAt = cs?.lastState?.terminated?.finishedAt
+  if (startedAt) {
+    const startedAtMs = new Date(startedAt).getTime()
+    if (Number.isFinite(startedAtMs) && Date.now() - startedAtMs >= CRASH_SETTLE_MS) return false
+    if (finishedAt) {
+      const finishedAtMs = new Date(finishedAt).getTime()
+      if (
+        Number.isFinite(startedAtMs)
+        && Number.isFinite(finishedAtMs)
+        && startedAtMs - finishedAtMs > STALE_CRASH_STATE_GAP_MS
+      ) return false
+    }
+  } else if (cs?.state?.running && finishedAt) {
+    const finishedAtMs = new Date(finishedAt).getTime()
+    if (Number.isFinite(finishedAtMs) && Date.now() - finishedAtMs >= CRASH_SETTLE_MS) return false
+  }
+  if (cs?.state?.terminated?.exitCode === 0) return false
+
+  const term = cs?.lastState?.terminated
+  if (!term || term.reason === 'OOMKilled') return false
+  return term.reason === 'CrashLoopBackOff' || term.reason === 'Error' || Number(term.exitCode ?? 0) !== 0
+}
+
+function podCrashHistoryLevel(pod: any): 'degraded' | 'unhealthy' | null {
+  let degraded = false
+  for (const cs of pod?.status?.containerStatuses || []) {
+    if (!stableCrashHistory(cs)) continue
+    if (!(cs?.state?.running && cs?.ready)) return 'unhealthy'
+    degraded = true
+  }
+
+  const initContainers = pod?.spec?.initContainers || []
+  for (const cs of pod?.status?.initContainerStatuses || []) {
+    const spec = initContainers.find((c: any) => c?.name === cs?.name)
+    const restartable = spec?.restartPolicy === 'Always'
+    if (!stableCrashHistory(cs)) continue
+    if (!(restartable && cs?.state?.running && cs?.ready)) return 'unhealthy'
+    degraded = true
+  }
+  return degraded ? 'degraded' : null
+}
+
+function podCrashRestartTotal(pod: any): number {
+  const main = pod?.status?.containerStatuses || []
+  const init = pod?.status?.initContainerStatuses || []
+  return [...main, ...init]
+    .filter(stableCrashHistory)
+    .reduce((sum, cs) => sum + (cs?.restartCount || 0), 0)
+}
+
 export function getPodStatus(pod: any): StatusBadge {
   const phase = pod.status?.phase || 'Unknown'
   const containerStatuses = pod.status?.containerStatuses || []
@@ -194,6 +251,17 @@ export function getPodStatus(pod: any): StatusBadge {
     return { text: 'Failed', color: healthColors.unhealthy, level: 'unhealthy' }
   }
 
+  const crashHistoryLevel = phase !== 'Succeeded' && phase !== 'Unknown'
+    ? podCrashHistoryLevel(pod)
+    : null
+  if (crashHistoryLevel === 'unhealthy') {
+    return {
+      text: 'CrashLoopBackOff',
+      color: healthColors.unhealthy,
+      level: 'unhealthy',
+    }
+  }
+
   // Terminating: neutral while gracefully shutting down, degraded once stuck
   // (a wedged finalizer / preStop hook holding the pod open).
   if (pod.metadata?.deletionTimestamp) {
@@ -203,6 +271,16 @@ export function getPodStatus(pod: any): StatusBadge {
     return { text: 'Terminating', color: healthColors.neutral, level: 'neutral' }
   }
 
+  const hasUnsettledMainContainer = containerStatuses.some((c: any) => !containerSettledOk(c))
+  if (crashHistoryLevel === 'degraded' && !hasUnsettledMainContainer) {
+    const restarts = podCrashRestartTotal(pod)
+    return {
+      text: `Restarted (${restarts})`,
+      color: healthColors.degraded,
+      level: 'degraded',
+    }
+  }
+
   switch (phase) {
     case 'Running': {
       // Degrade only on containers that are neither ready nor successfully done —
@@ -288,6 +366,18 @@ export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
     return { phase, text: 'Failed', level: 'unhealthy' }
   }
 
+  const crashHistoryLevel = phase !== 'Succeeded' && phase !== 'Unknown'
+    ? podCrashHistoryLevel(pod)
+    : null
+  if (crashHistoryLevel === 'unhealthy') {
+    return {
+      phase,
+      text: `${phase} — CrashLoopBackOff`,
+      level: 'unhealthy',
+      hint: 'At least one container has crash history and is not serving now.',
+    }
+  }
+
   // Terminating: neutral while gracefully shutting down, degraded once stuck.
   if (pod?.metadata?.deletionTimestamp) {
     const stuck = minutesSince(pod.metadata.deletionTimestamp) >= TERMINATING_STUCK_MINUTES
@@ -301,6 +391,17 @@ export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
     }
   }
 
+  const hasUnsettledMainContainer = containerStatuses.some((c) => !containerSettledOk(c))
+  if (crashHistoryLevel === 'degraded' && !hasUnsettledMainContainer) {
+    const crashRestarts = podCrashRestartTotal(pod)
+    return {
+      phase,
+      text: `${phase} — Recently restarted (${crashRestarts} restart${crashRestarts === 1 ? '' : 's'})`,
+      level: 'degraded',
+      hint: 'Containers are ready now but remain in the crash settle window.',
+    }
+  }
+
   switch (phase) {
     case 'Running': {
       // A successfully-completed container (exit 0) is settled, not "not ready" —