@skyhook-io/k8s-ui 1.12.0 → 1.13.3

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

@@ -1,5 +1,6 @@
 import { Clock, Database } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { CronValue } from '../../ui/ScheduleValue'
 import {
   getCNPGScheduledBackupCluster,
   getCNPGScheduleCron,
@@ -8,7 +9,9 @@ import {
   getCNPGScheduledBackupNextSchedule,
   getCNPGScheduledBackupIsSuspended,
   getCNPGScheduledBackupIsImmediate,
+  getCNPGBackupPlugin,
   getCNPGScheduledBackupOwnerRef,
+  CNPG_BARMAN_OBJECTSTORE_GROUP,
 } from '../resource-utils-cnpg'
 
 interface CNPGScheduledBackupRendererProps {
@@ -19,6 +22,7 @@ interface CNPGScheduledBackupRendererProps {
 export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledBackupRendererProps) {
   const isSuspended = getCNPGScheduledBackupIsSuspended(data)
   const clusterName = getCNPGScheduledBackupCluster(data)
+  const schedulePlugin = getCNPGBackupPlugin(data)
 
   return (
     <>
@@ -34,7 +38,7 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
       {/* Schedule */}
       <Section title="Schedule" icon={Clock} defaultExpanded>
         <PropertyList>
-          <Property label="Cron Expression" value={getCNPGScheduleCron(data)} />
+          <Property label="Cron Expression" value={<CronValue cron={getCNPGScheduleCron(data)} dialect="seconds" />} />
           <Property label="Last Schedule" value={getCNPGScheduledBackupLastSchedule(data)} />
           <Property label="Next Schedule" value={getCNPGScheduledBackupNextSchedule(data)} />
           <Property label="Suspended" value={isSuspended ? 'Yes' : 'No'} />
@@ -60,6 +64,24 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
             return clusterName
           })()} />
           <Property label="Method" value={getCNPGScheduledBackupMethod(data)} />
+          {/* Under the plugin method the destination lives on an ObjectStore in
+              another API group, so naming it is the only route from here to
+              where these backups will actually land. */}
+          {schedulePlugin && <Property label="Plugin" value={schedulePlugin.name} />}
+          {schedulePlugin?.parameters?.barmanObjectName && (
+            <Property
+              label="Object Store"
+              value={
+                <ResourceLink
+                  name={schedulePlugin.parameters.barmanObjectName}
+                  kind="objectstores"
+                  group={CNPG_BARMAN_OBJECTSTORE_GROUP}
+                  namespace={data.metadata?.namespace || ''}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
           <Property label="Owner Reference" value={getCNPGScheduledBackupOwnerRef(data)} />
         </PropertyList>
       </Section>

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

@@ -0,0 +1,27 @@
+import { formatAge } from '../resource-utils'
+
+/**
+ * A recovery point, stated absolutely with the interval beside it.
+ *
+ * "1d ago" is the wrong unit for this question on its own. An RPO conversation
+ * needs a timestamp — and "Last Successful Backup 1d ago" next to "Last Failed
+ * Attempt 1d ago" is the same string for events a week apart in the failure
+ * history, which is precisely when you are reading this screen. Same treatment
+ * the certificate rows already use.
+ *
+ * Shared by the Cluster and ObjectStore pages: the same recovery point is
+ * reachable from both depending on whether backups run through the plugin, and
+ * the two must not describe it differently.
+ */
+export function RecoveryTime({ at }: { at: string }) {
+  const d = new Date(at)
+  if (Number.isNaN(d.getTime())) return <>{at}</>
+  return (
+    <span className="inline-flex items-baseline gap-2 min-w-0">
+      <span>{d.toISOString().replace('T', ' ').replace(/\.\d+Z$/, ' UTC')}</span>
+      {/* One interpolation, so the age and its unit stay a single text node
+          rather than being split by a renderer comment marker. */}
+      <span className="text-xs text-theme-text-tertiary shrink-0">{`${formatAge(at)} ago`}</span>
+    </span>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { Network } from 'lucide-react'
+import { Badge } from '../../ui/Badge'
+import { ResourceLink, Section } from '../../ui/drawer-components'
+
+interface CalicoHostEndpointRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CalicoHostEndpointRenderer({ data, onNavigate }: CalicoHostEndpointRendererProps) {
+  const spec = data?.spec ?? {}
+  const expectedIPs: string[] = spec.expectedIPs ?? []
+  const profiles: string[] = spec.profiles ?? []
+  const ports: Array<{ name?: string; port?: number; protocol?: string }> = spec.ports ?? []
+
+  return (
+    <Section title="Host Endpoint" icon={Network}>
+      <div className="card-inner text-sm space-y-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="text-xs text-theme-text-tertiary mb-0.5">Node</div>
+            <div className="font-medium text-theme-text-primary break-all">
+              {spec.node ? <ResourceLink name={spec.node} kind="nodes" namespace="" onNavigate={onNavigate} /> : 'Not specified'}
+            </div>
+          </div>
+          {spec.interfaceName && (
+            <div className="shrink-0 text-right">
+              <div className="text-xs text-theme-text-tertiary mb-0.5">Interface Name</div>
+              <Badge tone="structural" size="sm" className="font-mono">{spec.interfaceName}</Badge>
+            </div>
+          )}
+        </div>
+
+        {expectedIPs.length > 0 && (
+          <div className="border-t border-theme-border-subtle pt-3">
+            <div className="text-xs text-theme-text-tertiary mb-1.5">Expected IPs</div>
+            <div className="flex flex-wrap gap-1">
+              {expectedIPs.map((ip) => (
+                <Badge key={ip} tone="structural" size="sm" className="font-mono">{ip}</Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {profiles.length > 0 && (
+          <div className="border-t border-theme-border-subtle pt-3">
+            <div className="text-xs text-theme-text-tertiary mb-1.5">Profiles</div>
+            <div className="flex flex-wrap gap-1">
+              {profiles.map((profile) => (
+                <Badge key={profile} tone="structural" size="sm">{profile}</Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {ports.length > 0 && (
+          <div className="border-t border-theme-border-subtle pt-3">
+            <div className="text-xs text-theme-text-tertiary mb-1.5">Named Ports</div>
+            <div className="flex flex-wrap gap-1">
+              {ports.map((port, index) => (
+                <Badge key={`${port.name}-${port.protocol}-${port.port}-${index}`} tone="structural" size="sm" className="font-mono">
+                  {`${port.name ? `${port.name}: ` : ''}${port.protocol}/${port.port}`}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Section>
+  )
+}

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

@@ -0,0 +1,32 @@
+import { Network } from 'lucide-react'
+import { Property, PropertyList, Section } from '../../ui/drawer-components'
+import {
+  getCalicoIPPoolAllowedUses,
+  getCalicoIPPoolBlockSize,
+} from '../resource-utils-calico'
+
+interface CalicoIPPoolRendererProps {
+  data: any
+}
+
+export function CalicoIPPoolRenderer({ data }: CalicoIPPoolRendererProps) {
+  const spec = data?.spec ?? {}
+
+  return (
+    <Section title="IP Pool" icon={Network}>
+      <PropertyList>
+        <Property label="Allowed Uses" value={getCalicoIPPoolAllowedUses(data)} />
+        <Property label="Assignment Mode" value={spec.assignmentMode ?? 'Automatic'} />
+        <Property label="Block Size" value={getCalicoIPPoolBlockSize(data)} />
+        <Property label="CIDR" value={spec.cidr} />
+        <Property label="IP-in-IP Mode" value={spec.ipipMode ?? 'Never'} />
+        <Property label="VXLAN Mode" value={spec.vxlanMode ?? 'Never'} />
+        <Property label="NAT Outgoing" value={spec.natOutgoing ? 'Yes' : 'No'} />
+        <Property label="Disabled" value={spec.disabled ? 'Yes' : 'No'} />
+        <Property label="BGP Export Disabled" value={spec.disableBGPExport ? 'Yes' : 'No'} />
+        <Property label="Node Selector" value={spec.nodeSelector ?? 'all()'} />
+        <Property label="Namespace Selector" value={spec.namespaceSelector} />
+      </PropertyList>
+    </Section>
+  )
+}

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

@@ -0,0 +1,205 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CalicoNetworkPolicyDiagram } from './CalicoNetworkPolicyDiagram'
+
+describe('CalicoNetworkPolicyDiagram', () => {
+  it('shows ordered actions and Calico match fields in both directions', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        spec={{
+          selector: "app == 'api'",
+          namespaceSelector: "project == 'prod'",
+          serviceAccountSelector: "role == 'api'",
+          types: ['Ingress', 'Egress'],
+          ingress: [
+            {
+              action: 'Allow',
+              protocol: 'TCP',
+              source: {
+                selector: "role == 'frontend'",
+                nets: ['10.0.0.0/8'],
+                serviceAccounts: { names: ['frontend'] },
+              },
+              destination: { ports: [80] },
+            },
+            { action: 'Deny', source: { notSelector: "app == 'debug'" } },
+          ],
+          egress: [
+            {
+              action: 'Log',
+              protocol: 'UDP',
+              source: { serviceAccounts: { selector: "role == 'api'" } },
+              destination: {
+                selector: "app == 'db'",
+                nets: ['192.168.0.0/16'],
+                ports: [{ port: 5432, endPort: 5433 }],
+              },
+            },
+            { action: 'Pass', destination: { notNets: ['0.0.0.0/0'] } },
+          ],
+        }}
+      />,
+    )
+
+    for (const value of [
+      'app == &#x27;api&#x27;',
+      'role == &#x27;api&#x27;',
+      'Ingress',
+      'Egress',
+      'Deny',
+      'Log',
+      'Pass',
+      'TCP',
+      'UDP',
+      'role == &#x27;frontend&#x27;',
+      '10.0.0.0/8',
+      'frontend',
+      'TCP/80',
+      'app == &#x27;db&#x27;',
+      '192.168.0.0/16',
+      'UDP/5432-5433',
+      'Not Nets',
+      '0.0.0.0/0',
+    ]) {
+      expect(html).toContain(value)
+    }
+
+    expect(html).not.toContain('Policy target')
+    expect(html).not.toContain('Source')
+    expect(html).not.toContain('Destination')
+    expect(html).not.toContain('Rule 1')
+    expect(html).toContain('Allow')
+    expect(html).not.toMatch(/badge-sm[^>]*>TCP<\/span>/)
+    expect(html).not.toMatch(/badge-sm[^>]*>UDP<\/span>/)
+    expect(html).toContain('text-warning-text')
+    expect(html).toContain('line-through')
+  })
+
+  it('keeps port constraints readable and distinguishes source exclusions', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        spec={{
+          types: ['Egress'],
+          egress: [
+            {
+              protocol: 'UDP',
+              source: {
+                ports: [8080],
+                notPorts: [{ protocol: 'UDP', port: 5353 }],
+              },
+              destination: {
+                ports: [
+                  { protocol: 'TCP', port: 8080 },
+                  { protocol: 'TCP', port: 8443 },
+                ],
+                notPorts: [443],
+              },
+            },
+          ],
+        }}
+      />,
+    )
+
+    for (const value of [
+      'src:UDP/8080',
+      'src:!UDP/5353',
+      'TCP/8080',
+      'TCP/8443',
+      '!UDP/443',
+    ]) {
+      expect(html).toContain(value)
+    }
+    expect(html).not.toContain('dst:')
+    expect(html).not.toContain('max-w-14')
+    expect(html).not.toContain('truncate font-mono text-[8px]')
+    expect(html).not.toMatch(/badge-sm[^>]*>UDP<\/span>/)
+  })
+
+  it('renders protocol-only rules as wildcard arrow labels', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        spec={{
+          types: ['Ingress'],
+          ingress: [
+            {
+              action: 'Deny',
+              protocol: 'TCP',
+              notProtocol: 'UDP',
+              source: { selector: "app == 'client'" },
+            },
+          ],
+        }}
+      />,
+    )
+
+    expect(html).toContain('TCP/*')
+    expect(html).not.toMatch(/badge-sm[^>]*>TCP<\/span>/)
+    expect(html).toContain('not')
+    expect(html).toContain('UDP')
+  })
+
+  it('uses native peer colors with stable match priority', () => {
+    const renderDestination = (destination: any) =>
+      renderToString(
+        <CalicoNetworkPolicyDiagram
+          spec={{
+            selector: "app == 'target'",
+            types: ['Egress'],
+            egress: [{ destination }],
+          }}
+        />,
+      )
+
+    const combined = renderDestination({
+      selector: "app == 'workload'",
+      namespaceSelector: "team == 'prod'",
+      nets: ['10.0.0.0/8'],
+    })
+    const namespace = renderDestination({
+      namespaceSelector: "team == 'prod'",
+    })
+    const network = renderDestination({ nets: ['10.0.0.0/8'] })
+    const serviceAccount = renderDestination({
+      serviceAccountSelector: "role == 'api'",
+    })
+    const unknown = renderDestination({ unsupportedMatch: 'value' })
+
+    expect(combined).toContain('border-emerald-500/30 bg-emerald-500/8')
+    expect(combined).not.toContain('border-sky-500/30 bg-sky-500/8')
+    expect(combined).not.toContain('border-amber-500/30 bg-amber-500/8')
+    expect(namespace).toContain('border-sky-500/30 bg-sky-500/8')
+    expect(network).toContain('border-amber-500/30 bg-amber-500/8')
+    expect(serviceAccount).toContain('border-emerald-500/30 bg-emerald-500/8')
+    expect(unknown).toContain('border-theme-border bg-theme-elevated/50')
+    expect(combined).toContain('border-indigo-500/30 bg-indigo-500/8')
+  })
+
+  it('does not imply deny-all when a policy has no explicit rules', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram spec={{ types: ['Ingress'], ingress: [] }} />,
+    )
+
+    expect(html).toContain('No explicit')
+    expect(html).toContain('ingress')
+    expect(html).not.toContain('Deny all')
+  })
+
+  it('renders staged rules as non-enforced dashed paths', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        staged
+        spec={{
+          selector: "app == 'api'",
+          types: ['Ingress'],
+          ingress: [{ action: 'Allow', source: {} }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Staged preview')
+    expect(html).toContain('not enforced')
+    expect(html).toContain('stroke-dasharray="4 3"')
+    expect(html).toContain('Allow')
+    expect(html).not.toContain('Rule 1')
+  })
+})