@skyhook-io/k8s-ui 1.14.5 → 1.14.7

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

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { NetworkPolicyRenderer } from './NetworkPolicyRenderer'
+import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
+
+const render = (spec: any) => renderToString(<NetworkPolicyRenderer data={{ kind: 'NetworkPolicy', spec }} />)
+const renderDiagram = (spec: any) => renderToString(<NetworkPolicyDiagram spec={spec} />)
+
+describe('NetworkPolicyRenderer', () => {
+  it('shows a policy without policyTypes as isolating ingress, and says the type was defaulted', () => {
+    const html = render({ podSelector: {} })
+    expect(html).toContain('Ingress Rules')
+    expect(html).toContain('Deny all ingress')
+    expect(html).toContain('policyTypes not set')
+    expect(html).not.toContain('Egress Rules')
+  })
+
+  it('does not call an explicitly typed policy defaulted', () => {
+    const html = render({ podSelector: {}, policyTypes: ['Ingress'] })
+    expect(html).toContain('Deny all ingress')
+    expect(html).not.toContain('policyTypes not set')
+  })
+
+  it('renders both selectors of a peer that sets podSelector and namespaceSelector', () => {
+    const html = render({
+      podSelector: { matchLabels: { app: 'prometheus' } },
+      policyTypes: ['Ingress'],
+      ingress: [{
+        from: [{
+          podSelector: { matchLabels: { app: 'radar' } },
+          namespaceSelector: { matchLabels: { 'kubernetes.io/metadata.name': 'radar' } },
+        }],
+      }],
+    })
+    expect(html).toContain('podSelector')
+    expect(html).toContain('in namespaceSelector')
+    expect(html).toContain('kubernetes.io/metadata.name')
+  })
+
+  it('renders matchExpressions rather than calling the selector empty', () => {
+    const html = render({
+      podSelector: { matchExpressions: [{ key: 'tier', operator: 'In', values: ['web', 'api'] }] },
+      policyTypes: ['Ingress'],
+      ingress: [{ from: [{ podSelector: { matchExpressions: [{ key: 'role', operator: 'Exists' }] } }] }],
+    })
+    expect(html).toContain('tier')
+    expect(html).toContain('In')
+    expect(html).toContain('role')
+    expect(html).not.toContain('All pods in namespace')
+  })
+
+  it('renders endPort ranges in the rule port list', () => {
+    const html = render({
+      podSelector: {},
+      policyTypes: ['Ingress'],
+      ingress: [{ ports: [{ port: 9000, endPort: 9100 }, { protocol: 'UDP', port: 53 }] }],
+    })
+    expect(html).toContain('TCP/9000-9100')
+    expect(html).toContain('UDP/53')
+  })
+
+  it('diagram: reads matchExpressions, shows ranges, and treats an empty selector as all pods', () => {
+    const html = renderDiagram({
+      podSelector: { matchExpressions: [{ key: 'tier', operator: 'In', values: ['web'] }] },
+      ingress: [{ ports: [{ port: 9000, endPort: 9100 }] }],
+    })
+    expect(html).toContain('tier In (web)')
+    expect(html).toContain('TCP/9000-9100')
+    expect(html).not.toContain('All pods')
+
+    const empty = renderDiagram({ podSelector: {} })
+    expect(empty).toContain('All pods')
+    expect(empty).not.toContain('all workloads')
+  })
+})

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

@@ -2,6 +2,7 @@ import { Shield, ArrowDownToLine, ArrowUpFromLine, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, LabelSelectorDisplay } from '../../ui/drawer-components'
 import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
+import { effectivePolicyTypeNames, effectivePolicyTypes, formatNetworkPolicyPort } from '../../../utils/network-policy'
 
 interface NetworkPolicyRendererProps {
   data: any
@@ -11,12 +12,13 @@ interface NetworkPolicyRendererProps {
 export function NetworkPolicyRenderer({ data, staged = false }: NetworkPolicyRendererProps) {
   const spec = data.spec || {}
   const podSelector = spec.podSelector || {}
-  const policyTypes: string[] = spec.policyTypes || []
   const ingress: any[] | undefined = spec.ingress
   const egress: any[] | undefined = spec.egress
 
-  const hasIngress = policyTypes.includes('Ingress')
-  const hasEgress = policyTypes.includes('Egress')
+  const types = effectivePolicyTypes(spec)
+  const policyTypes = effectivePolicyTypeNames(spec)
+  const hasIngress = types.ingress
+  const hasEgress = types.egress
 
   const hasDiagramContent = hasIngress || hasEgress
 
@@ -33,26 +35,29 @@ export function NetworkPolicyRenderer({ data, staged = false }: NetworkPolicyRen
           <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
           <LabelSelectorDisplay selector={podSelector} emptyText="All pods in namespace" />
         </div>
-        {policyTypes.length > 0 && (
-          <div className="mt-2">
-            <div className="text-xs text-theme-text-tertiary mb-1">Policy Types</div>
-            <div className="flex flex-wrap gap-1">
-              {policyTypes.map((type) => (
-                <span
-                  key={type}
-                  className={clsx(
-                    'badge',
-                    type === 'Ingress'
-                      ? 'status-blue'
-                      : 'status-purple'
-                  )}
-                >
-                  {type}
-                </span>
-              ))}
-            </div>
+        <div className="mt-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">Policy Types</div>
+          <div className="flex flex-wrap items-center gap-1">
+            {policyTypes.map((type) => (
+              <span
+                key={type}
+                className={clsx(
+                  'badge',
+                  type === 'Ingress'
+                    ? 'status-blue'
+                    : 'status-purple'
+                )}
+              >
+                {type}
+              </span>
+            ))}
+            {!types.explicit && (
+              <span className="text-xs text-theme-text-tertiary">
+                by default — policyTypes not set
+              </span>
+            )}
           </div>
-        )}
+        </div>
       </Section>
 
       {hasIngress && (
@@ -118,7 +123,7 @@ function IngressEgressRuleCard({
                 key={j}
                 className="badge bg-theme-elevated text-theme-text-secondary"
               >
-                {port.protocol || 'TCP'}/{port.port}
+                {formatNetworkPolicyPort(port)}
               </span>
             ))}
           </div>
@@ -135,20 +140,29 @@ function IngressEgressRuleCard({
 }
 
 function PeerEntry({ peer }: { peer: any }) {
-  if (peer.podSelector) {
+  // podSelector and namespaceSelector on one peer are ANDed: the peer is the
+  // pods matching the first inside the namespaces matching the second. Both
+  // have to be shown, or a narrow cross-namespace grant reads as a broad
+  // same-namespace one.
+  const hasPod = peer.podSelector !== undefined
+  const hasNs = peer.namespaceSelector !== undefined
+  if (hasPod || hasNs) {
     return (
-      <div className="text-sm">
-        <span className="text-theme-text-secondary text-xs">podSelector: </span>
-        <LabelSelectorDisplay selector={peer.podSelector} emptyText="all pods" inline />
-      </div>
-    )
-  }
-
-  if (peer.namespaceSelector) {
-    return (
-      <div className="text-sm">
-        <span className="text-theme-text-secondary text-xs">namespaceSelector: </span>
-        <LabelSelectorDisplay selector={peer.namespaceSelector} emptyText="all namespaces" inline />
+      <div className="text-sm space-y-0.5">
+        {hasPod && (
+          <div>
+            <span className="text-theme-text-secondary text-xs">podSelector: </span>
+            <LabelSelectorDisplay selector={peer.podSelector} emptyText="all pods" inline />
+          </div>
+        )}
+        {hasNs && (
+          <div>
+            <span className="text-theme-text-secondary text-xs">
+              {hasPod ? 'in namespaceSelector: ' : 'namespaceSelector: '}
+            </span>
+            <LabelSelectorDisplay selector={peer.namespaceSelector} emptyText="all namespaces" inline />
+          </div>
+        )}
       </div>
     )
   }

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

@@ -14,6 +14,7 @@ import {
 import { resolvedEnvFromKey } from '../../../utils/env-from'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
 import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
+import { NamespaceLimitRangeLink } from './LimitRangeRenderer'
 import type {
   PodEnvironmentResponse,
   PodEnvironmentRevealResponse,
@@ -114,6 +115,9 @@ interface PodRendererProps {
   policyData?: PolicyResourceResponse | null
   policyLoading?: boolean
   policyError?: Error | null
+  /** Names of the LimitRanges in this Pod's namespace. Absent while the lookup
+   *  is pending or unreadable, which leaves the contextual link unrendered. */
+  namespaceLimitRangeNames?: string[] | null
 }
 
 // ── Env vars section — extracted to use hooks (useState for reveal) ──────────
@@ -296,6 +300,7 @@ export function PodRenderer({
   policyData,
   policyLoading,
   policyError,
+  namespaceLimitRangeNames,
 }: PodRendererProps) {
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
@@ -763,6 +768,12 @@ export function PodRenderer({
             )
           })}
         </div>
+        <NamespaceLimitRangeLink
+          namespace={namespace || ''}
+          names={namespaceLimitRangeNames}
+          scope="pod"
+          onNavigate={onNavigate}
+        />
       </Section>
 
       {/* Environment Variables */}

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

@@ -1,8 +1,8 @@
 import { ShieldAlert, ShieldCheck, ShieldQuestion } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useState } from 'react'
-import { ChevronDown, ChevronRight } from 'lucide-react'
 import { Section } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { SEVERITY_BADGE } from '../../../utils/badge-colors'
 import { isForbiddenError } from '../../../types/fetch-error'
 import { LookupFailureNote } from './LookupFailureNote'
@@ -829,6 +829,7 @@ function PassingGroup({
 }) {
   const [open, setOpen] = useState(false)
   const [showAll, setShowAll] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(open)
 
   // Nothing to open: the count is real but the subjects did not survive the
   // server cap, so the label stands alone rather than offering an empty drawer.
@@ -843,14 +844,16 @@ function PassingGroup({
   return (
     <div className="pt-0.5">
       <button
+        {...buttonProps}
         type="button"
         onClick={() => setOpen(!open)}
         className="flex items-center gap-1 text-xs text-theme-text-tertiary hover:text-theme-text-secondary"
       >
-        {open ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+        <CollapseChevron open={open} className="w-3 h-3" />
         {label}
       </button>
-      {open && (
+      {/* One of these per rule; the subject list only renders once opened. */}
+      <Collapse open={open} mountLazily id={panelId}>
         <div className="space-y-1.5 mt-1.5">
           {visible.map((s, i) => (
             <SubjectRow
@@ -891,7 +894,7 @@ function PassingGroup({
             </div>
           )}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

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

@@ -1,7 +1,8 @@
 import { useState, useMemo } from 'react'
-import { Bell, Search, ChevronRight } from 'lucide-react'
+import { Bell, Search } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
 import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 import {
@@ -116,6 +117,7 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
 
   // Auto-expand when searching so matched rules are visible
   const expanded = searchTerm ? filteredRules.length > 0 : manualExpanded
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   // If searching and no matches, hide the group entirely
   if (searchTerm && filteredRules.length === 0) return null
@@ -123,11 +125,12 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
   return (
     <div className="card-inner">
       <button
+        {...buttonProps}
         onClick={() => setManualExpanded(!manualExpanded)}
         className="flex items-center justify-between w-full text-left"
       >
         <div className="flex items-center gap-2">
-          <ChevronRight className={clsx('w-3.5 h-3.5 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
+          <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
           <span className="text-sm text-theme-text-primary font-medium">{group.name}</span>
         </div>
         <div className="flex items-center gap-2">
@@ -147,20 +150,15 @@ function RuleGroupSection({ group, searchTerm }: { group: PrometheusRuleGroup; s
           {group.recordCount > 0 && <span>{group.recordCount} recording</span>}
         </div>
       )}
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-out"
-        style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
-      >
-        <div className="overflow-hidden">
-          <div className="mt-2 space-y-2">
-            {filteredRules.map((rule, i) => (
-              rule.type === 'alert'
-                ? <AlertRuleCard key={`alert-${rule.alert}-${i}`} rule={rule} />
-                : <RecordingRuleCard key={`rec-${rule.record}-${i}`} rule={rule} />
-            ))}
-          </div>
+      <Collapse open={expanded} id={panelId}>
+        <div className="mt-2 space-y-2">
+          {filteredRules.map((rule, i) => (
+            rule.type === 'alert'
+              ? <AlertRuleCard key={`alert-${rule.alert}-${i}`} rule={rule} />
+              : <RecordingRuleCard key={`rec-${rule.record}-${i}`} rule={rule} />
+          ))}
         </div>
-      </div>
+      </Collapse>
     </div>
   )
 }

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

@@ -0,0 +1,281 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ReflectorSection, ReflectorSummary } from "./ReflectorSection";
+import { ResourceRendererDispatch } from "../../shared/ResourceRendererDispatch";
+import type { Relationships } from "../../../types";
+
+const prefix = "reflector.v1.k8s.emberstack.com/";
+const source = { kind: "ConfigMap", namespace: "source", name: "settings" };
+const mirror = { kind: "ConfigMap", namespace: "app", name: "mirror" };
+function resource(annotations: Record<string, string> = {}) {
+  return {
+    apiVersion: "v1",
+    metadata: {
+      namespace: "app",
+      name: "mirror",
+      annotations: Object.fromEntries(
+        Object.entries(annotations).map(([k, v]) => [prefix + k, v]),
+      ),
+    },
+  };
+}
+function render(
+  annotations: Record<string, string>,
+  reflection?: Relationships["reflection"],
+) {
+  return renderToStaticMarkup(
+    <>
+      <ReflectorSummary
+        data={resource(annotations)}
+        reflection={reflection}
+        onNavigate={() => {}}
+      />
+      <ReflectorSection
+        data={resource(annotations)}
+        reflection={reflection}
+        onNavigate={() => {}}
+      />
+    </>,
+  );
+}
+
+describe("Reflector evidence and copy", () => {
+  it("leaves ordinary objects and non-core API groups alone", () => {
+    expect(render({})).toBe("");
+    expect(render({ unrelated: "true" })).toBe("");
+    expect(
+      renderToStaticMarkup(
+        <ReflectorSection
+          data={{
+            ...resource({ "reflection-allowed": "true" }),
+            apiVersion: "example.io/v1",
+          }}
+        />,
+      ),
+    ).toBe("");
+  });
+
+  it("shows source settings with OR semantics and bounded visible mirrors", () => {
+    const mirrors = Array.from({ length: 12 }, (_, i) => ({
+      ...mirror,
+      name: `mirror-${i}`,
+    }));
+    const html = render(
+      {
+        "reflection-allowed": "true",
+        "reflection-auto-enabled": "true",
+        "reflection-allowed-namespaces": "prod-.*",
+        "reflection-allowed-namespaces-selector": "team=app",
+      },
+      { mirrors },
+    );
+    expect(html).toContain("Source");
+    expect(html).toContain("Name patterns:");
+    expect(html).toContain(">or</span>");
+    expect(html).toContain("Label selector:");
+    expect(html).toContain("Show all 12 visible mirrors");
+    expect(html).toContain("app/mirror-4");
+    expect(html).not.toContain("app/mirror-5");
+    expect(html).toContain("other mirrors may exist");
+  });
+
+  it.each(["True", "TRUE", " true "])(
+    "accepts controller boolean %s and raw .NET timestamp",
+    (automatic) => {
+      const html = render(
+        {
+          reflects: "source/settings",
+          "auto-reflects": automatic,
+          "reflected-at": "2026-09-13T12:34:56.1234567+00:00",
+        },
+        { source },
+      );
+      expect(html).toContain("Automatic mirror");
+      expect(html).toContain("2026-09-13T12:34:56.1234567+00:00");
+      expect(html).not.toContain("Check reflection configuration");
+    },
+  );
+
+  it("keeps manual pre-copy state neutral and offers only observed navigation", () => {
+    const html = render({ reflects: "source/settings" }, { source });
+    expect(html).toContain("Manual mirror");
+    expect(html).toContain("No version recorded");
+    expect(html).toContain("source/settings</button>");
+    expect(html).not.toContain("Check reflection configuration");
+    expect(html).toContain("Edit the source for lasting changes");
+  });
+
+  it("does not turn a hidden source into missing, a link, or version evidence", () => {
+    const html = render(
+      { reflects: "hidden/settings", "reflected-version": "41" },
+      { source, sourceResourceVersion: "42" },
+    );
+    expect(html).toContain("hidden/settings");
+    expect(html).toContain("not available in this view");
+    expect(html).not.toContain("hidden/settings</button>");
+    expect(html).not.toContain("Source version (snapshot)");
+    expect(html).not.toContain("missing");
+    expect(html).not.toContain("Check reflection configuration");
+  });
+
+  it.each([
+    ["opaque-x", "opaque-x", "matches the source snapshot"],
+    ["opaque-x", "opaque-y", "differs from the source snapshot"],
+  ])(
+    "reports version equality without contents or health claims",
+    (copied, current, message) => {
+      const html = render(
+        { reflects: "source/settings", "reflected-version": copied },
+        { source, sourceResourceVersion: current },
+      );
+      expect(html).toContain(message);
+      expect(html).toContain("do not prove matching contents");
+      expect(html).not.toContain("Synced");
+      expect(html).not.toContain("Check reflection configuration");
+    },
+  );
+
+  it.each(["", "missing-namespace", "ns/name/extra"])(
+    "flags malformed declarations (%s)",
+    (reflects) => {
+      expect(render({ reflects })).toContain(
+        "must name a source as namespace/name",
+      );
+    },
+  );
+
+  it("flags self reference and contradictory auto-source settings", () => {
+    expect(render({ reflects: "app/mirror" })).toContain(
+      "points to this object itself",
+    );
+    expect(render({ "reflection-auto-enabled": "true" })).toContain(
+      "requires reflection-allowed to be true",
+    );
+    expect(render({ "reflection-allowed": "yes" })).toContain(
+      "must be true or false",
+    );
+  });
+
+  it("explains a declared chain without dropping either direction", () => {
+    const html = render(
+      { reflects: "source/settings", "reflection-allowed": "true" },
+      { source, mirrors: [{ ...mirror, namespace: "leaf" }] },
+    );
+    expect(html).toContain("source/settings</button>");
+    expect(html).toContain("leaf/mirror</button>");
+    expect(html).toContain("does not propagate its updates");
+  });
+
+  it("shows only explicit reflection fields rather than inferring from kind equality", () => {
+    const html = renderToStaticMarkup(
+      <ResourceRendererDispatch
+        resource={{ kind: "configmaps", namespace: "app", name: "mirror" }}
+        data={resource()}
+        relationships={{ consumers: [mirror] }}
+        onCopy={() => {}}
+        copied={null}
+        showCommonSections={false}
+      />,
+    );
+    expect(html).not.toContain("Reflector");
+  });
+
+  it.each(["configmaps", "secrets"])(
+    "wires the %s renderer and avoids duplicate generic mirror links",
+    (kind) => {
+      const ref = {
+        ...source,
+        kind: kind === "secrets" ? "Secret" : "ConfigMap",
+      };
+      const html = renderToStaticMarkup(
+        <ResourceRendererDispatch
+          resource={{ kind, namespace: "app", name: "mirror" }}
+          data={{ ...resource({ reflects: "source/settings" }), data: {} }}
+          relationships={{ configRefs: [ref], reflection: { source: ref } }}
+          onCopy={() => {}}
+          copied={null}
+          onNavigate={() => {}}
+        />,
+      );
+      expect(html).toContain("Reflector");
+      expect(html).toContain("source/settings</button>");
+      expect(html).not.toContain("Related Resources");
+      expect(html).not.toContain("Check reflection configuration");
+    },
+  );
+});
+
+describe("Reflector configuration diagnostics", () => {
+  it("does not describe a malformed reference as an active mirror chain", () => {
+    const html = render({
+      reflects: "missing-namespace",
+      "reflection-allowed": "true",
+    });
+    expect(html).toContain("Invalid source reference");
+    expect(html).not.toContain("does not propagate");
+    expect(html).not.toContain("Edit the source for lasting changes");
+  });
+  it("warns when visible mirrors reference a source that no longer allows reflection", () => {
+    const html = render({}, { mirrors: [mirror] });
+    expect(html).toContain("Reflection is not enabled on this source");
+  });
+});
+
+describe("Reflector resource hierarchy", () => {
+  it("keeps ConfigMap data ahead of detailed settings and source mirror list", () => {
+    const html = renderToStaticMarkup(
+      <ResourceRendererDispatch
+        kind="configmaps"
+        data={{
+          ...resource({ "reflection-allowed": "true" }),
+          data: { setting: "value" },
+        }}
+        resource={{ kind: "configmaps", namespace: "app", name: "mirror" }}
+        relationships={{ reflection: { mirrors: [mirror] } }}
+      />,
+    );
+    expect(html.indexOf("Data (1 keys)")).toBeLessThan(
+      html.indexOf("Reflector (1 visible mirror)"),
+    );
+    expect(html).not.toContain("Reflector mirror</");
+  });
+  it("puts TLS expiry and mirror provenance ahead of data, with details below", () => {
+    const html = renderToStaticMarkup(
+      <ResourceRendererDispatch
+        kind="secrets"
+        data={{
+          ...resource({ reflects: "source/settings" }),
+          type: "kubernetes.io/tls",
+          data: { "tls.crt": "dGVzdA==" },
+        }}
+        resource={{ kind: "secrets", namespace: "app", name: "mirror" }}
+        relationships={{
+          reflection: { source: { ...source, kind: "Secret" } },
+        }}
+        certificateInfo={
+          {
+            certificates: [
+              {
+                serialNumber: "fixture",
+                expired: true,
+                daysLeft: -1,
+                notAfter: "2026-01-01T00:00:00Z",
+                notBefore: "2025-01-01T00:00:00Z",
+                subject: "test",
+                issuer: "test",
+                dnsNames: [],
+              },
+            ],
+          } as any
+        }
+      />,
+    );
+    expect(html.indexOf("Certificate has expired")).toBeLessThan(
+      html.indexOf("Reflector mirror"),
+    );
+    expect(html.indexOf("Reflector mirror")).toBeLessThan(
+      html.indexOf(">Data</"),
+    );
+    expect(html.indexOf(">Data</")).toBeLessThan(html.indexOf(">Reflector</"));
+  });
+});