@skyhook-io/k8s-ui 1.16.2 → 1.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -71,7 +71,7 @@
     "@monaco-editor/react": "^4.7.0",
     "html-to-image": "^1.11.0",
     "monaco-yaml": "5.5.1",
-    "react-virtuoso": "^4.18.13",
+    "react-virtuoso": "^4.18.16",
     "shiki": "^4.4.2"
   },
   "peerDependencies": {
@@ -105,7 +105,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^6.0.2",
-    "vitest": "^5.0.2",
+    "vitest": "^5.0.3",
     "yaml": "^2.9.0"
   }
 }

package/src/components/cnpg/CNPGBackupSummary.tsx

@@ -0,0 +1,223 @@
+import { formatDuration } from '../resources/resource-utils'
+import {
+  CNPG_BARMAN_OBJECTSTORE_GROUP,
+  CNPG_GROUP,
+  getCNPGBackupStatus,
+  getCNPGScheduledBackupNextSchedule,
+  getCNPGScheduledBackupStatus,
+} from '../resources/resource-utils-cnpg'
+import type { CNPGWorkspaceResponse } from './workspace'
+import { FactGrid, FactRow, RefLink, SummaryHeading, toneTextClass, type CNPGNavigate } from './primitives'
+import { ClusterLink, NotReported, Note, ObjectProblems, PhaseBadge, SummaryShell, TimeAgo } from './CNPGSharedSummary'
+import {
+  backupDestination,
+  backupsForScheduledBackup,
+  clustersIn,
+  isBackupFromSchedule,
+  refOf,
+  relationUnavailable,
+  scheduledBackupOf,
+  workspaceList,
+} from './relations'
+
+interface SummaryProps {
+  resource: any
+  workspace: CNPGWorkspaceResponse | null
+  onNavigate?: CNPGNavigate
+}
+
+const RECENT_RUNS = 5
+
+function methodText(resource: any): string | null {
+  const m = resource?.status?.method || resource?.spec?.method
+  if (!m) return null
+  switch (m) {
+    case 'plugin':
+      return resource?.spec?.pluginConfiguration?.name ? `Plugin · ${resource.spec.pluginConfiguration.name}` : 'Plugin'
+    case 'barmanObjectStore':
+      return 'Barman object store (in-tree)'
+    case 'volumeSnapshot':
+      return 'Volume snapshot'
+    default:
+      return m
+  }
+}
+
+function Timing({ resource }: { resource: any }) {
+  const started = resource?.status?.startedAt
+  const stopped = resource?.status?.stoppedAt
+  const startMs = started ? Date.parse(started) : NaN
+  const stopMs = stopped ? Date.parse(stopped) : NaN
+  const tookMs = Number.isFinite(startMs) && Number.isFinite(stopMs) && stopMs >= startMs ? stopMs - startMs : null
+  return (
+    <>
+      <FactRow label="Started">
+        <TimeAgo at={started} />
+      </FactRow>
+      <FactRow label="Stopped">
+        {stopped ? (
+          <span>
+            <TimeAgo at={stopped} />
+            {tookMs !== null && <span className="text-theme-text-secondary"> · took {formatDuration(tookMs, true)}</span>}
+          </span>
+        ) : Number.isFinite(startMs) ? (
+          <span className="text-theme-text-secondary">Not stopped · running for {formatDuration(Date.now() - startMs, true)}</span>
+        ) : (
+          <NotReported />
+        )}
+      </FactRow>
+    </>
+  )
+}
+
+export function CNPGBackupSummary({ resource, workspace, onNavigate }: SummaryProps) {
+  const ns = resource?.metadata?.namespace ?? ''
+  const status = getCNPGBackupStatus(resource)
+  const pod = resource?.status?.instanceID?.podName
+  const error = resource?.status?.error
+  const trigger = scheduledBackupOf(resource)
+  const liveSchedule = trigger
+    ? workspaceList(workspace, 'scheduledBackups').find((s) => s?.metadata?.namespace === ns && s?.metadata?.name === trigger)
+    : undefined
+  const scheduleReplaced = !!liveSchedule && !isBackupFromSchedule(resource, liveSchedule)
+  const dest = backupDestination(resource, clustersIn(workspace))
+  const method = methodText(resource)
+
+  return (
+    <SummaryShell>
+      <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Backup')} onNavigate={onNavigate} />
+
+      <SummaryHeading>Outcome</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Phase">
+          <PhaseBadge status={status} />
+        </FactRow>
+        <Timing resource={resource} />
+        <FactRow label="Taken on">
+          {pod ? <RefLink refTo={{ kind: 'Pod', group: '', namespace: ns, name: pod }} onNavigate={onNavigate} mono /> : <NotReported />}
+        </FactRow>
+        <FactRow label="Backup ID">
+          {resource?.status?.backupId ? <span className="font-mono">{resource.status.backupId}</span> : <NotReported />}
+        </FactRow>
+        <FactRow label="Target">
+          {resource?.spec?.target ? resource.spec.target : <span className="text-theme-text-secondary">Not set · the Cluster's backup target applies</span>}
+        </FactRow>
+        {error && (
+          <FactRow label="Error">
+            <span className={toneTextClass('unhealthy')}>{error}</span>
+          </FactRow>
+        )}
+      </FactGrid>
+
+      <SummaryHeading>Relationships</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Cluster">
+          <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
+        </FactRow>
+        <FactRow label="Trigger">
+          {trigger ? (
+            <span>
+              ScheduledBackup{' '}
+              {scheduleReplaced ? (
+                <>
+                  <span className="font-mono">{trigger}</span>
+                  <span className="text-theme-text-tertiary"> · an earlier schedule of that name; the current one is a different object</span>
+                </>
+              ) : (
+                <RefLink refTo={{ kind: 'ScheduledBackup', group: CNPG_GROUP, namespace: ns, name: trigger }} onNavigate={onNavigate} mono />
+              )}
+            </span>
+          ) : (
+            'On demand'
+          )}
+        </FactRow>
+        <FactRow label="Destination">
+          {dest.type === 'objectStore' ? (
+            <span>
+              ObjectStore{' '}
+              <RefLink refTo={{ kind: 'ObjectStore', group: CNPG_BARMAN_OBJECTSTORE_GROUP, namespace: ns, name: dest.name }} onNavigate={onNavigate} mono />
+              {dest.inferred && <span className="text-theme-text-tertiary"> · from the Cluster's current configuration</span>}
+            </span>
+          ) : dest.type === 'path' ? (
+            <span className="font-mono">{dest.path}</span>
+          ) : dest.type === 'volumeSnapshot' ? (
+            'Volume snapshot'
+          ) : (
+            <NotReported />
+          )}
+        </FactRow>
+        <FactRow label="Method">{method ?? <NotReported />}</FactRow>
+      </FactGrid>
+    </SummaryShell>
+  )
+}
+
+export function CNPGScheduledBackupSummary({ resource, workspace, onNavigate }: SummaryProps) {
+  const ns = resource?.metadata?.namespace ?? ''
+  const cron = resource?.spec?.schedule
+  const next = getCNPGScheduledBackupNextSchedule(resource)
+  const runsUnavailable = relationUnavailable(workspace, 'backups', ns, 'Backups')
+  const runs = runsUnavailable ? [] : backupsForScheduledBackup(resource, workspaceList(workspace, 'backups'))
+  const shown = runs.slice(0, RECENT_RUNS)
+
+  return (
+    <SummaryShell>
+      <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'ScheduledBackup')} onNavigate={onNavigate} />
+
+      <SummaryHeading>Schedule</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Status">
+          <PhaseBadge status={getCNPGScheduledBackupStatus(resource)} />
+        </FactRow>
+        <FactRow label="Cluster">
+          <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
+        </FactRow>
+        <FactRow label="Schedule">
+          {cron ? (
+            <span>
+              <span className="font-mono">{cron}</span>
+              <span className="text-theme-text-tertiary"> · six fields, seconds first</span>
+            </span>
+          ) : (
+            <NotReported text="Not set" />
+          )}
+        </FactRow>
+        <FactRow label="Last scheduled">
+          <TimeAgo at={resource?.status?.lastScheduleTime} missing="Never" />
+        </FactRow>
+        <FactRow label="Next scheduled">{next === '-' ? <NotReported /> : next}</FactRow>
+        <FactRow label="Method">{methodText(resource) ?? 'Barman object store (in-tree) · default'}</FactRow>
+      </FactGrid>
+
+      <SummaryHeading hint={runs.length > shown.length ? `${shown.length} of ${runs.length}` : undefined}>Recent runs</SummaryHeading>
+      {runsUnavailable ? (
+        <div className="text-sm">
+          <NotReported text={runsUnavailable} />
+        </div>
+      ) : shown.length === 0 ? (
+        <div className="text-sm text-theme-text-secondary">No Backups from this schedule are visible</div>
+      ) : (
+        <FactGrid>
+          {shown.map((b) => (
+            <FactRow
+              key={b.metadata?.name}
+              label={<RefLink refTo={{ kind: 'Backup', group: CNPG_GROUP, namespace: ns, name: b.metadata?.name }} onNavigate={onNavigate} mono />}
+            >
+              <span className="inline-flex flex-wrap items-center gap-2">
+                <PhaseBadge status={getCNPGBackupStatus(b)} />
+                {b.status?.startedAt ? (
+                  <span className="text-theme-text-secondary">
+                    started <TimeAgo at={b.status.startedAt} />
+                  </span>
+                ) : (
+                  <NotReported text="Not started" />
+                )}
+              </span>
+            </FactRow>
+          ))}
+        </FactGrid>
+      )}
+      {!runsUnavailable && (workspace?.backupsOmitted ?? 0) > 0 && <Note>Backups older than 7 days are not listed.</Note>}
+    </SummaryShell>
+  )
+}

package/src/components/cnpg/CNPGClusterSummary.tsx

@@ -0,0 +1,222 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Badge } from '../ui/Badge'
+import { Tooltip } from '../ui/Tooltip'
+import { CNPG_BARMAN_OBJECTSTORE_GROUP, CNPG_GROUP } from '../resources/resource-utils-cnpg'
+import type { CNPGFleetRow, CNPGInstance } from './workspace'
+import {
+  FactGrid,
+  FactRow,
+  FactSource,
+  FactValue,
+  ProblemCallout,
+  RefLink,
+  SummaryHeading,
+  ToneDot,
+  toneTextClass,
+  CNPG_PRIMARY_BUTTON,
+  CNPG_SECONDARY_BUTTON,
+  type CNPGNavigate,
+} from './primitives'
+
+export interface CNPGSummaryAction {
+  label: string
+  onClick: () => void
+  primary?: boolean
+}
+
+function InstancePill({ pod, namespace, onNavigate }: { pod: CNPGInstance; namespace: string; onNavigate?: CNPGNavigate }) {
+  const tone = pod.ready === true ? 'healthy' : pod.ready === false ? 'unhealthy' : 'unknown'
+  const role = pod.role === 'primary' ? 'Primary' : pod.role === 'replica' ? 'Replica' : 'Role unknown'
+  const readiness = pod.ready === true ? 'Ready' : pod.ready === false ? 'Not ready' : 'Readiness unknown'
+  return (
+    <Tooltip content={`${pod.name} · ${role} · ${readiness}${pod.node ? ` · ${pod.node}` : ''}`} position="top">
+      <button
+        type="button"
+        onClick={() => onNavigate?.({ kind: 'Pod', group: '', namespace, name: pod.name })}
+        className={clsx(
+          'inline-flex items-center gap-1.5 rounded-md border border-theme-border bg-theme-base px-2 py-0.5 text-xs',
+          onNavigate ? 'hover:border-accent' : 'cursor-default',
+        )}
+      >
+        <ToneDot tone={tone} />
+        <span className="font-mono">{pod.name}</span>
+        <span className="text-theme-text-tertiary">{pod.role === 'primary' ? 'P' : pod.role === 'replica' ? 'R' : '?'}</span>
+      </button>
+    </Tooltip>
+  )
+}
+
+export function CNPGClusterSummary({
+  row,
+  onNavigate,
+  actions,
+  problemsLink,
+  extra,
+}: {
+  row: CNPGFleetRow
+  onNavigate?: CNPGNavigate
+  actions?: CNPGSummaryAction[]
+  /** Link to the complete list of this cluster's findings, shown when more than one exists. */
+  problemsLink?: (count: number) => ReactNode
+  extra?: ReactNode
+}) {
+  const top = row.problems[0]
+  const rest = row.problems.length - 1
+  const p = row.protection
+  const ns = row.namespace
+  const radarFindings = row.problems.some((x) => x.severity !== 'posture')
+
+  return (
+    <div className="px-4 py-4">
+      {top && (
+        <ProblemCallout
+          problem={top}
+          onNavigate={onNavigate}
+          more={rest > 0 ? problemsLink?.(row.problems.length) ?? <span>+{rest} more</span> : null}
+        />
+      )}
+
+      {actions && actions.length > 0 && (
+        <div className="mb-4 flex flex-wrap gap-2">
+          {actions.map((a) => (
+            <button key={a.label} type="button" onClick={a.onClick} className={a.primary ? CNPG_PRIMARY_BUTTON : CNPG_SECONDARY_BUTTON}>
+              {a.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <SummaryHeading>State</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Controller phase">
+          <span className="inline-flex flex-wrap items-center gap-2">
+            <Badge severity={row.controllerStatus.level === 'healthy' ? 'success' : row.controllerStatus.level === 'unhealthy' ? 'error' : row.controllerStatus.level === 'degraded' || row.controllerStatus.level === 'alert' ? 'warning' : 'neutral'} size="sm">
+              {row.controllerStatus.text}
+            </Badge>
+            <span className="text-xs text-theme-text-tertiary">
+              {radarFindings ? 'reported by CNPG · Radar findings above are separate' : 'reported by CNPG'}
+            </span>
+          </span>
+        </FactRow>
+        <FactRow label="Instances">
+          <div>
+            <span>
+              {row.instances.ready ?? '–'}/{row.instances.desired ?? '–'} ready
+              {row.cluster?.status?.currentPrimary && (
+                <span className="text-theme-text-secondary"> · primary <span className="font-mono">{row.cluster.status.currentPrimary}</span></span>
+              )}
+            </span>
+            {row.pods.length > 0 && (
+              <div className="mt-1.5 flex flex-wrap gap-1.5">
+                {row.pods.map((pod) => (
+                  <InstancePill key={pod.name} pod={pod} namespace={ns} onNavigate={onNavigate} />
+                ))}
+              </div>
+            )}
+          </div>
+        </FactRow>
+        <FactRow label="Replication">
+          <FactValue fact={row.replication} />
+          <FactSource fact={row.replication} />
+        </FactRow>
+        {row.replicaCluster && (
+          <FactRow label="Replica cluster">
+            Follows {row.replicaCluster.source ? <span className="font-mono">{row.replicaCluster.source}</span> : 'an external primary'}
+          </FactRow>
+        )}
+        <FactRow label="PostgreSQL">
+          {row.pgVersion ?? 'Unknown'}
+          {row.catalog && (
+            <span className="text-theme-text-secondary">
+              {' · '}
+              <RefLink
+                refTo={{ kind: row.catalog.kind, group: CNPG_GROUP, namespace: row.catalog.kind === 'ClusterImageCatalog' ? '' : ns, name: row.catalog.name }}
+                onNavigate={onNavigate}
+              >
+                {row.catalog.name}
+              </RefLink>
+            </span>
+          )}
+        </FactRow>
+        <FactRow label="Declarations">
+          <FactValue fact={row.declarations.summary} />
+        </FactRow>
+        <FactRow label="Poolers">
+          {row.poolers.length === 0 ? (
+            <span className={row.poolersKnown ? 'text-theme-text-secondary' : 'text-theme-text-tertiary'}>
+              {row.poolersKnown ? 'None' : 'No access to Poolers'}
+            </span>
+          ) : (
+            <span className="flex flex-wrap gap-x-3">
+              {row.poolers.map((name) => (
+                <RefLink key={name} refTo={{ kind: 'Pooler', group: CNPG_GROUP, namespace: ns, name }} onNavigate={onNavigate} mono />
+              ))}
+            </span>
+          )}
+        </FactRow>
+        {row.gitops && (
+          <FactRow label="Declared in">
+            {row.gitops.tool === 'argocd' ? 'Argo CD' : 'Flux'} <span className="font-mono">{row.gitops.name}</span>
+          </FactRow>
+        )}
+      </FactGrid>
+
+      <SummaryHeading>Protection</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Schedule">
+          <FactValue fact={p.schedule} />
+          {p.schedule.names.length > 0 && (
+            <div className="mt-0.5 flex flex-wrap gap-x-3 text-xs">
+              {p.schedule.names.map((name) => (
+                <RefLink key={name} refTo={{ kind: 'ScheduledBackup', group: CNPG_GROUP, namespace: ns, name }} onNavigate={onNavigate} mono />
+              ))}
+            </div>
+          )}
+        </FactRow>
+        <FactRow label="Destination">
+          {p.destination.objectStore ? (
+            <RefLink refTo={{ kind: 'ObjectStore', group: CNPG_BARMAN_OBJECTSTORE_GROUP, namespace: ns, name: p.destination.objectStore }} onNavigate={onNavigate}>
+              ObjectStore {p.destination.objectStore}
+            </RefLink>
+          ) : (
+            <FactValue fact={p.destination} />
+          )}
+        </FactRow>
+        <FactRow label="Last successful backup">
+          <FactValue fact={p.lastSuccessfulBackup} />
+          <FactSource fact={p.lastSuccessfulBackup} />
+        </FactRow>
+        <FactRow label="WAL archiving">
+          <FactValue fact={p.walArchiving} />
+        </FactRow>
+        <FactRow label="Recovery window">
+          {p.recoveryWindow.from ? (
+            <div>
+              <span className={p.recoveryWindow.tone === 'degraded' ? toneTextClass('degraded') : undefined}>
+                from {new Date(p.recoveryWindow.from).toUTCString().replace(' GMT', ' UTC')} {p.recoveryWindow.tone === 'degraded' ? '· not advancing' : 'to the newest archived WAL'}
+              </span>
+              <FactSource fact={p.recoveryWindow} />
+              {p.recoveryWindow.tone === 'degraded' && (
+                <div className="text-[11.5px] text-theme-text-tertiary">WAL archiving is failing, so nothing written since the last archived WAL can be recovered.</div>
+              )}
+            </div>
+          ) : (
+            <FactValue fact={p.recoveryWindow} />
+          )}
+        </FactRow>
+        <FactRow label="Restore validation">
+          {p.restoreValidation.restoredInto ? (
+            <RefLink refTo={{ kind: 'Cluster', group: CNPG_GROUP, ...p.restoreValidation.restoredInto }} onNavigate={onNavigate}>
+              {p.restoreValidation.text}
+            </RefLink>
+          ) : (
+            <FactValue fact={p.restoreValidation} />
+          )}
+          <FactSource fact={p.restoreValidation} />
+        </FactRow>
+      </FactGrid>
+      {extra}
+    </div>
+  )
+}