@skyhook-io/k8s-ui 1.10.4 → 1.11.0

package/src/components/resources/renderers/kyverno-modern-cells.tsx

@@ -0,0 +1,152 @@
+// Cell components for the modern Kyverno CEL family, PolicyException and
+// CleanupPolicy rows in ResourcesView.
+
+import { clsx } from 'clsx'
+import { formatAge } from '../resource-utils'
+import {
+  getKyvernoAttestors,
+  getKyvernoDeletionConditions,
+  getKyvernoGenerations,
+  getKyvernoImageReferences,
+  getKyvernoMatchSummary,
+  getKyvernoMutations,
+  getKyvernoPolicyFamily,
+  getKyvernoLastExecutionTime,
+  getKyvernoSchedule,
+  getKyvernoValidations,
+  getModernKyvernoPolicyStatus,
+} from '../resource-utils-kyverno-modern'
+import {
+  getKyvernoCleanupMatchedKinds,
+  getKyvernoCleanupPolicyStatus,
+  getKyvernoCleanupSchedule,
+  getKyvernoExceptedPolicies,
+  getKyvernoPolicyExceptionStatus,
+  isBlanketKyvernoException,
+} from '../resource-utils-kyverno-exceptions'
+
+const dash = <span className="text-sm text-theme-text-tertiary">-</span>
+
+/** Counts the per-family "rules" the row's Rules/Mutations/Generates column shows. */
+function ruleCount(resource: any): number {
+  switch (getKyvernoPolicyFamily(resource?.kind)) {
+    case 'mutating':
+      return getKyvernoMutations(resource).length
+    case 'generating':
+      return getKyvernoGenerations(resource).length
+    case 'deleting':
+      return getKyvernoDeletionConditions(resource).length
+    default:
+      return getKyvernoValidations(resource).length
+  }
+}
+
+export function KyvernoModernPolicyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getModernKyvernoPolicyStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'appliesTo':
+      return <span className="text-sm text-theme-text-secondary">{getKyvernoMatchSummary(resource)}</span>
+    case 'rules': {
+      const count = ruleCount(resource)
+      // A DeletingPolicy with zero conditions deletes everything it matches,
+      // so a bare "0" would read as harmless when it is the opposite.
+      if (getKyvernoPolicyFamily(resource?.kind) === 'deleting' && count === 0) {
+        return <span className="text-sm text-theme-text-secondary">All matched</span>
+      }
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    case 'lastRun': {
+      // Absence is stated, never blank. A blank cell reads the same whether the
+      // policy ran and we failed to show it or it has never run at all — and
+      // "never run" is the actual failure mode for a scheduled policy, so it
+      // has to be the loud state rather than the empty one.
+      const last = getKyvernoLastExecutionTime(resource)
+      if (!last) {
+        return (
+          <span className="badge status-degraded" title="This policy has not run since it was created">
+            Never run
+          </span>
+        )
+      }
+      return <span className="text-sm text-theme-text-secondary">{formatAge(last)} ago</span>
+    }
+    case 'schedule': {
+      const schedule = getKyvernoSchedule(resource)
+      return schedule ? (
+        <span className="text-sm font-mono text-theme-text-secondary">{schedule}</span>
+      ) : (
+        <span className="text-sm text-theme-text-tertiary">Not set</span>
+      )
+    }
+    case 'images': {
+      const refs = getKyvernoImageReferences(resource)
+      if (refs.length === 0) return <span className="text-sm text-theme-text-tertiary">All</span>
+      return (
+        <span className="text-sm font-mono text-theme-text-secondary truncate">
+          {refs.length === 1 ? refs[0] : `${refs[0]} +${refs.length - 1}`}
+        </span>
+      )
+    }
+    case 'attestors': {
+      const attestors = getKyvernoAttestors(resource)
+      // No attestor means nothing to verify signatures against.
+      if (attestors.length === 0) return <span className="badge status-degraded">None</span>
+      return <span className="text-sm text-theme-text-secondary">{attestors.length}</span>
+    }
+    default:
+      return dash
+  }
+}
+
+export function KyvernoPolicyExceptionCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKyvernoPolicyExceptionStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'policies': {
+      if (isBlanketKyvernoException(resource)) {
+        return <span className="text-sm text-theme-text-secondary">Every matching policy</span>
+      }
+      const names = getKyvernoExceptedPolicies(resource).map((p) => p.name)
+      return (
+        <span className="text-sm text-theme-text-secondary truncate">
+          {names.length <= 2 ? names.join(', ') : `${names.slice(0, 2).join(', ')} +${names.length - 2}`}
+        </span>
+      )
+    }
+    default:
+      return dash
+  }
+}
+
+export function KyvernoCleanupPolicyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKyvernoCleanupPolicyStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'schedule': {
+      const schedule = getKyvernoCleanupSchedule(resource)
+      return schedule ? (
+        <span className="text-sm font-mono text-theme-text-secondary">{schedule}</span>
+      ) : (
+        <span className="text-sm text-theme-text-tertiary">Not set</span>
+      )
+    }
+    case 'appliesTo': {
+      const kinds = getKyvernoCleanupMatchedKinds(resource)
+      if (kinds.length === 0) return dash
+      return (
+        <span className="text-sm text-theme-text-secondary truncate">
+          {kinds.length <= 3 ? kinds.join(', ') : `${kinds.slice(0, 3).join(', ')} +${kinds.length - 3}`}
+        </span>
+      )
+    }
+    default:
+      return dash
+  }
+}

package/src/components/resources/renderers/velero-cells.tsx

@@ -1,6 +1,8 @@
 // Velero cell components for ResourcesView table
 
 import { clsx } from 'clsx'
+import { Pause } from 'lucide-react'
+import { Tooltip } from '../../ui/Tooltip'
 import {
   getBackupStatus,
   getBackupStorageLocation,
@@ -15,16 +17,48 @@ import {
   getRestoreDuration,
   getRestoreErrors,
   getScheduleStatus,
-  getScheduleCron,
-  getScheduleLastBackup,
   getSchedulePaused,
+  getScheduleCronInfo,
+  getScheduleLastBackup,
   getBSLStatus,
   getBSLProvider,
   getBSLBucket,
   getBSLDefault,
   getBSLLastValidation,
+  getVSLProvider,
+  getVSLConfig,
+  getBackupRepositoryStatus,
+  getBackupRepositoryType,
 } from '../resource-utils-velero'
 
+// The detail-page Phase value. The badge carries the same label the table
+// showed, so the row you clicked and the drawer you landed on agree — but the
+// drawer has no width budget, so the raw `.status.phase` rides alongside it
+// whenever the two differ. Without this the three collapsed partial-failure
+// phases would be unreachable outside the YAML tab, and the label would stop
+// being a display choice and start being a loss of information.
+export function VeleroPhaseValue({
+  status,
+  phase,
+}: {
+  status: { text: string; color: string }
+  phase: string
+}) {
+  // Stacked rather than side-by-side: the property column is ~300px and the
+  // longest phase is 40 unbroken characters, so a row would clip the phase and
+  // wrap the badge at the same time. `break-all` because the token has no break
+  // opportunity — in a detail panel wrapping is the right answer, since the
+  // whole point of the value is that it is exact.
+  return (
+    <span className="flex flex-col items-start gap-1 min-w-0">
+      <span className={clsx('badge whitespace-nowrap', status.color)}>{status.text}</span>
+      {phase && phase !== status.text && (
+        <span className="text-xs font-mono text-theme-text-tertiary break-all">{phase}</span>
+      )}
+    </span>
+  )
+}
+
 export function BackupCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {
@@ -109,23 +143,108 @@ export function ScheduleCell({ resource, column }: { resource: any; column: stri
   switch (column) {
     case 'status': {
       const status = getScheduleStatus(resource)
+      // A paused schedule that is *also* rejected carries two independent facts
+      // and the badge can only show one. The failure takes the badge because it
+      // is the one to act on; paused rides alongside as a chip — the same
+      // primary-plus-secondary shape CellContent uses for Terminating in the
+      // name column. A chip rather than a second word is what keeps it inside
+      // the column budget: "Rejected" plus a spelled-out "Paused" does not fit.
+      const alsoPaused = getSchedulePaused(resource) && status.text !== 'Paused'
       return (
-        <span className={clsx('badge', status.color)}>
-          {status.text}
+        <span className="inline-flex items-center gap-1 min-w-0">
+          <span className={clsx('badge', status.color)}>
+            {status.text}
+          </span>
+          {alsoPaused && (
+            <Tooltip content="Also paused — this schedule will not run until it is resumed">
+              <Pause className="w-3 h-3 shrink-0 text-amber-600 dark:text-amber-400" />
+            </Tooltip>
+          )}
         </span>
       )
     }
     case 'schedule': {
-      const cron = getScheduleCron(resource)
-      return <span className="text-sm text-theme-text-secondary font-mono">{cron}</span>
+      const { cron, readable, malformed } = getScheduleCronInfo(resource)
+      return (
+        <div className="flex flex-col min-w-0">
+          <span
+            className={clsx(
+              'text-sm font-mono truncate',
+              malformed ? 'text-red-600 dark:text-red-400' : 'text-theme-text-secondary'
+            )}
+            // Cron has no bounded width — `*/15 9-17 * * 1-5` measures 143px
+            // against 128px of cell — so the raw value carries a title on every
+            // row, not just the malformed ones.
+            title={malformed ? `${cron} is not a valid cron expression — this schedule cannot run` : cron}
+          >
+            {cron}
+          </span>
+          {/* The second line is always occupied, even when there is nothing to
+              say. Dropping it for the rows cronToHuman can't phrase left those
+              rows 10px shorter than their neighbours, which is the ragged
+              rhythm this table already had once. `invisible` reserves the line
+              without painting or announcing it. */}
+          {malformed ? (
+            <span className="text-xs text-red-600 dark:text-red-400">Invalid cron</span>
+          ) : readable ? (
+            <span className="text-xs text-theme-text-tertiary truncate">{readable}</span>
+          ) : (
+            <span aria-hidden className="text-xs invisible">&nbsp;</span>
+          )}
+        </div>
+      )
     }
     case 'lastBackup': {
       const last = getScheduleLastBackup(resource)
       return <span className="text-sm text-theme-text-secondary">{last}</span>
     }
-    case 'paused': {
-      const paused = getSchedulePaused(resource)
-      return <span className={clsx('text-sm', paused ? 'text-yellow-400' : 'text-theme-text-tertiary')}>{paused ? 'Yes' : '-'}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function BackupRepositoryCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getBackupRepositoryStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'repositoryType': {
+      const type = getBackupRepositoryType(resource)
+      // restic is on its way out (no new backups since v1.17, restore dropped in
+      // v1.19), so flag it rather than rendering it as neutral configuration.
+      const isLegacy = type === 'restic'
+      return (
+        <span className={clsx('text-sm', isLegacy ? 'text-amber-600 dark:text-amber-400 font-medium' : 'text-theme-text-secondary')}>
+          {type}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+// VolumeSnapshotLocation has no status column on purpose: the VSL controller
+// does not populate status.phase, so a badge would read "Unknown" forever.
+export function VolumeSnapshotLocationCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'provider': {
+      const provider = getVSLProvider(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{provider}</span>
+    }
+    case 'config': {
+      const config = getVSLConfig(resource)
+      const keys = Object.keys(config)
+      if (keys.length === 0) {
+        return <span className="text-sm text-theme-text-tertiary">-</span>
+      }
+      const summary = keys.map((k) => `${k}=${config[k]}`).join(', ')
+      return <span className="text-sm text-theme-text-secondary truncate block" title={summary}>{summary}</span>
     }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>

package/src/components/resources/renderers/velero-phase-recovery.test.tsx

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { VeleroPhaseValue } from './velero-cells'
+import { VeleroBackupRenderer } from './VeleroBackupRenderer'
+import { VeleroRestoreRenderer } from './VeleroRestoreRenderer'
+import { VeleroScheduleRenderer } from './VeleroScheduleRenderer'
+import { VeleroBSLRenderer } from './VeleroBSLRenderer'
+
+// The table deliberately shows a shortened label, and three distinct phases
+// collapse onto one of them. That is only defensible while the exact phase
+// stays reachable without reading YAML, so these tests guard the drawer.
+
+const backup = (phase: string) => ({
+  metadata: { name: 'b', namespace: 'velero' },
+  spec: {},
+  status: { phase },
+})
+
+describe('exact Velero phase stays reachable in the drawer', () => {
+  it.each([
+    'WaitingForPluginOperationsPartiallyFailed',
+    'FinalizingPartiallyFailed',
+    'PartiallyFailed',
+    'WaitingForPluginOperations',
+    'FailedValidation',
+    'InProgress',
+    'ReadyToStart',
+  ])('Backup detail prints the raw %s', (phase) => {
+    expect(renderToString(<VeleroBackupRenderer data={backup(phase)} />)).toContain(phase)
+  })
+
+  it('Restore detail prints the raw phase', () => {
+    const html = renderToString(
+      <VeleroRestoreRenderer data={{ metadata: { name: 'r' }, spec: {}, status: { phase: 'WaitingForPluginOperationsPartiallyFailed' } }} />
+    )
+    expect(html).toContain('WaitingForPluginOperationsPartiallyFailed')
+  })
+
+  it('Schedule detail prints the raw phase even when the badge says Paused', () => {
+    // Velero leaves .status.phase at Enabled while a schedule is paused, so the
+    // badge and the phase disagree by design; the drawer must show both.
+    const html = renderToString(
+      <VeleroScheduleRenderer data={{ metadata: { name: 's' }, spec: { schedule: '0 1 * * *', paused: true }, status: { phase: 'Enabled' } }} />
+    )
+    expect(html).toContain('Paused')
+    expect(html).toContain('Enabled')
+  })
+
+  it('BSL detail prints the raw phase', () => {
+    const html = renderToString(
+      <VeleroBSLRenderer data={{ metadata: { name: 'bsl' }, spec: { provider: 'aws' }, status: { phase: 'Unavailable' } }} />
+    )
+    expect(html).toContain('Unavailable')
+  })
+})
+
+describe('VeleroPhaseValue', () => {
+  it('does not repeat the phase when the label already is the phase', () => {
+    const html = renderToString(
+      <VeleroPhaseValue status={{ text: 'Completed', color: 'x' }} phase="Completed" />
+    )
+    expect(html.match(/Completed/g)).toHaveLength(1)
+  })
+
+  it('shows the phase alongside the label when they differ', () => {
+    const html = renderToString(
+      <VeleroPhaseValue status={{ text: 'Partially failed', color: 'x' }} phase="FinalizingPartiallyFailed" />
+    )
+    expect(html).toContain('Partially failed')
+    expect(html).toContain('FinalizingPartiallyFailed')
+  })
+
+  it('renders nothing extra when the resource has no phase', () => {
+    const html = renderToString(
+      <VeleroPhaseValue status={{ text: 'Unknown', color: 'x' }} phase="" />
+    )
+    expect(html.match(/Unknown/g)).toHaveLength(1)
+  })
+})

package/src/components/resources/resource-utils-cnpg.golden.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import {
+  getCNPGClusterStatus,
+  getCNPGClusterInstances,
+  classifyCNPGClusterPhase,
+  CNPG_CLUSTER_PHASES_HEALTHY,
+  CNPG_CLUSTER_PHASES_TRANSIENT,
+  CNPG_CLUSTER_PHASES_FAILING,
+  CNPG_CLUSTER_PHASES_TERMINAL,
+  CNPG_CLUSTER_PHASES_ATTENTION,
+} from './resource-utils-cnpg'
+
+// Shared specification, also asserted from Go in
+// internal/issues/source_cnpg_golden_test.go. The sibling parity test compares
+// only phase SPELLING between the two languages, which cannot catch a
+// precedence, readiness-presence or condition difference — every badge/issue
+// disagreement found on this branch slipped past it.
+const GOLDEN = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  '../../../../../testdata/cnpg/badge-issue-matrix.json',
+)
+
+interface GoldenCase {
+  name: string
+  spec: Record<string, unknown>
+  status: Record<string, unknown>
+  badge: { text: string; level: string }
+  issues: string[]
+  worst: string
+}
+
+const cases: GoldenCase[] = JSON.parse(readFileSync(GOLDEN, 'utf8')).cases
+
+describe('CNPG golden matrix — badge side', () => {
+  it('loads the shared specification', () => {
+    expect(cases.length).toBeGreaterThan(0)
+  })
+
+  it.each(cases.map((c) => [c.name, c] as const))('%s', (_name, tc) => {
+    const badge = getCNPGClusterStatus({ spec: tc.spec, status: tc.status })
+    expect({ text: badge.text, level: badge.level }).toEqual(tc.badge)
+  })
+
+  // The invariant itself, stated directly against the spec rather than inferred:
+  // a green badge must never accompany an issue, and a red badge must never
+  // accompany silence.
+  it.each(cases.map((c) => [c.name, c] as const))(
+    'badge and issues do not contradict — %s',
+    (_name, tc) => {
+      const badge = getCNPGClusterStatus({ spec: tc.spec, status: tc.status })
+      if (badge.level === 'healthy') {
+        expect(tc.issues, 'a healthy badge must not sit next to an issue').toEqual([])
+      }
+      if (badge.level === 'unhealthy') {
+        expect(tc.worst, 'an unhealthy badge must not sit next to silence').not.toBe('none')
+      }
+    },
+  )
+
+  // The Instances CELL, derived from the same cases rather than specified in
+  // them. The matrix stays a Go/TS parity spec — Go has no instances cell, so a
+  // `cell` field would add a column only one language can assert to a file
+  // whose whole purpose is that both do. Deriving costs no schema change and
+  // covers every case added later for badge reasons.
+  //
+  // This is the gap that let the bug through: the matrix already pinned
+  // "readyInstances absent — unknown, not zero; must not fabricate an outage"
+  // for the badge, and the cell rendered 0/N on that very case.
+  it.each(cases.map((c) => [c.name, c] as const))(
+    'instances cell does not claim an outage the badge denies — %s',
+    (_name, tc) => {
+      const cell = getCNPGClusterInstances({ spec: tc.spec, status: tc.status })
+      const ready = cell.split('/')[0]
+      const readyReported = typeof tc.status.readyInstances === 'number'
+      expect(
+        ready === '-',
+        `readyInstances ${readyReported ? 'is reported' : 'is absent'} but the cell reads ${cell}`,
+      ).toBe(!readyReported)
+    },
+  )
+})
+
+describe('CNPG phase buckets', () => {
+  // TS checks transient before attention; Go checks attention before transient.
+  // A phase in both would classify differently per language while the spelling
+  // parity test still passed.
+  it('are disjoint', () => {
+    const seen = new Map<string, string>()
+    const buckets: Record<string, readonly string[]> = {
+      healthy: CNPG_CLUSTER_PHASES_HEALTHY,
+      transient: CNPG_CLUSTER_PHASES_TRANSIENT,
+      failing: CNPG_CLUSTER_PHASES_FAILING,
+      terminal: CNPG_CLUSTER_PHASES_TERMINAL,
+      attention: CNPG_CLUSTER_PHASES_ATTENTION,
+    }
+    for (const [bucket, phases] of Object.entries(buckets)) {
+      for (const phase of phases) {
+        expect(seen.has(phase), `${phase} is in both ${seen.get(phase)} and ${bucket}`).toBe(false)
+        seen.set(phase, bucket)
+      }
+    }
+  })
+
+  it('classify every listed phase into its own bucket', () => {
+    for (const p of CNPG_CLUSTER_PHASES_TERMINAL) expect(classifyCNPGClusterPhase(p)).toBe('terminal')
+    for (const p of CNPG_CLUSTER_PHASES_TRANSIENT) expect(classifyCNPGClusterPhase(p)).toBe('transient')
+    for (const p of CNPG_CLUSTER_PHASES_ATTENTION) expect(classifyCNPGClusterPhase(p)).toBe('attention')
+  })
+})