@skyhook-io/radar-app 1.16.2 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.16.2",
+  "version": "1.17.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",
@@ -36,13 +36,13 @@
     "diff": "^9.0.0",
     "monaco-editor": "0.55.1",
     "react-markdown": "^10.1.0",
-    "react-virtuoso": "^4.18.13",
+    "react-virtuoso": "^4.18.16",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.4.2",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.16.1",
+    "@skyhook-io/k8s-ui": ">=1.17.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -73,14 +73,14 @@
     "globals": "^17.11.0",
     "lucide-react": "^1.48.0",
     "postcss": "^8.5.28",
-    "prettier": "^3.9.8",
+    "prettier": "^3.9.9",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router-dom": "^7.18.4",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.70.0",
+    "typescript-eslint": "^8.71.0",
     "vite": "^8.3.1"
   },
   "sideEffects": [

package/src/App.tsx

@@ -38,6 +38,9 @@ import { CloudFunnelButton } from './components/CloudFunnelButton'
 import { useNavCustomization } from './context/NavCustomization'
 import type { FleetTakeoverTarget } from './context/NavCustomization'
 import { PrimaryNavRail } from './components/nav/PrimaryNavRail'
+import { CNPGView } from './components/cnpg/CNPGView'
+import { CNPG_SCREENS, cnpgDetailKindFor, cnpgDetailPath, parseCNPGRoute } from './components/cnpg/routes'
+import { currentPageLabel } from './components/cnpg/paths'
 import { navigateFromPrimaryRail } from './components/nav/navigation'
 import { useNavRailPinned } from './hooks/useNavRailPinned'
 import { useMediaQuery } from './hooks/useMediaQuery'
@@ -45,6 +48,7 @@ import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitch
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
 import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { SyncProgressPanel } from './components/SyncProgressPanel'
+import { NoClusterAccessBanner } from './components/NoClusterAccessBanner'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { RadarUpgradeProvider } from './context/RadarUpgrade'
 import { UserMenu } from './components/UserMenu'
@@ -56,7 +60,7 @@ import { UsageDataPrompt } from './components/usage-data/UsageDataPrompt'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
-import { debugNamespaceLog, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe, useAudit } from './api/client'
+import { debugNamespaceLog, refetchOnResourceEvents, resourceEventKey, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe, useAudit } from './api/client'
 import { buildAuditSeverityMap } from './utils/auditBadges'
 import { isInNamespaceScope, scopeNodesToNamespaces } from './utils/topology-namespace'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode, stripBasename } from './api/config'
@@ -124,7 +128,7 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'capacity' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications' | 'investigations'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'capacity' | 'cnpg' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications' | 'investigations'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -138,6 +142,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'traffic') return 'traffic'
   if (path === 'cost') return 'cost'
   if (path === 'capacity') return 'capacity'
+  if (path === 'cnpg') return 'cnpg'
   if (path === 'workload') return 'workload'
   if (path === 'checks' || path === 'audit') return 'checks'  // /audit = legacy → checks
   if (path === 'gitops') return 'gitops'
@@ -165,7 +170,7 @@ function usageView(pathname: string, view: ExtendedMainView, upgrade: boolean):
 const CRASH_LABELS: Record<ExtendedMainView, string> = {
   home: 'Home', topology: 'Topology', resources: 'Resources', timeline: 'Timeline',
   issues: 'Issues', helm: 'Helm', helmCompare: 'HelmCompare', traffic: 'Traffic',
-  cost: 'Cost', capacity: 'Capacity', checks: 'Checks', gitops: 'GitOps',
+  cost: 'Cost', capacity: 'Capacity', cnpg: 'CloudNativePG', checks: 'Checks', gitops: 'GitOps',
   applications: 'Applications', workload: 'Workload', compare: 'Compare',
   investigations: 'Investigations',
 }
@@ -282,6 +287,12 @@ function radarPageTitle(pathname: string, search = '', apiResources?: APIResourc
     if (pathSegments[1] === 'activity') return 'Capacity Activity'
   }
 
+  if (view === 'cnpg') {
+    const route = parseCNPGRoute(pathname)
+    if (route.detail) return route.detail.name
+    const screen = CNPG_SCREENS.find((s) => s.id === route.screen)
+    return `CloudNativePG ${screen?.label ?? 'Overview'}`
+  }
   if (view === 'home') return 'Overview'
   // Every other view's label is its id capitalized — getViewFromPath has already
   // normalized aliases (e.g. /audit → 'checks'), so no lookup table is needed.
@@ -875,7 +886,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     gitops: 'g o', checks: 'g u', cost: 'g c', capacity: 'g p',
     // Non-rail views (reachable via deep links / actions, not the rail) get no
     // dedicated mnemonic — listed for exhaustiveness so the type stays total.
-    workload: '', compare: '', helmCompare: '', investigations: '',
+    workload: '', compare: '', helmCompare: '', investigations: '', cnpg: '',
   }
   const views = Object.keys(VIEW_SHORTCUT_KEYS).filter(
     (v): v is ExtendedMainView => VIEW_SHORTCUT_KEYS[v as ExtendedMainView] !== '',
@@ -1058,12 +1069,14 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   //     update that arrived *after* the fast structural flush already ran.
   const fastInvalidationRef = useRef<{
     changedKinds: Set<string>   // every changed kind (any op) → detail drawer
+    changedObjects: Set<string> // resourceEventKey of every event → detail views that got a 404
     structuralKinds: Set<string> // add/delete kinds → list membership + counts + dashboard
     environmentNamespaces: Set<string>
     environmentPods: Map<string, Set<string>>
     secretsChanged: boolean
     timer: number | null
-  }>({ changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null })
+  }>({ changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null })
+  const cnpgInvalidationPendingRef = useRef(false)
   const slowInvalidationRef = useRef<{
     updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
     timer: number | null
@@ -1095,8 +1108,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     const structural = event.operation === 'add' || event.operation === 'delete'
     const applicationWorkload = ['deployments', 'statefulsets', 'daemonsets', 'rollouts'].includes(kind)
 
+    if (event.group?.endsWith('.cnpg.io')) cnpgInvalidationPendingRef.current = true
+
     const fast = fastInvalidationRef.current
     fast.changedKinds.add(kind)
+    fast.changedObjects.add(resourceEventKey(kind, event.namespace ?? '', event.name))
     if (structural) fast.structuralKinds.add(kind)
     if (kind === 'secrets') fast.secretsChanged = true
     if ((kind === 'configmaps' || kind === 'secrets') && event.namespace) fast.environmentNamespaces.add(event.namespace)
@@ -1114,7 +1130,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       fast.timer = window.setTimeout(() => {
         const f = fastInvalidationRef.current
         for (const k of f.changedKinds) {
-          queryClient.invalidateQueries({ queryKey: ['resource', k] }) // open detail drawer stays live
+          // Open detail drawers stay live; a deleted one is left alone unless
+          // an event names it.
+          queryClient.invalidateQueries({
+            queryKey: ['resource', k],
+            predicate: (q) => refetchOnResourceEvents(q, k, f.changedObjects),
+          })
         }
         for (const k of f.structuralKinds) {
           queryClient.invalidateQueries({ queryKey: ['resources', k] }) // list membership changed
@@ -1138,7 +1159,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         // GitOps view is mounted (Phase 2 will make this relevance-aware).
         queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
         queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
-        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
+        if (cnpgInvalidationPendingRef.current) {
+          cnpgInvalidationPendingRef.current = false
+          queryClient.invalidateQueries({ queryKey: ['cnpg', 'workspace'] })
+        }
+        fastInvalidationRef.current = { changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       }, 3000)
     }
 
@@ -1167,7 +1192,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
     if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
     if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
+    fastInvalidationRef.current = { changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
     slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
     timelineInvalidationRef.current = { timer: null }
   }, [])
@@ -1190,7 +1215,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
       if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
       if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
+      fastInvalidationRef.current = { changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
       timelineInvalidationRef.current = { timer: null }
 
@@ -1223,6 +1248,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         const nextParams = new URLSearchParams()
         const diagnoseRun = new URLSearchParams(location.search).get('ai-run')
         if (diagnoseRun) nextParams.set('ai-run', diagnoseRun)
+        // A CNPG detail keeps the context it belongs to, so it can say it is
+        // not in the new one instead of loading a same-named object.
+        const pinnedCtx = new URLSearchParams(location.search).get('ctx')
+        if (pinnedCtx && location.pathname.startsWith('/cnpg/')) nextParams.set('ctx', pinnedCtx)
         navigate(
           { pathname: location.pathname, search: nextParams.toString() },
           { replace: true, state: location.state },
@@ -1749,7 +1778,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     setVisibleKinds(new Set())
   }, [])
 
-  const navActiveView = mainView === 'helmCompare' ? 'helm' : mainView
+  const navActiveView = mainView === 'helmCompare' ? 'helm' : mainView === 'cnpg' ? 'resources' : mainView
 
   return (
     <PortForwardProvider>
@@ -2010,6 +2039,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         </PaneLoader>
       )}
 
+      {contentReady && <NoClusterAccessBanner />}
       {/* Main content - only show when connected and authenticated */}
       {/* inert while a fullscreen detail overlay covers the views — keeps the
           retained background list out of the focus order + a11y tree (the visual
@@ -2290,7 +2320,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
         {/* Traffic view */}
         {!viewsSyncGated && mainView === 'traffic' && (
-          <TrafficView namespaces={namespaces} />
+          <TrafficView namespaces={namespaces} onSetNamespaces={(ns) => { setNamespaces(ns); setActiveNamespace.mutate({ namespaces: ns }) }} />
         )}
 
         {/* Cost detail view */}
@@ -2302,6 +2332,16 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           <CapacityView onOpenResource={navigateToResource} />
         )}
 
+        {!viewsSyncGated && mainView === 'cnpg' && (
+          <CNPGView
+            namespaces={namespaces}
+            selectedResource={routeSelectedResource}
+            onOpenResource={navigateToResource}
+            onCloseResource={() => setSelectedResource(null)}
+            onClearNamespaces={clearAllNamespaces}
+          />
+        )}
+
         {/* Takeover splash. When the host claims the current view via
             fleetTakeoverHref, the redirect effect above is mid-flight — render a
             brief splash instead of the inline view (which would flash + fire its
@@ -2369,7 +2409,15 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           onClose={closeDrawer}
           onNavigate={(res) => navigateToResource(res)}
           canCollapseToDrawer={!isMobile}
-          onExpand={(_res, opts) => {
+          onExpand={(res, opts) => {
+            const cnpgPlural = cnpgDetailKindFor(res.kind, res.group)
+            if (cnpgPlural) {
+              navigate(
+                cnpgDetailPath({ plural: cnpgPlural, namespace: res.namespace, name: res.name }, connection.context || undefined, opts?.yaml ? 'yaml' : undefined),
+                { state: { returnLabel: currentPageLabel(), returnCtx: connection.context } },
+              )
+              return
+            }
             // Grow the peek into a fullscreen overlay (?full=1, pushed so Back
             // collapses) over whatever view is underneath — list, topology graph,
             // GitOps, Applications — which stays mounted. Carry the YAML tab when

package/src/RadarApp.tsx

@@ -46,6 +46,7 @@ import type {
 import type { ClusterLoadState } from "./types/clusterLoadState";
 import { TimelineSourceProvider } from "./context/TimelineSource";
 import type { TimelineSourceConfig } from "./api/timelineSource";
+import { TimelineRetentionNoteProvider } from "./context/TimelineCustomization";
 import { DiagnoseCustomizationProvider } from "./context/DiagnoseCustomization";
 import type {
   RenderDiagnoseAction,
@@ -180,6 +181,12 @@ export interface RadarAppProps {
    * React hook-order violation). Set it once at mount when possible.
    */
   timelineSource?: TimelineSourceConfig;
+  /**
+   * A note shown above the timeline and the Applications history, saying how
+   * far back history goes. Omitted → no note. Set it only when the timeline server
+   * actually limits history, or the note misstates what is shown.
+   */
+  timelineRetentionNote?: React.ReactNode;
 }
 
 // Default QueryClient with the same shape Radar's standalone binary uses.
@@ -236,6 +243,7 @@ export function RadarApp({
   onClusterLoadStateChange,
   onInvestigationFocus,
   timelineSource,
+  timelineRetentionNote,
 }: RadarAppProps): React.ReactElement {
   // Apply runtime config during render so module-level singletons are set
   // before children construct URLs. getApiBase() / getAuthHeaders() /
@@ -266,24 +274,26 @@ export function RadarApp({
             <RadarUpgradeHostProvider value={upgradeHost}>
               <FilterLocationBridge>
                 <TimelineSourceProvider config={timelineSource}>
-                  <DiagnoseCustomizationProvider
-                    value={renderDiagnoseAction ?? defaultDiagnoseAction}
-                    consentCopy={diagnoseConsent}
-                    renderRunActions={renderInvestigationRunActions}
-                    renderRefusalAction={renderInvestigationRefusalAction}
-                  >
-                    <DiagnoseProvider
-                      browserURLState={router !== "memory"}
-                      forceRouterURLState={router === "memory"}
-                      onFocusedRun={onInvestigationFocus}
+                  <TimelineRetentionNoteProvider value={timelineRetentionNote}>
+                    <DiagnoseCustomizationProvider
+                      value={renderDiagnoseAction ?? defaultDiagnoseAction}
+                      consentCopy={diagnoseConsent}
+                      renderRunActions={renderInvestigationRunActions}
+                      renderRefusalAction={renderInvestigationRefusalAction}
                     >
-                      <App
-                        manageDocumentTitle={manageDocumentTitle}
-                        documentTitleSuffix={documentTitleSuffix}
-                        onClusterLoadStateChange={onClusterLoadStateChange}
-                      />
-                    </DiagnoseProvider>
-                  </DiagnoseCustomizationProvider>
+                      <DiagnoseProvider
+                        browserURLState={router !== "memory"}
+                        forceRouterURLState={router === "memory"}
+                        onFocusedRun={onInvestigationFocus}
+                      >
+                        <App
+                          manageDocumentTitle={manageDocumentTitle}
+                          documentTitleSuffix={documentTitleSuffix}
+                          onClusterLoadStateChange={onClusterLoadStateChange}
+                        />
+                      </DiagnoseProvider>
+                    </DiagnoseCustomizationProvider>
+                  </TimelineRetentionNoteProvider>
                 </TimelineSourceProvider>
               </FilterLocationBridge>
             </RadarUpgradeHostProvider>

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

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { ApiError, goneRecheckInterval, refetchOnResourceEvents, resourceEventKey } from "./client";
+
+const notFound = new ApiError('pods "web-1" not found', 404);
+const detail = (namespace: string, name: string, error: unknown) => ({
+  queryKey: ["resource", "pods", namespace, name, undefined],
+  state: { error },
+});
+
+describe("refetchOnResourceEvents", () => {
+  it("refetches a live detail view on any change to its kind", () => {
+    expect(refetchOnResourceEvents(detail("shop", "web-1", null), "pods", new Set())).toBe(true);
+  });
+
+  it("refetches a detail view that failed for a reason other than 404", () => {
+    const failed = detail("shop", "web-1", new ApiError("unavailable", 503));
+    expect(refetchOnResourceEvents(failed, "pods", new Set())).toBe(true);
+  });
+
+  it("leaves a deleted object alone when other objects of its kind change", () => {
+    // The production shape: pods churning next to an open view of a deleted
+    // pod refetched it, 404 every time, for as long as the view stayed open.
+    const named = new Set([resourceEventKey("pods", "shop", "web-2")]);
+    expect(refetchOnResourceEvents(detail("shop", "web-1", notFound), "pods", named)).toBe(false);
+  });
+
+  it("refetches a deleted object as soon as an event names it", () => {
+    // A StatefulSet recreates its pod under the same name.
+    const named = new Set([resourceEventKey("pods", "shop", "web-1")]);
+    expect(refetchOnResourceEvents(detail("shop", "web-1", notFound), "pods", named)).toBe(true);
+  });
+
+  it("matches a cluster-scoped object, whose namespace is empty", () => {
+    const query = { queryKey: ["resource", "nodes", "", "node-a", undefined], state: { error: notFound } };
+    expect(refetchOnResourceEvents(query, "nodes", new Set([resourceEventKey("nodes", "", "node-a")]))).toBe(true);
+  });
+});
+
+describe("goneRecheckInterval", () => {
+  it("re-checks a deleted object once a minute", () => {
+    expect(goneRecheckInterval({ state: { error: notFound } }, undefined)).toBe(60_000);
+    expect(goneRecheckInterval({ state: { error: notFound } }, 5_000)).toBe(60_000);
+  });
+
+  it("keeps the caller's interval otherwise", () => {
+    expect(goneRecheckInterval({ state: { error: null } }, 5_000)).toBe(5_000);
+    expect(goneRecheckInterval({ state: { error: new ApiError("unavailable", 503) } }, undefined)).toBeUndefined();
+  });
+});