@skyhook-io/radar-app 1.17.0 → 1.17.1

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/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)} />}

package/src/components/capacity/CapacityActivity.tsx

@@ -17,37 +17,9 @@ import {
   useCapacityActivity,
 } from "../../api/client";
 import type { SelectedResource } from "../../types";
-import {
-  ActivityStateBadge,
-  CapacityFreshness,
-  InlineEmpty,
-  LinkButton,
-  Notice,
-  PageControls,
-  PoolSelector,
-  ROW_HOVER,
-  ScopeBadges,
-  ScrollableContent,
-  TABLE_HEAD,
-  TABLE_WRAP,
-  TBODY,
-  TD,
-  TH,
-  activityTypeLabel,
-  activityWindowPreset,
-  coverageHasObservations,
-  coverageIsLowerBound,
-  coverageMessage,
-  errorMessage,
-  formatTimestamp,
-  identityKey,
-  identityToSelectedResource,
-  integrationBlock,
-  relativeTime,
-  retentionLabel,
-  useCapacityCursorRecovery,
-  useCapacityPagination,
-} from "./shared";
+import { ActivityStateBadge, CapacityFreshness, InlineEmpty, LinkButton, PageControls, PoolSelector, ScopeBadges, ScrollableContent, activityTypeLabel, activityWindowPreset, coverageHasObservations, coverageIsLowerBound, coverageMessage, errorMessage, formatTimestamp, identityKey, identityToSelectedResource, integrationBlock, relativeTime, retentionLabel, useCapacityCursorRecovery, useCapacityPagination } from "./shared";
+import { Notice } from "../workspace/layout";
+import { ROW_HOVER, TABLE_HEAD, TABLE_WRAP, TBODY, TD, TH } from "../workspace/table";
 
 const WINDOW_PILLS: [number | undefined, string][] = [
   [undefined, "Retained"],

package/src/components/capacity/CapacityDemand.tsx

@@ -21,41 +21,9 @@ import {
 } from "../../api/client";
 import type { SelectedResource } from "../../types";
 import { refToSelectedResource } from "../../utils/navigation";
-import {
-  CapacityFreshness,
-  CapacityIssueEvidence,
-  DemandStateBadge,
-  EmptyState,
-  InlineEmpty,
-  LinkButton,
-  Notice,
-  PageControls,
-  PoolEvaluationBadge,
-  PoolSelector,
-  QuantityInline,
-  ResourceLink,
-  ROW_HOVER,
-  ScopeBadges,
-  ScrollableContent,
-  TABLE_HEAD,
-  TABLE_WRAP,
-  TBODY,
-  TD,
-  TH,
-  coverageHasObservations,
-  coverageIsLowerBound,
-  coverageMessage,
-  demandStateLabel,
-  errorMessage,
-  formatTimestamp,
-  humanizeCode,
-  identityKey,
-  integrationBlock,
-  namespaceCoverageDescription,
-  quantityText,
-  useCapacityCursorRecovery,
-  useCapacityPagination,
-} from "./shared";
+import { CapacityFreshness, CapacityIssueEvidence, DemandStateBadge, InlineEmpty, LinkButton, PageControls, PoolEvaluationBadge, PoolSelector, QuantityInline, ResourceLink, ScopeBadges, ScrollableContent, coverageHasObservations, coverageIsLowerBound, coverageMessage, demandStateLabel, errorMessage, formatTimestamp, humanizeCode, identityKey, integrationBlock, namespaceCoverageDescription, quantityText, useCapacityCursorRecovery, useCapacityPagination } from "./shared";
+import { Notice, ScreenEmptyState } from "../workspace/layout";
+import { ROW_HOVER, TABLE_HEAD, TABLE_WRAP, TBODY, TD, TH } from "../workspace/table";
 
 const STATE_PILLS: [CapacityDemandState | undefined, string][] = [
   [undefined, "All states"],
@@ -184,7 +152,7 @@ export function CapacityDemand({
   const clearPodFilter = () => updateSearchParam("pod", undefined);
   if (poolFilter && !responseData && isNotFoundError(query.error)) {
     return (
-      <EmptyState
+      <ScreenEmptyState
         icon={AlertTriangle}
         title="NodePool not found"
         detail={`This link evaluates demand against NodePool “${poolFilter}”, which no longer exists. It may have been removed or belongs to another cluster context.`}