@skyhook-io/k8s-ui 1.11.0 → 1.13.0

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

@@ -0,0 +1,177 @@
+import { Badge } from '../../ui/Badge'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getCalicoPolicyNamespaceSelector,
+  getCalicoPolicyRuleCount,
+  getCalicoPolicySelector,
+  getCalicoPolicyServiceAccountSelector,
+  getCalicoPolicyTypes,
+  getCalicoIPPoolAllowedUses,
+  getCalicoIPPoolBlockSize,
+  getCalicoIPPoolEncapsulation,
+  isCalicoApiVersion,
+  isCalicoPolicyResource,
+} from '../resource-utils-calico'
+
+export function CalicoPolicyCell({
+  resource,
+  column,
+}: {
+  resource: any
+  column: string
+}) {
+  if (!isCalicoPolicyResource(resource))
+    return <span className="text-sm text-theme-text-tertiary">-</span>
+
+  switch (column) {
+    case 'selector':
+      return <SelectorCell value={getCalicoPolicySelector(resource)} />
+    case 'namespaceSelector':
+      return <SelectorCell value={getCalicoPolicyNamespaceSelector(resource)} />
+    case 'serviceAccountSelector':
+      return (
+        <SelectorCell value={getCalicoPolicyServiceAccountSelector(resource)} />
+      )
+    case 'tier':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {resource.spec?.tier || 'default'}
+        </span>
+      )
+    case 'order':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {resource.spec?.order ?? '-'}
+        </span>
+      )
+    case 'types':
+      return (
+        <div className="flex flex-wrap gap-1">
+          {getCalicoPolicyTypes(resource).map((type) => (
+            <Badge key={type} tone="accent1" size="sm">
+              {type}
+            </Badge>
+          ))}
+        </div>
+      )
+    case 'stagedAction':
+      return resource.spec?.stagedAction ? (
+        <Badge tone="note" size="sm">
+          {String(resource.spec.stagedAction)}
+        </Badge>
+      ) : (
+        <span className="text-sm text-theme-text-tertiary">-</span>
+      )
+    case 'rules': {
+      const { ingress, egress } = getCalicoPolicyRuleCount(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {ingress}i / {egress}e
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+function SelectorCell({ value }: { value: string }) {
+  return (
+    <Tooltip content={value}>
+      <span className="text-sm text-theme-text-secondary truncate block font-mono">
+        {value}
+      </span>
+    </Tooltip>
+  )
+}
+
+/**
+ * List cells for the Calico resources that describe the network itself rather
+ * than policy: IPPool, HostEndpoint and Tier. The values that decide whether a
+ * pool is in use — disabled, encapsulation, node selector — belong in the list,
+ * not only behind a click on each row.
+ */
+export function CalicoInfraCell({
+  resource,
+  column,
+}: {
+  resource: any
+  column: string
+}) {
+  if (!isCalicoApiVersion(resource?.apiVersion))
+    return <span className="text-sm text-theme-text-tertiary">-</span>
+
+  const spec = resource?.spec ?? {}
+  switch (column) {
+    case 'cidr':
+      return <MonoCell value={spec.cidr} />
+    case 'blockSize':
+      return <TextCell value={getCalicoIPPoolBlockSize(resource)} />
+    case 'encapsulation':
+      return <TextCell value={getCalicoIPPoolEncapsulation(resource)} />
+    case 'natOutgoing':
+      return <YesNoCell value={spec.natOutgoing === true} />
+    case 'disabled':
+      return spec.disabled === true ? (
+        <Badge severity="warning" size="sm">
+          Disabled
+        </Badge>
+      ) : (
+        <span className="text-sm text-theme-text-secondary">No</span>
+      )
+    case 'allowedUses':
+      return <TextCell value={getCalicoIPPoolAllowedUses(resource)} />
+    case 'nodeSelector':
+      return <MonoCell value={spec.nodeSelector ?? 'all()'} />
+    case 'node':
+      return <TextCell value={spec.node} />
+    case 'interfaceName':
+      return <MonoCell value={spec.interfaceName} />
+    case 'expectedIPs':
+      return (
+        <MonoCell
+          value={
+            Array.isArray(spec.expectedIPs)
+              ? spec.expectedIPs.join(', ')
+              : undefined
+          }
+        />
+      )
+    case 'profiles':
+      return (
+        <TextCell
+          value={
+            Array.isArray(spec.profiles) ? spec.profiles.join(', ') : undefined
+          }
+        />
+      )
+    case 'order':
+      return <TextCell value={spec.order} />
+    case 'defaultAction':
+      return <TextCell value={spec.defaultAction ?? 'Deny'} />
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+function TextCell({ value }: { value: unknown }) {
+  if (value === undefined || value === null || value === '')
+    return <span className="text-sm text-theme-text-tertiary">-</span>
+  return (
+    <span className="text-sm text-theme-text-secondary">{String(value)}</span>
+  )
+}
+
+function MonoCell({ value }: { value: unknown }) {
+  if (value === undefined || value === null || value === '')
+    return <span className="text-sm text-theme-text-tertiary">-</span>
+  return <SelectorCell value={String(value)} />
+}
+
+function YesNoCell({ value }: { value: boolean }) {
+  return (
+    <span className="text-sm text-theme-text-secondary">
+      {value ? 'Yes' : 'No'}
+    </span>
+  )
+}

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

@@ -24,6 +24,14 @@ import {
   getCNPGPoolerType,
   getCNPGPoolerMode,
   getCNPGPoolerInstances,
+  getCNPGObjectStoreStatus,
+  getCNPGObjectStoreDestination,
+  getCNPGObjectStoreRetention,
+  getCNPGObjectStoreRecoveryWindows,
+  getCNPGDeclarativeStatus,
+  getCNPGDeclarativeCluster,
+  getCNPGDeclarativeMessage,
+  getCNPGImageCatalogEntries,
 } from '../resource-utils-cnpg'
 
 /** Terminal = the operator has stopped reconciling; neighbouring cells are stale. */
@@ -122,6 +130,98 @@ export function CNPGBackupCell({ resource, column }: { resource: any; column: st
   }
 }
 
+export function CNPGDeclarativeCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGDeclarativeStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'cluster':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {getCNPGDeclarativeCluster(resource) || '-'}
+        </span>
+      )
+    case 'target':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {resource?.spec?.name || '-'}
+        </span>
+      )
+    case 'dbname':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {resource?.spec?.dbname || resource?.spec?.owner || '-'}
+        </span>
+      )
+    case 'message':
+      return (
+        <span
+          className="text-sm text-theme-text-secondary truncate block"
+          title={getCNPGDeclarativeMessage(resource) || ''}
+        >
+          {getCNPGDeclarativeMessage(resource) || '-'}
+        </span>
+      )
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGImageCatalogCell({ resource, column }: { resource: any; column: string }) {
+  const entries = getCNPGImageCatalogEntries(resource)
+  switch (column) {
+    case 'majors':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {entries.length === 0 ? 'none' : entries.map((e) => e.major).join(', ')}
+        </span>
+      )
+    case 'images':
+      return <span className="text-sm text-theme-text-secondary">{String(entries.length)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGObjectStoreCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGObjectStoreStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'destination':
+      // `block` is load-bearing: an inline span with `truncate` establishes no
+      // box, so the column collapses to almost nothing regardless of its width.
+      // Every sibling cell that renders a long value pairs the two.
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {getCNPGObjectStoreDestination(resource)}
+        </span>
+      )
+    case 'retention':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {getCNPGObjectStoreRetention(resource) || '-'}
+        </span>
+      )
+    case 'servers': {
+      const windows = getCNPGObjectStoreRecoveryWindows(resource)
+      if (windows.length === 0) {
+        return <span className="text-sm text-theme-text-tertiary">none</span>
+      }
+      const failing = windows.filter((w) => w.failingSinceLastSuccess).length
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {failing > 0 ? `${windows.length} (${failing} failing)` : String(windows.length)}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 export function CNPGScheduledBackupCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {

package/src/components/resources/renderers/index.ts

@@ -4,6 +4,12 @@ export * from './argo-cells'
 export * from './CertificateRenderer'
 export * from './CertificateRequestRenderer'
 export * from './certmanager-cells'
+export * from './CalicoHostEndpointRenderer'
+export * from './CalicoIPPoolRenderer'
+export * from './CalicoNetworkPolicyRenderer'
+export * from './CalicoNetworkPolicyDiagram'
+export * from './CalicoTierRenderer'
+export * from './calico-cells'
 export * from './ChallengeRenderer'
 export * from './ClusterComplianceReportRenderer'
 export * from './ClusterExternalSecretRenderer'
@@ -74,6 +80,7 @@ export * from './KyvernoPolicyShared'
 export * from './KyvernoCELPolicyRenderers'
 export * from './KyvernoExceptionRenderers'
 export * from './LeaseRenderer'
+export * from './LookupFailureNote'
 export * from './NetworkPolicyRenderer'
 export * from './NetworkPolicyDiagram'
 export * from './CiliumNetworkPolicyRenderer'
@@ -94,6 +101,7 @@ export * from './ReplicaSetRenderer'
 export * from './RoleBindingRenderer'
 export * from './RoleRenderer'
 export * from './RolloutRenderer'
+export * from './AnalysisRunRenderer'
 export * from './RuntimeClassRenderer'
 export * from './SbomReportRenderer'
 export * from './SealedSecretRenderer'
@@ -109,10 +117,12 @@ export * from './trivy-cells'
 export * from './trivy-shared'
 export * from './velero-cells'
 export * from './VeleroBackupRenderer'
+export * from './VeleroRunMessages'
 export * from './VeleroBSLRenderer'
 export * from './VeleroRestoreRenderer'
 export * from './VeleroScheduleRenderer'
 export * from './VeleroVSLRenderer'
+export * from './VeleroBackupRepositoryRenderer'
 export * from './VPARenderer'
 export * from './VulnerabilityReportRenderer'
 export * from './WebhookConfigRenderer'
@@ -160,3 +170,9 @@ export * from './ResourceSliceRenderer'
 export * from './nvidia-cells'
 export * from './NvidiaClusterPolicyRenderer'
 export * from './NvidiaDriverRenderer'
+export * from './PolicySection'
+export * from './PolicyCoverageSection'
+export * from './KyvernoGlobalContextRenderer'
+export * from './KyvernoQueueRenderers'
+export * from './CNPGObjectStoreRenderer'
+export * from './CNPGDeclarativeRenderer'

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

@@ -2,12 +2,23 @@
 
 import { clsx } from 'clsx'
 import {
+  getPolicyReportScope,
   getPolicyReportStatus,
   getPolicyReportSummary,
   getKyvernoPolicyStatus,
   getKyvernoPolicyAction,
   getKyvernoPolicyRuleCount,
 } from '../resource-utils-kyverno'
+import {
+  getKyvernoRequestState,
+  getKyvernoRequestType,
+  getKyvernoRequestPolicy,
+  getKyvernoRequestTriggers,
+  getKyvernoReportStatus,
+  getKyvernoReportSubject,
+  getKyvernoReportSource,
+  getKyvernoReportSummary,
+} from '../resource-utils-kyverno-queue'
 
 export function PolicyReportCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
@@ -19,6 +30,14 @@ export function PolicyReportCell({ resource, column }: { resource: any; column:
         </span>
       )
     }
+    // Kyverno names a per-resource report after the subject's UID, so the Name
+    // column reads as a bare UUID. Without the subject the whole table is
+    // unidentifiable rows with counts beside them — you cannot tell which of
+    // your workloads a failing report belongs to without opening every one.
+    case 'scope': {
+      const scope = getPolicyReportScope(resource)
+      return <span className="truncate text-theme-text-primary" title={scope}>{scope}</span>
+    }
     case 'pass': {
       const summary = getPolicyReportSummary(resource)
       return <span className={clsx('text-sm', summary.pass > 0 ? 'text-green-400' : 'text-theme-text-tertiary')}>{summary.pass}</span>
@@ -83,3 +102,74 @@ export function ClusterPolicyCell({ resource, column }: { resource: any; column:
   // Same rendering logic as KyvernoPolicy
   return <KyvernoPolicyCell resource={resource} column={column} />
 }
+
+// ============================================================================
+// UpdateRequest / EphemeralReport
+// ============================================================================
+
+export function KyvernoUpdateRequestCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const state = getKyvernoRequestState(resource)
+      return <span className={clsx('badge', state.color)}>{state.text}</span>
+    }
+    case 'type': {
+      const t = getKyvernoRequestType(resource)
+      return <span className="text-sm text-theme-text-secondary">{t === 'unknown' ? '-' : t}</span>
+    }
+    case 'policy':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={getKyvernoRequestPolicy(resource)}>
+          {getKyvernoRequestPolicy(resource) || '-'}
+        </span>
+      )
+    case 'triggers': {
+      // A generate request carries every trigger it was queued for, so the row
+      // has to say "and N more" rather than pretend it is about one resource.
+      const triggers = getKyvernoRequestTriggers(resource)
+      if (triggers.length === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
+      const first = triggers[0]
+      const label = `${first.kind ?? ''}/${first.name ?? ''}`
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={label}>
+          {triggers.length === 1 ? label : `${label} +${triggers.length - 1}`}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function KyvernoEphemeralReportCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKyvernoReportStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'subject': {
+      const s = getKyvernoReportSubject(resource)
+      if (!s?.kind) return <span className="text-sm text-theme-text-tertiary">-</span>
+      const label = s.name ? `${s.kind}/${s.name}` : `${s.kind} (deleted)`
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={label}>
+          {label}
+        </span>
+      )
+    }
+    case 'source':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {(getKyvernoReportSource(resource) || '-').replace(/-/g, ' ')}
+        </span>
+      )
+    case 'results':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {String(getKyvernoReportSummary(resource).total)}
+        </span>
+      )
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

package/src/components/resources/renderers/network-policy-peer-styles.ts

@@ -0,0 +1,25 @@
+export type NetworkPolicyPeerType =
+  | "pod"
+  | "namespace"
+  | "cidr"
+  | "all"
+  | "deny"
+  | "combined";
+
+export const NETWORK_POLICY_PEER_STYLES = {
+  pod: "border-emerald-500/30 bg-emerald-500/8",
+  namespace: "border-sky-500/30 bg-sky-500/8",
+  cidr: "border-amber-500/30 bg-amber-500/8",
+  combined: "border-emerald-500/30 bg-emerald-500/8",
+  all: "border-theme-border bg-theme-elevated/50",
+  deny: "border-red-500/30 bg-red-500/8",
+} as const satisfies Record<NetworkPolicyPeerType, string>;
+
+export const NETWORK_POLICY_PEER_DOTS = {
+  pod: "bg-emerald-500",
+  namespace: "bg-sky-500",
+  cidr: "bg-amber-500",
+  combined: "bg-emerald-500",
+  all: "bg-theme-text-tertiary",
+  deny: "bg-red-500",
+} as const satisfies Record<NetworkPolicyPeerType, string>;

package/src/components/resources/renderers/policyreport-subject.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { PolicyReportCell } from './kyverno-cells'
+import { getPolicyReportScope } from '../resource-utils-kyverno'
+
+// Kyverno names each per-resource report after the subject's UID, so the Name
+// column is a bare UUID. Without the subject, the table is a list of
+// unidentifiable rows with counts beside them.
+describe('PolicyReport subject column', () => {
+  const report = {
+    metadata: { name: '4c1d2f8a-91e3-4b7c-9f11-2a6e0c5d7b83', namespace: 'payments' },
+    scope: { kind: 'Deployment', namespace: 'payments', name: 'checkout-api' },
+  }
+
+  it('names the workload the report is about', () => {
+    const html = renderToString(<PolicyReportCell resource={report} column="scope" />)
+    expect(html).toContain('checkout-api')
+    expect(html).toContain('Deployment')
+  })
+
+  it('degrades to a dash rather than an empty cell when there is no subject', () => {
+    // Cluster-scoped reports and some producers omit scope entirely.
+    expect(getPolicyReportScope({ metadata: { name: 'x' } })).toBe('-')
+    const html = renderToString(<PolicyReportCell resource={{ metadata: { name: 'x' } }} column="scope" />)
+    expect(html).toContain('-')
+  })
+})

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

@@ -16,6 +16,7 @@ import {
   getRestoreIncludedNamespaces,
   getRestoreDuration,
   getRestoreErrors,
+  getRestoreWarnings,
   getScheduleStatus,
   getSchedulePaused,
   getScheduleCronInfo,
@@ -37,6 +38,10 @@ import {
 // 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.
+// Foreground colours here carry a light counterpart as well as the dark one.
+// A bare `text-*-400` is tuned for the dark ground and washes out on the light
+// one — the same defect rbac-badges.ts was created to fix, and these cells sit
+// in a table next to badges that already do this correctly.
 export function VeleroPhaseValue({
   status,
   phase,
@@ -84,7 +89,7 @@ export function BackupCell({ resource, column }: { resource: any; column: string
     case 'expiry': {
       const exp = getBackupExpiry(resource)
       const isExpired = exp === 'Expired'
-      return <span className={clsx('text-sm', isExpired ? 'text-red-400' : 'text-theme-text-secondary')}>{exp}</span>
+      return <span className={clsx('text-sm', isExpired ? 'text-red-600 dark:text-red-400' : 'text-theme-text-secondary')}>{exp}</span>
     }
     case 'errors': {
       const errors = getBackupErrors(resource)
@@ -94,9 +99,9 @@ export function BackupCell({ resource, column }: { resource: any; column: string
       }
       return (
         <span className="text-sm">
-          {errors > 0 && <span className="text-red-400">{errors}E</span>}
+          {errors > 0 && <span className="text-red-600 dark:text-red-400">{errors}E</span>}
           {errors > 0 && warnings > 0 && <span className="text-theme-text-tertiary"> / </span>}
-          {warnings > 0 && <span className="text-yellow-400">{warnings}W</span>}
+          {warnings > 0 && <span className="text-amber-600 dark:text-amber-400">{warnings}W</span>}
         </span>
       )
     }
@@ -128,11 +133,21 @@ export function RestoreCell({ resource, column }: { resource: any; column: strin
       return <span className="text-sm text-theme-text-secondary">{dur}</span>
     }
     case 'errors': {
+      // Errors AND warnings, the same shape the Backup column uses. A restore
+      // that reported only warnings showed "-" here while carrying a non-zero
+      // count on the object, which is the row a reader scans to decide whether
+      // the restore is worth opening.
       const errors = getRestoreErrors(resource)
-      if (errors === 0) {
+      const warnings = getRestoreWarnings(resource)
+      if (errors === 0 && warnings === 0) {
         return <span className="text-sm text-theme-text-tertiary">-</span>
       }
-      return <span className="text-sm text-red-400">{errors}</span>
+      return (
+        <span className="text-sm flex gap-1.5">
+          {errors > 0 && <span className="text-red-600 dark:text-red-400">{errors}E</span>}
+          {warnings > 0 && <span className="text-amber-600 dark:text-amber-400">{warnings}W</span>}
+        </span>
+      )
     }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>
@@ -157,7 +172,14 @@ export function ScheduleCell({ resource, column }: { resource: any; column: stri
           </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" />
+              <>
+                <Pause className="w-3 h-3 shrink-0 text-amber-600 dark:text-amber-400" aria-hidden="true" />
+                {/* The badge beside this says "Rejected", so without a label the
+                    row reads as a schedule that is merely broken rather than one
+                    that is also switched off — and the tooltip carrying that
+                    second fact needs a pointer to reach. */}
+                <span className="sr-only">Also paused — this schedule will not run until it is resumed</span>
+              </>
             </Tooltip>
           )}
         </span>
@@ -271,7 +293,7 @@ export function BackupStorageLocationCell({ resource, column }: { resource: any;
     }
     case 'default': {
       const isDefault = getBSLDefault(resource)
-      return <span className={clsx('text-sm', isDefault ? 'text-blue-400' : 'text-theme-text-tertiary')}>{isDefault ? 'Yes' : '-'}</span>
+      return <span className={clsx('text-sm', isDefault ? 'text-blue-600 dark:text-blue-400' : 'text-theme-text-tertiary')}>{isDefault ? 'Yes' : '-'}</span>
     }
     case 'lastValidation': {
       const lastVal = getBSLLastValidation(resource)