@skyhook-io/radar-app 1.16.3 → 1.17.0

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/capacity/CapacityPoolDetail.tsx

@@ -676,12 +676,23 @@ function LifecycleGrid({
           Nodes
         </div>
         {pool.nodes ? (
-          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-            <MiniCount label="Ready" value={pool.nodes.ready} />
-            <MiniCount label="Not ready" value={pool.nodes.notReady} />
-            <MiniCount label="Cordoned" value={pool.nodes.cordoned} />
-            <MiniCount label="Terminating" value={pool.nodes.terminating} />
-          </div>
+          <>
+            <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+              <MiniCount label="Ready" value={pool.nodes.operational ? pool.nodes.operational.ready : pool.nodes.ready} />
+              <MiniCount label="Not ready" value={pool.nodes.operational ? pool.nodes.operational.notReady : pool.nodes.notReady} />
+              <MiniCount label="Cordoned" value={pool.nodes.operational ? pool.nodes.operational.cordoned : pool.nodes.cordoned} />
+              {pool.nodes.operational ? (
+                <MiniCount label="Removing" value={pool.nodes.operational.removing} />
+              ) : (
+                <MiniCount label="Terminating" value={pool.nodes.terminating} />
+              )}
+            </div>
+            {pool.nodes.operational ? pool.nodes.operational.removingUnhealthy > 0 && (
+              <p className="mt-2 text-xs text-theme-text-secondary">{pool.nodes.operational.removingUnhealthy} removing {pool.nodes.operational.removingUnhealthy === 1 ? "node has" : "nodes have"} critical pressure or prolonged removal.</p>
+            ) : (
+              <p className="mt-2 text-xs text-theme-text-secondary">Readiness counts only; removal status is unavailable from this Radar.</p>
+            )}
+          </>
         ) : (
           <p className="text-sm text-theme-text-secondary">
             {coverageMessage(pool.coverage.nodes, "Node lifecycle")}
@@ -1353,7 +1364,7 @@ function PoolMembersTab({
                 />
               </td>
               <td className={TD}>
-                <NodeReadyBadge ready={node.ready} cordoned={node.cordoned} />
+                <NodeReadyBadge ready={node.ready} cordoned={node.cordoned} lifecycle={node.lifecycle} />
               </td>
               <td className={`${TD} font-mono text-xs`}>
                 {node.instanceType ?? "—"}

package/src/components/capacity/CapacityView.test.tsx

@@ -24,7 +24,7 @@ import type {
 } from "@skyhook-io/k8s-ui";
 import { CapacityView } from "./CapacityView";
 import { updateDemandSearchParam } from "./CapacityDemand";
-import { integrationBlock } from "./shared";
+import { integrationBlock, NodeReadyBadge } from "./shared";
 import { ApiError } from "../../api/client";
 import { RadarFeatureUnsupportedError } from "../../api/radarFeatures";
 
@@ -2315,3 +2315,33 @@ describe("integrationBlock version skew", () => {
     expect(html).not.toContain("needs a newer Radar");
   });
 });
+
+describe("Node lifecycle in Capacity", () => {
+  it("uses backend lifecycle while preserving raw readiness", () => {
+    const lifecycle = { label: "Removing (Karpenter)", level: "neutral" as const, removing: true, readinessFailed: false, delayed: false };
+    for (const ready of [true, false, undefined]) {
+      const html = renderToString(<NodeReadyBadge ready={ready} cordoned={false} lifecycle={lifecycle} />);
+      expect(html).toContain("Removing (Karpenter)");
+      expect(html).not.toContain("NotReady");
+      expect(html).not.toContain("text-red-");
+    }
+    const failed = renderToString(<NodeReadyBadge ready={false} cordoned={false} lifecycle={{ ...lifecycle, label: "Removing (Karpenter) · NotReady", level: "unhealthy", readinessFailed: true }} />);
+    expect(failed).toContain("NotReady");
+    expect(failed).toContain("text-red-");
+    const raw = renderToString(<NodeReadyBadge ready={false} cordoned={false} />);
+    expect(raw).toContain("NotReady (condition)");
+    expect(raw).toContain("text-red-");
+  });
+  it("renders exclusive operational counts, not overlapping raw counts", () => {
+    const html = renderCapacity("/capacity/pools/default", (client) => client.setQueryData(
+      ["capacity", "pool", "default"], poolDetailResponse({ ...cleanPoolDetail, nodes: {
+        total: 6, ready: 4, notReady: 2, cordoned: 1, terminating: 2,
+        operational: { total: 6, ready: 2, notReady: 1, cordoned: 1, removing: 2, removingUnhealthy: 1 },
+      } }),
+    ));
+    expect(html).toMatch(/>2<\/div><div[^>]*>Ready<\/div>/);
+    expect(html).toMatch(/>1<\/div><div[^>]*>Not ready<\/div>/);
+    expect(html).toMatch(/>2<\/div><div[^>]*>Removing<\/div>/);
+    expect(html.replace(/<!-- -->/g, "")).toContain("1 removing node has critical pressure or prolonged removal.");
+  });
+});

package/src/components/capacity/shared.tsx

@@ -14,6 +14,7 @@ import {
 } from "lucide-react";
 import {
   FreshnessControl,
+  healthToSeverity,
   formatDuration,
   getRadarUpgradeRequirement,
   RadarUpgradeAction,
@@ -38,6 +39,7 @@ import {
   type CapacityManagerRollupStatus,
   type CapacityManagerSummary,
   type CapacityMemberType,
+  type CapacityNodeMember,
   type CapacityPoolSummary,
   type CapacityQuantityObservation,
   type CapacityResourceIdentity,
@@ -603,32 +605,21 @@ export function PoolReadyBadge({ ready }: { ready?: boolean }) {
 export function NodeReadyBadge({
   ready,
   cordoned,
+  lifecycle,
 }: {
   ready?: boolean;
   cordoned: boolean;
+  lifecycle?: CapacityNodeMember["lifecycle"];
 }) {
-  if (ready === false)
-    return (
-      <Badge severity="error" size="sm">
-        NotReady
-      </Badge>
-    );
-  if (ready === undefined)
-    return (
-      <Badge severity="neutral" size="sm">
-        Unknown
-      </Badge>
-    );
-  if (cordoned)
-    return (
-      <Badge severity="warning" size="sm">
-        Cordoned
-      </Badge>
-    );
+  if (lifecycle) {
+    return <Badge severity={healthToSeverity(lifecycle.level)} size="sm">{lifecycle.label}</Badge>;
+  }
   return (
-    <Badge severity="success" size="sm">
-      Ready
-    </Badge>
+    <WithTooltip tip="Kubernetes readiness only; removal status is unavailable from this Radar.">
+      <Badge severity={ready === false ? "error" : ready === undefined ? "neutral" : cordoned ? "warning" : "success"} size="sm">
+        {ready === false ? "NotReady (condition)" : ready === undefined ? "Readiness unknown" : cordoned ? "Cordoned" : "Ready (condition)"}
+      </Badge>
+    </WithTooltip>
   );
 }
 

package/src/components/cnpg/CNPGProtection.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
+import { formatRelativeAgeTime } from '@skyhook-io/k8s-ui/utils/format'
 import {
   Badge,
   FactValue,
-  formatAge,
   formatDuration,
   getCNPGBackupStatus,
   getCNPGClusterBarmanPlugin,
@@ -50,7 +50,7 @@ function backupStart(b: any): string | undefined {
 }
 
 function ageText(ts?: string): string {
-  return ts ? `${formatAge(ts)} ago` : '—'
+  return formatRelativeAgeTime(ts, '—')
 }
 
 interface StoreRow {

package/src/components/diagnose/AgentSetupNotice.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { AgentSetupNotice } from "./AgentSetupNotice";
+import type { DiagnoseSetup } from "./DiagnoseContext";
+
+const render = (
+  setupState: DiagnoseSetup,
+  { checkingAgents = false, cliOverride = false } = {},
+) =>
+  renderToStaticMarkup(
+    <AgentSetupNotice
+      setupState={setupState}
+      cliOverride={cliOverride}
+      checkingAgents={checkingAgents}
+      agentsCheckFailed={false}
+      recheckAgents={async () => {}}
+    />,
+  );
+
+describe("AgentSetupNotice", () => {
+  it("offers installs and a re-check, never a restart, when no CLI is found", () => {
+    const html = render("needs-install");
+    expect(html).toContain("Claude Code");
+    expect(html).toContain("OpenCode");
+    expect(html).toContain("Check again");
+    expect(html).not.toMatch(/restart/i);
+    // A desktop user can't set an environment variable for a Dock launch.
+    expect(html).not.toContain("RADAR_AI_CLI_BIN");
+  });
+
+  it("shows the check in progress", () => {
+    const html = render("needs-install", { checkingAgents: true });
+    expect(html).toContain("Checking…");
+    expect(html).toContain("disabled");
+  });
+
+  it("names the override only when the server says it is set", () => {
+    for (const state of ["needs-restart", "needs-install"] as const) {
+      const html = render(state, { cliOverride: true });
+      expect(html).toContain("RADAR_AI_CLI_BIN");
+      expect(html).toContain("restart Radar");
+      // Detection is off while the variable is set, so an install can't help.
+      expect(html).not.toContain("Install one of these");
+      // A working file put back at the pinned path is picked up without one.
+      expect(html).toContain("Check again");
+    }
+  });
+
+  it("says nothing it can't know when an agent is reported but off", () => {
+    // Radar Hub reports a hosted agent that is supported but not enabled when
+    // its own runner is down: no CLI, no startup output, no override.
+    const html = render("needs-restart");
+    expect(html).toContain("aren&#x27;t available right now");
+    expect(html).not.toMatch(/RADAR_AI_CLI_BIN|agent CLI|startup output/);
+    expect(html).not.toContain("Install one of these");
+    expect(html).toContain("Check again");
+  });
+});