@skyhook-io/radar-app 1.13.5 → 1.14.0

package/src/context/ConnectionContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, useCallback, useEffect, useRef, ReactNode } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { getApiBase } from '../api/config'
-import { apiFetch } from '../api/client'
+import { apiFetch, type SyncStatusSnapshot } from '../api/client'
 
 export type ConnectionStateType = 'connected' | 'disconnected' | 'connecting'
 
@@ -12,6 +12,10 @@ export interface ConnectionState {
   error?: string
   errorType?: string // config, auth, auth-rejected, auth-plugin-stuck, rbac, network, timeout, tls, unknown
   progressMessage?: string
+  // Per-kind readiness while the initial informer sync runs ('connecting'
+  // with informers started). Drives the progressive app shell — absent once
+  // connected or before informers exist.
+  syncStatus?: SyncStatusSnapshot
 }
 
 interface ConnectionStatusResponse extends ConnectionState {
@@ -157,7 +161,15 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     if (!firstConnect || cacheWarmAtMountRef.current) {
       queryClient.invalidateQueries()
     } else {
-      queryClient.invalidateQueries({ predicate: (q) => q.state.status === 'error' })
+      // Detail responses served during the progressive shell are partial —
+      // the server skips relationship computation while the topology cache
+      // is unavailable — and they resolve as successes, so the error-only
+      // sweep would leave an open drawer without its Related Resources
+      // forever (focus refetch is globally off). Refetching the resource
+      // detail keys is at most the open drawer, so it stays cheap.
+      queryClient.invalidateQueries({
+        predicate: (q) => q.state.status === 'error' || q.queryKey[0] === 'resource',
+      })
     }
   }, [queryClient])
 
@@ -195,12 +207,35 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     // while the retry is still running; the retry's own result supersedes it.
     if (manualRetryPendingRef.current || autoRetryInFlightRef.current) return
     const current = connectionRef.current
+    // The progressive shell renders real resource lists while still
+    // 'connecting'. A query client shared across cluster mounts may hold
+    // another cluster's data under identical keys — drop it before the
+    // shell can show it (the 'connected' path repeats this for the
+    // full-refresh case). Deliberately ahead of the SSE-generation guard:
+    // live connection_state frames bump the generation and drop the poll,
+    // and the shell must not spend the whole sync on another cluster's rows.
+    if (current.state === 'connecting' && data.state === 'connecting' &&
+        data.syncStatus && cacheWarmAtMountRef.current) {
+      cacheWarmAtMountRef.current = false
+      // Drop only cluster-scoped data. App chrome (auth identity, kubeconfig
+      // contexts) is not another cluster's data, and purging it flips
+      // authMePending back on — which holds the whole shell on the splash
+      // until /auth/me refetches, delaying the first progressive paint.
+      const keep = new Set(['connection-status', 'auth-me', 'contexts'])
+      queryClient.removeQueries({ predicate: (q) => !keep.has(String(q.queryKey[0])) })
+    }
     if (!shouldApplyPolledConnection(
       current.state,
       data.state,
       data.sseGenerationAtStart,
       sseGenerationRef.current,
     )) {
+      // SSE owns the state fields, but connection_state frames don't carry
+      // per-kind sync progress — merge it from the poll so the progressive
+      // shell keeps ticking while still connecting.
+      if (data.state === 'connecting' && data.syncStatus) {
+        setConnection(prev => prev.state === 'connecting' ? { ...prev, syncStatus: data.syncStatus } : prev)
+      }
       return
     }
     const becameConnected = current.state !== 'connected' && data.state === 'connected'
@@ -211,11 +246,12 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
       error: data.error,
       errorType: data.errorType,
       progressMessage: data.progressMessage,
+      syncStatus: data.syncStatus,
     })
     if (becameConnected) {
       refreshCachesOnConnect()
     }
-  }, [data, dataUpdatedAt, refreshCachesOnConnect])
+  }, [data, dataUpdatedAt, refreshCachesOnConnect, queryClient])
 
   // Retry mutation
   const retryMutation = useMutation({
@@ -231,6 +267,9 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
         state: 'connecting',
         error: undefined,
         progressMessage: 'Connecting to cluster...',
+        // A retry is a fresh attempt — per-kind progress from the previous
+        // attempt would mislabel readiness until the next poll.
+        syncStatus: undefined,
       }))
     },
     onSuccess: (result) => {
@@ -371,6 +410,12 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
       if (prev.state === 'connected' && status.state === 'connecting') {
         return prev
       }
+      // connection_state frames don't carry per-kind sync progress — keep the
+      // last polled snapshot while still connecting, or each SSE progress
+      // frame would flicker the progressive shell back to the splash.
+      if (status.state === 'connecting' && !status.syncStatus && prev.state === 'connecting') {
+        return { ...status, syncStatus: prev.syncStatus }
+      }
       return status
     })
 

package/src/context/DiagnoseCustomization.tsx

@@ -23,6 +23,7 @@ export type RenderInvestigationRunActions = (props: {
 
 /** Render prop for the resource-level Investigate action. */
 export type RenderDiagnoseAction = (ctx: {
+  /** Kubernetes Kind when loaded or discovered; otherwise its API resource name. */
   kind: string;
   /** Kubernetes API group; empty means core. */
   group?: string;

package/src/index.css

@@ -21,6 +21,23 @@
 }
 
 @layer components {
+  .metrics-layout {
+    container-type: inline-size;
+    container-name: metrics;
+  }
+  .metrics-chart-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+  }
+  @container metrics (min-width: 760px) {
+    .metrics-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .metrics-chart-wide { grid-column: 1 / -1; }
+  }
+  @container metrics (min-width: 1200px) {
+    .metrics-chart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .metrics-chart-wide { grid-column: auto; }
+  }
   .investigation-assessment {
     background: var(--color-investigation-assessment);
     border-color: var(--color-investigation-assessment-border);

package/src/utils/navigation.ts

@@ -14,7 +14,7 @@ export function searchHitToSelectedResource(hit: SearchHit): SelectedResource {
 }
 
 // Re-export shared navigation utilities from @skyhook-io/k8s-ui.
-export { kindToPlural, kindToPluralWithGroup, pluralToKind, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
+export { kindToPlural, kindToPluralWithGroup, pluralToKind, knownKindForPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '@skyhook-io/k8s-ui/utils/navigation'
 export type { NavigateToResource } from '@skyhook-io/k8s-ui/utils/navigation'
 
 const NETWORK_POLICY_TOPOLOGY_KINDS = new Set([

package/src/utils/topology-namespace.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import type { TopologyNode } from '@skyhook-io/k8s-ui/types/core'
+import { isInNamespaceScope, scopeNodesToNamespaces } from './topology-namespace'
+
+function node(id: string, kind: string, namespace?: string): TopologyNode {
+  return {
+    id,
+    kind,
+    name: id,
+    status: 'healthy',
+    data: namespace === undefined ? {} : { namespace },
+  } as TopologyNode
+}
+
+const nodes = [
+  node('web', 'Deployment', 'prod'),
+  node('ing', 'Ingress', 'staging'),
+  node('db', 'StatefulSet', 'prod'),
+  node('node-1', 'Node'),          // cluster-scoped
+  node('pv-1', 'PersistentVolume'), // cluster-scoped
+]
+
+describe('scopeNodesToNamespaces', () => {
+  it('returns every node when no namespace is selected', () => {
+    expect(scopeNodesToNamespaces(nodes, [])).toHaveLength(5)
+  })
+
+  it('keeps only the selected namespace, plus cluster-scoped nodes', () => {
+    const scoped = scopeNodesToNamespaces(nodes, ['prod'])
+    expect(scoped.map(n => n.id)).toEqual(['web', 'db', 'node-1', 'pv-1'])
+  })
+
+  it('drops a kind that exists only outside the scope', () => {
+    const scoped = scopeNodesToNamespaces(nodes, ['prod'])
+    expect(scoped.some(n => n.kind === 'Ingress')).toBe(false)
+  })
+
+  it('accepts several namespaces at once', () => {
+    const scoped = scopeNodesToNamespaces(nodes, ['prod', 'staging'])
+    expect(scoped).toHaveLength(5)
+  })
+
+  it('returns the same array identity when the scope is empty', () => {
+    expect(scopeNodesToNamespaces(nodes, [])).toBe(nodes)
+  })
+})
+
+describe('isInNamespaceScope', () => {
+  it('passes everything for a null scope', () => {
+    expect(isInNamespaceScope(node('x', 'Pod', 'any'), null)).toBe(true)
+  })
+
+  it('always passes a node with no namespace', () => {
+    expect(isInNamespaceScope(node('node-1', 'Node'), new Set(['prod']))).toBe(true)
+  })
+
+  it('treats an empty-string namespace as cluster-scoped', () => {
+    expect(isInNamespaceScope(node('n', 'Node', ''), new Set(['prod']))).toBe(true)
+  })
+
+  it('rejects a namespaced node outside the scope', () => {
+    expect(isInNamespaceScope(node('ing', 'Ingress', 'staging'), new Set(['prod']))).toBe(false)
+  })
+})

package/src/utils/topology-namespace.ts

@@ -0,0 +1,18 @@
+import type { TopologyNode } from '@skyhook-io/k8s-ui/types/core'
+
+// A node with no namespace is cluster-scoped (Node, PersistentVolume,
+// Namespace, ...) and stays visible in every scope.
+export function isInNamespaceScope(node: TopologyNode, nsSet: Set<string> | null): boolean {
+  if (!nsSet) return true
+  const ns = node.data?.namespace as string | undefined
+  return !ns || nsSet.has(ns)
+}
+
+// Shared by the topology graph and the filter sidebar so the two cannot
+// disagree about which nodes are in scope. Namespace carve-out only — kind
+// filtering stays on the graph.
+export function scopeNodesToNamespaces(nodes: TopologyNode[], namespaces: string[]): TopologyNode[] {
+  if (namespaces.length === 0) return nodes
+  const nsSet = new Set(namespaces)
+  return nodes.filter(node => isInNamespaceScope(node, nsSet))
+}