@skyhook-io/radar-app 1.16.1 → 1.16.3

package/src/api/httpErrors.ts

@@ -99,3 +99,15 @@ export function nonJsonErrorMessage(response: Response, text: string): string {
 export async function readErrorBody(response: Response): Promise<ErrorBody> {
   return (await readErrorResponse(response)).body
 }
+
+/**
+ * Marks a mutation error whose surface already shows it, so the global
+ * mutation handler doesn't toast it a second time.
+ */
+export function markShownInline(error: Error): void {
+  ;(error as Error & { shownInline?: boolean }).shownInline = true
+}
+
+export function isShownInline(error: unknown): boolean {
+  return error instanceof Error && (error as Error & { shownInline?: boolean }).shownInline === true
+}

package/src/api/timelineSource.ts

@@ -423,7 +423,7 @@ export async function fetchRetainedDelta(
 // Mirrors the Go store's TimelineEvent.IsManaged (pkg/timeline/types.go):
 // a resource managed by another — owned, or one of the churn kinds. Keep the
 // two predicates in lockstep.
-function isManagedTimelineEvent(e: TimelineEvent): boolean {
+export function isManagedTimelineEvent(e: TimelineEvent): boolean {
   return e.owner != null || e.kind === 'ReplicaSet' || e.kind === 'Pod' || e.kind === 'Event'
 }
 

package/src/components/ConnectionErrorView.test.tsx

@@ -12,6 +12,8 @@ const capabilitiesMock = vi.hoisted(() => ({ localTerminal: true }))
 
 vi.mock('@skyhook-io/k8s-ui', () => ({
   ClusterName: ({ name }: { name: string }) => <span>{name}</span>,
+}))
+vi.mock('./dock/DockContext', () => ({
   useOpenLocalTerminal: () => vi.fn(),
 }))
 vi.mock('../api/client', () => ({

package/src/components/ConnectionErrorView.tsx

@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
 import type { ConnectionState } from '../context/ConnectionContext'
 import { ContextSwitcher } from './ContextSwitcher'
 import { parseContextName } from '../utils/context-name'
-import { useOpenLocalTerminal, ClusterName } from '@skyhook-io/k8s-ui'
+import { ClusterName } from '@skyhook-io/k8s-ui'
+import { useOpenLocalTerminal } from './dock/DockContext'
 import { useAuthMe, useContexts } from '../api/client'
 import { Tooltip } from './ui/Tooltip'
 import { Collapse, CollapseChevron } from '@skyhook-io/k8s-ui/components/ui/Collapse'

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/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>
+  )
+}

package/src/components/cnpg/CNPGDeclarations.tsx

@@ -0,0 +1,311 @@
+import { useMemo, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { AlertTriangle } from 'lucide-react'
+import { Badge, cnpgGitOpsSource, isApiGroup, toneTextClass, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import {
+  CNPGWorkspaceHeader,
+  CoverageNotice,
+  FilterChips,
+  ScreenBody,
+  Segments,
+  Sub,
+  clusterResource,
+  cnpgResource,
+  coverageEmpty,
+  worstCoverage,
+  namespaceChip,
+  type CNPGScreenProps,
+} from './shared'
+import { sameResource } from './routes'
+
+type State = 'applied' | 'failed' | 'pending'
+
+interface DeclItem {
+  key: string
+  kind: 'Database' | 'Publication' | 'Subscription' | 'Managed role'
+  pgName: string
+  indent: boolean
+  state: State
+  meta?: string
+  error?: string
+  source?: string
+  resource: SelectedResource
+  isField: boolean
+}
+
+interface DeclGroup {
+  namespace: string
+  cluster: string
+  row: CNPGFleetRow | null
+  items: DeclItem[]
+}
+
+function stateOf(obj: any): State {
+  const applied = obj?.status?.applied
+  if (applied === true) return 'applied'
+  if (applied === false) return 'failed'
+  return 'pending'
+}
+
+function gitopsSource(obj: any): string | undefined {
+  const src = cnpgGitOpsSource(obj)
+  if (!src) return undefined
+  return `${src.tool === 'argocd' ? 'Argo CD' : 'Flux'} ${src.name}`
+}
+
+const STATE_BADGE: Record<State, { severity: 'success' | 'warning' | 'neutral'; text: string }> = {
+  applied: { severity: 'success', text: 'Applied' },
+  failed: { severity: 'warning', text: 'Not applied' },
+  pending: { severity: 'neutral', text: 'Pending' },
+}
+
+function roleState(cluster: any, role: string): { state: State; error?: string } {
+  const status = cluster?.status?.managedRolesStatus
+  const errs = status?.cannotReconcile?.[role]
+  if (Array.isArray(errs) && errs.length > 0) return { state: 'failed', error: errs.join('; ') }
+  const by = status?.byStatus ?? {}
+  if ((by.reconciled ?? []).includes(role)) return { state: 'applied' }
+  return { state: 'pending' }
+}
+
+export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetParams, onInspect, inspected, onClearNamespaces }: CNPGScreenProps) {
+  const clusterFilter = searchParams.get('cluster')
+  const show = (searchParams.get('show') as 'failed' | 'pending' | null) ?? null
+
+  const groups = useMemo<DeclGroup[]>(() => {
+    const byCluster = new Map<string, DeclGroup>()
+    const group = (ns: string, cluster: string) => {
+      const k = `${ns}/${cluster}`
+      let g = byCluster.get(k)
+      if (!g) {
+        g = { namespace: ns, cluster, row: fleet.rows.find((r) => r.namespace === ns && r.name === cluster) ?? null, items: [] }
+        byCluster.set(k, g)
+      }
+      return g
+    }
+    const valid = (o: any) => isApiGroup(o?.apiVersion, 'postgresql.cnpg.io')
+    const dbs = (data.objects.databases ?? []).filter(valid)
+    const pubs = (data.objects.publications ?? []).filter(valid)
+    const subs = (data.objects.subscriptions ?? []).filter(valid)
+    const placed = new Set<any>()
+    for (const d of dbs) {
+      const ns = d.metadata?.namespace ?? ''
+      const cluster = d.spec?.cluster?.name ?? '(no cluster)'
+      const g = group(ns, cluster)
+      const st = stateOf(d)
+      g.items.push({
+        key: `db/${ns}/${d.metadata?.name}`,
+        kind: 'Database',
+        pgName: d.spec?.name ?? d.metadata?.name,
+        indent: false,
+        state: st,
+        meta: d.spec?.owner ? `owner ${d.spec.owner}` : undefined,
+        error: st === 'failed' ? d.status?.message : undefined,
+        source: gitopsSource(d),
+        resource: cnpgResource('databases', ns, d.metadata?.name),
+        isField: false,
+      })
+      for (const [list, kind] of [[pubs, 'Publication'], [subs, 'Subscription']] as const) {
+        for (const p of list) {
+          if (p.metadata?.namespace !== ns || p.spec?.cluster?.name !== d.spec?.cluster?.name || p.spec?.dbname !== d.spec?.name) continue
+          placed.add(p)
+          const pst = stateOf(p)
+          g.items.push({
+            key: `${kind}/${ns}/${p.metadata?.name}`,
+            kind,
+            pgName: p.spec?.name ?? p.metadata?.name,
+            indent: true,
+            state: pst,
+            meta:
+              kind === 'Publication'
+                ? p.spec?.target?.allTables ? 'all tables' : 'selected objects'
+                : `from ${p.spec?.publicationName ?? '?'} on ${p.spec?.externalClusterName ?? '?'}`,
+            error: pst === 'failed' ? p.status?.message : undefined,
+            source: gitopsSource(p),
+            resource: cnpgResource(kind === 'Publication' ? 'publications' : 'subscriptions', ns, p.metadata?.name),
+            isField: false,
+          })
+        }
+      }
+    }
+    for (const [list, kind] of [[pubs, 'Publication'], [subs, 'Subscription']] as const) {
+      for (const p of list) {
+        if (placed.has(p)) continue
+        const ns = p.metadata?.namespace ?? ''
+        const g = group(ns, p.spec?.cluster?.name ?? '(no cluster)')
+        const pst = stateOf(p)
+        g.items.push({
+          key: `${kind}/${ns}/${p.metadata?.name}`,
+          kind,
+          pgName: p.spec?.name ?? p.metadata?.name,
+          indent: false,
+          state: pst,
+          meta: p.spec?.dbname ? `database ${p.spec.dbname}` : undefined,
+          error: pst === 'failed' ? p.status?.message : undefined,
+          source: gitopsSource(p),
+          resource: cnpgResource(kind === 'Publication' ? 'publications' : 'subscriptions', ns, p.metadata?.name),
+          isField: false,
+        })
+      }
+    }
+    for (const row of fleet.rows) {
+      const roles: any[] = Array.isArray(row.cluster?.spec?.managed?.roles) ? row.cluster.spec.managed.roles : []
+      if (roles.length === 0) continue
+      const g = group(row.namespace, row.name)
+      for (const r of roles) {
+        if (!r?.name) continue
+        const rs = roleState(row.cluster, r.name)
+        g.items.push({
+          key: `role/${row.namespace}/${row.name}/${r.name}`,
+          kind: 'Managed role',
+          pgName: r.name,
+          indent: false,
+          state: rs.state,
+          meta: r.ensure === 'absent' ? 'ensure absent' : 'spec.managed.roles',
+          error: rs.error,
+          source: `Cluster ${row.name} spec`,
+          resource: clusterResource(row.namespace, row.name),
+          isField: true,
+        })
+      }
+    }
+    return [...byCluster.values()]
+      .filter((g) => !clusterFilter || `${g.namespace}/${g.cluster}` === clusterFilter)
+      .map((g) => ({ ...g, items: show ? g.items.filter((i) => i.state === show) : g.items }))
+      .filter((g) => g.items.length > 0)
+      .sort((a, b) => {
+        const fa = a.items.some((i) => i.state === 'failed') ? 0 : 1
+        const fb = b.items.some((i) => i.state === 'failed') ? 0 : 1
+        return fa - fb || a.namespace.localeCompare(b.namespace) || a.cluster.localeCompare(b.cluster)
+      })
+  }, [data.objects.databases, data.objects.publications, data.objects.subscriptions, fleet.rows, clusterFilter, show])
+
+  const totals = useMemo(() => {
+    let failed = 0
+    let pending = 0
+    for (const r of fleet.rows) {
+      failed += r.declarations.failed
+      pending += r.declarations.pending
+    }
+    return { failed, pending }
+  }, [fleet.rows])
+  const declCoverage = worstCoverage(data.coverage.databases, data.coverage.publications, data.coverage.subscriptions)
+
+  const chips = [
+    ...(clusterFilter ? [{ label: `Cluster: ${clusterFilter}`, onClear: () => onSetParams({ cluster: null }) }] : []),
+    ...namespaceChip(namespaces, onClearNamespaces),
+  ]
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <CNPGWorkspaceHeader
+        title="Declarations"
+        subtitle="Databases, managed roles, publications and subscriptions, by PostgreSQL cluster. Declared is not the same as reconciled."
+      />
+      <ScreenBody>
+        <CoverageNotice fleet={fleet} data={data} />
+        <div className="flex flex-wrap items-center gap-2">
+          <Segments
+            label="Declarations"
+            value={show ?? 'all'}
+            onChange={(id) => onSetParams({ show: id === 'all' ? null : id })}
+            options={[
+              { id: 'all', label: 'All declarations' },
+              { id: 'failed', label: 'Not applied', count: totals.failed },
+              { id: 'pending', label: 'Pending', count: totals.pending },
+            ]}
+          />
+        </div>
+        <FilterChips chips={chips} />
+
+        {groups.length === 0 ? (
+          <div className="rounded-xl border border-theme-border bg-theme-surface px-4 py-5 text-sm text-theme-text-tertiary">
+            {show === 'failed'
+              ? 'No declaration in this scope is reported as not applied.'
+              : show === 'pending'
+                ? 'No declaration in this scope is waiting for the operator.'
+                : coverageEmpty(declCoverage, 'declarations')}
+            {show && declCoverage?.state !== 'full' ? ' Some declarations are not readable with your access.' : ''}
+          </div>
+        ) : (
+          groups.map((g) => {
+            const failed = g.items.filter((i) => i.state === 'failed').length
+            return (
+              <section key={`${g.namespace}/${g.cluster}`} className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+                <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-theme-border px-4 py-2.5">
+                  {g.row ? (
+                    <button type="button" onClick={() => onInspect(clusterResource(g.namespace, g.cluster))} className="text-sm font-semibold text-accent-text hover:underline">
+                      {g.cluster}
+                    </button>
+                  ) : (
+                    <span className="text-sm font-semibold text-theme-text-primary">
+                      {g.cluster}
+                    </span>
+                  )}
+                  <span className="text-xs text-theme-text-tertiary">{g.namespace}</span>
+                  <span className={clsx('text-xs', failed > 0 ? toneTextClass('degraded') : 'text-theme-text-tertiary')}>
+                    {g.items.length} {g.items.length === 1 ? 'declaration' : 'declarations'}
+                    {failed > 0 ? ` · ${failed} not reconciled` : ''}
+                    {!g.row ? ' · target cluster not visible' : ''}
+                  </span>
+                </div>
+                <div className="table-divide-subtle">
+                  {g.items.map((i) => (
+                    <DeclarationRow
+                      key={i.key}
+                      item={i}
+                      active={!i.isField && sameResource(inspected, i.resource)}
+                      onInspect={() => onInspect(i.resource)}
+                    />
+                  ))}
+                </div>
+              </section>
+            )
+          })
+        )}
+      </ScreenBody>
+    </div>
+  )
+}
+
+function DeclarationRow({ item, active, onInspect }: { item: DeclItem; active: boolean; onInspect: () => void }) {
+  const badge = STATE_BADGE[item.state]
+  let detail: ReactNode = null
+  if (item.error) {
+    detail = (
+      <div className={clsx('mt-1 flex items-start gap-1.5 text-xs', toneTextClass('degraded'))}>
+        <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+        <span className="break-words">Controller error: {item.error}</span>
+      </div>
+    )
+  }
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onInspect}
+      onKeyDown={(e) => { if (e.key === 'Enter') onInspect() }}
+      className={clsx(
+        'grid cursor-pointer grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,1fr)] gap-x-4 px-4 py-2.5 text-sm transition-colors hover:bg-theme-hover/50',
+        active && 'selection',
+      )}
+    >
+      <div className={clsx('min-w-0', item.indent && 'pl-6')}>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs text-theme-text-tertiary">{item.kind}</span>
+          <span className="font-mono font-medium text-theme-text-primary">{item.pgName}</span>
+          {item.meta && <span className="text-xs text-theme-text-tertiary">{item.meta}</span>}
+        </div>
+        {detail}
+      </div>
+      <div>
+        <Badge severity={badge.severity} size="sm">{badge.text}</Badge>
+        {item.isField && <Sub>field of the Cluster</Sub>}
+      </div>
+      <div className="min-w-0 text-xs text-theme-text-secondary break-words">
+        {item.source ?? <span className="text-theme-text-tertiary">GitOps source not recorded</span>}
+      </div>
+    </div>
+  )
+}