@skyhook-io/k8s-ui 1.13.3 → 1.13.4

package/src/components/resources/renderers/GenericRenderer.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react'
 import { Info, CheckCircle, XCircle, AlertCircle, ChevronRight, ChevronDown, FileCode, AlertTriangle, Layers } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { getGenericResourceStatus } from '../generic-status'
+import type { HealthLevel } from '../resource-utils'
 
 interface GenericRendererProps {
   data: any
@@ -13,7 +15,7 @@ export function GenericRenderer({ data }: GenericRendererProps) {
   const conditions = status.conditions
 
   // Determine health status from conditions or status fields
-  const healthStatus = getHealthStatus(status, conditions)
+  const healthStatus = getHealthStatus(data)
 
   // Extract important fields from spec and status
   const statusFields = getImportantFields(status, 'status')
@@ -138,89 +140,22 @@ interface HealthStatusResult {
   message?: string
 }
 
-function getHealthStatus(status: any, conditions?: any[]): HealthStatusResult | null {
-  if (!status) return null
-
-  // Check phase first (common pattern)
-  if (status.phase) {
-    const phase = String(status.phase)
-    const healthyPhases = ['Running', 'Active', 'Succeeded', 'Ready', 'Healthy', 'Available', 'Bound', 'Complete']
-    const degradedPhases = ['Pending', 'Progressing', 'Unknown', 'Terminating', 'Waiting']
-    const unhealthyPhases = ['Failed', 'Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'ErrImagePull']
-
-    if (healthyPhases.includes(phase)) {
-      return { type: 'healthy', label: phase }
-    }
-    if (degradedPhases.includes(phase)) {
-      return { type: 'degraded', label: phase, message: status.message || status.reason }
-    }
-    if (unhealthyPhases.includes(phase)) {
-      return { type: 'unhealthy', label: phase, message: status.message || status.reason }
-    }
-  }
-
-  // Check conditions
-  if (conditions && Array.isArray(conditions) && conditions.length > 0) {
-    // Look for Ready or Available condition
-    const readyCondition = conditions.find((c: any) =>
-      c.type === 'Ready' || c.type === 'Available' || c.type === 'Healthy'
-    )
-    if (readyCondition) {
-      if (readyCondition.status === 'True') {
-        return { type: 'healthy', label: 'Ready' }
-      }
-      if (readyCondition.status === 'False') {
-        return {
-          type: 'unhealthy',
-          label: 'Not Ready',
-          message: readyCondition.message || readyCondition.reason
-        }
-      }
-    }
-
-    // Check for any False conditions that indicate problems
-    const problemConditions = conditions.filter((c: any) =>
-      c.status === 'False' && ['Ready', 'Available', 'Healthy', 'Initialized'].includes(c.type)
-    )
-    if (problemConditions.length > 0) {
-      const problem = problemConditions[0]
-      return {
-        type: 'unhealthy',
-        label: `${problem.type}: False`,
-        message: problem.message || problem.reason
-      }
-    }
-
-    // Check for warning conditions
-    const warningConditions = conditions.filter((c: any) =>
-      c.status === 'True' && ['Degraded', 'Warning', 'ScalingLimited'].includes(c.type)
-    )
-    if (warningConditions.length > 0) {
-      const warning = warningConditions[0]
-      return {
-        type: 'degraded',
-        label: warning.type,
-        message: warning.message || warning.reason
-      }
-    }
-  }
-
-  // Check replica-based status
-  if (status.replicas !== undefined) {
-    const desired = status.replicas
-    const ready = status.readyReplicas || status.availableReplicas || 0
-    if (desired > 0 && ready >= desired) {
-      return { type: 'healthy', label: `${ready}/${desired} Ready` }
-    }
-    if (desired > 0 && ready > 0) {
-      return { type: 'degraded', label: `${ready}/${desired} Ready` }
-    }
-    if (desired > 0 && ready === 0) {
-      return { type: 'unhealthy', label: `0/${desired} Ready` }
-    }
-  }
+// This renderer's banner has four tones, while the shared derivation speaks the
+// full HealthLevel vocabulary. `alert` folds into unhealthy and `neutral` into
+// unknown — the banner has no distinct treatment for either.
+const BANNER_TYPE: Record<HealthLevel, HealthType> = {
+  healthy: 'healthy',
+  degraded: 'degraded',
+  alert: 'unhealthy',
+  unhealthy: 'unhealthy',
+  neutral: 'unknown',
+  unknown: 'unknown',
+}
 
-  return null
+function getHealthStatus(resource: any): HealthStatusResult | null {
+  const derived = getGenericResourceStatus(resource)
+  if (!derived) return null
+  return { type: BANNER_TYPE[derived.tone], label: derived.text, message: derived.reason }
 }
 
 // ============================================================================

package/src/components/resources/renderers/HPARenderer.test.tsx

@@ -88,4 +88,32 @@ describe('HPARenderer', () => {
     expect(html).toContain('TooManyReplicas')
     expect(html).not.toContain('the desired replica count is more than the maximum replica count')
   })
+
+  it('preserves minReplicas zero and renders ScaledToZero as neutral evidence', () => {
+    const html = renderToString(
+      <HPARenderer
+        data={{
+          ...baseHPA,
+          spec: { ...baseHPA.spec, minReplicas: 0 },
+          status: {
+            currentReplicas: 0,
+            desiredReplicas: 0,
+            conditions: [
+              {
+                type: 'ScaledToZero',
+                status: 'True',
+                reason: 'SucceededRescale',
+                message: 'the HPA controller scaled the target to zero',
+              },
+            ],
+          },
+        }}
+      />,
+    )
+
+    expect(html).toMatch(/>Min<\/span><span[^>]*>0<\/span>/)
+    expect(html).toContain('ScaledToZero')
+    expect(html).toContain('bg-gray-400/20')
+    expect(html).not.toContain('failing')
+  })
 })

package/src/components/resources/renderers/HPARenderer.tsx

@@ -34,6 +34,11 @@ function hpaBadgeSeverity(state: HPADiagnosisState): BadgeSeverity {
 }
 
 function hpaConditionTone(condition: any): ConditionTone | undefined {
+  if (condition?.type === 'ScaledToZero') {
+    if (condition.status === 'False') return 'ok'
+    if (condition.status === 'True') return 'unknown'
+    return 'unknown'
+  }
   if (condition?.type !== 'ScalingLimited') return undefined
   if (condition.status === 'False') return 'ok'
   if (condition.status !== 'True') return 'unknown'
@@ -109,7 +114,7 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
           } />
           <Property label="Current" value={status.currentReplicas} />
           <Property label="Desired" value={status.desiredReplicas} />
-          <Property label="Min" value={spec.minReplicas || 1} />
+          <Property label="Min" value={spec.minReplicas ?? 1} />
           <Property label="Max" value={spec.maxReplicas} />
           {status.lastScaleTime && <Property label="Last Scale" value={formatAge(status.lastScaleTime)} />}
         </PropertyList>

package/src/components/resources/renderers/MetricsUnavailableNotice.tsx

@@ -21,7 +21,8 @@ export function MetricsUnavailableNotice({ rawError, diagnosis }: MetricsUnavail
                   This panel uses Kubernetes metrics.k8s.io for live CPU and memory; Prometheus data does not fill it.
                 </span>
                 <span className="block">
-                  {diagnosis || 'Check that metrics-server is installed and healthy, and that the v1beta1.metrics.k8s.io APIService is Available.'}
+                  {diagnosis ||
+                    "Check that metrics-server is installed and healthy, and that its metrics.k8s.io APIService is Available."}
                 </span>
                 <span className="block">
                   Raw error: <span className="font-mono break-words">{rawError}</span>

package/src/components/resources/renderers/PVCRenderer.test.tsx

@@ -20,4 +20,48 @@ describe('PVCRenderer', () => {
     expect(html).not.toContain('This is normal')
     expect(html).not.toContain('expected indefinitely')
   })
+
+  it('surfaces an unused claim as informational cleanup evidence', () => {
+    const html = renderToString(
+      <PVCRenderer
+        data={{
+          metadata: { name: 'archive', namespace: 'demo' },
+          status: {
+            phase: 'Bound',
+            conditions: [
+              {
+                type: 'Unused',
+                status: 'True',
+                lastTransitionTime: '2026-08-28T12:00:00Z',
+              },
+            ],
+          },
+        }}
+      />,
+    )
+
+    expect(html).toContain('Unused for about')
+    expect(html).toContain('No non-terminal Pod currently references this claim')
+    expect(html).toContain('Verify its retention policy and data ownership')
+    expect(html).toContain('bg-gray-400/20')
+    expect(html).not.toContain('failing')
+    expect(html).not.toContain('bg-emerald-500/20')
+  })
+
+  it('does not show cleanup guidance while Unused is false or absent', () => {
+    for (const conditions of [
+      [{ type: 'Unused', status: 'False' }],
+      undefined,
+    ]) {
+      const html = renderToString(
+        <PVCRenderer
+          data={{
+            metadata: { name: 'active', namespace: 'demo' },
+            status: { phase: 'Bound', conditions },
+          }}
+        />,
+      )
+      expect(html).not.toContain('No non-terminal Pod currently references this claim')
+    }
+  })
 })

package/src/components/resources/renderers/PVCRenderer.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react'
 import { HardDrive } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown, type ConditionTone } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
 
 interface PVCRendererProps {
   data: any
@@ -22,6 +23,11 @@ function formatAccessModes(modes: string[] | undefined): string | undefined {
   return modes.map(m => accessModeShorthand[m] || m).join(', ')
 }
 
+function pvcConditionTone(condition: any): ConditionTone | undefined {
+  if (condition?.type !== 'Unused') return undefined
+  return condition.status === 'True' ? 'unknown' : condition.status === 'False' ? 'ok' : 'unknown'
+}
+
 export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
@@ -39,6 +45,9 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
   const bindCompleted = annotations['pv.kubernetes.io/bind-completed']
   const hasProvisionerInfo = provisioner || selectedNode || bindCompleted
   const operationalIssuesShown = useOperationalIssuesShown()
+  const unused = Array.isArray(status.conditions)
+    ? status.conditions.find((condition: any) => condition?.type === 'Unused' && condition.status === 'True')
+    : undefined
 
   return (
     <>
@@ -59,6 +68,14 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
         />
       )}
 
+      {unused && (
+        <AlertBanner
+          variant="info"
+          title={unused.lastTransitionTime ? `Unused for about ${formatAge(unused.lastTransitionTime)}` : 'Unused'}
+          message="No non-terminal Pod currently references this claim. Verify its retention policy and data ownership before deleting it."
+        />
+      )}
+
       <Section title="Status" icon={HardDrive}>
         <PropertyList>
           <Property
@@ -98,7 +115,7 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
 
       {extraSections}
 
-      <ConditionsSection conditions={status.conditions} />
+      <ConditionsSection conditions={status.conditions} getConditionTone={pvcConditionTone} />
     </>
   )
 }

package/src/components/resources/renderers/RolloutRenderer.test.tsx

@@ -102,6 +102,33 @@ describe('rolloutActions state gating', () => {
     expect(blockedReason(settled, 'abort')).toBe('Rollout is fully promoted — roll back instead')
   })
 
+  it('offers the promotion verbs while the controller is still behind the spec', () => {
+    // A rollback bumps the generation; until the controller writes status the phase is
+    // still the pre-rollback one, and this is exactly when Promote full is needed.
+    const settled = canaryRollout({ phase: 'Healthy', currentStepIndex: 4 }, 4)
+    const stale = {
+      ...settled,
+      metadata: { ...settled.metadata, generation: 4 },
+      status: { ...settled.status, observedGeneration: '3' },
+    }
+    expect(blockedReason(stale, 'promote-full')).toBeUndefined()
+    // Abort deliberately keeps its phase-based gate: in this window status.stable still
+    // points at the revision the operator just rolled away from.
+    expect(blockedReason(stale, 'abort')).toBe('Rollout is fully promoted — roll back instead')
+    // Once the controller catches up the settled reading is trustworthy again.
+    const caughtUp = { ...stale, status: { ...settled.status, observedGeneration: '4' } }
+    expect(blockedReason(caughtUp, 'promote-full')).toBe('Nothing left to promote')
+  })
+
+  it('keeps Promote full offered on a workloadRef Rollout, whose template lives elsewhere', () => {
+    const settled = canaryRollout({ phase: 'Healthy', currentStepIndex: 4 }, 4)
+    const workloadRef = {
+      ...settled,
+      spec: { ...settled.spec, workloadRef: { kind: 'Deployment', name: 'web' } },
+    }
+    expect(blockedReason(workloadRef, 'promote-full')).toBeUndefined()
+  })
+
   it('routes an aborted rollout through Retry before it will promote again', () => {
     const aborted = canaryRollout({ phase: 'Degraded', abort: true, currentStepIndex: 1 })
     expect(blockedReason(aborted, 'promote-full')).toBe('Retry the rollout first')
@@ -138,6 +165,14 @@ describe('rolloutActions state gating', () => {
   })
 })
 
+describe('RolloutRenderer step display', () => {
+  it('does not render beyond the final declared canary step', () => {
+    const html = renderToString(<RolloutRenderer data={canaryRollout({ phase: 'Healthy', currentStepIndex: 4 }, 4)} />)
+    expect(html).toContain('4/4')
+    expect(html).not.toContain('5/4')
+  })
+})
+
 describe('rolloutProblems', () => {
   it('reports an aborted rollout once, not once per matching branch', () => {
     const problems = rolloutProblems(

package/src/components/resources/renderers/RolloutRenderer.tsx

@@ -4,7 +4,7 @@ import { clsx } from 'clsx'
 import { AlertBanner, Section, PropertyList, Property, ConditionsSection, PodTemplateSection, type ConditionTone } from '../../ui/drawer-components'
 import { Tooltip } from '../../ui/Tooltip'
 import { ConfirmDialog } from '../../ui/ConfirmDialog'
-import { formatAge } from '../resource-utils'
+import { formatAge, getRolloutStep } from '../resource-utils'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 export type RolloutAction = 'abort' | 'retry' | 'promote' | 'promote-full' | 'skip-step'
@@ -46,6 +46,22 @@ interface RolloutRendererProps {
   pendingAction?: RolloutAction | null
 }
 
+// Has the controller reconciled the template as it stands? A rollback changes the
+// template before the controller writes status, and until it catches up a Healthy phase
+// still describes the previous revision.
+//
+// A workloadRef Rollout keeps its template on another object, and a rollback patches
+// THAT object — this payload carries neither its generation nor a way to reach it, so
+// the honest answer is "unknown", not "yes".
+function controllerCaughtUp(data: any): boolean {
+  if (data?.spec?.workloadRef) return false
+  const observed = data?.status?.observedGeneration
+  if (observed === undefined || observed === null) return true
+  const seen = Number(observed)
+  if (!Number.isFinite(seen)) return true
+  return seen >= Number(data?.metadata?.generation ?? 0)
+}
+
 // A denied capability omits the verb entirely; `blocked` covers wrong-state only.
 export function rolloutActions(data: any, capabilities?: RolloutCapabilities): RolloutActionSpec[] {
   if (!capabilities) return []
@@ -55,6 +71,9 @@ export function rolloutActions(data: any, capabilities?: RolloutCapabilities): R
   const steps = data?.spec?.strategy?.canary?.steps || []
   const isAborted = status.abort === true
   const isSettled = phase === 'Healthy' && !isAborted
+  // Promote full is the one verb needed DURING the window where status is stale, so it
+  // only claims "nothing to promote" when the controller is known to have caught up.
+  const isFullyPromoted = isSettled && controllerCaughtUp(data)
   const stepsRemaining = steps.length > 0 && (status.currentStepIndex ?? 0) < steps.length
   // Mid-analysis a canary is Progressing with nothing paused, and promote advances
   // the step rather than clearing a pause — so gating on Paused alone hides it.
@@ -87,7 +106,7 @@ export function rolloutActions(data: any, capabilities?: RolloutCapabilities): R
       pendingLabel: 'Promoting…',
       icon: FastForward,
       hint: 'Skip every remaining step, pause, and analysis — emergency hotfix path',
-      blocked: isSettled ? 'Nothing left to promote' : isAborted ? 'Retry the rollout first' : undefined,
+      blocked: isFullyPromoted ? 'Nothing left to promote' : isAborted ? 'Retry the rollout first' : undefined,
       confirm: {
         title: 'Promote fully?',
         message:
@@ -413,7 +432,7 @@ export function RolloutRenderer({ data, onNavigate, capabilities, onAction, pend
             <>
               <Property label="Strategy" value="Canary" />
               {steps.length > 0 && currentStepIndex !== undefined && (
-                <Property label="Current Step" value={`${currentStepIndex}/${steps.length}`} />
+                <Property label="Current Step" value={getRolloutStep(data)} />
               )}
               {status.canary?.weights?.canary?.weight !== undefined && (
                 <Property label="Canary Weight" value={`${status.canary.weights.canary.weight}%`} />

package/src/components/resources/renderers/WorkloadRenderer.test.tsx

@@ -9,6 +9,89 @@ const deployment = {
 }
 
 describe('WorkloadRenderer', () => {
+  it('shows a calm rollout notice even when every desired replica remains ready', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="deployments"
+        data={{
+          ...deployment,
+          metadata: { ...deployment.metadata, generation: 2 },
+          status: { observedGeneration: 2, replicas: 4, readyReplicas: 4, availableReplicas: 4, updatedReplicas: 2 },
+        }}
+      />,
+    )
+
+    expect(html).toContain('Rolling out')
+    expect(html).toContain('2/3 updated · 4 available')
+    expect(html).not.toContain('Issues Detected')
+  })
+
+  it('uses new-revision Pod failure evidence in the rollout notice', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="deployments"
+        data={{
+          ...deployment,
+          metadata: { ...deployment.metadata, generation: 2 },
+          status: {
+            observedGeneration: 2,
+            replicas: 4,
+            readyReplicas: 2,
+            availableReplicas: 2,
+            unavailableReplicas: 1,
+            updatedReplicas: 1,
+            conditions: [{ type: 'Progressing', status: 'False', message: 'Progress deadline exceeded' }],
+          },
+        }}
+        workloadPods={[{
+          name: 'api-new-revision',
+          containers: ['api'],
+          ready: false,
+          healthLevel: 'unhealthy',
+          reason: 'ImagePullBackOff',
+          updatedRevision: true,
+        }]}
+      />,
+    )
+
+    expect(html).toContain('New revision cannot start')
+    expect(html).toContain('ImagePullBackOff · Pod api-new-revision')
+    expect(html).toContain('Issues Detected')
+    expect(html).toContain('Progressing: Progress deadline exceeded')
+    expect(html).not.toContain('Rolling out')
+  })
+
+  it('explains that OnDelete needs a manual Pod restart', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="statefulsets"
+        data={{
+          metadata: { name: 'db', namespace: 'prod', generation: 3 },
+          spec: { replicas: 3, updateStrategy: { type: 'OnDelete' } },
+          status: { observedGeneration: 3, replicas: 3, readyReplicas: 3, updatedReplicas: 0 },
+        }}
+      />,
+    )
+
+    expect(html).toContain('Waiting for Pod restart')
+    expect(html).toContain('OnDelete strategy · 0/3 updated')
+  })
+
+  it('keeps outage problems visible when an OnDelete workload has no update pending', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="statefulsets"
+        data={{
+          metadata: { name: 'db', namespace: 'prod', generation: 3 },
+          spec: { replicas: 3, updateStrategy: { type: 'OnDelete' } },
+          status: { observedGeneration: 3, replicas: 3, readyReplicas: 0, updatedReplicas: 3 },
+        }}
+      />,
+    )
+
+    expect(html).toContain('3 of 3 replicas are not ready')
+  })
+
   it('enables manual scaling when no replica controller targets the workload', () => {
     const html = renderToString(
       <WorkloadRenderer kind="deployments" data={deployment} onScale={async () => {}} />,