@skyhook-io/radar-app 1.16.2 → 1.17.0

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

package/src/components/cnpg/CNPGDetailPage.tsx

@@ -0,0 +1,228 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { Activity, ArrowLeft, Database, ShieldCheck, Unplug } from 'lucide-react'
+import type { WorkloadExtraTab } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { useConnection } from '../../context/ConnectionContext'
+import { useContexts } from '../../api/client'
+import { useContextSwitchFlow } from '../useContextSwitchFlow'
+import { WorkloadView } from '../workload/WorkloadView'
+import { EmptyState } from '../capacity/shared'
+import { CNPGClusterActivity } from './CNPGClusterActivity'
+import { CNPGProtection } from './CNPGProtection'
+import { CNPGScreenGate } from './shared'
+import { CNPG_DETAIL_KINDS, CNPG_SCREENS, cnpgDetailKindFor, cnpgDetailPath, cnpgScreenPath, type CNPGDetailTarget } from './routes'
+import { currentPageLabel } from './paths'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+
+interface ReturnState {
+  returnLabel?: string
+  returnCtx?: string
+}
+
+function ClusterProtectionTab({ namespace, name, onInspect }: { namespace: string; name: string; onInspect: (r: SelectedResource) => void }) {
+  const { query, fleet } = useCNPGFleet([namespace])
+  const [searchParams] = useSearchParams()
+  return (
+    <CNPGScreenGate query={query} fleet={fleet}>
+      {(data, readyFleet) => (
+        <CNPGProtection
+          data={data}
+          fleet={readyFleet}
+          namespaces={[namespace]}
+          searchParams={searchParams}
+          onSetParams={() => {}}
+          onInspect={onInspect}
+          inspected={null}
+          onClearNamespaces={() => {}}
+          scopeCluster={{ namespace, name }}
+        />
+      )}
+    </CNPGScreenGate>
+  )
+}
+
+/**
+ * The full detail of a CloudNativePG object, framed by the workspace: the
+ * Resources sidebar keeps the workspace destination highlighted, a return
+ * control goes back to the task the user came from, and the crumb names the
+ * object's place. The object's own sections come from Radar's detail view.
+ *
+ * `ctx` in the URL pins the Kubernetes context; when the active context is a
+ * different one, the page says so instead of loading a same-named object.
+ */
+export function CNPGDetailPage({
+  target,
+  namespaces,
+  onOpenResource,
+}: {
+  target: CNPGDetailTarget
+  namespaces: string[]
+  onOpenResource: (resource: SelectedResource) => void
+}) {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { connection } = useConnection()
+  const activeContext = connection.context
+  const pinnedContext = searchParams.get('ctx')
+
+  // A link opened without a context belongs to the one active now; pin it so a
+  // later context switch shows "not in this context" instead of a same-named
+  // object from the other cluster.
+  useEffect(() => {
+    if (pinnedContext || !activeContext) return
+    const params = new URLSearchParams(searchParams)
+    params.set('ctx', activeContext)
+    setSearchParams(params, { replace: true, state: location.state })
+  }, [pinnedContext, activeContext]) // eslint-disable-line react-hooks/exhaustive-deps
+  const returnState = (location.state ?? {}) as ReturnState
+  const spec = CNPG_DETAIL_KINDS[target.plural]
+  const home = CNPG_SCREENS.find((s) => s.id === spec.home)!
+  const returnLabel = returnState.returnLabel && (!returnState.returnCtx || returnState.returnCtx === activeContext) ? returnState.returnLabel : null
+
+  const openRelated = useCallback(
+    (res: SelectedResource) => {
+      const plural = cnpgDetailKindFor(res.kind, res.group)
+      if (plural) {
+        navigate(cnpgDetailPath({ plural, namespace: res.namespace, name: res.name }, activeContext), {
+          state: { returnLabel: currentPageLabel(), returnCtx: activeContext } satisfies ReturnState,
+        })
+      } else {
+        onOpenResource(res)
+      }
+    },
+    [navigate, activeContext, onOpenResource],
+  )
+
+  const extraTabs = useMemo<WorkloadExtraTab[] | undefined>(() => {
+    if (target.plural !== 'clusters') return undefined
+    return [
+      {
+        id: 'protection',
+        label: 'Protection',
+        icon: <ShieldCheck className="h-4 w-4" />,
+        after: 'spec',
+        render: () => <ClusterProtectionTab namespace={target.namespace} name={target.name} onInspect={onOpenResource} />,
+      },
+      {
+        id: 'activity',
+        label: 'Activity',
+        icon: <Activity className="h-4 w-4" />,
+        replaces: 'timeline',
+        render: () => (
+          <CNPGClusterActivity namespace={target.namespace} name={target.name} onNavigate={openRelated} />
+        ),
+      },
+    ]
+  }, [target.plural, target.namespace, target.name, onOpenResource, openRelated])
+
+  if (pinnedContext && activeContext && pinnedContext !== activeContext) {
+    return <NotInContext target={target} pinnedContext={pinnedContext} activeContext={activeContext} homeLabel={home.label} homePath={home.path} />
+  }
+
+  const outsideFilter = namespaces.length > 0 && !!target.namespace && !namespaces.includes(target.namespace)
+
+  const breadcrumb = (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+      {returnLabel && (
+        <>
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            aria-label={`Return to ${returnLabel}`}
+            className="inline-flex items-center gap-1 rounded-md py-0.5 pr-2 text-theme-text-secondary hover:text-theme-text-primary"
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            {returnLabel}
+          </button>
+          <span className="h-4 w-px bg-theme-border" aria-hidden />
+        </>
+      )}
+      <nav aria-label="Location" className="flex min-w-0 items-center gap-1.5 text-theme-text-tertiary">
+        <Database className="h-3.5 w-3.5" />
+        <button type="button" onClick={() => navigate(cnpgScreenPath('overview'))} className="hover:text-theme-text-primary hover:underline">
+          CloudNativePG
+        </button>
+        {home.id !== 'overview' && (
+          <>
+            <span>/</span>
+            <button type="button" onClick={() => navigate(home.path)} className="hover:text-theme-text-primary hover:underline">
+              {home.label}
+            </button>
+          </>
+        )}
+        <span>/</span>
+        <span className="truncate text-theme-text-secondary">{target.name}</span>
+      </nav>
+      {outsideFilter && (
+        <span className="text-xs text-theme-text-tertiary">
+          Namespace {target.namespace} is outside your namespace filter; this object stays open.
+        </span>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
+      <WorkloadView
+        key={`${target.plural}/${target.namespace}/${target.name}`}
+        kind={target.plural}
+        namespace={target.namespace}
+        name={target.name}
+        group={target.group}
+        expanded
+        onBack={() => (returnLabel ? navigate(-1) : navigate(home.path))}
+        hideBackButton
+        breadcrumb={breadcrumb}
+        onNavigateToResource={openRelated}
+        extraTabs={extraTabs}
+      />
+    </div>
+  )
+}
+
+function NotInContext({
+  target,
+  pinnedContext,
+  activeContext,
+  homeLabel,
+  homePath,
+}: {
+  target: CNPGDetailTarget
+  pinnedContext: string
+  activeContext: string
+  homeLabel: string
+  homePath: string
+}) {
+  const navigate = useNavigate()
+  const { data: contexts } = useContexts()
+  const { requestSwitch, confirmDialog } = useContextSwitchFlow()
+  const pinned = contexts?.find((c) => c.name === pinnedContext)
+  return (
+    <>
+      <EmptyState
+        icon={Unplug}
+        title={`${target.name} is not in ${activeContext}`}
+        detail={`This link points at ${CNPG_DETAIL_KINDS[target.plural].kind} ${target.name} in context ${pinnedContext}. Radar does not open a same-named object from another cluster.`}
+        action={
+          <div className="mt-4 flex flex-wrap justify-center gap-2">
+            {pinned && (
+              <button type="button" onClick={() => requestSwitch(pinned)} className="btn-brand px-3 py-1.5 text-sm font-medium">
+                Switch back to {pinnedContext}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => navigate(homePath)}
+              className="rounded-lg border border-theme-border bg-theme-surface px-3 py-1.5 text-sm text-theme-text-primary hover:bg-theme-hover"
+            >
+              Go to {homeLabel === 'Overview' ? 'CloudNativePG Overview' : homeLabel}
+            </button>
+          </div>
+        }
+      />
+      {confirmDialog}
+    </>
+  )
+}

package/src/components/cnpg/CNPGDrawerTrail.tsx

@@ -0,0 +1,37 @@
+import { useLocation, useSearchParams } from 'react-router-dom'
+import { ArrowLeft } from 'lucide-react'
+import { CNPG_KIND_BY_KEY } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { decodeDrawerTrail, encodeDrawerTrail, sameResource } from './routes'
+
+const KIND_BY_PLURAL: Record<string, string> = Object.fromEntries(
+  Object.values(CNPG_KIND_BY_KEY).map((k) => [k.plural, k.kind]),
+)
+
+/**
+ * On a CloudNativePG workspace screen the drawer URL carries the chain of
+ * objects opened from inside the drawer. This is the step back to the previous
+ * one, shown for whatever kind is open (a Pod or Secret reached from a CNPG
+ * object included).
+ */
+export function CNPGDrawerTrailBack({ resource }: { resource: SelectedResource }) {
+  const location = useLocation()
+  const [searchParams, setSearchParams] = useSearchParams()
+  if (!location.pathname.startsWith('/cnpg')) return null
+  const trail = decodeDrawerTrail(searchParams.get('drawer'))
+  if (trail.length < 2 || !sameResource(trail[trail.length - 1], resource)) return null
+  const prev = trail[trail.length - 2]
+  const back = () => {
+    const params = new URLSearchParams(searchParams)
+    params.set('drawer', encodeDrawerTrail(trail.slice(0, -1)))
+    setSearchParams(params, { replace: true, state: location.state })
+  }
+  return (
+    <div className="shrink-0 border-b border-theme-border px-4 py-2">
+      <button type="button" onClick={back} className="inline-flex items-center gap-1 text-xs font-medium text-accent-text hover:underline">
+        <ArrowLeft className="h-3.5 w-3.5" />
+        {KIND_BY_PLURAL[prev.kind] ?? prev.kind} {prev.name}
+      </button>
+    </div>
+  )
+}