@skyhook-io/k8s-ui 1.12.0 → 1.13.3

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

@@ -1,5 +1,5 @@
 import { ArchiveRestore, Filter } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getRestoreStatus,
   getRestoreBackupName,
@@ -17,13 +17,20 @@ import {
   isBackupPartialFailurePhase,
 } from '../resource-utils-velero'
 import { VeleroPhaseValue } from './velero-cells'
+import { veleroPhaseLabel } from '../resource-utils-velero'
 import { formatAge } from '../resource-utils'
+import { VeleroRunMessages, type VeleroRunMessagesFetch } from './VeleroRunMessages'
 
 interface VeleroRestoreRendererProps {
   data: any
+  /** Wired by the host, which owns the fetch. Optional: a consumer that does
+   *  not wire it gets the counts on their own, with no button. */
+  messages?: VeleroRunMessagesFetch
+  /** The backup a restore came from is the one thing every reader wants next. */
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
-export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
+export function VeleroRestoreRenderer({ data, messages, onNavigate }: VeleroRestoreRendererProps) {
   const status = data.status || {}
   const conditions = status.conditions || []
 
@@ -79,7 +86,9 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
         <AlertBanner
           variant="warning"
           title={`${warnings} Warning(s)`}
-          message={`Restore completed with ${warnings} warning(s).`}
+          message={phase === 'Completed'
+            ? `This restore completed, with ${warnings} warning(s).`
+            : `This restore has reported ${warnings} warning(s) so far. It is ${veleroPhaseLabel(phase).toLowerCase()}, so this is not a final count.`}
         />
       )}
 
@@ -89,7 +98,15 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
           <Property label="Phase" value={
             <VeleroPhaseValue status={restoreStatus} phase={phase} />
           } />
-          <Property label="Backup" value={getRestoreBackupName(data)} />
+          <Property label="Backup" value={
+            <ResourceLink
+              name={getRestoreBackupName(data)}
+              kind="Backup"
+              namespace={data?.metadata?.namespace ?? ''}
+              group="velero.io"
+              onNavigate={onNavigate}
+            />
+          } />
           {status.startTimestamp && (
             <Property label="Started" value={formatAge(status.startTimestamp) + ' ago'} />
           )}
@@ -108,6 +125,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
               : '0'
           } />
         </PropertyList>
+        {messages && <VeleroRunMessages {...messages} errors={errors} warnings={warnings} />}
       </Section>
 
       {/* Progress section (if in progress) */}

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

@@ -0,0 +1,152 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { VeleroRunMessages } from './VeleroRunMessages'
+
+/**
+ * "Warnings: 2" was a dead end. The number is on the Backup; the text is in a
+ * results file in object storage that only Velero's controller can hand out a
+ * link to — so the page could tell an operator something was wrong and nothing
+ * about what.
+ *
+ * The two failures are the interesting part and both are ordinary: the
+ * controller is not running, or the storage the link points at is somewhere this
+ * process cannot reach. Neither may be swallowed, because a button that does
+ * nothing is worse than the bare number it replaced.
+ */
+describe('the messages behind a run’s counts', () => {
+  it('offers to fetch them when a run reported any', () => {
+    const html = renderToString(<VeleroRunMessages errors={0} warnings={2} onFetch={() => {}} />)
+    expect(html).toContain('Show the messages')
+    // Never "all N": the server caps the list, so the label must not promise a
+    // number the fetch may not deliver.
+    expect(html).not.toContain('all 2')
+    expect(html).toContain('Velero has to be asked')
+  })
+
+  it('says nothing at all for a clean run', () => {
+    // No button, no explanation, no row: a run that reported nothing has nothing
+    // to explain, and an empty section would imply otherwise.
+    expect(renderToString(<VeleroRunMessages errors={0} warnings={0} onFetch={() => {}} />)).toBe('')
+  })
+
+  it('names each message’s scope alongside it', () => {
+    const html = renderToString(
+      <VeleroRunMessages
+        errors={0}
+        warnings={1}
+        messages={{
+          errors: [],
+          warnings: [{ scope: 'demo-app', message: 'could not restore ConfigMap' }],
+        }}
+      />,
+    )
+    expect(html).toContain('demo-app')
+    expect(html).toContain('could not restore ConfigMap')
+    // Scope and message are separate spans with only a margin between them, so
+    // without a real separator a screen reader reads "demo-appcould not
+    // restore" — correct on screen, wrong to anyone listening to it.
+    expect(html).not.toMatch(/demo-app<\/span><span[^>]*>could not restore/)
+    // The offer is gone once they are on screen.
+    expect(html).not.toContain('Velero has to be asked')
+  })
+
+  // The note itself is the host's to build — a denial and a fault read
+  // differently, and only the host knows which it got. This asserts the slot is
+  // rendered, not what it says.
+  it('shows why the fetch failed instead of an empty list', () => {
+    const html = renderToString(
+      <VeleroRunMessages
+        errors={0}
+        warnings={2}
+        lookupNote={<span>Velero did not answer — check that it is running.</span>}
+        onFetch={() => {}}
+      />,
+    )
+    expect(html).toContain('check that it is running')
+    // And the offer stays, so a failed fetch is retryable.
+    expect(html).toContain('Show the messages')
+  })
+
+  // The counts come from the CR and the messages from a file written separately.
+  // They can disagree, and saying so is better than rendering nothing under a
+  // non-zero number and letting it read as a broken button.
+  it('says so when the counts and the file disagree', () => {
+    const html = renderToString(
+      <VeleroRunMessages errors={0} warnings={2} messages={{ errors: [], warnings: [] }} />,
+    )
+    expect(html).toContain('results file it returned holds none')
+  })
+
+  // The counts sit two lines above this list. They come from the object and the
+  // messages come from a file written separately, so a run can report two and
+  // return one — and a list of one under "Warnings: 2" is a number the reader
+  // cannot reconcile with what is beside it.
+  it('says so when it returned fewer than the count promised', () => {
+    const html = renderToString(
+      <VeleroRunMessages
+        errors={0}
+        warnings={2}
+        messages={{ errors: [], warnings: [{ scope: 'velero', message: 'the only one' }] }}
+      />,
+    )
+    expect(html).toContain('reported 2 on this run and returned 1')
+  })
+
+  // Truncation is a shortfall this already explains on its own line; saying it
+  // twice, in two different vocabularies, reads as two different problems.
+  it('does not also report a mismatch when the list was capped', () => {
+    const html = renderToString(
+      <VeleroRunMessages
+        errors={0}
+        warnings={9000}
+        messages={{
+          errors: [],
+          warnings: [{ scope: 'velero', message: 'one of very many' }],
+          truncated: true,
+        }}
+      />,
+    )
+    expect(html).not.toContain('and returned')
+    expect(html).toContain('Only the first')
+  })
+
+  it('admits when the list was capped', () => {
+    const html = renderToString(
+      <VeleroRunMessages
+        errors={0}
+        warnings={9000}
+        messages={{
+          errors: [],
+          warnings: [{ scope: 'velero', message: 'one of very many' }],
+          truncated: true,
+        }}
+      />,
+    )
+    expect(html).toContain('Only the first')
+  })
+})
+
+/**
+ * An error and a warning were separated by an icon and a colour, and by nothing
+ * else — so to anyone not seeing them, the distinction that decides whether to
+ * act simply was not there.
+ */
+describe('telling an error from a warning without seeing it', () => {
+  const both = {
+    errors: [{ scope: 'velero', message: 'the failure' }],
+    warnings: [{ scope: 'demo-app', message: 'the caution' }],
+  }
+
+  it('names the severity in text', () => {
+    const html = renderToString(<VeleroRunMessages errors={1} warnings={1} messages={both} />)
+    expect(html).toContain('Error: ')
+    expect(html).toContain('Warning: ')
+  })
+
+  it('announces the region so a late arrival is not silent', () => {
+    const html = renderToString(
+      <VeleroRunMessages errors={1} warnings={0} messages={{ errors: both.errors, warnings: [] }} />,
+    )
+    expect(html).toContain('aria-live')
+  })
+})

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

@@ -0,0 +1,139 @@
+import { AlertTriangle, XCircle, Loader2 } from 'lucide-react'
+import type { VeleroMessage } from '../../../types/policy'
+
+/**
+ * The messages behind a run's error and warning counts.
+ *
+ * A Backup that reports "Warnings: 2" carries the number and nothing else — the
+ * text is in a results file in object storage, and only Velero's controller can
+ * hand out a link to it. So the counts rendered as two coloured digits with
+ * nowhere to go: enough to worry an operator, not enough to act on.
+ *
+ * Fetched on a click rather than on page load. Reading them asks Velero to
+ * create a DownloadRequest and then pulls an object out of storage, which is
+ * real work to do on every drawer open, and the counts already answer "is
+ * anything wrong". Same bargain as the network trace's probes.
+ *
+ * Both failure modes are rendered here rather than swallowed, because both are
+ * ordinary and each points somewhere different: a controller that is not running
+ * (nothing serves the request) and storage this process cannot reach (the link
+ * resolves to somewhere only the cluster can see).
+ */
+
+/**
+ * What the host supplies: the fetch and its outcome. Deliberately separate from
+ * the counts, which the renderer already has from the object itself — a host
+ * that had to pass those too would be restating data it was handed.
+ */
+export interface VeleroRunMessagesFetch {
+  /** Undefined until fetched. */
+  messages?: { warnings: VeleroMessage[]; errors: VeleroMessage[]; truncated?: boolean }
+  loading?: boolean
+  /** Rendered by the host when the fetch failed, so a denial is not silence and
+   *  is not dressed up as a fault. Same slot the storage-location panel uses for
+   *  its lookup, so both failures in this integration read the same way. */
+  lookupNote?: React.ReactNode
+  onFetch?: () => void
+}
+
+export interface VeleroRunMessagesProps extends VeleroRunMessagesFetch {
+  errors: number
+  warnings: number
+}
+
+export function VeleroRunMessages({
+  errors,
+  warnings,
+  messages,
+  loading,
+  lookupNote,
+  onFetch,
+}: VeleroRunMessagesProps) {
+  const total = errors + warnings
+  // Nothing to explain, and no button for a run that reported nothing.
+  if (total === 0) return null
+
+  const rows = messages ? [...messages.errors, ...messages.warnings] : []
+  const severityOf = (i: number) => (messages && i < messages.errors.length ? 'error' : 'warning')
+
+  return (
+    // aria-live so the outcome reaches a screen reader: this region swaps a
+    // button for a list (or a failure) with no navigation, and the same
+    // treatment PaneLoader and BoardSkeleton already use for content that
+    // arrives late.
+    <div className="mt-2 space-y-2" aria-live="polite">
+      {!messages && (
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onFetch}
+            disabled={loading || !onFetch}
+            className="btn-brand text-xs px-2 py-1 disabled:opacity-50"
+          >
+            {loading ? (
+              <span className="flex items-center gap-1.5">
+                <Loader2 className="w-3 h-3 animate-spin" />
+                Asking Velero…
+              </span>
+            ) : (
+              // Not "all N": the server caps what it returns, so a run with
+              // thousands of them would have the button promise more than the
+              // fetch can deliver. The counts are on the two lines above.
+              total === 1 ? 'Show the message' : 'Show the messages'
+            )}
+          </button>
+          <span className="text-xs text-theme-text-tertiary">
+            Not stored on this object — Velero has to be asked for them.
+          </span>
+        </div>
+      )}
+
+      {lookupNote}
+
+      {/* The count comes from the object; the messages come from a file written
+          separately, so they can disagree — and the counts are rendered two
+          lines above this list. A list of one under "Warnings: 2" is the same
+          defect as any other number that cannot be reconciled with what is
+          beside it. Truncation is excluded: it has its own line below. */}
+      {messages && !messages.truncated && rows.length !== total && (
+        <div className="text-xs text-theme-text-tertiary">
+          {rows.length === 0
+            ? `Velero reported ${total} ${total === 1 ? 'message' : 'messages'} on this run, but the results file it returned holds none.`
+            : `Velero reported ${total} on this run and returned ${rows.length}.`}
+        </div>
+      )}
+
+      {messages && rows.length > 0 && (
+        <ul className="space-y-1">
+          {rows.map((m, i) => (
+            <li key={`${m.scope}-${i}`} className="flex items-start gap-2 text-xs">
+              {severityOf(i) === 'error' ? (
+                <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0 text-red-500 dark:text-red-400" aria-hidden />
+              ) : (
+                <AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0 text-amber-500 dark:text-amber-400" aria-hidden />
+              )}
+              {/* The icon and its colour were the only thing separating an error
+                  from a warning, which is the distinction that decides whether
+                  anyone acts. Said in text for anyone not seeing the icon. */}
+              <span className="sr-only">{severityOf(i) === 'error' ? 'Error: ' : 'Warning: '}</span>
+              <div className="min-w-0">
+                {/* The separator is a real text node, not just the margin: to a
+                    screen reader two adjacent spans run together, and this read
+                    as "clusterfailed to list stub VolumeGroupSnapshotContents". */}
+                <span className="text-theme-text-tertiary font-mono">{m.scope}</span>
+                <span className="sr-only">: </span>
+                <span className="text-theme-text-secondary break-words ml-1.5">{m.message}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {messages?.truncated && (
+        <div className="text-xs text-theme-text-tertiary">
+          Only the first {rows.length} are shown.
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { VeleroScheduleRenderer } from './VeleroScheduleRenderer'
+import { ScheduleCell } from './velero-cells'
+
+const schedule = (over: Record<string, unknown> = {}) => ({
+  metadata: { name: 'nightly', namespace: 'velero' },
+  spec: {
+    schedule: '0 1 * * *',
+    paused: false,
+    template: { storageLocation: 'default', ttl: '720h0m0s' },
+    ...(over.spec as object),
+  },
+  status: { phase: 'Enabled', ...(over.status as object) },
+})
+
+/**
+ * A schedule is the only Velero object that describes work that has not happened
+ * yet, so every sentence on this page is a prediction. Velero does not
+ * re-validate a paused schedule, which bounds what those predictions may say.
+ */
+describe('what a schedule promises', () => {
+  it('says a paused schedule creates nothing', () => {
+    const html = renderToString(
+      <VeleroScheduleRenderer data={schedule({ spec: { paused: true } })} />,
+    )
+    expect(html).toContain('No new backups will be created')
+  })
+
+  it('says an invalid active schedule is not running', () => {
+    const html = renderToString(
+      <VeleroScheduleRenderer
+        data={schedule({ status: { phase: 'FailedValidation', validationErrors: ['invalid cron'] } })}
+      />,
+    )
+    expect(html).toContain('no backups are being created')
+    expect(html).toContain('invalid cron')
+  })
+
+  /**
+   * The claim to guard. Velero validates a schedule when it is active and leaves
+   * the result in place while it is paused, so a validation error recorded
+   * before the pause may already be fixed in the spec. Radar's issue source
+   * deliberately declines to raise this for a paused schedule; the page saying
+   * "will not create backups when resumed until this is fixed" made the stronger
+   * claim the data does not support.
+   */
+  it('does not predict what a paused schedule will do on resume', () => {
+    const html = renderToString(
+      <VeleroScheduleRenderer
+        data={schedule({
+          spec: { paused: true },
+          status: { phase: 'FailedValidation', validationErrors: ['invalid cron'] },
+        })}
+      />,
+    )
+    expect(html).toContain('does not re-validate a paused schedule')
+    expect(html).toContain('may or may not still be true')
+    expect(html).not.toContain('when resumed until this is fixed')
+  })
+
+  // A paused schedule that is also rejected carries two independent facts, and
+  // the badge only has room for one. The rejection is the one to act on, so
+  // paused rides alongside — but it has to say so, or the row reads as a
+  // schedule that is merely broken rather than one that is also switched off.
+  it('keeps the pause visible on a row whose badge is showing the rejection', () => {
+    const html = renderToString(
+      <ScheduleCell
+        resource={schedule({
+          spec: { paused: true },
+          status: { phase: 'FailedValidation', validationErrors: ['invalid cron'] },
+        })}
+        column="status"
+      />,
+    )
+    expect(html).toContain('will not run until it is resumed')
+  })
+
+  // Every other Velero page reaches the thing it names. The template's storage
+  // location is the location every backup this schedule creates gets written to.
+  it('lets the reader reach the location its backups will be written to', () => {
+    const html = renderToString(
+      <VeleroScheduleRenderer data={schedule()} onNavigate={() => {}} />,
+    )
+    expect(html).toContain('default')
+    expect(html).toMatch(/role="button"|<button|cursor-pointer/)
+  })
+})

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

@@ -1,5 +1,5 @@
 import { Clock, Archive } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getScheduleStatus,
   getScheduleCron,
@@ -13,9 +13,11 @@ import { VeleroPhaseValue } from './velero-cells'
 
 interface VeleroScheduleRendererProps {
   data: any
+  /** The location every backup this schedule creates will be written to. */
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
-export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
+export function VeleroScheduleRenderer({ data, onNavigate }: VeleroScheduleRendererProps) {
   const status = data.status || {}
   const conditions = status.conditions || []
 
@@ -47,7 +49,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
           variant="error"
           title="Validation Failed"
           message={isPaused
-            ? 'The schedule spec failed validation. It will not create backups when resumed until this is fixed.'
+            ? 'The schedule spec failed validation. Velero recorded that while the schedule was active; it does not re-validate a paused schedule, so this may or may not still be true when it resumes.'
             : 'The schedule spec failed validation and is not active — no backups are being created.'}
           items={validationErrors.length > 0 ? validationErrors : undefined}
         />
@@ -72,7 +74,15 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
       <Section title="Backup Template" icon={Archive} defaultExpanded>
         <PropertyList>
           {template.storageLocation && (
-            <Property label="Storage Location" value={template.storageLocation} />
+            <Property label="Storage Location" value={
+              <ResourceLink
+                name={template.storageLocation}
+                kind="BackupStorageLocation"
+                namespace={data?.metadata?.namespace ?? ''}
+                group="velero.io"
+                onNavigate={onNavigate}
+              />
+            } />
           )}
           {template.ttl && (
             <Property label="TTL" value={template.ttl} />
@@ -93,7 +103,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Excluded Namespaces" value={
               <div className="flex flex-wrap gap-1">
                 {templateExcludedNs.map((ns: string) => (
-                  <span key={ns} className="badge-sm bg-red-500/10 text-red-400">{ns}</span>
+                  <span key={ns} className="badge-sm bg-red-500/10 text-red-700 dark:text-red-400">{ns}</span>
                 ))}
               </div>
             } />
@@ -111,7 +121,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Excluded Resources" value={
               <div className="flex flex-wrap gap-1">
                 {templateExcludedResources.map((r: string) => (
-                  <span key={r} className="badge-sm bg-red-500/10 text-red-400">{r}</span>
+                  <span key={r} className="badge-sm bg-red-500/10 text-red-700 dark:text-red-400">{r}</span>
                 ))}
               </div>
             } />

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>
+  )
+}