@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/api/radarFeatures.ts

@@ -28,6 +28,7 @@ export interface RadarFeatureSpec {
 
 export const RADAR_FEATURES = {
   resourceIssues: { label: 'Operational issues', minimumVersion: 'v1.8.0', flag: 'resourceIssues' },
+  resourceIssueCoverage: { label: 'Resource-specific issue views', flag: 'resourceIssueCoverage', flagShippedWithEndpoint: true },
   podEnvironment: { label: 'Values from ConfigMaps and Secrets', minimumVersion: 'v1.9.0', flag: 'podEnvironment' },
   policyResource: { label: 'Policy results', minimumVersion: 'v1.10.0', flag: 'policyResource' },
   capacity: { label: 'Capacity views', minimumVersion: 'v1.9.0' },
@@ -35,6 +36,11 @@ export const RADAR_FEATURES = {
   drainPlan: { label: 'Drain plans', minimumVersion: 'v1.14.0' },
   applications: { label: 'Applications', minimumVersion: 'v1.7.7' },
   workloadHistory: { label: 'Workload history', flag: 'workloadHistory', flagShippedWithEndpoint: true },
+  cnpgWorkspace: { label: 'CloudNativePG views', flag: 'cnpgWorkspace', flagShippedWithEndpoint: true },
+  cnpgProtectionSetup: { label: 'CloudNativePG backup setup', flag: 'cnpgProtectionSetup', flagShippedWithEndpoint: true },
+  gitopsWriteEvidence: { label: 'GitOps revert warnings', flag: 'gitopsWriteEvidence', flagShippedWithEndpoint: true },
+  serviceEndpointSlices: { label: 'Service EndpointSlice inventories', flag: 'serviceEndpointSlices', flagShippedWithEndpoint: true },
+  trafficRecords: { label: 'Flow records for a graph selection', flag: 'trafficRecords', flagShippedWithEndpoint: true },
 } as const satisfies Record<string, RadarFeatureSpec>
 
 export type RadarFeature = keyof typeof RADAR_FEATURES

package/src/api/reviewedActionMutation.test.tsx

@@ -0,0 +1,164 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { describe, expect, it, vi } from 'vitest'
+import { useReviewedActionMutation } from './reviewedActionMutation'
+import { ApiError } from './client'
+import { actionErrorCode, actionCompleted } from './actions'
+import { RadarFeatureUnsupportedError } from './radarFeatures'
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+describe('reviewed action lifetime', () => {
+  it.each([
+    new TypeError('Connection lost'),
+    new ApiError('One write completed', 409, { code: 'partial', completed: ['Pod removed'] }),
+    new ApiError('upstream connect error or disconnect/reset before headers', 503),
+  ])('retains an ambiguous result through remount and prevents another request: %s', async (failure) => {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } })
+    const host = document.body.appendChild(document.createElement('div'))
+    const root = createRoot(host)
+    const request = vi.fn(async () => { throw failure })
+    let current: ReturnType<typeof useReviewedActionMutation<null, { request: { reviewedContext: string } }>>
+    function Dialog({ target }: { target: string }) {
+      current = useReviewedActionMutation<null, { request: { reviewedContext: string } }>(target, 'ctx', { mutationFn: request })
+      return <div>{current.outcomeError?.message}</div>
+    }
+    const mount = (target?: string) => act(() => root.render(<QueryClientProvider client={client}>{target && <Dialog target={target} />}</QueryClientProvider>))
+    const attempt = () => act(async () => {
+      await current.mutateAsync({ request: { reviewedContext: 'ctx' } }).catch(() => {})
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+    try {
+      mount('/api/cnpg/clusters/jobs/orders')
+      await attempt()
+      mount()
+      client.removeQueries()
+      client.clear()
+      mount('/api/cnpg/clusters/jobs/orders')
+      expect(current!.outcomeError?.message).toContain('reload this page')
+      expect(actionErrorCode(current!.outcomeError)).toBe(actionErrorCode(failure))
+      expect(actionCompleted(current!.outcomeError)).toEqual(actionCompleted(failure))
+      await attempt()
+      expect(request).toHaveBeenCalledTimes(1)
+      mount('/other-cluster/api/cnpg/clusters/jobs/orders')
+      expect(current!.outcomeError).toBeNull()
+      mount('/api/cnpg/scheduledbackups/jobs/orders')
+      expect(current!.outcomeError).toBeNull()
+    } finally {
+      act(() => root.unmount())
+      client.clear()
+      host.remove()
+    }
+  })
+  it.each([
+    { nextTarget: '/api/target', nextContext: 'other-context' },
+    { nextTarget: '/other-cluster/api/target', nextContext: 'ctx' },
+  ])('keeps a late result on the original cluster binding: %s', async ({ nextTarget, nextContext }) => {
+    const client = new QueryClient()
+    const host = document.body.appendChild(document.createElement('div'))
+    const root = createRoot(host)
+    let fail!: (error: Error) => void
+    let current: ReturnType<typeof useReviewedActionMutation<null, { request: { reviewedContext: string } }>>
+    function Dialog({ target, context }: { target: string; context: string }) {
+      current = useReviewedActionMutation<null, { request: { reviewedContext: string } }>(target, context, {
+        mutationFn: () => new Promise<null>((_, reject) => { fail = reject }),
+      })
+      return null
+    }
+    const mount = (target: string, context: string) => act(() => root.render(<QueryClientProvider client={client}><Dialog target={target} context={context} /></QueryClientProvider>))
+    try {
+      mount('/api/target', 'ctx')
+      let attempted!: Promise<unknown>
+      await act(async () => {
+        attempted = current.mutateAsync({ request: { reviewedContext: 'ctx' } }).catch(() => {})
+        await Promise.resolve()
+      })
+      mount(nextTarget, nextContext)
+      await act(async () => {
+        fail(new TypeError('Connection lost'))
+        await attempted
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+      expect(current!.outcomeError).toBeNull()
+      mount('/api/target', 'ctx')
+      expect(current!.outcomeError?.message).toContain('Connection lost')
+    } finally {
+      act(() => root.unmount())
+      client.clear()
+      host.remove()
+    }
+  })
+  it.each([
+    new ApiError('Facts changed', 409, { code: 'changed' }),
+    new ApiError('The operator webhook did not answer', 503, { code: 'operator_webhook_unavailable' }),
+    new RadarFeatureUnsupportedError('cnpgWorkspace', {}),
+  ])('keeps a known refusal retryable after remount: %s', async (failure) => {
+    const client = new QueryClient()
+    const host = document.body.appendChild(document.createElement('div'))
+    const root = createRoot(host)
+    let current: ReturnType<typeof useReviewedActionMutation<null, { request: { reviewedContext: string } }>>
+    const request = vi.fn(async () => { throw failure })
+    function Dialog() {
+      current = useReviewedActionMutation<null, { request: { reviewedContext: string } }>('/api/target', 'ctx', { mutationFn: request })
+      return null
+    }
+    const render = (open: boolean) => act(() => root.render(<QueryClientProvider client={client}>{open && <Dialog />}</QueryClientProvider>))
+    try {
+      render(true)
+      await act(async () => { await current.mutateAsync({ request: { reviewedContext: 'ctx' } }).catch(() => {}) })
+      render(false)
+      render(true)
+      expect(current!.outcomeError).toBeNull()
+      await act(async () => { await current.mutateAsync({ request: { reviewedContext: 'ctx' } }).catch(() => {}) })
+      expect(request).toHaveBeenCalledTimes(2)
+    } finally {
+      act(() => root.unmount())
+      client.clear()
+      host.remove()
+    }
+  })
+
+  it('retains an in-flight request through remount and cache clearing without sending twice', async () => {
+    const client = new QueryClient()
+    const host = document.body.appendChild(document.createElement('div'))
+    const root = createRoot(host)
+    let complete!: (data: null) => void
+    const request = vi.fn(() => new Promise<null>(resolve => { complete = resolve }))
+    let current: ReturnType<typeof useReviewedActionMutation<null, { request: { reviewedContext: string } }>>
+    function Dialog() {
+      current = useReviewedActionMutation<null, { request: { reviewedContext: string } }>('/api/target', 'ctx', { mutationFn: request })
+      return null
+    }
+    const render = (open: boolean) => act(() => root.render(<QueryClientProvider client={client}>{open && <Dialog />}</QueryClientProvider>))
+    try {
+      render(true)
+      let attempted!: Promise<null>
+      await act(async () => {
+        attempted = current.mutateAsync({ request: { reviewedContext: 'ctx' } })
+        await Promise.resolve()
+      })
+      render(false)
+      client.removeQueries()
+      client.clear()
+      render(true)
+      expect(current!.isPending).toBe(true)
+      await act(async () => {
+        await expect(current.mutateAsync({ request: { reviewedContext: 'ctx' } })).rejects.toThrow('still in progress')
+      })
+      expect(request).toHaveBeenCalledTimes(1)
+      await act(async () => {
+        complete(null)
+        await attempted
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+      expect(current!.isPending).toBe(false)
+      expect(current!.outcomeError).toBeNull()
+    } finally {
+      act(() => root.unmount())
+      client.clear()
+      host.remove()
+    }
+  })
+})

package/src/api/reviewedActionMutation.ts

@@ -0,0 +1,66 @@
+import { useCallback, useSyncExternalStore } from 'react'
+import { useMutation, useQueryClient, type MutationFunction, type QueryClient, type UseMutationOptions } from '@tanstack/react-query'
+import { actionOutcomeLocked } from './actions'
+import { ApiError } from './client'
+
+interface Outcome {
+  pending: boolean
+  error: Error | null
+}
+const EMPTY: Outcome = { pending: false, error: null }
+const stores = new WeakMap<QueryClient, { entries: Map<string, Outcome>; listeners: Set<() => void> }>()
+
+/** Result memory belongs to the host, so dismissing a dialog cannot unlock a second write. */
+export function useReviewedActionMutation<Data, Variables extends { request: { reviewedContext: string } }>(
+  target: string,
+  reviewedContext: string | undefined,
+  options: Omit<UseMutationOptions<Data, Error, Variables>, 'mutationFn' | 'mutationKey'> & { mutationFn: MutationFunction<Data, Variables> },
+) {
+  const client = useQueryClient()
+  let store = stores.get(client)
+  if (!store) {
+    store = { entries: new Map(), listeners: new Set() }
+    stores.set(client, store)
+  }
+  const outcomes = store
+  const keyFor = (context: string | undefined) => JSON.stringify([target, context])
+  const key = keyFor(reviewedContext)
+  const subscribe = useCallback((listener: () => void) => {
+    outcomes.listeners.add(listener)
+    return () => { outcomes.listeners.delete(listener) }
+  }, [outcomes])
+  const snapshot = useCallback(() => outcomes.entries.get(key) ?? EMPTY, [outcomes, key])
+  // Connection recovery purges query/mutation caches. It must not forget a
+  // request still in flight or a result that may already have changed the target.
+  const retained = useSyncExternalStore(subscribe, snapshot, () => EMPTY)
+  const publish = (key: string, value: Outcome) => {
+    if (value.pending || value.error) outcomes.entries.set(key, value)
+    else outcomes.entries.delete(key)
+    for (const listener of outcomes.listeners) listener()
+  }
+  const mutation = useMutation<Data, Error, Variables>({
+    ...options,
+    mutationKey: ['reviewed-action', target, reviewedContext],
+    mutationFn: async (variables, context) => {
+      const boundKey = keyFor(variables.request.reviewedContext)
+      const previous = outcomes.entries.get(boundKey)
+      if (previous?.error) throw previous.error
+      if (previous?.pending) throw new ApiError('A write to this target is still in progress. Wait for its result.', 409, { code: 'blocked' })
+      publish(boundKey, { pending: true, error: null })
+      let retainedError: Error | null = null
+      try {
+        return await options.mutationFn(variables, context)
+      } catch (error) {
+        if (actionOutcomeLocked(error)) {
+          const failure = error as Error
+          const message = `${failure.message} Inspect the current state, then reload this page and review the action again.`
+          retainedError = failure instanceof ApiError ? new ApiError(message, failure.status, failure.data) : new Error(message)
+        }
+        throw error
+      } finally {
+        publish(boundKey, { pending: false, error: retainedError })
+      }
+    },
+  })
+  return { ...mutation, isPending: mutation.isPending || retained.pending, outcomeError: retained.error }
+}

package/src/api/timelineSource.test.ts

@@ -19,6 +19,7 @@ import {
   applyClientFilters,
   localOverviewFromEvents,
   needsWindowFetch,
+  frozenWindowRefetchInterval,
   type RetainedRing,
 } from './timelineSource'
 import type { TimelineEvent } from '../types'
@@ -650,3 +651,11 @@ describe('retained ring fetch (the OSS-identical accumulate model)', () => {
     // cursor is intact on the cached ring — nothing was committed
   })
 })
+
+describe('frozenWindowRefetchInterval', () => {
+  it('polls a failed window until it loads, and leaves a loaded one alone', () => {
+    expect(frozenWindowRefetchInterval('error')).toBe(10_000)
+    expect(frozenWindowRefetchInterval('success')).toBe(false)
+    expect(frozenWindowRefetchInterval('pending')).toBe(false)
+  })
+})

package/src/api/timelineSource.ts

@@ -544,6 +544,13 @@ export function needsWindowFetch(
 // refresh.
 const FROZEN_WINDOW_STALE_MS = 10 * 60 * 1000
 
+// A frozen window that failed to load does poll, at the ring's cadence, until
+// it loads: the error page tells the user it recovers on its own once the
+// timeline's database is back, and without a poll only "Try again" would.
+export function frozenWindowRefetchInterval(status: 'pending' | 'error' | 'success'): number | false {
+  return status === 'error' ? RETAINED_POLL_MS : false
+}
+
 // Ring keys whose next fetch must be a full reload (manual refresh). A side
 // flag, not a side cursor: consuming it only switches the PATH of the next
 // fetch — all sync state that must stay consistent with the data lives inside
@@ -750,6 +757,7 @@ function createRingEventsHook(opts: {
       },
       enabled: windowNeeded,
       staleTime: FROZEN_WINDOW_STALE_MS,
+      refetchInterval: (q) => frozenWindowRefetchInterval(q.state.status),
     })
 
     const kindsKey = query.kinds?.join(',')

package/src/api/traffic.sources.test.ts

@@ -0,0 +1,55 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { QueryClient } from '@tanstack/react-query'
+import { detectTrafficSourcesAgain, fetchTrafficSources } from './traffic'
+
+const found = { detected: [{ name: 'hubble', status: 'available' }], notDetected: [] }
+const none = { detected: [], notDetected: [{ name: 'hubble', status: 'not_found' }] }
+
+function serve(responses: Record<string, unknown>, delays: Record<string, number> = {}) {
+  const calls: string[] = []
+  vi.stubGlobal('fetch', vi.fn(async (url: string, init?: RequestInit) => {
+    const path = url.slice(url.indexOf('/traffic/'))
+    calls.push(path)
+    if (delays[path]) {
+      await new Promise((resolve, reject) => {
+        const timer = setTimeout(resolve, delays[path])
+        init?.signal?.addEventListener('abort', () => { clearTimeout(timer); reject(new DOMException('aborted', 'AbortError')) })
+      })
+    }
+    return new Response(JSON.stringify(responses[path]), { status: 200 })
+  }))
+  return calls
+}
+
+afterEach(() => vi.unstubAllGlobals())
+
+describe('fetchTrafficSources', () => {
+  it('reuses a recent detection that found a source', async () => {
+    const calls = serve({ '/traffic/sources?recent=1': found })
+    const sources = await fetchTrafficSources(new QueryClient(), false)
+    expect(sources).toEqual(found)
+    expect(calls).toEqual(['/traffic/sources?recent=1'])
+  })
+
+  it('detects afresh before showing a recent detection that found none', async () => {
+    const calls = serve({ '/traffic/sources?recent=1': none, '/traffic/sources': found })
+    const sources = await fetchTrafficSources(new QueryClient(), false)
+    expect(sources).toEqual(found)
+    expect(calls).toEqual(['/traffic/sources?recent=1', '/traffic/sources'])
+  })
+})
+
+describe('detectTrafficSourcesAgain', () => {
+  it('detects afresh even while a recent detection is being fetched', async () => {
+    const calls = serve({ '/traffic/sources?recent=1': found, '/traffic/sources': none }, { '/traffic/sources?recent=1': 50 })
+    const client = new QueryClient()
+    void client.fetchQuery({ queryKey: ['traffic-sources'], queryFn: ({ signal }) => fetchTrafficSources(client, false, signal) }).catch(() => {})
+    const sources = await detectTrafficSourcesAgain(client)
+    expect(sources).toEqual(none)
+    expect(calls).toContain('/traffic/sources')
+    // The abandoned recent detection must not land afterwards.
+    await new Promise(resolve => setTimeout(resolve, 80))
+    expect(client.getQueryData(['traffic-sources'])).toEqual(none)
+    expect(client.getQueryData(['traffic-sources', 'recent'])).toEqual(none)
+  })
+})

package/src/api/traffic.ts

@@ -1,12 +1,16 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import type { TrafficSourcesResponse, TrafficFlowsResponse } from '../types'
+import { useCallback, useMemo } from 'react'
+import { useQuery, useMutation, useQueryClient, type QueryClient } from '@tanstack/react-query'
+import type { TrafficSourcesResponse, TrafficFlowsResponse, TrafficRecordsResponse } from '../types'
+import { fetchJSON as fetchApiJSON, useRadarFeature } from './client'
+import { shouldRetryRadarQuery } from './radarFeatures'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from './config'
 import { readErrorBody } from './httpErrors'
 
-async function fetchJSON<T>(path: string): Promise<T> {
+async function fetchJSON<T>(path: string, signal?: AbortSignal): Promise<T> {
   const response = await fetch(apiUrl(path), {
     credentials: getCredentialsMode(),
     headers: getAuthHeaders(),
+    signal,
   })
   if (!response.ok) {
     const error = await readErrorBody(response)
@@ -26,34 +30,102 @@ export interface TrafficConnectionInfo {
   error?: string
 }
 
-// Get available traffic sources and recommendations
+// Get available traffic sources and recommendations. A detection up to a
+// couple of minutes old is reused when it found a source: a full one probes
+// every source in turn and takes seconds, and the page that linked here has
+// usually just made one. One that found none is redone, since it is about to
+// be shown as setup advice. detectAgain always detects afresh.
+export async function fetchTrafficSources(queryClient: QueryClient, fresh: boolean, signal?: AbortSignal): Promise<TrafficSourcesResponse> {
+  let sources = await fetchJSON<TrafficSourcesResponse>(fresh ? '/traffic/sources' : '/traffic/sources?recent=1', signal)
+  if (!fresh && !sources.detected.some(s => s.status === 'available')) {
+    sources = await fetchJSON<TrafficSourcesResponse>('/traffic/sources', signal)
+  }
+  // A detection is also the newest answer to "is traffic available".
+  queryClient.setQueryData(['traffic-sources', 'recent'], sources)
+  return sources
+}
+
+export async function detectTrafficSourcesAgain(queryClient: QueryClient): Promise<TrafficSourcesResponse> {
+  // A pending fetch of the same key would otherwise be returned in its place.
+  await queryClient.cancelQueries({ queryKey: ['traffic-sources'], exact: true })
+  return queryClient.fetchQuery({
+    queryKey: ['traffic-sources'],
+    queryFn: ({ signal }) => fetchTrafficSources(queryClient, true, signal),
+    staleTime: 0,
+  })
+}
+
 export function useTrafficSources() {
-  return useQuery<TrafficSourcesResponse>({
+  const queryClient = useQueryClient()
+  const query = useQuery<TrafficSourcesResponse>({
     queryKey: ['traffic-sources'],
-    queryFn: () => fetchJSON('/traffic/sources'),
+    queryFn: ({ signal }) => fetchTrafficSources(queryClient, false, signal),
     staleTime: 30000, // 30 seconds
     retry: 1,
   })
+  const detectAgain = useCallback(() => detectTrafficSourcesAgain(queryClient), [queryClient])
+  return { ...query, detectAgain }
 }
 
-// Get traffic flows
-export interface UseTrafficFlowsOptions {
+// Whether this cluster has a traffic source: true only once one is detected
+// as available, so a page offering traffic never offers it on a guess. Accepts
+// a detection up to a couple of minutes old (?recent=1), so browsing workloads
+// does not probe every source on each page.
+export function useTrafficAvailable(enabled = true): boolean {
+  // A workload focus needs the server to name each pod's workload, which
+  // shipped with flow records. An older Radar leaves Hubble pods unnamed, so
+  // the focus it opened would match nothing.
+  const resolvesWorkloads = useRadarFeature('trafficRecords').support === 'supported'
+  const { data } = useQuery<TrafficSourcesResponse>({
+    queryKey: ['traffic-sources', 'recent'],
+    queryFn: () => fetchJSON('/traffic/sources?recent=1'),
+    staleTime: 2 * 60_000,
+    retry: false,
+    enabled: enabled && resolvesWorkloads,
+  })
+  return resolvesWorkloads && !!data?.detected?.some(s => s.status === 'available')
+}
+
+// What the flows and records queries share: the namespaces in view, the
+// window, and the traffic the view hides. The hidden traffic is sent so the
+// source can drop it before it counts against its limits; the view still
+// filters it too.
+export interface TrafficScope {
   namespaces?: string[]
   since?: string // Duration like "5m", "1h"
-  enabled?: boolean
+  excludeNamespaces?: readonly string[]
+  excludeHost?: boolean
 }
 
-export function useTrafficFlows(options: UseTrafficFlowsOptions = {}) {
-  const { namespaces = [], since, enabled = true } = options
-
+function trafficScopeParams({ namespaces = [], since, excludeNamespaces, excludeHost }: TrafficScope): URLSearchParams {
   const params = new URLSearchParams()
-  // Traffic backend only supports single namespace, use first if provided
+  // With several namespaces in view the server reads them from the saved pick.
   if (namespaces.length === 1) params.set('namespace', namespaces[0])
   if (since) params.set('since', since)
+  if (excludeNamespaces?.length) params.set('excludeNamespaces', excludeNamespaces.join(','))
+  if (excludeHost) params.set('excludeHost', 'true')
+  return params
+}
+
+function trafficScopeKey({ namespaces = [], since, excludeNamespaces, excludeHost }: TrafficScope) {
+  return [namespaces, since, excludeNamespaces ?? [], !!excludeHost]
+}
+
+// Get traffic flows
+export interface UseTrafficFlowsOptions extends TrafficScope {
+  /** One graph node per pod instead of per workload. */
+  byPod?: boolean
+  enabled?: boolean
+}
+
+export function useTrafficFlows(options: UseTrafficFlowsOptions = {}) {
+  const { enabled = true, byPod = false } = options
+  const params = trafficScopeParams(options)
+  if (byPod) params.set('groupBy', 'pod')
   const queryString = params.toString()
 
   return useQuery<TrafficFlowsResponse>({
-    queryKey: ['traffic-flows', namespaces, since],
+    queryKey: ['traffic-flows', ...trafficScopeKey(options), byPod],
     queryFn: () => fetchJSON(`/traffic/flows${queryString ? `?${queryString}` : ''}`),
     staleTime: 5000, // 5 seconds
     enabled,
@@ -61,6 +133,93 @@ export function useTrafficFlows(options: UseTrafficFlowsOptions = {}) {
   })
 }
 
+/** An endpoint as the server's aggregation keys it. */
+export interface TrafficEndpointRef {
+  namespace?: string
+  name: string
+  kind?: string
+  workloadKind?: string
+}
+
+/** One edge of the server's aggregation, keyed as the server keys it. */
+export interface TrafficEndpointPair {
+  source: TrafficEndpointRef
+  destination: TrafficEndpointRef
+  port: number
+  directionUnknown?: boolean
+}
+
+/** The selection rides in the query string, URL-encoded. Proxies in front of
+ *  Radar commonly refuse request lines over 8 KiB (ingress-nginx's default),
+ *  so a larger selection is not sent at all. */
+const MAX_TRAFFIC_MATCH_CHARS = 6_000
+
+/** A selection as the server matches it: its edges, or a node as the one
+ *  endpoint it is, which every one of its edges has at an end. */
+export type TrafficMatch = { pairs: TrafficEndpointPair[] } | { endpoints: TrafficEndpointRef[] }
+
+// Every pair encodes to more than this many characters, so a selection with
+// more pairs than the request can hold is rejected without serializing it.
+const MIN_MATCH_PAIR_CHARS = 40
+
+/** The whole query string's limit: the selection plus the scope beside it,
+ *  under the 8 KiB request line proxies commonly allow. */
+const MAX_TRAFFIC_QUERY_CHARS = 7_000
+
+function encodedMatch(match: TrafficMatch): string | null {
+  if ('pairs' in match && match.pairs.length * MIN_MATCH_PAIR_CHARS > MAX_TRAFFIC_MATCH_CHARS) return null
+  const json = JSON.stringify(match)
+  return encodeURIComponent(json).length > MAX_TRAFFIC_MATCH_CHARS ? null : json
+}
+
+export interface UseTrafficRecordsOptions extends TrafficScope {
+  /** The selection, or null for no selection. */
+  match: TrafficMatch | null
+  /** Namespaces also excluded when the request has room for them; the list
+   *  filters them out anyway. */
+  optionalExcludeNamespaces?: readonly string[]
+  enabled?: boolean
+}
+
+// The newest records behind a graph selection. The flows response carries only
+// a capped sample of records, so a selected edge is looked up on its own —
+// otherwise a quiet edge on a busy cluster would show nothing.
+export function useTrafficRecords(options: UseTrafficRecordsOptions) {
+  const { enabled = true } = options
+  const { guard, gatedKey, support } = useRadarFeature('trafficRecords')
+  // Serialized when the selection changes (each refresh), not on every
+  // render: a merged edge can carry tens of thousands of pairs.
+  const match = useMemo(() => (options.match ? encodedMatch(options.match) : null), [options.match])
+  const optional = options.optionalExcludeNamespaces ?? []
+  let scope: TrafficScope = optional.length > 0
+    ? { ...options, excludeNamespaces: [...(options.excludeNamespaces ?? []), ...optional] }
+    : options
+  let params = trafficScopeParams(scope)
+  if (match) params.set('match', match)
+  if (optional.length > 0 && params.toString().length > MAX_TRAFFIC_QUERY_CHARS) {
+    scope = options
+    params = trafficScopeParams(scope)
+    if (match) params.set('match', match)
+  }
+  const tooLarge = options.match !== null && (match === null || params.toString().length > MAX_TRAFFIC_QUERY_CHARS)
+  // The view this answers, apart from the optional exclusions.
+  const view = JSON.stringify([...trafficScopeKey(options), match])
+
+  const query = useQuery<TrafficRecordsResponse>({
+    queryKey: ['traffic-flows', 'records', ...trafficScopeKey(scope), match, ...gatedKey],
+    queryFn: () => guard(() => fetchApiJSON<TrafficRecordsResponse>(`/traffic/flows/records?${params.toString()}`)),
+    staleTime: 5000,
+    enabled: enabled && match !== null && !tooLarge && support !== 'unsupported',
+    meta: { view },
+    // Kept while only the optional exclusions change (a namespace hidden in
+    // the sidebar, which the list filters out anyway). Not across another
+    // selection, window or scope: those records would show under this one.
+    placeholderData: (prev, prevQuery) => (prevQuery?.meta?.view === view ? prev : undefined),
+    retry: shouldRetryRadarQuery,
+  })
+  return { ...query, tooLarge, supported: support !== 'unsupported' }
+}
+
 // Get active traffic source
 export function useActiveTrafficSource() {
   return useQuery<{ active: string }>({

package/src/components/applications/ApplicationsView.tsx

@@ -55,6 +55,7 @@ import { useTimelineSource } from "../../context/TimelineSource";
 import { apiVersionToGroup, buildWorkloadPath, kindToPluralWithGroup } from "../../utils/navigation";
 import { WorkloadView } from "../workload/WorkloadView";
 import { ApplicationCostTab } from "../cost/ApplicationCostTab";
+import { useTimelineRetentionNote } from "../../context/TimelineCustomization";
 import { isOpenCostWorkloadKind } from "../cost/kinds";
 
 type ApplicationRouteView = ApplicationView | "cost";
@@ -302,6 +303,7 @@ function AppDetailRoute({
         : historyRangeOptions[0].value;
   const historyTimelineEnabled =
     !selectedWorkloadKey && selectedView === "history";
+  const retentionNote = useTimelineRetentionNote();
   const historyTimelineQuery = timelineSource.useEvents({
     namespaces: appHistoryNamespaces,
     timeRange: historyRange,
@@ -665,6 +667,7 @@ function AppDetailRoute({
         historyCoverageRecordCount={historyTimelineQuery.coverage?.length ?? 0}
         historyRuntimeLimited={historyRuntimeLimited}
         historyRingTruncated={historyTimelineQuery.truncated ?? false}
+        historyRetentionNote={retentionNote}
         onHistoryRangeChange={setRetainedHistoryRange}
         onOpenTimeline={openApplicationTimeline}
         onOpenSource={openSource}

package/src/components/audit/AuditView.tsx

@@ -83,6 +83,9 @@ function BestPracticesView({ namespaces, onNavigateToResource }: AuditViewProps)
     )
   }
 
+  const annotationIgnored = Object.values(data.annotationIgnoredByNamespace ?? {})
+    .reduce((sum, byNS) => sum + Object.values(byNS).reduce((a, n) => a + n, 0), 0)
+
   const onResourceClick = (ref: CheckResourceRef) =>
     onNavigateToResource({ kind: ref.kind, namespace: ref.namespace, name: ref.name, group: ref.group })
 
@@ -108,6 +111,11 @@ function BestPracticesView({ namespaces, onNavigateToResource }: AuditViewProps)
             {ignoredCount > 0 && (
               <button onClick={() => setShowSettings(true)} className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors">{ignoredCount} {ignoredCount === 1 ? 'namespace' : 'namespaces'} hidden</button>
             )}
+            {annotationIgnored > 0 && (
+              <Tooltip content={`Resources that opted out of a check with the ${data.ignoreChecksAnnotation} annotation`}>
+                <span className="text-xs text-theme-text-tertiary">{annotationIgnored} {annotationIgnored === 1 ? 'finding' : 'findings'} hidden by annotation</span>
+              </Tooltip>
+            )}
             <Tooltip content="Checks settings">
             <button
               onClick={() => setShowSettings(true)}
@@ -129,6 +137,7 @@ function BestPracticesView({ namespaces, onNavigateToResource }: AuditViewProps)
         onResourceClick={onResourceClick}
         onHideCheck={canEdit ? hideCheck : undefined}
         onHideCategory={canEdit ? hideCategory : undefined}
+        ignoreChecksAnnotation={data.ignoreChecksAnnotation}
       />
 
       {showSettings && <AuditSettingsDialog namespaces={namespaces} onClose={() => setShowSettings(false)} />}