@skyhook-io/radar-app 1.6.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.6.2",
+  "version": "1.7.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",

package/src/App.tsx

@@ -29,6 +29,7 @@ import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
 import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { useNavCustomization } from './context/NavCustomization'
+import type { FleetTakeoverTarget } from './context/NavCustomization'
 import { PrimaryNavRail } from './components/nav/PrimaryNavRail'
 import { useNavRailPinned } from './hooks/useNavRailPinned'
 import { useMediaQuery } from './hooks/useMediaQuery'
@@ -276,21 +277,46 @@ function AppInner() {
     navigate({ pathname: path, search: newParams.toString() })
   }, [navigate, searchParams])
 
-  // Cloud (embedded) makes the host's fleet Checks queue the one canonical
-  // surface — owned by the host's left rail — so Radar drops its own Audit
-  // pill (see the nav below) and any route to /audit redirects to the fleet
-  // Checks queue scoped to this cluster. Entry points that still land on
-  // /audit — the Home "Cluster Audit" card, ⌘K, WorkloadView's "view all"
-  // findings, bookmarks/deep links — all funnel through here. `replace` (not
-  // assign) keeps the transient /audit URL out of history so Back doesn't
-  // bounce off the redirect. Standalone OSS (no clusterChecksHref) is
-  // unaffected and renders the in-app audit view as before.
+  // Cloud (embedded) takes over the "fleet-shaped" per-cluster views with its
+  // own fleet pages scoped to this cluster — owned by the host's left rail — so
+  // Radar drops the matching pills (see the nav below) and any route into one
+  // of these views redirects to the host. Entry points that still land on the
+  // view — Home cards, ⌘K, WorkloadView's "view all" findings, bookmarks/deep
+  // links — all funnel through here. The view name doubles as the takeover
+  // target ('issues' | 'gitops' | 'checks'; 'audit' normalizes to 'checks' via
+  // getViewFromPath). `replace` (not assign) keeps the transient /<view> URL
+  // out of history so Back doesn't bounce off the redirect. Standalone OSS (no
+  // fleetTakeoverHref) is unaffected and renders the in-app view as before.
+  // Resolve every takeover target's host URL ONCE per render so the redirect
+  // effect, nav-pill filtering, inline-view gating, and the cert click handler
+  // all close over the SAME value — host callbacks aren't guaranteed idempotent
+  // (scope / flags / signed URLs can shift between calls). undefined = not taken
+  // over → Radar renders the view itself. `clusterChecksHref` is the deprecated
+  // pre-1.7 hook, folded into the 'checks' target for back-compat.
+  const fleetTakeoverHref = navCustomization.fleetTakeoverHref
   const clusterChecksHref = navCustomization.clusterChecksHref
+  const takeover: Record<FleetTakeoverTarget, string | undefined> = {
+    issues: fleetTakeoverHref?.('issues'),
+    gitops: fleetTakeoverHref?.('gitops'),
+    checks: fleetTakeoverHref?.('checks') ?? clusterChecksHref?.(),
+    certs: fleetTakeoverHref?.('certs'),
+  }
+  // Has the host claimed this view? View-shaped targets only ('certs' has no
+  // Radar view — only its Home card consults `takeover`). Used to drop the nav
+  // pill and gate the inline view render in favor of the "Opening…" splash.
+  const isViewTakenOver = (view: ExtendedMainView): boolean =>
+    (view === 'issues' || view === 'gitops' || view === 'checks') && !!takeover[view]
+  // The host's URL for the CURRENT view, if taken over. Drives the redirect
+  // effect and the "Opening…" splash.
+  const viewTakeoverHref =
+    mainView === 'issues' || mainView === 'gitops' || mainView === 'checks'
+      ? takeover[mainView]
+      : undefined
   useEffect(() => {
-    if (clusterChecksHref && mainView === 'checks') {
-      window.location.replace(clusterChecksHref())
+    if (viewTakeoverHref) {
+      window.location.replace(viewTakeoverHref)
     }
-  }, [clusterChecksHref, mainView])
+  }, [viewTakeoverHref])
 
   const [namespaces, setNamespaces] = useState<string[]>(getInitialState().namespaces)
   // For large clusters: force SSE to reconnect with namespace filter
@@ -1318,15 +1344,14 @@ function AppInner() {
             // command palette (⌘K). Remove this comment to restore it.
             { view: 'checks' as const, icon: ShieldCheck, label: 'Checks' },
           ] as const)
-            // In Cloud, Checks is a fleet-scoped feature owned by the host's
-            // left rail; the per-cluster view is just that fleet queue filtered
-            // to this cluster, so duplicating it as a peer pill here would be a
-            // second "Checks" that teleports out of the cluster shell. Drop the
-            // Audit tab when embedded — cluster-scoped access stays available
-            // via the Home "Cluster Audit" card (→ /audit, redirected to the
-            // scoped fleet Checks by the clusterChecksHref effect above), ⌘K,
-            // and bookmarks. Standalone OSS keeps the Audit tab.
-            .filter(({ view }) => !(view === 'checks' && clusterChecksHref))
+            // In Cloud, fleet-shaped views (Checks, Issues, GitOps) are owned by
+            // the host's left rail; the per-cluster view is just that fleet page
+            // filtered to this cluster, so duplicating it as a peer pill here
+            // would be a second copy that teleports out of the cluster shell.
+            // Drop any pill the host took over — cluster-scoped access stays
+            // available via the Home cards (redirected by the takeover effect
+            // above), ⌘K, and bookmarks. Standalone OSS keeps every pill.
+            .filter(({ view }) => !isViewTakenOver(view))
             .map(({ view, icon: Icon, label }) => (
             <Tooltip key={view} content={label} delay={100} position="bottom">
               <button
@@ -1382,8 +1407,6 @@ function AppInner() {
         <div className="flex items-center gap-3 shrink-0">
           <NamespaceSwitcher
             ref={namespaceSwitcherRef}
-            disabled={mainView === 'helm'}
-            disabledTooltip="Helm view always shows all namespaces"
           />
 
 
@@ -1611,6 +1634,15 @@ function AppInner() {
               navigate({ pathname: `/resources/${kind}`, search: newParams.toString() })
             }}
             onNavigateToResource={navigateFromIssue}
+            // Certs has no Radar view, so it can't ride the view-redirect effect
+            // above — wire the Certificate Health card straight to the host's
+            // fleet Certs page (scoped to this cluster) when claimed. `assign`
+            // (not replace): the user is navigating forward from a card, so this
+            // belongs in history. Omitted → the card falls back to Radar's own
+            // TLS-secrets resource list.
+            onNavigateToCerts={
+              takeover.certs ? () => window.location.assign(takeover.certs!) : undefined
+            }
           />
         )}
 
@@ -1746,10 +1778,9 @@ function AppInner() {
           />
         )}
 
-        {/* Helm view - always show all namespaces since releases span multiple ns */}
         {mainView === 'helm' && (
           <HelmView
-            namespace=""
+            namespaces={namespaces}
             selectedRelease={selectedHelmRelease}
             onReleaseClick={(ns, name, storageNamespace) => {
               setSelectedHelmRelease({ namespace: ns, name, storageNamespace })
@@ -1765,8 +1796,9 @@ function AppInner() {
           />
         )}
 
-        {/* GitOps view */}
-        {mainView === 'gitops' && (
+        {/* GitOps view (inline only when the host hasn't taken it over — see
+            the takeover splash below). */}
+        {mainView === 'gitops' && !isViewTakenOver('gitops') && (
           <GitOpsView
             namespaces={namespaces}
             onOpenResource={(resource) => {
@@ -1796,17 +1828,21 @@ function AppInner() {
           <CostView onBack={() => setMainView('home')} />
         )}
 
-        {/* Best practices detail view. In Cloud this redirects to the host's
-            fleet Checks queue (clusterChecksHref effect above) — render a brief
-            splash instead of the single-cluster view while the cross-document
-            nav lands. */}
-        {mainView === 'checks' && clusterChecksHref && (
+        {/* 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
+            own fetches) while the cross-document nav lands. Covers checks /
+            issues / gitops with one block since only one view is active. */}
+        {viewTakeoverHref && (
           <div className="flex-1 flex flex-col items-center justify-center gap-3 bg-theme-base">
             <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
-            <p className="text-sm text-theme-text-secondary">Opening Checks…</p>
+            <p className="text-sm text-theme-text-secondary">Opening…</p>
           </div>
         )}
-        {mainView === 'checks' && !clusterChecksHref && (
+
+        {/* Best practices detail view (inline only when the host hasn't taken
+            Checks over — standalone OSS, or Cloud without a checks takeover). */}
+        {mainView === 'checks' && !isViewTakenOver('checks') && (
           <AuditView
             namespaces={namespaces}
             onNavigateToResource={navigateToResourceList}
@@ -1816,8 +1852,9 @@ function AppInner() {
         {/* Issues — per-cluster live triage queue (hidden route: not yet in the
             nav `views` list; reachable at /issues). Same shared <IssuesView> the
             Hub fleet uses; a GitOps reconciler subject routes to its detail page,
-            other resources open the standard resource view. */}
-        {mainView === 'issues' && (
+            other resources open the standard resource view. Inline only when the
+            host hasn't taken it over. */}
+        {mainView === 'issues' && !isViewTakenOver('issues') && (
           <IssuesPane
             namespaces={namespaces}
             onNavigateToResource={navigateFromIssue}

package/src/api/client.ts

@@ -2311,11 +2311,15 @@ export function useDrainNode() {
 // Helm API hooks
 // ============================================================================
 
+function helmNamespaceParams(namespaces: string[] = []) {
+  return namespaces.length > 0 ? `?namespaces=${namespaces.join(',')}` : ''
+}
+
 // List all Helm releases
-export function useHelmReleases(namespace?: string) {
-  const params = namespace ? `?namespace=${namespace}` : ''
+export function useHelmReleases(namespaces: string[] = []) {
+  const params = helmNamespaceParams(namespaces)
   return useQuery<HelmRelease[]>({
-    queryKey: ['helm-releases', namespace],
+    queryKey: ['helm-releases', namespaces],
     queryFn: () => fetchJSON(`/helm/releases${params}`),
     staleTime: 30000, // 30 seconds
   })
@@ -2393,10 +2397,10 @@ export function useHelmUpgradeInfo(namespace: string, name: string, enabled = tr
 }
 
 // Batch check for upgrade availability (for list view)
-export function useHelmBatchUpgradeInfo(namespace?: string, enabled = true) {
-  const params = namespace ? `?namespace=${namespace}` : ''
+export function useHelmBatchUpgradeInfo(namespaces: string[] = [], enabled = true) {
+  const params = helmNamespaceParams(namespaces)
   return useQuery<BatchUpgradeInfo>({
-    queryKey: ['helm-batch-upgrade-info', namespace],
+    queryKey: ['helm-batch-upgrade-info', namespaces],
     queryFn: () => fetchJSON(`/helm/upgrade-check${params}`),
     enabled,
     staleTime: 30000, // 30 seconds - keep in sync with release list

package/src/components/helm/HelmView.tsx

@@ -15,23 +15,23 @@ import { InstallWizard } from './InstallWizard'
 type ViewTab = 'releases' | 'charts'
 
 interface HelmViewProps {
-  namespace: string
+  namespaces: string[]
   selectedRelease?: SelectedHelmRelease | null
   onReleaseClick?: (namespace: string, name: string, storageNamespace?: string) => void
 }
 
-export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmViewProps) {
+export function HelmView({ namespaces, selectedRelease, onReleaseClick }: HelmViewProps) {
   const [activeTab, setActiveTab] = useState<ViewTab>('releases')
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedChart, setSelectedChart] = useState<{ repo: string; chart: string; version: string; source: ChartSource } | null>(null)
 
-  const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespace || undefined)
+  const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespaces)
   const isForbidden = isForbiddenError(releasesError)
   const releasesErrorMessage = releasesError instanceof Error ? releasesError.message : 'Failed to load Helm releases'
 
   // Lazy load upgrade info after releases are loaded
   const { data: upgradeInfo, isLoading: upgradeLoading, error: upgradeError, refetch: refetchUpgradeInfo } = useHelmBatchUpgradeInfo(
-    namespace || undefined,
+    namespaces,
     Boolean(releases && releases.length > 0)
   )
   const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade checks failed'

package/src/components/home/HomeView.tsx

@@ -29,9 +29,16 @@ interface HomeViewProps {
   onNavigateToView: (view: ExtendedMainView, params?: Record<string, string>) => void
   onNavigateToResourceKind: (kind: string, group?: string, filters?: Record<string, string[]>) => void
   onNavigateToResource: (resource: SelectedResource) => void
+  /**
+   * Optional override for the Certificate Health card's click. When an embedded
+   * host (Radar Cloud) takes Certs over with its own fleet page, it passes this
+   * to route there instead of Radar's TLS-secrets resource list. Omitted in
+   * standalone OSS → the card drills into secrets as before.
+   */
+  onNavigateToCerts?: () => void
 }
 
-export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
+export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
   const { data, isLoading, error } = useDashboard(namespaces)
   const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
   const issues = issuesData?.issues ?? []
@@ -165,7 +172,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
                   <BandItem>
                     <CertificateHealthCard
                       data={data.certificateHealth}
-                      onNavigate={() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] })}
+                      onNavigate={onNavigateToCerts ?? (() => onNavigateToResourceKind('secrets', undefined, { type: ['TLS'] }))}
                     />
                   </BandItem>
                 )}

package/src/context/NavCustomization.tsx

@@ -13,6 +13,14 @@
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 
+/**
+ * Per-cluster destinations an embedded host can take over with its own
+ * fleet-scoped pages. See `fleetTakeoverHref`. 'issues' | 'gitops' | 'checks'
+ * are also Radar view names (so route entry redirects too); 'certs' is
+ * card-only (Radar has no certs view).
+ */
+export type FleetTakeoverTarget = 'issues' | 'gitops' | 'checks' | 'certs';
+
 interface NavCustomizationBase {
   /** Replaces Radar's Skyhook/radar logo + wordmark. */
   brandSlot?: ReactNode;
@@ -32,15 +40,32 @@ interface NavCustomizationBase {
     group?: string;
   }) => string;
   /**
-   * When set, Radar treats the host's fleet Checks page as the one canonical
-   * Checks surface in Cloud: it removes its own per-cluster Audit tab and
-   * redirects any route to /audit (the Home "Cluster Audit" card, ⌘K,
-   * bookmarks) to the URL returned here — the host's fleet Checks page scoped
-   * to this cluster. Navigated via window.location.replace (a cross-document
-   * hop into the host's router) so the transient /audit URL stays out of
-   * history. This keeps the per-cluster view and the host's fleet nav from
-   * presenting two diverging Checks surfaces. Standalone Radar omits this and
-   * keeps its single-cluster Audit tab.
+   * Lets an embedded host (e.g. Radar Cloud) take over selected per-cluster
+   * destinations with its OWN fleet pages scoped to this cluster, instead of
+   * Radar rendering them inline. Given a semantic target the host returns the
+   * URL to navigate to, or `undefined`/omits the hook to let Radar render its
+   * own view as usual (standalone OSS does the latter for everything).
+   *
+   * This is how the Home dashboard's "fleet-shaped" cards reach the host's
+   * canonical surfaces rather than a second, diverging per-cluster copy:
+   *   - 'issues'  → the Active Issues panel + cluster-health issues count
+   *   - 'gitops'  → the GitOps controllers card
+   *   - 'checks'  → the Cluster Audit card (and any route to /audit; legacy
+   *                 `clusterChecksHref` folded in here)
+   *   - 'certs'   → the Certificate Health card
+   *
+   * View-shaped targets (issues / gitops / checks) are also honored for any
+   * entry into that view — ⌘K, bookmarks, deep links — via a redirect effect
+   * in App.tsx, using window.location.replace so the transient /<view> URL
+   * stays out of history. 'certs' has no Radar view, so only the card consults
+   * it (window.location.assign — a real forward navigation the user initiated).
+   */
+  fleetTakeoverHref?: (target: FleetTakeoverTarget) => string | undefined;
+  /**
+   * @deprecated Superseded by `fleetTakeoverHref('checks')`. Kept so consumers
+   * still on the pre-1.7 hook keep working (App.tsx folds it into the 'checks'
+   * target) — this makes adding `fleetTakeoverHref` an additive, non-breaking
+   * change. Remove in a major release once all consumers have migrated.
    */
   clusterChecksHref?: () => string;
   /**

package/src/index.ts

@@ -14,7 +14,7 @@ export {
   getAuthHeaders,
   getCredentialsMode,
 } from './api/config';
-export type { NavCustomization } from './context/NavCustomization';
+export type { NavCustomization, FleetTakeoverTarget } from './context/NavCustomization';
 export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';
 
 // Shared cluster-switcher primitive — re-exported from @skyhook-io/k8s-ui so