@skyhook-io/k8s-ui 1.12.0 → 1.13.3

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

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { LookupFailureNote } from './LookupFailureNote'
+
+function err(message: string, status?: number): Error {
+  return Object.assign(new Error(message), status === undefined ? {} : { status })
+}
+
+describe('LookupFailureNote', () => {
+  it('says nothing when every lookup came back', () => {
+    expect(renderToString(<LookupFailureNote errors={[]} what="x" />)).toBe('')
+    expect(renderToString(<LookupFailureNote errors={[null, undefined]} what="x" />)).toBe('')
+  })
+
+  // Being unable to see something is expected and not actionable; a fault is
+  // neither. The two must not read alike.
+  it('renders a permission answer as a calm note, not a red error', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('forbidden', 403)]} what="which clusters use this store" />,
+    )
+    expect(html).toContain('permission')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('keeps a genuine fault loud, with the reason', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('Failed to fetch')]} what="what replicates here" />,
+    )
+    expect(html).toContain('text-red-400')
+    expect(html).toContain('Failed to fetch')
+  })
+
+  // A fault is actionable and a permission answer is not, so the actionable one
+  // is the one worth showing when both happened.
+  it('prefers the fault when a lookup was both forbidden and broken', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('forbidden', 403), err('boom', 500)]} what="x" />,
+    )
+    expect(html).toContain('boom')
+    expect(html).toContain('text-red-400')
+  })
+
+  // The case that loses counts: rows are on screen, so the failure means the
+  // list is short — not that nothing was found.
+  it('says the list is incomplete rather than unchecked when rows are showing', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('boom', 500)]} what="x" incomplete />,
+    )
+    expect(html).toContain('This may be incomplete')
+    expect(html).toContain('boom')
+  })
+
+  it('does the same for a partial permission answer', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('forbidden', 403)]} what="x" incomplete />,
+    )
+    expect(html).toContain('may be incomplete')
+    expect(html).not.toContain('text-red-400')
+  })
+})

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

@@ -0,0 +1,42 @@
+import { isForbiddenError } from '../../../types/fetch-error'
+
+interface LookupFailureNoteProps {
+  /** Nulls are ignored, so callers can pass `[a.error, b.error]` from their hooks. */
+  errors: unknown[]
+  /** Tail of a sentence: "which clusters use this store". */
+  what: string
+  /** Rows are already on screen, so the failure shortened the list rather than
+   *  emptying it. */
+  incomplete?: boolean
+}
+
+/**
+ * A reverse lookup that did not come back, told apart from one that found
+ * nothing. Same split as RBACErrorSection and sharing its predicate: a denial is
+ * expected and reads calm, a fault stays loud.
+ */
+export function LookupFailureNote({ errors, what, incomplete }: LookupFailureNoteProps) {
+  const real = errors.filter(Boolean)
+  if (real.length === 0) return null
+
+  // A fault outranks a denial: only one of the two is actionable.
+  const fault = real.find((e) => !isForbiddenError(e))
+  if (!fault) {
+    return (
+      <div className="text-xs text-theme-text-tertiary">
+        {incomplete
+          ? `This may be incomplete: you don’t have permission to check ${what}.`
+          : `You don’t have permission to check ${what}.`}
+      </div>
+    )
+  }
+
+  const message = fault instanceof Error ? fault.message : String(fault)
+  return (
+    <div className="text-xs text-red-400">
+      {incomplete
+        ? `This may be incomplete — could not check ${what}: ${message}`
+        : `Could not check ${what}: ${message}`}
+    </div>
+  )
+}

package/src/components/resources/renderers/NamespaceRenderer.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { quotaUsageRatio } from './NamespaceRenderer'
+
+describe('quotaUsageRatio', () => {
+  // status.used is computed with quantity arithmetic, so a used pod count of
+  // 1000 serializes canonically as "1k". A raw-float read sees 1 and reports a
+  // saturated quota as barely used.
+  it('reads count quantities with SI suffixes on either side of the ratio', () => {
+    expect(quotaUsageRatio('pods', '1k', '1k')).toBe(1)
+    expect(quotaUsageRatio('pods', '900', '1k')).toBeCloseTo(0.9)
+    expect(quotaUsageRatio('count/pods', '1k', '2k')).toBeCloseTo(0.5)
+  })
+
+  it('leaves plain counts unchanged', () => {
+    expect(quotaUsageRatio('pods', '5', '10')).toBe(0.5)
+    expect(quotaUsageRatio('services', '0', '10')).toBe(0)
+  })
+
+  it('parses cpu and memory with their own unit parsers', () => {
+    expect(quotaUsageRatio('cpu', '500m', '1')).toBeCloseTo(0.5)
+    expect(quotaUsageRatio('requests.cpu', '2', '4')).toBeCloseTo(0.5)
+    expect(quotaUsageRatio('memory', '512Mi', '1Gi')).toBeCloseTo(0.5)
+    expect(quotaUsageRatio('requests.storage', '1Gi', '2Gi')).toBeCloseTo(0.5)
+  })
+
+  it('yields null when hard is unset or unparseable so the row falls back to raw strings', () => {
+    expect(quotaUsageRatio('pods', '5', '')).toBeNull()
+    expect(quotaUsageRatio('pods', '5', 'garbage')).toBeNull()
+  })
+})

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

@@ -5,7 +5,7 @@ import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, Resou
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
 import { RBACErrorSection } from './RBACErrorSection'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
-import { parseCPUToNanocores, parseMemoryToBytes } from '../../../utils/format'
+import { parseCPUToNanocores, parseMemoryToBytes, parseQuantityToNumber } from '../../../utils/format'
 
 interface NamespaceRendererProps {
   data: any
@@ -95,11 +95,15 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quot
 // right unit parser by resource name (cpu → millicores, memory/storage →
 // bytes, everything else → plain count). Returns null when hard is unset or
 // unparseable so the row falls back to showing the raw strings.
-function quotaUsageRatio(resourceName: string, used: string, hard: string): number | null {
+// Count values are Quantities too: the quota controller computes status.used
+// with quantity arithmetic, which re-serializes canonically — a used pod count
+// of 1000 arrives as "1k". Read with parseFloat that is 1, and a saturated
+// quota renders as barely used.
+export function quotaUsageRatio(resourceName: string, used: string, hard: string): number | null {
   if (!hard) return null
   const isCPU = /(^|\.)cpu$/i.test(resourceName)
   const isBytes = /(memory|storage)$/i.test(resourceName)
-  const parse = isCPU ? parseCPUToNanocores : isBytes ? parseMemoryToBytes : (v: string) => parseFloat(v) || 0
+  const parse = isCPU ? parseCPUToNanocores : isBytes ? parseMemoryToBytes : parseQuantityToNumber
   const h = parse(hard)
   if (!h) return null
   return parse(used || '0') / h

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

@@ -1,8 +1,15 @@
 import { clsx } from 'clsx'
+import { Badge } from '../../ui/Badge'
 import { Tooltip } from '../../ui/Tooltip'
+import {
+  NETWORK_POLICY_PEER_DOTS,
+  NETWORK_POLICY_PEER_STYLES,
+  type NetworkPolicyPeerType,
+} from './network-policy-peer-styles'
 
 interface NetworkPolicyDiagramProps {
   spec: any
+  staged?: boolean
 }
 
 /**
@@ -11,7 +18,7 @@ interface NetworkPolicyDiagramProps {
  * Each rule is a horizontal band. Peers within a rule are OR'd (stacked).
  * Pure CSS/SVG — no ReactFlow needed for this static diagram.
  */
-export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
+export function NetworkPolicyDiagram({ spec, staged = false }: NetworkPolicyDiagramProps) {
   const podSelector = spec.podSelector || {}
   const matchLabels = podSelector.matchLabels || {}
   const policyTypes: string[] = spec.policyTypes || []
@@ -29,6 +36,13 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
 
   return (
     <div className="card-inner-lg space-y-3">
+      {staged && (
+        <div className="flex items-center gap-2 text-[11px] text-theme-text-tertiary">
+          <Badge severity="warning" size="sm">Staged preview</Badge>
+          <span>Dashed paths are evaluated but not enforced</span>
+        </div>
+      )}
+
       {/* Ingress flows */}
       {hasIngress && (
         <div className="space-y-2">
@@ -43,6 +57,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
               ports={[]}
               direction="ingress"
               denied
+              staged={staged}
             />
           ) : (
             ingress?.map((rule, i) => (
@@ -52,6 +67,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
                 target={targetLabel}
                 ports={extractPorts(rule.ports)}
                 direction="ingress"
+                staged={staged}
               />
             ))
           )}
@@ -72,6 +88,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
               ports={[]}
               direction="egress"
               denied
+              staged={staged}
             />
           ) : (
             egress?.map((rule, i) => (
@@ -81,6 +98,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
                 target={targetLabel}
                 ports={extractPorts(rule.ports)}
                 direction="egress"
+                staged={staged}
               />
             ))
           )}
@@ -97,7 +115,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
 interface PeerInfo {
   label: string
   sublabel?: string
-  type: 'pod' | 'namespace' | 'cidr' | 'all' | 'deny' | 'combined'
+  type: NetworkPolicyPeerType
 }
 
 function extractPeers(peers: any[] | undefined): PeerInfo[] {
@@ -155,37 +173,20 @@ function formatSelector(selector: any): string {
   return Object.entries(labels).map(([k, v]) => `${k}=${v}`).join(', ')
 }
 
-// Color coding for peer types
-const 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
-
-const PEER_DOT = {
-  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
-
 function FlowRow({
   sources,
   target,
   ports,
   direction,
   denied = false,
+  staged = false,
 }: {
   sources: PeerInfo[]
   target: string
   ports: string[]
   direction: 'ingress' | 'egress'
   denied?: boolean
+  staged?: boolean
 }) {
   const isIngress = direction === 'ingress'
 
@@ -200,11 +201,11 @@ function FlowRow({
             <div
               className={clsx(
                 'rounded-md border px-2 py-1.5 min-w-0 overflow-hidden',
-                PEER_STYLES[peer.type],
+                NETWORK_POLICY_PEER_STYLES[peer.type],
               )}
             >
               <div className="flex items-center gap-1.5 min-w-0">
-                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', PEER_DOT[peer.type])} />
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', NETWORK_POLICY_PEER_DOTS[peer.type])} />
                 <span className={clsx('text-[11px] font-medium truncate min-w-0', denied && 'line-through text-red-400')}>
                   {peer.label}
                 </span>
@@ -245,14 +246,14 @@ function FlowRow({
           x1="2" y1="10" x2="32" y2="10"
           stroke={denied ? '#ef4444' : direction === 'ingress' ? '#3b82f6' : '#a855f7'}
           strokeWidth="1.5"
-          strokeDasharray={denied ? '3 2' : undefined}
+          strokeDasharray={staged ? '4 3' : denied ? '3 2' : undefined}
           markerEnd={`url(#arrow-${direction}-${denied ? 'denied' : 'ok'})`}
         />
       </svg>
       {ports.length > 0 && (
-        <div className="flex flex-wrap justify-center gap-0.5 mt-0.5">
+        <div className="flex flex-col items-center gap-0.5 mt-0.5">
           {ports.map((p, i) => (
-            <span key={i} className="text-[8px] text-theme-text-tertiary font-mono leading-none">{p}</span>
+            <span key={i} className="whitespace-nowrap text-[8px] text-theme-text-tertiary font-mono leading-none">{p}</span>
           ))}
         </div>
       )}

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

@@ -5,9 +5,10 @@ import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
 
 interface NetworkPolicyRendererProps {
   data: any
+  staged?: boolean
 }
 
-export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
+export function NetworkPolicyRenderer({ data, staged = false }: NetworkPolicyRendererProps) {
   const spec = data.spec || {}
   const podSelector = spec.podSelector || {}
   const policyTypes: string[] = spec.policyTypes || []
@@ -23,7 +24,7 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
     <>
       {hasDiagramContent && (
         <Section title="Policy Flow" icon={GitFork} defaultExpanded>
-          <NetworkPolicyDiagram spec={spec} />
+          <NetworkPolicyDiagram spec={spec} staged={staged} />
         </Section>
       )}
 
@@ -125,7 +126,9 @@ function IngressEgressRuleCard({
       )}
 
       {peers.length === 0 && ports.length === 0 && (
-        <div className="text-xs text-theme-text-tertiary">Allow all</div>
+        <div className="text-xs text-theme-text-tertiary">
+          {direction === 'from' ? 'All sources' : 'All destinations'}
+        </div>
       )}
     </div>
   )