@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/topology/internet-groups.ts

@@ -0,0 +1,55 @@
+import type { GroupingMode, TopologyEdge, TopologyNode } from '../../types'
+import { getGroupKey } from './layout'
+
+/**
+ * Splits the traffic view's single Internet node into one per group, so each
+ * namespace or app shows its own entry from outside. Every original Internet
+ * edge is kept, whatever kind its entrypoint is (Ingress, Gateway, Istio
+ * Gateway, Knative Service, Traefik route, Contour HTTPProxy); an entrypoint
+ * with no group stays connected to the original Internet node.
+ */
+export function splitInternetByGroup(
+  nodes: TopologyNode[],
+  edges: TopologyEdge[],
+  groupMode: GroupingMode,
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  if (groupMode === 'none') return { nodes, edges }
+  const internetNode = nodes.find(n => n.kind === 'Internet')
+  if (!internetNode) return { nodes, edges }
+
+  const nodeById = new Map(nodes.map(n => [n.id, n]))
+  const groups = new Map<string, { entry: TopologyNode; edges: TopologyEdge[] }>()
+  const regrouped = new Set<TopologyEdge>()
+  for (const edge of edges) {
+    if (edge.source !== internetNode.id) continue
+    const target = nodeById.get(edge.target)
+    const groupKey = target ? getGroupKey(target, groupMode) : null
+    if (!target || !groupKey) continue
+    if (!groups.has(groupKey)) groups.set(groupKey, { entry: target, edges: [] })
+    groups.get(groupKey)!.edges.push(edge)
+    regrouped.add(edge)
+  }
+  if (groups.size === 0) return { nodes, edges }
+
+  const keepOriginal = edges.some(e => e.source === internetNode.id && !regrouped.has(e))
+  const newNodes = keepOriginal ? [...nodes] : nodes.filter(n => n.id !== internetNode.id)
+  const newEdges = edges.filter(e => !regrouped.has(e))
+  for (const [groupKey, group] of groups) {
+    const internetId = `internet-${groupMode}-${groupKey}`
+    newNodes.push({
+      id: internetId,
+      kind: 'Internet',
+      name: 'Internet',
+      status: 'healthy',
+      data: {
+        // Group metadata so the node lands inside its entrypoints' group.
+        namespace: groupMode === 'namespace' ? groupKey : group.entry.data?.namespace,
+        labels: groupMode === 'app' ? { 'app.kubernetes.io/name': groupKey } : {},
+      },
+    })
+    for (const edge of group.edges) {
+      newEdges.push({ ...edge, id: `${internetId}-to-${edge.target}`, source: internetId })
+    }
+  }
+  return { nodes: newNodes, edges: newEdges }
+}

package/src/components/topology/layout.ts

@@ -864,7 +864,7 @@ function computeWorkloadCards(
 const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
   'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
-  'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'Ingress': 7,
+  'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'UDPRoute': 6, 'Ingress': 7,
   'CalicoNetworkPolicy': 10, 'CalicoGlobalNetworkPolicy': 10,
   'CalicoStagedNetworkPolicy': 10, 'CalicoStagedGlobalNetworkPolicy': 10,
   'CalicoStagedKubernetesNetworkPolicy': 10,

package/src/components/ui/Badge.tsx

@@ -85,6 +85,7 @@ const KIND: Record<string, string> = {
   HTTPRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   GRPCRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   TCPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  UDPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   TLSRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
 
   // Config

package/src/components/ui/FoldSection.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { toneTextClass } from './status-tone'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
+
+/** A folded section's one-line summary, and whether it opens on its own. */
+export interface FoldSummary {
+  text: string
+  /** Something in the section needs a look: it opens itself. */
+  attention: boolean
+}
+
+export function SectionHeading({ children, hint }: { children: ReactNode; hint?: ReactNode }) {
+  return (
+    <div className="mb-2 mt-5 flex items-baseline gap-2 first:mt-0">
+      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{children}</h3>
+      {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+    </div>
+  )
+}
+
+/**
+ * A section folded to one summary line. It opens itself when `attention`
+ * turns true (data arriving after the first render included), and stays as
+ * the reader left it otherwise.
+ */
+export function FoldSection({
+  title,
+  hint,
+  summary,
+  attention,
+  children,
+}: {
+  title: ReactNode
+  hint?: ReactNode
+  summary: ReactNode
+  attention: boolean
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(attention)
+  useEffect(() => {
+    if (attention) setOpen(true)
+  }, [attention])
+  const d = useDisclosure(open)
+  return (
+    <div className="mt-5 first:mt-0">
+      <h3>
+      <button
+        type="button"
+        {...d.buttonProps}
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-start gap-2 rounded text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      >
+        <CollapseChevron open={open} className="mt-1 h-3 w-3 shrink-0 text-theme-text-tertiary" />
+        {/* Wrapped parts line up under the title, not under the chevron. */}
+        <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{title}</span>
+          {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+          {!open && <span className={clsx('min-w-0 text-sm', attention ? toneTextClass('degraded') : 'text-theme-text-secondary')}>{summary}</span>}
+        </span>
+      </button>
+      </h3>
+      <Collapse open={open} id={d.panelId}>
+        <div className="pt-2">{children}</div>
+      </Collapse>
+    </div>
+  )
+}

package/src/components/ui/ForceDeleteConfirmDialog.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
+
+let root: Root
+const base = { open: true, onClose: vi.fn(), onConfirm: vi.fn(), resourceName: 'web', resourceKind: 'Deployment', namespaceName: 'demo', isLoading: false }
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+afterEach(async () => {
+  await act(async () => root.unmount())
+  document.body.replaceChildren()
+  vi.clearAllMocks()
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+})
+
+describe('Deletion preview states', () => {
+  it('states the namespace-wide deletion consequence without relying on topology', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} resourceKind="Namespace" resourceName="demo" namespaceName="" cascadeRootResolved={false} />))
+    expect(document.body.textContent).toContain('delete the namespace "demo" and the resources in it')
+    expect(document.body.textContent).not.toContain("not in Radar's topology")
+  })
+  it('shows one advisory statement for a resolved preview', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'web-pod' }]} />))
+    const toggle = [...document.querySelectorAll('button')].find(b => b.textContent?.includes('May affect'))!
+    await act(async () => toggle.click())
+    expect(document.body.textContent).toContain('web-pod')
+    expect(document.body.textContent?.match(/does not predict what will be deleted/g)).toHaveLength(1)
+    expect(document.body.textContent).not.toContain('Other resources may be affected')
+  })
+  it.each([[], undefined])('omits the advisory statement for an empty resolved preview (%j)', async (dependents) => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved cascadeDependents={dependents} />))
+    expect(document.body.textContent).not.toContain('May affect')
+    expect(document.body.textContent).not.toContain('does not predict')
+    expect(document.body.textContent).not.toContain('unavailable')
+    expect(document.body.textContent).not.toContain('Other resources may be affected')
+  })
+  it('distinguishes an observed unresolved root from a fetch failure', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} />))
+    expect(document.body.textContent).toContain("This resource is not in Radar's topology")
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeRootResolved={false} cascadePreviewFailed cascadeDependents={[{ kind: 'Pod', namespace: 'demo', name: 'stale' }]} />))
+    expect(document.body.textContent).toContain('Related-resource preview unavailable.')
+    expect(document.body.textContent).not.toContain('This resource is not in')
+    expect(document.body.textContent).not.toContain('Other resources may be affected')
+    expect(document.body.textContent).not.toContain('May affect')
+    const confirm = [...document.querySelectorAll('button')].find(b => b.textContent === 'Delete')!
+    expect(confirm.disabled).toBe(false)
+    await act(async () => confirm.click())
+    expect(base.onConfirm).toHaveBeenCalledWith(false)
+  })
+  it('shows loading without presenting stale failure or success as a result', async () => {
+    await act(async () => root.render(<ForceDeleteConfirmDialog {...base} cascadeLoading cascadePreviewFailed cascadeRootResolved />))
+    expect(document.body.textContent).toContain('Checking related resources')
+    expect(document.body.textContent).not.toContain('unavailable')
+    expect(document.body.textContent).not.toContain('does not predict')
+  })
+})

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { ConfirmDialog } from './ConfirmDialog'
 import { pluralize } from '../../utils/pluralize'
@@ -22,6 +22,7 @@ interface ForceDeleteConfirmDialogProps {
   cascadeDependents?: CascadeDependent[]
   cascadeLoading?: boolean
   cascadeRootResolved?: boolean
+  cascadePreviewFailed?: boolean
 }
 
 export function ForceDeleteConfirmDialog({
@@ -35,8 +36,10 @@ export function ForceDeleteConfirmDialog({
   cascadeDependents,
   cascadeLoading,
   cascadeRootResolved,
+  cascadePreviewFailed,
 }: ForceDeleteConfirmDialogProps) {
   const [forceDelete, setForceDelete] = useState(false)
+  const isNamespace = resourceKind.toLowerCase() === 'namespace'
 
   function handleClose() {
     onClose()
@@ -54,7 +57,7 @@ export function ForceDeleteConfirmDialog({
       onConfirm={handleConfirm}
       title="Delete Resource"
       message={`Are you sure you want to delete "${resourceName}"?`}
-      details={`This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
+      details={isNamespace ? `This will permanently delete the namespace "${resourceName}" and the resources in it.` : `This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
       confirmLabel={forceDelete ? 'Force Delete' : 'Delete'}
       variant="danger"
       isLoading={isLoading}
@@ -63,21 +66,30 @@ export function ForceDeleteConfirmDialog({
         {cascadeLoading && (
           <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            Checking for dependent resources...
+            Checking related resources...
           </div>
         )}
 
-        {!cascadeLoading && cascadeDependents && cascadeDependents.length > 0 && (
+        {!cascadeLoading && !cascadePreviewFailed && cascadeDependents && cascadeDependents.length > 0 && (
           <CascadeDependentsList dependents={cascadeDependents} />
         )}
 
-        {!cascadeLoading && cascadeRootResolved === false && (
-          <div className="flex items-start gap-2 rounded border border-theme-border bg-theme-elevated px-3 py-2 text-xs text-warning-text">
-            <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-            <span>
-              Radar couldn&apos;t verify which dependent resources Kubernetes will also delete. Additional resources may be deleted but aren&apos;t shown here.
-            </span>
-          </div>
+        {!cascadeLoading && cascadePreviewFailed && (
+          <p className="text-xs text-theme-text-tertiary">
+            Related-resource preview unavailable.
+          </p>
+        )}
+
+        {!isNamespace && !cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === false && (
+          <p className="text-xs text-theme-text-tertiary">
+            This resource is not in Radar&apos;s topology, so its related resources cannot be previewed.
+          </p>
+        )}
+
+        {!cascadeLoading && !cascadePreviewFailed && cascadeRootResolved === true && cascadeDependents && cascadeDependents.length > 0 && (
+          <p className="text-xs text-theme-text-secondary">
+            This list shows visible related resources; it does not predict what will be deleted.
+          </p>
         )}
 
         <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
@@ -120,7 +132,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
       >
         <CollapseChevron open={expanded} inheritColor className="w-3.5 h-3.5" />
         <span>
-          Will also delete {pluralize(dependents.length, 'dependent resource')}
+          May affect {pluralize(dependents.length, 'related resource')}
         </span>
       </button>
 

package/src/components/ui/RefLink.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { ResourceRef } from '../../types/core'
+
+export type NavigateToRef = (ref: ResourceRef) => void
+
+/** A reference to another object: a link when the host can navigate, plain text otherwise. */
+export function RefLink({ refTo, onNavigate, children, mono }: { refTo: ResourceRef; onNavigate?: NavigateToRef; children?: ReactNode; mono?: boolean }) {
+  const label = children ?? refTo.name
+  if (!onNavigate) return <span className={clsx(mono && 'font-mono')}>{label}</span>
+  return (
+    <button
+      type="button"
+      onClick={() => onNavigate(refTo)}
+      className={clsx('text-accent-text hover:underline text-left break-all', mono && 'font-mono')}
+    >
+      {label}
+    </button>
+  )
+}

package/src/components/ui/RowActionMenu.tsx

@@ -56,14 +56,19 @@ export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true
     const onDown = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
     }
+    // Capture phase, consumed: Escape that closes the menu must not also run
+    // the page's own Escape (close the drawer, leave the full view).
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false)
+      if (e.key !== 'Escape') return
+      e.preventDefault()
+      e.stopPropagation()
+      setOpen(false)
     }
     document.addEventListener('mousedown', onDown)
-    document.addEventListener('keydown', onKey)
+    document.addEventListener('keydown', onKey, true)
     return () => {
       document.removeEventListener('mousedown', onDown)
-      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('keydown', onKey, true)
     }
   }, [open])
 

package/src/components/ui/ScheduleValue.test.tsx

@@ -74,6 +74,11 @@ describe('TimeValue', () => {
     expect(html).not.toMatch(/\dT\d\d:\d\d:\d\dZ/)
   })
 
+  // A bare "6h" under "Started" or "Finished" reads as a duration.
+  it('says the moment was in the past', () => {
+    expect(render(<TimeValue timestamp={new Date(Date.now() - 6 * 3600_000).toISOString()} />)).toContain('6h ago')
+  })
+
   it('says so when the thing never happened', () => {
     expect(render(<TimeValue timestamp={undefined} fallback="Never" />)).toContain('Never')
   })

package/src/components/ui/ScheduleValue.tsx

@@ -1,5 +1,6 @@
 import { Tooltip } from './Tooltip'
-import { cronToHuman, formatAge } from '../resources/resource-utils'
+import { cronToHuman } from '../resources/resource-utils'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 /**
  * Hover affordance used across the drawer: without it a tooltip is a secret.
@@ -79,7 +80,7 @@ export function TimeValue({ timestamp, fallback = '-' }: TimeValueProps) {
   if (!timestamp) return <>{fallback}</>
   return (
     <Tooltip content={new Date(timestamp).toLocaleString()} position="right">
-      <span className={HOVERABLE}>{formatAge(timestamp)}</span>
+      <span className={HOVERABLE}>{formatRelativeAgeTime(timestamp)}</span>
     </Tooltip>
   )
 }

package/src/components/ui/crd-definition-navigation.test.tsx

@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, expect, it, vi } from "vitest";
+import { MetadataSection } from "./drawer-components";
+import {
+  customResourceDefinitionRef,
+  initNavigationMap,
+  resetNavigationMap,
+} from "../../utils/navigation";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+afterEach(resetNavigationMap);
+const resources = [
+  {
+    group: "plants.example.io",
+    version: "v1",
+    kind: "Cactus",
+    name: "cacti",
+    definitionName: "cacti.plants.example.io",
+    namespaced: true,
+    isCrd: true,
+    verbs: ["get"],
+  },
+  {
+    group: "other.example.io",
+    version: "v1",
+    kind: "Cactus",
+    name: "cactuses",
+    definitionName: "cactuses.other.example.io",
+    namespaced: false,
+    isCrd: true,
+    verbs: ["get"],
+  },
+  {
+    group: "apps",
+    version: "v1",
+    kind: "Deployment",
+    name: "deployments",
+    namespaced: true,
+    isCrd: false,
+    verbs: ["get"],
+  },
+];
+
+it("uses exact discovered CRD group and plural instead of guessing from the Kind", () => {
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus"),
+  ).toBeNull();
+  initNavigationMap(resources);
+  expect(customResourceDefinitionRef("plants.example.io/v1", "Cactus")).toEqual(
+    {
+      kind: "CustomResourceDefinition",
+      group: "apiextensions.k8s.io",
+      namespace: "",
+      name: "cacti.plants.example.io",
+    },
+  );
+  expect(
+    customResourceDefinitionRef("other.example.io/v1", "Cactus")?.name,
+  ).toBe("cactuses.other.example.io");
+  expect(customResourceDefinitionRef("apps/v1", "Deployment")).toBeNull();
+  initNavigationMap([
+    ...resources,
+    {
+      group: "metrics.k8s.io",
+      version: "v1beta1",
+      kind: "PodMetrics",
+      name: "pods",
+      namespaced: true,
+      isCrd: true,
+      verbs: ["get"],
+    },
+  ]);
+  expect(
+    customResourceDefinitionRef("metrics.k8s.io/v1beta1", "PodMetrics"),
+  ).toBeNull();
+  resetNavigationMap();
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus"),
+  ).toBeNull();
+  initNavigationMap([
+    {
+      ...resources[0],
+      name: "cactuses",
+      definitionName: "cactuses.plants.example.io",
+    },
+  ]);
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus")?.name,
+  ).toBe("cactuses.plants.example.io");
+  expect(
+    customResourceDefinitionRef("unknown.example.io/v1", "Cactus"),
+  ).toBeNull();
+  expect(customResourceDefinitionRef(undefined, "Cactus")).toBeNull();
+  initNavigationMap([]);
+  expect(
+    customResourceDefinitionRef("plants.example.io/v1", "Cactus"),
+  ).toBeNull();
+});
+
+it("navigates from instance metadata to its cluster-scoped definition", async () => {
+  initNavigationMap(resources);
+  const element = document.createElement("div");
+  const root = createRoot(element);
+  const onNavigate = vi.fn();
+  try {
+    await act(async () =>
+      root.render(
+        <MetadataSection
+          data={{
+            apiVersion: "plants.example.io/v1",
+            kind: "Cactus",
+            metadata: { name: "live", namespace: "team" },
+          }}
+          onNavigate={onNavigate}
+        />,
+      ),
+    );
+    const button = [...element.querySelectorAll("button")].find(
+      (b) => b.textContent === "cacti.plants.example.io",
+    );
+    expect(button).toBeDefined();
+    await act(async () => button!.click());
+    expect(onNavigate).toHaveBeenCalledWith({
+      kind: "CustomResourceDefinition",
+      group: "apiextensions.k8s.io",
+      namespace: "",
+      name: "cacti.plants.example.io",
+    });
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
+
+it("keeps exact Kind casing within one API group", () => {
+  initNavigationMap([
+    ...resources,
+    { ...resources[0], kind: "CACTUS", name: "uppercacti", definitionName: "uppercacti.plants.example.io" },
+  ]);
+  expect(customResourceDefinitionRef("plants.example.io/v1", "Cactus")?.name).toBe("cacti.plants.example.io");
+  expect(customResourceDefinitionRef("plants.example.io/v1", "CACTUS")?.name).toBe("uppercacti.plants.example.io");
+  expect(customResourceDefinitionRef("plants.example.io/v1", "cactus")).toBeNull();
+});
+
+it("does not add a guessed definition to built-in or undiscovered metadata", () => {
+  initNavigationMap(resources);
+  const html = renderToStaticMarkup(
+    <MetadataSection
+      data={{
+        apiVersion: "apps/v1",
+        kind: "Deployment",
+        metadata: { name: "live", uid: "native" },
+      }}
+    />,
+  );
+  expect(html).toContain("native");
+  expect(html).not.toContain("Definition");
+});