@skyhook-io/k8s-ui 1.14.12 → 1.16.0

package/src/components/ui/YamlReview.tsx

@@ -34,6 +34,8 @@ export interface YamlReviewProps {
   onClose?: () => void
   onBack: () => void
   onApply: () => void
+  /** Set when the review replaces a dialog's own title, which names the dialog. */
+  titleId?: string
 }
 
 function splitYaml(content: string) {
@@ -82,6 +84,7 @@ export function YamlReview({
   onClose,
   onBack,
   onApply,
+  titleId,
 }: YamlReviewProps) {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const reviewRef = useRef<HTMLDivElement>(null)
@@ -177,7 +180,7 @@ export function YamlReview({
         </button>
         <div className="h-4 w-px bg-theme-border" />
         <div>
-          <div className="text-sm font-semibold text-theme-text-primary">
+          <div id={titleId} className="text-sm font-semibold text-theme-text-primary">
             Review cluster-admitted changes
           </div>
           <div className="text-xs text-theme-text-tertiary">

package/src/components/ui/drawer-components.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection } from './drawer-components'
+import { EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection } from './drawer-components'
 
 const problems = [
   { color: 'red' as const, message: 'Application is Degraded' },
@@ -49,3 +49,16 @@ describe('RelatedResourcesSection', () => {
     expect(html).toContain('<button')
   })
 })
+
+describe('Recent Events layout', () => {
+  const events = Array.from({ length: 24 }, (_, i) => ({ id: String(i), source: 'k8s_event', eventType: 'Normal', reason: `Reason${i}`, timestamp: '2026-09-27T00:00:00Z' })) as any
+  it('keeps drawer scrolling but lets fullscreen events expand in page flow', () => {
+    const drawer = renderToString(<EventsSection events={events} />)
+    const fullscreen = renderToString(<EventsSection events={events} fullscreen />)
+    expect(drawer).toContain('max-h-64')
+    expect(drawer).not.toContain('Show 16 more events')
+    expect(fullscreen).not.toContain('max-h-64')
+    expect(fullscreen).toContain('Show 16 more events')
+    expect(fullscreen).toContain('Reason23')
+  })
+})

package/src/components/ui/drawer-components.tsx

@@ -1,3 +1,4 @@
+import { Disclosure } from './Disclosure'
 import { createContext, useContext, useState } from 'react'
 import { Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -83,25 +84,26 @@ interface SectionProps {
   children: React.ReactNode
   defaultExpanded?: boolean
   contentClassName?: string
+  variant?: 'plain' | 'card'
 }
 
-export function Section({ title, icon: Icon, children, defaultExpanded = true, contentClassName }: SectionProps) {
+export function Section({ title, icon: Icon, children, defaultExpanded = true, contentClassName, variant = 'plain' }: SectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
   const { panelId, buttonProps } = useDisclosure(expanded)
 
   return (
-    <div className="border-b-subtle pb-4 last:border-0">
+    <div className={variant === 'card' ? 'min-w-0 overflow-hidden rounded-lg border border-theme-border bg-theme-surface' : 'border-b-subtle pb-4 last:border-0'}>
       <button
         {...buttonProps}
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
+        className={clsx('flex items-center gap-2 w-full text-left hover:text-theme-text-primary transition-colors', variant === 'card' ? clsx('border-theme-border bg-theme-elevated px-3 py-2.5', expanded && 'border-b') : 'mb-2')}
       >
         <CollapseChevron open={expanded} className="w-4 h-4" />
         {Icon && <Icon className="w-4 h-4 text-theme-text-secondary" />}
-        <span className="text-sm font-medium text-theme-text-secondary">{title}</span>
+        <span className={clsx("font-medium text-theme-text-secondary", variant === 'card' ? 'text-xs uppercase tracking-wider' : 'text-sm')}>{title}</span>
       </button>
       <Collapse open={expanded} id={panelId}>
-        <div className={contentClassName ?? 'pl-6'}>{children}</div>
+        <div className={contentClassName ?? (variant === 'card' ? 'p-3' : 'pl-6')}>{children}</div>
       </Collapse>
     </div>
   )
@@ -293,8 +295,10 @@ export function ConditionsSection({
   conditions,
   getConditionTone,
   defaultExpanded,
+  variant,
 }: {
   conditions?: any[]
+  variant?: 'plain' | 'card'
   defaultExpanded?: boolean
   getConditionTone?: (condition: any) => ConditionTone | undefined
 }) {
@@ -313,6 +317,7 @@ export function ConditionsSection({
 
   return (
     <Section
+      variant={variant}
       title={`Conditions (${conditions.length})${failCount > 0 ? ` · ${failCount} failing` : ''}`}
       defaultExpanded={defaultExpanded ?? conditions.length <= 6}
     >
@@ -889,7 +894,6 @@ const RELATIONSHIP_TRUNCATE_LIMIT = 10
 export function RelationshipGroup({ label, refs, onNavigate }: RelationshipGroupProps) {
   const [showAll, setShowAll] = useState(false)
   if (!refs || refs.length === 0) return null
-
   const truncated = !showAll && refs.length > RELATIONSHIP_TRUNCATE_LIMIT
   const visibleRefs = truncated ? refs.slice(0, RELATIONSHIP_TRUNCATE_LIMIT) : refs
 
@@ -1027,10 +1031,12 @@ interface EventsSectionProps {
   updatesError?: Error | null
   /** Optional hint shown below the event list (e.g. "See Timeline tab for related resources") */
   hint?: React.ReactNode
+  fullscreen?: boolean
 }
 
-export function EventsSection({ events, updates = [], isLoading, eventsError, updatesError, hint }: EventsSectionProps) {
+export function EventsSection({ events, updates = [], isLoading, eventsError, updatesError, hint, fullscreen = false }: EventsSectionProps) {
   const [showUpdates, setShowUpdates] = useState(false)
+  const [showAllEvents, setShowAllEvents] = useState(false)
 
   if (isLoading) {
     return (
@@ -1085,42 +1091,46 @@ export function EventsSection({ events, updates = [], isLoading, eventsError, up
     )
   }
 
+  const renderEvent = (event: TimelineEvent, i: number) => (
+  <div
+    key={`${event.id}-${i}`}
+    className={clsx(
+      'p-2 rounded text-sm border-l-2',
+      event.eventType === 'Warning' || (isChangeEvent(event) && event.eventType === 'delete')
+        ? 'bg-red-500/10 border-red-500'
+        : isK8sEvent(event)
+        ? 'bg-blue-500/10 border-blue-500'
+        : 'bg-theme-elevated/30 border-theme-border'
+    )}
+  >
+    <div className="flex items-center justify-between gap-2">
+      <span className="font-medium text-theme-text-primary">
+        {isK8sEvent(event) ? event.reason : event.eventType}
+      </span>
+      <span className="text-xs text-theme-text-tertiary">
+        {formatEventTime(event.timestamp)}
+      </span>
+    </div>
+    {event.message && (
+      <div className="text-xs text-theme-text-secondary mt-1 line-clamp-2">
+        {event.message}
+      </div>
+    )}
+    {isChangeEvent(event) && event.diff?.summary && (
+      <div className="text-xs text-theme-text-secondary mt-1">
+        {event.diff.summary}
+      </div>
+    )}
+  </div>
+  )
   return (
     <Section title={`Recent Events (${visible.length})`} defaultExpanded>
-      <div className="space-y-2 max-h-64 overflow-y-auto">
-        {visible.map((event, i) => (
-          <div
-            key={`${event.id}-${i}`}
-            className={clsx(
-              'p-2 rounded text-sm border-l-2',
-              event.eventType === 'Warning' || (isChangeEvent(event) && event.eventType === 'delete')
-                ? 'bg-red-500/10 border-red-500'
-                : isK8sEvent(event)
-                ? 'bg-blue-500/10 border-blue-500'
-                : 'bg-theme-elevated/30 border-theme-border'
-            )}
-          >
-            <div className="flex items-center justify-between gap-2">
-              <span className="font-medium text-theme-text-primary">
-                {isK8sEvent(event) ? event.reason : event.eventType}
-              </span>
-              <span className="text-xs text-theme-text-tertiary">
-                {formatEventTime(event.timestamp)}
-              </span>
-            </div>
-            {event.message && (
-              <div className="text-xs text-theme-text-secondary mt-1 line-clamp-2">
-                {event.message}
-              </div>
-            )}
-            {isChangeEvent(event) && event.diff?.summary && (
-              <div className="text-xs text-theme-text-secondary mt-1">
-                {event.diff.summary}
-              </div>
-            )}
-          </div>
-        ))}
+      <div tabIndex={fullscreen ? undefined : 0} className={clsx('space-y-2', !fullscreen && 'max-h-64 overflow-y-auto')}>
+        {(fullscreen ? visible.slice(0, 8) : visible).map(renderEvent)}
       </div>
+      {fullscreen && visible.length > 8 && <Disclosure open={showAllEvents} onOpenChange={setShowAllEvents} summary={showAllEvents ? 'Show fewer events' : `Show ${visible.length - 8} more events`} className="mt-2" summaryClassName="text-xs text-accent-text">
+        <div className="mt-2 space-y-2">{visible.slice(8).map(renderEvent)}</div>
+      </Disclosure>}
       {errors}
       {toggle && <div className="mt-2">{toggle}</div>}
       {hint && <div className="mt-2">{hint}</div>}

package/src/components/ui/index.ts

@@ -74,3 +74,11 @@ export {
 export type { CardSectionTone } from "./CardSection";
 export { MultiSelectPicker } from "./MultiSelectPicker";
 export type { MultiSelectPickerProps } from "./MultiSelectPicker";
+export {
+  RadarUpgradeNote,
+  RadarUpgradeAction,
+  RadarUpgradeContext,
+  radarUpgradeDetail,
+  radarUpgradeHeadline,
+} from "./RadarUpgradeNote";
+export type { RadarUpgradeActions } from "./RadarUpgradeNote";

package/src/components/workload/WorkloadView.tsx

@@ -56,7 +56,7 @@ import { ResourceRendererDispatch, getResourceStatus, diagnoseHealthHint, type D
 import type { ScalerDiagnosis } from '../resources/renderers/WorkloadRenderer'
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
-import { getKindColorOutline, displayKindName, OperationalIssuesShownContext, ResourceRefBadge } from '../ui/drawer-components'
+import { AlertBanner, getKindColorOutline, displayKindName, OperationalIssuesShownContext, ResourceRefBadge } from '../ui/drawer-components'
 import { Badge, type BadgeSeverity } from '../ui/Badge'
 import { Tooltip } from '../ui/Tooltip'
 import { midTruncate } from '../../utils/format'
@@ -181,8 +181,23 @@ interface WorkloadViewProps {
   refetch?: () => void
 
   // ── Timeline data ────────────────────────────────────────────────────────
-  /** All timeline events for this resource's namespace */
+  /** Timeline events the history lanes are built from: this workload's own
+   *  history, or events for its namespace from a host that has no scoped query. */
   allEvents?: TimelineEvent[]
+  /** Older history exists beyond allEvents. */
+  historyTruncated?: boolean
+  /** Loads the next older page of history; omit when the host can't page. */
+  onLoadOlderHistory?: () => void
+  loadingOlderHistory?: boolean
+  /** The last Load older attempt failed. */
+  olderHistoryError?: Error | null
+  /** allEvents holds only this workload's own history (what it runs and the
+   *  resources attached to it), not its whole namespace. */
+  historyScoped?: boolean
+  /** Some related resources' history isn't included: there were more than the host follows. */
+  historyIncomplete?: boolean
+  historyError?: Error | null
+  onRetryHistory?: () => void
   /** Persisted lifecycle events reconstructed for resources related to this workload. */
   relatedTimelineEvents?: TimelineEvent[]
   /** Whether timeline events are loading */
@@ -384,6 +399,14 @@ export function WorkloadView({
   refetch: refetchProp,
   // Timeline
   allEvents,
+  historyTruncated = false,
+  onLoadOlderHistory,
+  loadingOlderHistory = false,
+  olderHistoryError = null,
+  historyScoped = false,
+  historyIncomplete = false,
+  historyError = null,
+  onRetryHistory,
   relatedTimelineEvents = [],
   eventsLoading = false,
   topology,
@@ -501,9 +524,10 @@ export function WorkloadView({
       events: allEvents,
       topology,
       rootResource: { kind, group, namespace, name },
+      eventsScopedToRoot: historyScoped,
       groupByApp: true,
     })
-  }, [allEvents, topology, kind, group, namespace, name])
+  }, [allEvents, topology, kind, group, namespace, name, historyScoped])
 
   // Topology tab — the seeded neighborhood around this one workload (its
   // ownership core + attached Services/config/policies), not the whole namespace.
@@ -1145,6 +1169,14 @@ export function WorkloadView({
           <EventsTab
             events={resourceEvents}
             isLoading={eventsLoading}
+            truncated={historyTruncated}
+            onLoadOlder={onLoadOlderHistory}
+            loadingOlder={loadingOlderHistory}
+            olderError={olderHistoryError}
+            scoped={historyScoped}
+            incomplete={historyIncomplete}
+            error={historyError}
+            onRetry={onRetryHistory}
             selectedEventId={selectedEventId}
             onSelectEvent={setSelectedEventId}
             topology={topology}
@@ -1399,6 +1431,14 @@ function OwnershipHeading({
 function EventsTab({
   events,
   isLoading,
+  truncated,
+  onLoadOlder,
+  loadingOlder,
+  olderError,
+  scoped,
+  incomplete,
+  error,
+  onRetry,
   selectedEventId,
   onSelectEvent,
   topology,
@@ -1406,6 +1446,14 @@ function EventsTab({
 }: {
   events: TimelineEvent[]
   isLoading: boolean
+  truncated?: boolean
+  onLoadOlder?: () => void
+  loadingOlder?: boolean
+  olderError?: Error | null
+  scoped?: boolean
+  incomplete?: boolean
+  error?: Error | null
+  onRetry?: () => void
   selectedEventId: string | null
   onSelectEvent: (id: string | null) => void
   topology?: Topology
@@ -1500,8 +1548,66 @@ function EventsTab({
     )
   }
 
+  if (error && events.length === 0) {
+    return (
+      <div className="p-4">
+        <AlertBanner variant="error" title="Couldn't load this workload's history" message={error.message}>
+          {onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="mt-2 rounded border border-theme-border bg-theme-surface px-2 py-1 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover"
+            >
+              Try again
+            </button>
+          )}
+        </AlertBanner>
+      </div>
+    )
+  }
+
   return (
     <div className="h-full flex flex-col overflow-hidden">
+      {error && (
+        <div className="shrink-0 flex flex-wrap items-center gap-x-2 border-b border-theme-border bg-theme-base px-4 py-1.5 text-xs" role="alert">
+          <span className="text-[var(--color-error)]" title={error.message}>
+            Couldn't load this workload's history. Showing only what loaded.
+          </span>
+          {onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="underline decoration-theme-border underline-offset-2 text-theme-text-secondary hover:text-theme-text-primary"
+            >
+              Try again
+            </button>
+          )}
+        </div>
+      )}
+      {(scoped || truncated || incomplete) && (
+        <div className="shrink-0 flex flex-wrap items-center gap-x-2 gap-y-0.5 border-b border-theme-border bg-theme-base px-4 py-1.5 text-xs text-theme-text-secondary" role="note">
+          {scoped && (
+            <span className="text-theme-text-tertiary">
+              This workload, what it runs, and the Services, Ingresses, config and scalers attached to it.
+            </span>
+          )}
+          {incomplete && <span>This workload has more past runs and related resources than Radar follows, so some are left out.</span>}
+          {truncated && <span>Showing the most recent events. Older history exists.</span>}
+          {truncated && olderError && (
+            <span className="text-[var(--color-error)]" title={olderError.message}>Couldn't load older events.</span>
+          )}
+          {truncated && onLoadOlder && (
+            <button
+              type="button"
+              onClick={onLoadOlder}
+              disabled={loadingOlder}
+              className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary disabled:opacity-60"
+            >
+              {loadingOlder ? 'Loading…' : olderError ? 'Try again' : 'Load older'}
+            </button>
+          )}
+        </div>
+      )}
       {/* Swimlane — the shared TimelineSwimlanes widget (kind chips, top axis with
           ticks + Now line, event clustering), flat + compact for a single subject.
           Its drawer is suppressed (compact); the list below is the detail surface. */}

package/src/types/core.ts

@@ -163,6 +163,9 @@ export interface FeatureCapabilities {
   yamlReview?: boolean
   yamlSchemas?: boolean
   workloadImages?: boolean
+  resourceIssues?: boolean
+  podEnvironment?: boolean
+  policyResource?: boolean
 }
 
 // DeploymentMode is the closed set of topologies Radar can run in.
@@ -1367,7 +1370,15 @@ export interface AggregatedFlow {
   l7Protocol?: string // HTTP, gRPC, DNS
   requestCount?: number
   errorCount?: number
+  /** Per-second rates from a metric-based source, unrounded. requestCount and
+   *  errorCount carry the same figures rounded with a floor of one, so their
+   *  ratio is meaningless at low rates. */
+  requestRate?: number
+  errorRate?: number
   avgLatencyMs?: number
+  /** How many measured responses the latency figures come from (sources that
+   *  report individual responses). Weights averages when edges are combined. */
+  latencySamples?: number
   latencyP50Ms?: number
   latencyP95Ms?: number
   latencyP99Ms?: number
@@ -1434,12 +1445,21 @@ export interface TrafficFlowsResponse {
   timestamp: string
   flows: TrafficFlow[]
   aggregated: AggregatedFlow[]
+  /** L7 responses run caller → callee on the server's port, like their request.
+   *  Absent from a Radar that sent them server → client. */
+  l7ResponsesCallerOriented?: boolean
+  /** When the flows start being complete: some node returned its full
+   *  nodeFlowLimit, so older traffic in the window did not fit. */
+  coveredSince?: string
+  nodeFlowLimit?: number
   warning?: string  // Non-fatal warning (e.g., query errors)
   /** 'transient' (or absent) means the condition may clear on its own and a
-   *  retry is worthwhile. 'partial' means the flows are correct but incomplete
-   *  for a reason retrying cannot change, so show the warning next to them and
-   *  do not refetch. */
-  warningKind?: 'transient' | 'partial'
+   *  retry is worthwhile. 'partial' means the flows are correct but some of
+   *  their values are missing or wrong, so show the warning next to them and do
+   *  not refetch. 'incomplete' means the fetch worked but could not see
+   *  everything — events lost, nodes unreachable — so flows may be missing; show
+   *  it, with or without flows, and do not retry at once. */
+  warningKind?: 'transient' | 'partial' | 'incomplete'
 }
 
 // Wizard state for traffic setup

package/src/types/fetch-error.ts

@@ -18,3 +18,36 @@ export function isFetchError(error: unknown): error is FetchErrorShape {
 export function isForbiddenError(error: unknown): boolean {
   return isFetchError(error) && error.status === 403
 }
+
+// RadarUpgradeRequirement describes a feature the connected Radar is too old to
+// serve. An embedding host (Radar Hub) runs a newer frontend against whatever
+// Radar is installed in the cluster, so "this endpoint does not exist yet" is an
+// expected state that deserves an upgrade prompt, not a red error.
+export interface RadarUpgradeRequirement {
+  /** What the user is missing, phrased to start a sentence ("Policy results"). */
+  feature: string
+  /**
+   * First Radar release that serves the feature, e.g. "v1.10.0". Absent when
+   * it isn't known yet (a feature still awaiting its release); the note then
+   * asks for the latest Radar instead.
+   */
+  minimumVersion?: string
+  /** The connected Radar's version, when known. */
+  currentVersion?: string
+  /** Newest Radar release, when known. */
+  latestVersion?: string
+}
+
+/**
+ * Reads the upgrade requirement off an error, duck-typed like FetchErrorShape so
+ * the host's error class (web/'s or Radar Hub's) never has to be imported here.
+ */
+export function getRadarUpgradeRequirement(error: unknown): RadarUpgradeRequirement | null {
+  if (typeof error !== 'object' || error === null) return null
+  const requirement = (error as { radarUpgrade?: unknown }).radarUpgrade
+  if (typeof requirement !== 'object' || requirement === null) return null
+  const r = requirement as Record<string, unknown>
+  if (typeof r.feature !== 'string') return null
+  if (r.minimumVersion !== undefined && typeof r.minimumVersion !== 'string') return null
+  return requirement as RadarUpgradeRequirement
+}

package/src/utils/log-format.ts

@@ -3,7 +3,7 @@
  * Shared between LogsViewer and WorkloadLogsViewer components.
  */
 
-import type { LogLevel } from '../components/logs/useLogBuffer'
+import type { LogLevel } from './log-level'
 
 export type TimestampFormat =
   | 'time-local'