@skyhook-io/radar-app 1.16.1 → 1.16.3

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

package/src/components/cnpg/CNPGOperator.tsx

@@ -0,0 +1,234 @@
+import { useMemo } from 'react'
+import { Badge, getCNPGImageCatalogEntries, isApiGroup, PaneLoader, Tooltip } from '@skyhook-io/k8s-ui'
+import { useCNPGOperator, type CNPGOperatorComponent, type CNPGOperatorConfig } from '../../api/cnpg'
+import { Notice } from '../capacity/shared'
+import {
+  CNPGWorkspaceHeader,
+  CoverageNotice,
+  coverageEmpty,
+  worstCoverage,
+  Mono,
+  ScreenBody,
+  SectionTable,
+  Sub,
+  cnpgResource,
+  type CNPGScreenProps,
+} from './shared'
+
+interface CatalogRow {
+  key: string
+  kind: 'ImageCatalog' | 'ClusterImageCatalog'
+  namespace: string
+  name: string
+  images: { major: number; image: string }[]
+  users: { namespace: string; name: string; major?: number }[]
+}
+
+function readiness(c: CNPGOperatorComponent) {
+  if (c.readyReplicas === null || c.replicas === null) return <span className="text-theme-text-tertiary">Unknown</span>
+  if (c.replicas === 0) return <Badge severity="warning" size="sm">Scaled to 0</Badge>
+  const ok = c.readyReplicas >= c.replicas
+  return <Badge severity={ok ? 'success' : c.readyReplicas === 0 ? 'error' : 'warning'} size="sm">{c.readyReplicas}/{c.replicas} ready</Badge>
+}
+
+export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenProps) {
+  const operator = useCNPGOperator()
+
+  const catalogs = useMemo<CatalogRow[]>(() => {
+    const out: CatalogRow[] = []
+    const clusters = fleet.rows
+    for (const [key, kind] of [['imageCatalogs', 'ImageCatalog'], ['clusterImageCatalogs', 'ClusterImageCatalog']] as const) {
+      for (const cat of data.objects[key] ?? []) {
+        if (!isApiGroup(cat.apiVersion, 'postgresql.cnpg.io')) continue
+        const ns = cat.metadata?.namespace ?? ''
+        const name = cat.metadata?.name ?? ''
+        const users = clusters
+          .filter((r) => {
+            const ref = r.cluster?.spec?.imageCatalogRef
+            if (!ref || ref.name !== name) return false
+            const refKind = ref.kind || 'ImageCatalog'
+            if (refKind !== kind) return false
+            return kind === 'ClusterImageCatalog' || r.namespace === ns
+          })
+          .map((r) => ({ namespace: r.namespace, name: r.name, major: r.cluster?.spec?.imageCatalogRef?.major }))
+        out.push({ key: `${kind}/${ns}/${name}`, kind, namespace: ns, name, images: getCNPGImageCatalogEntries(cat), users })
+      }
+    }
+    return out
+  }, [data.objects, fleet.rows])
+
+  const direct = fleet.rows.filter((r) => !r.cluster?.spec?.imageCatalogRef)
+  const op = operator.data
+  const coverageGaps = op
+    ? (['deployments', 'services'] as const).filter((k) => op.coverage[k]?.state !== 'full')
+    : []
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <CNPGWorkspaceHeader
+        title="Operator"
+        subtitle="Operator and plugin workloads, their versions, image catalogs and operator configuration."
+      />
+      <ScreenBody>
+        <CoverageNotice fleet={fleet} data={data} />
+        {operator.isLoading && !op ? (
+          <PaneLoader label="Loading operator…" className="h-32" />
+        ) : !op ? (
+          <Notice>Operator details could not be loaded{operator.error instanceof Error ? `: ${operator.error.message}` : '.'}</Notice>
+        ) : (
+          <>
+            {coverageGaps.length > 0 && (
+              <Notice>
+                Some workloads are not readable ({coverageGaps.map((k) => `${k}: ${op.coverage[k].state}`).join(', ')}), so an operator or plugin running in those namespaces may be missing below.
+              </Notice>
+            )}
+            <SectionTable
+              title="Operator and plugins"
+              columns={[
+                {
+                  header: 'Component',
+                  width: '30%',
+                  cell: (c: CNPGOperatorComponent) => (
+                    <>
+                      <div className="font-medium">{c.role === 'operator' ? 'CloudNativePG operator' : c.pluginName ?? 'Plugin'}</div>
+                      <Sub>{c.role === 'operator' ? 'controller manager' : 'CNPG-I plugin'}</Sub>
+                    </>
+                  ),
+                },
+                {
+                  header: 'Version',
+                  width: '14%',
+                  cell: (c) => (
+                    <Tooltip content={c.image || 'No image recorded'}>
+                      {c.version ? <Mono>{c.version}</Mono> : <span className="text-theme-text-tertiary">Unknown</span>}
+                    </Tooltip>
+                  ),
+                },
+                { header: 'Ready', width: '14%', cell: readiness },
+                {
+                  header: 'Workload',
+                  width: '42%',
+                  cell: (c) =>
+                    c.deployment ? (
+                      <>Deployment <Mono>{c.deployment}</Mono><Sub>{c.namespace}</Sub></>
+                    ) : (
+                      <>
+                        <span className="text-theme-text-tertiary">No Deployment matches its Service</span>
+                        <Sub>{c.namespace}</Sub>
+                      </>
+                    ),
+                },
+              ]}
+              rows={op.components}
+              rowKey={(c) => `${c.namespace}/${c.deployment}/${c.pluginName ?? c.role}`}
+              rowResource={(c) => (c.deployment ? { kind: 'deployments', group: 'apps', namespace: c.namespace, name: c.deployment } : null)}
+              onInspect={onInspect}
+              inspected={inspected}
+              empty="No operator or plugin Deployments found in the namespaces you can read."
+            />
+          </>
+        )}
+
+        <SectionTable
+          title="Image catalogs"
+          columns={[
+            { header: 'Catalog', width: '22%', cell: (c: CatalogRow) => <>{c.name}<Sub>{c.kind}</Sub></> },
+            { header: 'Scope', width: '14%', cell: (c) => (c.kind === 'ClusterImageCatalog' ? 'Cluster-wide' : `Namespace ${c.namespace}`) },
+            {
+              header: 'Images',
+              width: '40%',
+              cell: (c) =>
+                c.images.length === 0 ? (
+                  <span className="text-theme-text-tertiary">None</span>
+                ) : (
+                  <div className="space-y-0.5">
+                    {c.images.map((i) => (
+                      <div key={i.major} className="flex gap-2">
+                        <span className="w-6 shrink-0 font-mono text-theme-text-tertiary">{i.major}</span>
+                        <Mono>{i.image}</Mono>
+                      </div>
+                    ))}
+                  </div>
+                ),
+            },
+            {
+              header: 'Used by',
+              width: '24%',
+              cell: (c) =>
+                c.users.length === 0 ? (
+                  <span className="text-theme-text-tertiary">No visible cluster</span>
+                ) : (
+                  c.users.map((u) => `${u.name}${u.major !== undefined ? ` (${u.major})` : ''}`).join(', ')
+                ),
+            },
+          ]}
+          rows={catalogs}
+          rowKey={(c) => c.key}
+          rowResource={(c) => cnpgResource(c.kind === 'ImageCatalog' ? 'imagecatalogs' : 'clusterimagecatalogs', c.namespace, c.name)}
+          onInspect={onInspect}
+          inspected={inspected}
+          empty={coverageEmpty(worstCoverage(data.coverage.imageCatalogs, data.coverage.clusterImageCatalogs), 'image catalogs')}
+          footer={
+            <>
+              Used-by lists only clusters you can see; the catalog detail asks the server for every user.
+              {direct.length > 0 && <> Not using a catalog (direct <span className="font-mono">imageName</span>): {direct.map((r) => r.name).join(', ')}.</>}
+            </>
+          }
+        />
+
+        {op && op.config.length > 0 && (
+          <section>
+            <h2 className="mb-2 text-sm font-semibold text-theme-text-primary">Operator configuration</h2>
+            <div className="space-y-3">
+              {op.config.map((c) => (
+                <ConfigBlock key={`${c.kind}/${c.namespace}/${c.name}`} config={c} onInspect={onInspect} />
+              ))}
+            </div>
+          </section>
+        )}
+      </ScreenBody>
+    </div>
+  )
+}
+
+function ConfigBlock({ config, onInspect }: { config: CNPGOperatorConfig; onInspect: CNPGScreenProps['onInspect'] }) {
+  const open = () => onInspect({ kind: config.kind === 'ConfigMap' ? 'configmaps' : 'secrets', group: '', namespace: config.namespace, name: config.name })
+  const title = (
+    <div className="flex flex-wrap items-baseline gap-x-2 border-b border-theme-border px-4 py-2.5">
+      <span className="text-xs text-theme-text-tertiary">{config.kind}</span>
+      <button type="button" onClick={open} className="font-mono text-sm text-accent-text hover:underline">{config.name}</button>
+      <span className="text-xs text-theme-text-tertiary">
+        {config.namespace} · {config.purpose === 'monitoring' ? 'monitoring queries' : 'operator settings'}
+      </span>
+    </div>
+  )
+  let body
+  if (config.kind === 'Secret') {
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-secondary">Referenced by the operator. Secret contents are not shown here.</div>
+  } else if (config.exists === false) {
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-secondary">Referenced but does not exist; the operator runs with its defaults.</div>
+  } else if (!config.readable) {
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-tertiary">{config.reason ?? 'Not readable with your access.'}</div>
+  } else {
+    const entries = Object.entries(config.data ?? {})
+    body =
+      entries.length === 0 ? (
+        <div className="px-4 py-2.5 text-sm text-theme-text-tertiary">No keys set.</div>
+      ) : (
+        <dl className="grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)] gap-x-4 gap-y-1.5 px-4 py-2.5 text-sm">
+          {entries.map(([k, v]) => (
+            <div key={k} className="contents">
+              <dt className="min-w-0 font-mono text-theme-text-secondary"><Tooltip content={k} wrapperClassName="block min-w-0"><span className="block truncate">{k}</span></Tooltip></dt>
+              <dd className="break-all font-mono text-theme-text-primary">{v.length > 400 ? `${v.slice(0, 400)}…` : v}</dd>
+            </div>
+          ))}
+        </dl>
+      )
+  }
+  return (
+    <div className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+      {title}
+      {body}
+    </div>
+  )
+}