@skyhook-io/radar-app 1.16.2 → 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/NoClusterAccessBanner.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { ShieldAlert } from 'lucide-react'
+import { AlertBanner, Badge, Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui'
+import { useAuthMe, useNamespaceAccess } from '../api/client'
+
+// Every read is filtered to the user's namespaces, so someone bound to none
+// sees empty lists in every view and reads it as an empty cluster. Stated in
+// terms of the user's own access, not how the cluster is meant to be set up:
+// Radar can't know whether an org intends hub roles or IdP groups here.
+export function NoClusterAccessBanner() {
+  const { data: auth } = useAuthMe()
+  // Mounted once content is ready (and again after a context switch), so the
+  // cluster is connected by the time this asks.
+  const { data } = useNamespaceAccess(Boolean(auth?.authEnabled))
+  // Keep the last definite answer through a check that couldn't decide, so a
+  // transient discovery failure doesn't hide the banner from a user without access.
+  const [me, setMe] = useState<typeof data>()
+  useEffect(() => {
+    if (data && typeof data.noNamespaceAccess === 'boolean') setMe(data)
+  }, [data])
+  const [groupsOpen, setGroupsOpen] = useState(false)
+  const groupsDisclosure = useDisclosure(groupsOpen)
+
+  // The remembered answer only counts for the person signed in now.
+  if (!me?.noNamespaceAccess || me.username !== auth?.username) return null
+
+  const groups = me.groups ?? []
+  return (
+    <div className="px-4 pt-3">
+      <AlertBanner
+        variant="warning"
+        icon={ShieldAlert}
+        title="You can't read any namespace in this cluster"
+        message={
+          <>
+            Radar is connected, but your Kubernetes permissions don't allow reading any namespace, so
+            every view looks empty. Signed in as <span className="font-mono">{me.username}</span>.
+          </>
+        }
+      >
+        {groups.length > 0 && (
+          // ph-no-capture: group IDs name the customer's directory structure.
+          // Radar Cloud embeds this view with session replay on, and its text
+          // mask only catches credential-shaped values. A no-op without PostHog.
+          <div className="ph-no-capture mt-2">
+            <button
+              {...groupsDisclosure.buttonProps}
+              onClick={() => setGroupsOpen((v) => !v)}
+              className="flex items-center gap-1.5 text-xs text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+            >
+              <CollapseChevron open={groupsOpen} className="w-3.5 h-3.5" />
+              Your groups ({groups.length})
+            </button>
+            <Collapse open={groupsOpen} id={groupsDisclosure.panelId}>
+              <div className="mt-2 flex max-h-32 max-w-4xl flex-wrap gap-1.5 overflow-y-auto">
+                {groups.map((g) => (
+                  <Badge key={g} tone="structural" size="sm" className="font-mono">
+                    {g}
+                  </Badge>
+                ))}
+              </div>
+            </Collapse>
+          </div>
+        )}
+      </AlertBanner>
+    </div>
+  )
+}

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/CNPGClusterActivity.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { PaneLoader, TimelineList, formatAge, type NavigateToResource } from '@skyhook-io/k8s-ui'
+import { useCNPGClusterActivity } from '../../api/cnpg'
+import { Notice } from '../capacity/shared'
+import { Segments } from './shared'
+
+const RANGES = [
+  { id: '6', label: '6 h' },
+  { id: '24', label: '24 h' },
+  { id: '168', label: '7 d' },
+] as const
+
+/**
+ * Kubernetes events and changes for the Cluster, its instance Pods and the
+ * CNPG objects attributed to it — including Backups and declarations deleted
+ * since. Attribution of child objects relies on a label Radar records at
+ * ingestion, so history older than that is marked incomplete.
+ */
+export function CNPGClusterActivity({ namespace, name, onNavigate }: { namespace: string; name: string; onNavigate?: NavigateToResource }) {
+  const [hours, setHours] = useState<string>('24')
+  const q = useCNPGClusterActivity(namespace, name, Number(hours))
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-3 p-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <Segments label="Range" value={hours} onChange={setHours} options={RANGES.map((r) => ({ id: r.id, label: r.label }))} />
+        <span className="text-xs text-theme-text-tertiary">
+          Kubernetes events and changes for the Cluster, its instances, Backups, Poolers and declarations.
+        </span>
+      </div>
+      <div className="text-xs text-theme-text-tertiary">
+        {q.data?.attributionSince
+          ? `The earliest recorded event linking a Backup, Pooler or declaration to this cluster is ${formatAge(q.data.attributionSince)} old. Deleted child objects from before Radar recorded that link are not shown.`
+          : 'Radar has not recorded any Backup, Pooler or declaration events linked to this cluster yet, so deleted child objects may be missing.'}
+        {' '}Events for kinds you cannot list are omitted.
+      </div>
+      {q.data?.truncated && <Notice>Showing the most recent events only; narrow the range to see all of them.</Notice>}
+      {q.error && !q.data ? (
+        <Notice>Activity could not be loaded: {q.error instanceof Error ? q.error.message : 'unknown error'}</Notice>
+      ) : !q.data ? (
+        <PaneLoader label="Loading activity…" className="h-40" />
+      ) : (
+        <div className="min-h-0 flex-1">
+          <TimelineList events={q.data.events} isLoading={q.isFetching && !q.data} onResourceClick={onNavigate} compact hideRangeSelector />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/cnpg/CNPGClusterLogs.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { WorkloadLogsViewer, type WorkloadLogsFetchParams, type WorkloadLogsResult } from '@skyhook-io/k8s-ui'
+import { fetchJSON } from '../../api/client'
+import { getApiBase, getCredentialsMode } from '../../api/config'
+import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+import { useTheme } from '../../context/ThemeContext'
+
+function logsPath(namespace: string, name: string) {
+  return `/cnpg/clusters/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/logs`
+}
+
+function query(params: WorkloadLogsFetchParams, tailDefault?: number) {
+  const q = new URLSearchParams()
+  if (params.container) q.set('container', params.container)
+  const tail = params.tailLines ?? tailDefault
+  if (tail) q.set('tailLines', String(tail))
+  if (params.sinceSeconds) q.set('sinceSeconds', String(params.sinceSeconds))
+  const s = q.toString()
+  return s ? `?${s}` : ''
+}
+
+/**
+ * Logs merged from every instance Pod of a CloudNativePG Cluster. `?pod=`
+ * preselects one instance (the fleet's "Logs" action and "Open instance logs").
+ */
+export function CNPGClusterLogs({ namespace, name }: { namespace: string; name: string }) {
+  const [searchParams] = useSearchParams()
+  const pod = searchParams.get('pod')
+  const desktopDownload = useDesktopDownload()
+  const { theme } = useTheme()
+
+  const fetchAll = useCallback(
+    (params: WorkloadLogsFetchParams) =>
+      fetchJSON<WorkloadLogsResult>(`${logsPath(namespace, name)}${query(params)}`, { signal: params.signal }),
+    [namespace, name],
+  )
+  const createStream = useCallback(
+    (params: WorkloadLogsFetchParams) =>
+      new EventSource(`${getApiBase()}${logsPath(namespace, name)}/stream${query(params, 50)}`, {
+        withCredentials: getCredentialsMode() === 'include',
+      }),
+    [namespace, name],
+  )
+
+  return (
+    <div className="h-full">
+      <WorkloadLogsViewer
+        key={pod ?? ''}
+        name={name}
+        fetchAll={fetchAll}
+        createStream={createStream}
+        overrideDownload={desktopDownload}
+        forceDark={theme === 'dark' ? true : undefined}
+        // Light logs on a dark app are never wanted: dark theme pins the palette,
+        // light theme only sets where it starts and leaves the toggle available.
+        defaultDark={false}
+        initialPods={pod ? [pod] : undefined}
+      />
+    </div>
+  )
+}