@skyhook-io/radar-app 1.9.7 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.9.7",
+  "version": "1.10.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",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.11.0",
+    "@skyhook-io/k8s-ui": ">=1.12.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",

package/src/api/policy.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import type { PolicyResourceResponse } from '@skyhook-io/k8s-ui'
+import { fetchJSON } from './client'
+
+// /api/policy/resource/{kind}/{namespace}/{name}
+//
+// Policy results change when the engine rescans rather than on every render, so
+// a short stale window keeps drawer navigation instant without going stale in a
+// way an operator would notice.
+export function usePolicyResource(kind: string, namespace: string, name: string, enabled = true) {
+  return useQuery<PolicyResourceResponse>({
+    queryKey: ['policy', 'resource', kind, namespace, name],
+    queryFn: () =>
+      fetchJSON<PolicyResourceResponse>(
+        `/policy/resource/${encodeURIComponent(kind)}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`,
+      ),
+    enabled: enabled && !!kind && !!namespace && !!name,
+    staleTime: 15000,
+    // A 403 is a settled answer about this identity, not a blip — retrying
+    // would just repeat the denial on every drawer open.
+    retry: false,
+  })
+}

package/src/components/resources/CompositeRenderer.tsx

@@ -1,11 +1,14 @@
 import { useMemo } from 'react'
-import { useQueries } from '@tanstack/react-query'
+import { useQueries, useQuery } from '@tanstack/react-query'
 import {
   CompositeRenderer as BaseCompositeRenderer,
   type ComposedRefStatus,
+  type BoundXRStatus,
 } from '@skyhook-io/k8s-ui/components/resources/renderers/CompositeRenderer'
 import {
   getCrossplaneResourceRefs,
+  getBoundXRRef,
+  isClaim,
   type CrossplaneResourceRef,
 } from '@skyhook-io/k8s-ui/components/resources/resource-utils-crossplane'
 import { getResourceStatus } from '@skyhook-io/k8s-ui'
@@ -41,7 +44,53 @@ function groupFromApiVersion(apiVersion: string | undefined): string {
  * it yet) is a normal state for a freshly-applied Composite, not a failure.
  */
 export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps) {
-  const refs = useMemo<CrossplaneResourceRef[]>(() => getCrossplaneResourceRefs(data), [data])
+  // A v1 Claim carries only a singular spec.resourceRef to its bound XR; the
+  // composed-resource refs live on that XR. Follow the ref, fetch the XR, and
+  // read its refs — otherwise the claim panel reads its own (absent) resourceRefs
+  // and shows "No composed resources" for a claim that has composed plenty.
+  const boundXRRef = useMemo(() => (isClaim(data) ? getBoundXRRef(data) : null), [data])
+  const boundXRQuery = useQuery({
+    queryKey: [
+      'bound-xr',
+      groupFromApiVersion(boundXRRef?.apiVersion),
+      boundXRRef?.kind ?? '',
+      boundXRRef?.namespace ?? '',
+      boundXRRef?.name ?? '',
+    ],
+    queryFn: async () => {
+      const ns = boundXRRef!.namespace || '_'
+      const plural = kindToPlural(boundXRRef!.kind)
+      const group = groupFromApiVersion(boundXRRef!.apiVersion)
+      const query = group ? `?group=${encodeURIComponent(group)}` : ''
+      return fetchJSON<{ resource: any }>(`/resources/${plural}/${ns}/${boundXRRef!.name}${query}`)
+    },
+    staleTime: 30000,
+    retry: false,
+    enabled: Boolean(boundXRRef?.kind && boundXRRef?.name),
+  })
+
+  const refs = useMemo<CrossplaneResourceRef[]>(() => {
+    // For a claim, refs come from the bound XR once it's fetched; for an XR/MR
+    // viewed directly, they're on `data` itself.
+    if (boundXRRef) return getCrossplaneResourceRefs(boundXRQuery.data?.resource)
+    return getCrossplaneResourceRefs(data)
+  }, [boundXRRef, boundXRQuery.data, data])
+
+  // Surface the bound-XR fetch state so the empty composed-resources branch can
+  // tell "XR still loading / unreadable" apart from "claim genuinely has none".
+  const boundXRStatus = useMemo<BoundXRStatus | undefined>(() => {
+    if (!boundXRRef) return undefined
+    if (boundXRQuery.isLoading) return { loading: true }
+    if (boundXRQuery.isError) {
+      if (boundXRQuery.error instanceof ApiError && boundXRQuery.error.status === 404) {
+        return { missing: true }
+      }
+      const message =
+        boundXRQuery.error instanceof Error ? boundXRQuery.error.message : 'Failed to fetch bound composite'
+      return { error: true, errorMessage: message }
+    }
+    return undefined
+  }, [boundXRRef, boundXRQuery.isLoading, boundXRQuery.isError, boundXRQuery.error])
 
   const queries = useQueries({
     queries: refs.map(ref => {
@@ -97,5 +146,13 @@ export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps)
     return map
   }, [refs, queries])
 
-  return <BaseCompositeRenderer data={data} onNavigate={onNavigate} composedRefStatuses={composedRefStatuses} />
+  return (
+    <BaseCompositeRenderer
+      data={data}
+      onNavigate={onNavigate}
+      composedRefStatuses={composedRefStatuses}
+      composedRefs={refs}
+      boundXRStatus={boundXRStatus}
+    />
+  )
 }

package/src/components/resources/renderers/PodRenderer.tsx

@@ -6,6 +6,7 @@ import { useOpenTerminal, useOpenLogs } from '../../dock'
 import { useCapabilitiesContext, useNamespacedCapabilities, useIsLocalDeployment } from '../../../contexts/CapabilitiesContext'
 import { getVisibleLiveMetrics, isLiveMetricsUnavailable, shouldFetchLiveMetrics, usePodEnvironment, usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus, useRevealPodEnvironment } from '../../../api/client'
 import { useRBACSubject } from '../../../api/rbac'
+import { usePolicyResource } from '../../../api/policy'
 import { podAwaitsScheduling } from '../../capacity/podDemandGate'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { ImageFilesystemModal } from '../ImageFilesystemModal'
@@ -74,6 +75,10 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
     'ServiceAccount', namespace ?? '', saName, !!namespace,
   )
 
+  const { data: policyData, isLoading: policyLoading, error: policyError } = usePolicyResource(
+    'pods', namespace ?? '', podName, !!namespace && !!podName,
+  )
+
   return (
     <BasePodRenderer
       data={data}
@@ -102,6 +107,9 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
       rbacData={rbacData ?? null}
       rbacLoading={rbacLoading}
       rbacError={rbacError as Error | null}
+      policyData={policyData ?? null}
+      policyLoading={policyLoading}
+      policyError={policyError as Error | null}
       canExec={canExec}
       canViewLogs={canViewLogs}
       canPortForward={showPortForward}

package/src/components/resources/renderers/WorkloadRenderer.tsx

@@ -2,6 +2,7 @@ import { WorkloadRenderer as BaseWorkloadRenderer } from '@skyhook-io/k8s-ui/com
 import { useNavigate } from 'react-router-dom'
 import { useScaleWorkload, fetchJSON } from '../../../api/client'
 import { useRBACSubject } from '../../../api/rbac'
+import { usePolicyResource } from '../../../api/policy'
 import { useQueries, useQueryClient } from '@tanstack/react-query'
 import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
 import type { Relationships, ResourceRef, ResourceWithRelationships } from '../../../types'
@@ -42,6 +43,11 @@ export function WorkloadRenderer({ kind, data, onNavigate, scaleBlockedBy }: Wor
   const { data: rbacData, isLoading: rbacLoading, error: rbacError } = useRBACSubject(
     'ServiceAccount', namespace, saName, !!namespace,
   )
+  // Plural form: the endpoint resolves URL plurals to kinds the same way the
+  // audit drill-down does, so "deployments" and "Deployment" both work.
+  const { data: policyData, isLoading: policyLoading, error: policyError } = usePolicyResource(
+    kindToPlural(kind), namespace, metadata.name || '', !!namespace && !!metadata.name,
+  )
   const hpaRefs = (scaleBlockedBy ?? []).filter(ref => {
     const refKind = ref.kind.toLowerCase()
     return refKind === 'horizontalpodautoscaler' || refKind === 'hpa'
@@ -80,6 +86,9 @@ export function WorkloadRenderer({ kind, data, onNavigate, scaleBlockedBy }: Wor
       rbacData={rbacData ?? null}
       rbacLoading={rbacLoading}
       rbacError={rbacError as Error | null}
+      policyData={policyData ?? null}
+      policyLoading={policyLoading}
+      policyError={policyError as Error | null}
       scaleBlockedBy={scaleBlockedBy}
       scalerDiagnostics={scalerDiagnostics}
       onScale={async (replicas) => {

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -373,7 +373,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                   <div className="flex flex-wrap gap-1">
                     {([
                       { label: '2xx', active: SEVERITY_BADGE.success },
-                      { label: '3xx', active: SEVERITY_BADGE.neutral },
+                      { label: '3xx', active: SEVERITY_BADGE.info },
                       { label: '4xx', active: SEVERITY_BADGE.warning },
                       { label: '5xx', active: SEVERITY_BADGE.error },
                     ] as const).map(({ label, active }) => (

package/src/components/traffic/TrafficGraph.tsx

@@ -20,7 +20,7 @@ import type { AggregatedFlow } from '../../types'
 import { clsx } from 'clsx'
 import { X, ArrowRight, Globe, Server, Activity, Puzzle } from 'lucide-react'
 import { isClusterAddon, type AddonMode } from './TrafficView'
-import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { SEVERITY_BADGE, SEVERITY_DOT, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { getNamespaceColor } from '../../utils/traffic-colors'
 import { Tooltip } from '../ui/Tooltip'
 
@@ -87,10 +87,10 @@ function latencyColor(ms: number): string {
 }
 
 const STATUS_COLORS: Record<string, { bg: string; text: string }> = {
-  '2xx': { bg: 'bg-emerald-500', text: SEVERITY_TEXT.success },
-  '3xx': { bg: 'bg-amber-500', text: SEVERITY_TEXT.neutral },
-  '4xx': { bg: 'bg-amber-500', text: SEVERITY_TEXT.warning },
-  '5xx': { bg: 'bg-red-500', text: SEVERITY_TEXT.error },
+  '2xx': { bg: SEVERITY_DOT.success, text: SEVERITY_TEXT.success },
+  '3xx': { bg: SEVERITY_DOT.info, text: SEVERITY_TEXT.info },
+  '4xx': { bg: SEVERITY_DOT.warning, text: SEVERITY_TEXT.warning },
+  '5xx': { bg: SEVERITY_DOT.error, text: SEVERITY_TEXT.error },
 }
 
 const VERDICT_BADGE: Record<string, string> = {