@skyhook-io/k8s-ui 1.15.0 → 1.16.0

package/src/components/ui/SelectMenu.tsx

@@ -7,6 +7,8 @@ import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../ut
 export interface SelectMenuOption {
   value: string
   label: string
+  description?: string
+  disabled?: boolean
 }
 
 export function SelectMenu({
@@ -17,6 +19,8 @@ export function SelectMenu({
   ariaDescribedBy,
   className,
   searchPlaceholder,
+  placeholder,
+  variant = 'default',
   disabled = false,
   id,
 }: {
@@ -27,6 +31,8 @@ export function SelectMenu({
   ariaDescribedBy?: string
   className?: string
   searchPlaceholder?: string
+  placeholder?: string
+  variant?: 'default' | 'text'
   disabled?: boolean
   id?: string
 }) {
@@ -40,15 +46,33 @@ export function SelectMenu({
   const searchInputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
   const pointerDownInsideRef = useRef(false)
-  const selected = options.find((option) => option.value === value) ?? options[0]
+  // A keyboard open lands on the selected option, as a native select does; a
+  // pointer open keeps focus on the trigger.
+  const focusOptionOnOpenRef = useRef(false)
+  const selected = options.find((option) => option.value === value) ?? (placeholder ? undefined : options[0])
   const filteredOptions = useMemo(() => {
     const normalized = query.trim().toLowerCase()
     if (!normalized) return options
-    return options.filter((option) => option.label.toLowerCase().includes(normalized))
+    return options.filter((option) => `${option.label} ${option.description ?? ''}`.toLowerCase().includes(normalized))
   }, [options, query])
   const selectedIsVisible = filteredOptions.some((option) => option.value === value)
 
+  const focusTabbableOption = () => {
+    listRef.current?.querySelector<HTMLElement>('[role="option"][tabindex="0"]')?.focus()
+  }
+
+  const openMenu = () => {
+    setHighlightedIndex(
+      Math.max(
+        options.findIndex((option) => option.value === value),
+        0,
+      ),
+    )
+    setOpen(true)
+  }
+
   const selectOption = (nextValue: string) => {
+    if (options.find((option) => option.value === nextValue)?.disabled) return
     onChange(nextValue)
     setOpen(false)
     triggerRef.current?.focus()
@@ -81,7 +105,12 @@ export function SelectMenu({
   useEffect(() => {
     if (!open || !shouldRender) return
     if (!searchPlaceholder) {
-      triggerRef.current?.focus()
+      if (focusOptionOnOpenRef.current) {
+        focusOptionOnOpenRef.current = false
+        focusTabbableOption()
+      } else {
+        triggerRef.current?.focus()
+      }
       return
     }
     listRef.current
@@ -130,28 +159,38 @@ export function SelectMenu({
         aria-expanded={open}
         aria-controls={open ? listboxId : undefined}
         onClick={() => {
-          if (!open) {
-            setHighlightedIndex(
-              Math.max(
-                options.findIndex((option) => option.value === value),
-                0,
-              ),
-            )
+          if (open) setOpen(false)
+          else openMenu()
+        }}
+        onKeyDown={(event) => {
+          if (searchPlaceholder) return
+          const arrow = event.key === 'ArrowDown' || event.key === 'ArrowUp'
+          if (!arrow && (open || (event.key !== 'Enter' && event.key !== ' '))) return
+          event.preventDefault()
+          if (open) {
+            focusTabbableOption()
+            return
           }
-          setOpen(!open)
+          focusOptionOnOpenRef.current = true
+          openMenu()
         }}
         disabled={disabled}
-        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-theme-elevated"
+        className={clsx(
+          'flex items-center gap-1 text-xs disabled:cursor-not-allowed disabled:opacity-50',
+          variant === 'text'
+            ? 'text-accent-text hover:underline'
+            : 'h-8 w-full justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-theme-text-primary transition-colors hover:bg-theme-hover disabled:hover:bg-theme-elevated',
+        )}
       >
-        <span className="truncate">{selected?.label}</span>
-        <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
+        <span className="truncate">{selected?.label ?? placeholder}</span>
+        <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 transition-transform', variant !== 'text' && 'text-theme-text-tertiary', open && 'rotate-180')} />
       </button>
       {shouldRender && (
         <div
           inert={!open}
           className={clsx(
             'absolute top-full z-50 mt-1 min-w-full overflow-hidden rounded-md border border-theme-border bg-theme-surface shadow-theme-lg',
-            searchPlaceholder ? 'left-0 right-0 origin-top-left' : 'right-0 origin-top-right',
+            variant === 'text' ? 'left-0 w-72 max-w-[calc(100vw-4rem)] origin-top-left' : searchPlaceholder ? 'left-0 right-0 origin-top-left' : 'right-0 origin-top-right',
             TRANSITION_MENU,
             isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 -translate-y-1 scale-[0.97]',
             !open && 'pointer-events-none',
@@ -177,8 +216,7 @@ export function SelectMenu({
                 onKeyDown={(event) => {
                   if (event.key === 'Enter' && filteredOptions.length > 0) {
                     event.preventDefault()
-                    const nextIndex = Math.min(highlightedIndex, filteredOptions.length - 1)
-                    selectOption(filteredOptions[nextIndex].value)
+                    selectOption(filteredOptions[Math.min(highlightedIndex, filteredOptions.length - 1)].value)
                   } else if (event.key === 'ArrowDown') {
                     event.preventDefault()
                     const optionElements = listRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]')
@@ -244,19 +282,24 @@ export function SelectMenu({
                   type="button"
                   role="option"
                   aria-selected={active}
+                  aria-disabled={option.disabled || undefined}
                   tabIndex={
                     searchPlaceholder ? (index === highlightedIndex ? 0 : -1) : active || (!selectedIsVisible && index === 0) ? 0 : -1
                   }
                   onClick={() => selectOption(option.value)}
                   onFocus={() => setHighlightedIndex(index)}
                   className={clsx(
-                    'flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary',
+                    'flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors',
+                    option.disabled ? 'cursor-not-allowed opacity-60' : 'hover:bg-theme-hover hover:text-theme-text-primary',
                     searchPlaceholder && index === highlightedIndex && 'bg-theme-hover text-theme-text-primary',
                     !searchPlaceholder && 'whitespace-nowrap'
                   )}
                 >
                   <Check className={clsx('h-3.5 w-3.5 shrink-0 text-accent', !active && 'opacity-0')} />
-                  <span className={clsx(searchPlaceholder && 'truncate')}>{option.label}</span>
+                  <span className={clsx('min-w-0', searchPlaceholder && !option.description && 'truncate')}>
+                    <span className={clsx(option.description && 'block break-words font-medium')}>{option.label}</span>
+                    {option.description && <span className="block break-all text-theme-text-tertiary">{option.description}</span>}
+                  </span>
                 </button>
               )
             })}

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'