@skyhook-io/radar-app 1.12.2 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -35,13 +35,13 @@
     "diff": "^9.0.0",
     "monaco-editor": "0.55.1",
     "react-markdown": "^10.1.0",
-    "react-virtuoso": "^4.18.11",
+    "react-virtuoso": "^4.18.12",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.4.2",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.14.0",
+    "@skyhook-io/k8s-ui": ">=1.13.4",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -69,8 +69,8 @@
     "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.9.0",
-    "lucide-react": "^1.33.0",
+    "globals": "^17.11.0",
+    "lucide-react": "^1.37.0",
     "postcss": "^8.5.26",
     "prettier": "^3.9.5",
     "react": "^19.2.8",
@@ -80,7 +80,7 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.1"
+    "vite": "^8.2.2"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -64,7 +64,7 @@ import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
 import { SettingsDialog, type SettingsSectionId } from './components/settings/SettingsDialog'
 import type { APIResource, TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
-import { kindToPlural, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
+import { kindToPluralWithGroup, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
 import { findSelectedTopologyNode } from './utils/topology-selection'
 import { type OmnibarHandle } from './components/ui/Omnibar'
 import { RadarOmnibar } from './components/ui/RadarOmnibar'
@@ -604,7 +604,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const peekOwnerKeyRef = useRef<string | null>(null)
   const currentResourceKindSlug = normalizedResourcesKindSlug.toLowerCase()
   const currentResourceGroup = searchParams.get('apiGroup') ?? ''
-  const selectedResourceKindSlug = selectedResource ? kindToPlural(selectedResource.kind).toLowerCase() : ''
+  const selectedResourceKindSlug = selectedResource ? kindToPluralWithGroup(selectedResource.kind, selectedResource.group ?? '').toLowerCase() : ''
   const selectedResourceGroup = selectedResource?.group ?? ''
   const selectedResourceRouteMismatch = mainView === 'resources' && !!selectedResource && (
     selectedResourceKindSlug !== currentResourceKindSlug ||
@@ -707,7 +707,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   // URL (?resource=ns/name) — the same deep-link shape the resources view
   // round-trips — so refresh/share keeps the drawer open instead of dropping it.
   const navigateToResourceList = useCallback((resource: SelectedResource) => {
-    const pluralKind = kindToPlural(resource.kind)
+    const pluralKind = kindToPluralWithGroup(resource.kind, resource.group ?? '')
     setSelectedResource({ ...resource, kind: pluralKind })
     const newParams = new URLSearchParams(searchParams)
     newParams.delete('kind')
@@ -1027,8 +1027,9 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     // Skip K8s Event kind — informational, not resource mutations
     if (event.kind === 'Event') return
 
-    const kind = kindToPlural(event.kind)
+    const kind = kindToPluralWithGroup(event.kind, event.group ?? '')
     const structural = event.operation === 'add' || event.operation === 'delete'
+    const applicationWorkload = ['deployments', 'statefulsets', 'daemonsets', 'rollouts'].includes(kind)
 
     const fast = fastInvalidationRef.current
     fast.changedKinds.add(kind)
@@ -1042,7 +1043,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     }
 
     const slow = slowInvalidationRef.current
-    if (!structural) slow.updatedKinds.add(kind)
+    if (!structural || applicationWorkload) slow.updatedKinds.add(kind)
 
     // FAST tier — membership-sensitive + cheap, bounded 3s latency.
     if (fast.timer === null) {
@@ -1077,14 +1078,17 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       }, 3000)
     }
 
-    // SLOW tier — throttle the expensive queries for status-only churn. Only
-    // updates schedule it; structural changes are fully handled by the fast tier.
-    if (!structural && slow.timer === null) {
+    // SLOW tier — throttle expensive status churn. Workload membership changes
+    // also pass through here so the Applications refetch lands after its cache TTL.
+    if ((!structural || applicationWorkload) && slow.timer === null) {
       slow.timer = window.setTimeout(() => {
         const s = slowInvalidationRef.current
         for (const k of s.updatedKinds) {
           queryClient.invalidateQueries({ queryKey: ['resources', k] })
         }
+        if ([...s.updatedKinds].some((k) => ['deployments', 'statefulsets', 'daemonsets', 'rollouts'].includes(k))) {
+          queryClient.invalidateQueries({ queryKey: ['applications'] })
+        }
         queryClient.invalidateQueries({ queryKey: ['dashboard'] }) // health reflects status updates
         slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
       }, 15000)
@@ -1250,9 +1254,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     // Skip Internet node - it's not a real resource
     if (node.kind === 'Internet') return
 
-    // For PodGroup, we can't open a single resource drawer
-    // TODO: Could show a list of pods in the group
-    if (node.kind === 'PodGroup') return
+    const nodeGroup = apiVersionToGroup(node.data.apiVersion as string | undefined)
+    // Radar's topology PodGroup is a virtual pod aggregate. A Kubernetes
+    // scheduling.k8s.io PodGroup carries apiVersion and is a real resource.
+    if (node.kind === 'PodGroup' && !nodeGroup) return
 
     const namespace = (node.data.namespace as string) || ''
     // GitOps CRs (Application/Kustomization/HelmRelease/etc.) have a dedicated
@@ -1266,10 +1271,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     }
 
     navigateToResource({
-      kind: kindToPlural(node.kind),
+      kind: kindToPluralWithGroup(node.kind, nodeGroup),
       namespace,
       name: node.name,
-      group: apiVersionToGroup(node.data.apiVersion as string | undefined),
+      group: nodeGroup,
     })
   }, [navigate, navigateToResource])
 
@@ -2031,7 +2036,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           retained background list out of the focus order + a11y tree (the visual
           cover already blocks pointer events). */}
       {contentReady && <div className="flex-1 flex overflow-hidden" inert={expandedView}>
-        <ErrorBoundary>
+        {/* Search included, not just the path: selection inside a view rides in
+            the query (?resource=, ?release=), so a path-only key would still
+            strand a crash on the view that produced it. */}
+        <ErrorBoundary resetKey={location.pathname + location.search}>
         {/* Home dashboard */}
         {mainView === 'home' && (
           <HomeView
@@ -2039,6 +2047,17 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             topology={topology}
             fallbackClusterLoadState={showHomeClusterLoadFallback ? clusterLoadState : undefined}
             onNavigateToView={setMainView}
+            onNavigateToHelmRelease={navCustomization.embedded ? undefined : navigateToHelmRelease}
+            onNavigateToManagerPath={navCustomization.embedded || takeover.gitops ? undefined : (path) => navigate(path)}
+            // Upgrade impact lives under /checks, which a Cloud host takes
+            // over wholesale — its fleet pages have no upgrade sub-route, so
+            // the version line stays plain text there.
+            onNavigateToUpgradeImpact={takeover.checks ? undefined : () => {
+              const newParams = new URLSearchParams()
+              const globalNamespaces = searchParams.get('namespaces')
+              if (globalNamespaces) newParams.set('namespaces', globalNamespaces)
+              navigate({ pathname: '/checks/upgrade', search: newParams.toString() })
+            }}
             onNavigateToResourceKind={(kind, apiGroup, filters) => {
               // Navigate to resources view with kind in URL path
               console.debug('[filters] App.onNavigateToResourceKind:', { kind, apiGroup, filters })
@@ -2375,7 +2394,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             // Drill into a related resource while expanded: stay in the over-list
             // overlay for the new resource (pushed, so Back walks resource→resource
             // still expanded). The backdrop list follows to the new kind.
-            const pluralKind = kindToPlural(resource.kind)
+            const pluralKind = kindToPluralWithGroup(resource.kind, resource.group ?? '')
             setSelectedResource({ ...resource, kind: pluralKind })
             const p = new URLSearchParams()
             const ns = searchParams.get('namespaces')
@@ -2488,6 +2507,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         open={showSettings}
         initialSection={settingsSection}
         onClose={() => setShowSettings(false)}
+        onNavigateToResource={navigateToResourceList}
       />
 
       {/* Debug overlay — dev mode, standalone only. Embedded hosts (Radar Hub)

package/src/api/client.images.test.ts

@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { ApiError, fetchResourceWithRelationships, fetchWorkloadImages, setWorkloadImages } from './client'
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('workload image API', () => {
+  it('loads the exact referenced workload and API group for ownership checks', async () => {
+    const response = { resource: { kind: 'Deployment' }, relationships: { managedBy: [] } }
+    const fetchMock = vi.fn((input: RequestInfo | URL) => {
+      expect(input).toBe('/api/resources/deployments/prod/shared?group=apps')
+      return Promise.resolve(new Response(JSON.stringify(response), { status: 200 }))
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(
+      fetchResourceWithRelationships('deployments', 'prod', 'shared', 'apps'),
+    ).resolves.toEqual(response)
+  })
+
+  it('loads the authoritative image inventory', async () => {
+    const inventory = {
+      target: { group: 'apps', resource: 'deployments', kind: 'Deployment', namespace: 'prod', name: 'web' },
+      containers: [{ type: 'container', name: 'app', image: 'repo/app:v1' }],
+      behavior: { type: 'rolling' },
+    }
+    const fetchMock = vi.fn((input: RequestInfo | URL) => {
+      expect(input).toBe('/api/workloads/deployments/prod/web/images')
+      return Promise.resolve(new Response(JSON.stringify(inventory), { status: 200 }))
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchWorkloadImages('deployments', 'prod', 'web')).resolves.toEqual(inventory)
+    expect(fetchMock.mock.calls[0]?.[0]).toBe('/api/workloads/deployments/prod/web/images')
+  })
+
+  it('posts compare-and-swap image updates and preserves conflict status', async () => {
+    const fetchMock = vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      expect(input).toBe('/api/workloads/deployments/prod/web/images')
+      expect(init?.method).toBe('POST')
+      return Promise.resolve(new Response(JSON.stringify({
+        error: 'image for container "app" changed; review the latest images before applying',
+      }), { status: 409, headers: { 'Content-Type': 'application/json' } }))
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const promise = setWorkloadImages({
+      kind: 'deployments',
+      namespace: 'prod',
+      name: 'web',
+      updates: [{ type: 'container', name: 'app', previousImage: 'repo/app:v1', image: 'repo/app:v2' }],
+    })
+    await expect(promise).rejects.toMatchObject({ status: 409 } satisfies Partial<ApiError>)
+
+    const init = fetchMock.mock.calls[0]?.[1] as RequestInit
+    expect(init.method).toBe('POST')
+    expect(JSON.parse(String(init.body))).toEqual({
+      updates: [{ type: 'container', name: 'app', previousImage: 'repo/app:v1', image: 'repo/app:v2' }],
+    })
+  })
+})