@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/CNPGSummaryHost.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { renderCNPGSummary } from './CNPGSummaryHost'
+
+const ctx = (apiVersion: string, kind: string) => ({
+  apiKind: kind,
+  namespace: 'pg',
+  name: 'x',
+  resource: { apiVersion, kind, metadata: { namespace: 'pg', name: 'x' } },
+  context: 'drawer' as const,
+})
+
+describe('renderCNPGSummary', () => {
+  it('returns null for resources without a CNPG summary, so they keep the default Overview', () => {
+    expect(renderCNPGSummary(ctx('v1', 'Pod'))).toBeNull()
+    expect(renderCNPGSummary(ctx('apps/v1', 'Deployment'))).toBeNull()
+    expect(renderCNPGSummary(ctx('velero.io/v1', 'Backup'))).toBeNull()
+    expect(renderCNPGSummary(ctx('cluster.x-k8s.io/v1beta1', 'Cluster'))).toBeNull()
+  })
+
+  it('returns a summary for a CNPG Cluster', () => {
+    expect(renderCNPGSummary(ctx('postgresql.cnpg.io/v1', 'Cluster'))).not.toBeNull()
+  })
+})

package/src/components/cnpg/CNPGSummaryHost.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'react-router-dom'
 import {
   CNPG_BARMAN_OBJECTSTORE_GROUP,
+  OpenIssueContext,
   CNPG_GROUP,
   CNPGBackupSummary,
   CNPGClusterSummary,
@@ -12,17 +13,42 @@ import {
   CNPGPublicationSummary,
   CNPGScheduledBackupSummary,
   CNPGSubscriptionSummary,
+  CNPGDatabaseRoleSummary,
+  relationUnavailable,
+  cnpgLogicalPaths,
+  cnpgLogicalSlotFact,
+  cnpgSubscriptionHostNamespace,
+  FactRow,
+  FactSource,
+  FactValue,
   PaneLoader,
   isApiGroup,
   refToSelectedResource,
-  type CNPGNavigate,
-  type CNPGRef,
+  type NavigateToRef,
+  type ResourceRef,
+  type CNPGLogicalPath,
   type CNPGWorkspaceResponse,
   type NavigateToResource,
 } from '@skyhook-io/k8s-ui'
 import { useCNPGFleet } from './useCNPGSidebarWorkspace'
-import { cnpgClusterFullPath, currentPageLabel } from './paths'
+import { useCNPGRuntime, useCNPGScheduleCapabilities, useCNPGWorkspace, type CNPGRuntimeResponse } from '../../api/cnpg'
+import { cnpgPublisherSlotsFrom, useCNPGPublisherSlots } from './logicalSlots'
+import { cnpgBaseBackupFacts, describeCNPGBaseBackup } from './baseBackup'
+import { useCNPGPoolerLive } from './useCNPGPoolerLive'
+import { useCNPGClusterAssessment } from './useCNPGClusterAssessment'
+import { CNPGMaintenanceBanner } from './actions/CNPGMaintenanceBanner'
+import { CNPG_CONNECT_PARAM, cnpgConnectParamValue } from './actions/CNPGConnectButton'
+import { CNPGOperatorBanner } from './CNPGOperatorBanner'
+import { cnpgClusterFullPath, cnpgDimensionPath, cnpgDimensionTabLabel, cnpgWithinDetail } from './paths'
+import { cnpgScreenPath } from './routes'
+import { currentPageLabel, issuesPathForSubject } from '../../utils/page-links'
+import { CNPGRestoreProgress } from './recovery/CNPGRestoreProgress'
+import { restoreBackupDeclared } from './recovery/restoreModel'
 import { useConnection } from '../../context/ConnectionContext'
+import { useNavCustomization } from '../../context/NavCustomization'
+import { RefreshFailedNotice } from '../workspace/layout'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { CNPGOperatorConditions } from './CNPGOperatorConditions'
 
 interface SummaryContext {
   apiKind: string
@@ -34,70 +60,189 @@ interface SummaryContext {
   onNavigate?: NavigateToResource
 }
 
-function ClusterSummaryHost({ namespace, name, context, onNavigate }: SummaryContext) {
-  const navigate = useNavigate()
+function BaseBackupFact({ runtime }: { runtime: CNPGRuntimeResponse | undefined }) {
+  const bb = cnpgBaseBackupFacts(runtime)
+  if (!bb) return null
+  return (
+    <FactRow label="Standby cloning">
+      {bb.rows.length > 1 ? (
+        <ul className="space-y-0.5">
+          {bb.rows.map((r) => (
+            <li key={r.applicationName}>{describeCNPGBaseBackup(r)}</li>
+          ))}
+        </ul>
+      ) : (
+        <FactValue fact={bb.fact} />
+      )}
+      <FactSource fact={bb.fact} />
+    </FactRow>
+  )
+}
+
+function ClusterSummaryHost({ namespace, name, resource, context, onNavigate }: SummaryContext) {
+  const navigate = useCNPGNavigate()
+  const location = useLocation()
   const { connection } = useConnection()
   // The workspace is read for the object's own namespace: an explicitly opened
   // Cluster shows its facts whatever the namespace filter is.
-  const { query, fleet } = useCNPGFleet([namespace])
-  const row = fleet?.rows.find((r) => r.namespace === namespace && r.name === name)
+  const { query, runtime, ha, row, dimensions } = useCNPGClusterAssessment(namespace, name)
+  const operatorConditions = context === 'expanded' ? <CNPGOperatorConditions conditions={resource.status?.conditions ?? []} /> : null
   if (!row) {
-    if (query.isLoading) return <PaneLoader label="Loading summary…" className="h-40" />
+    if (query.isLoading) return <><PaneLoader label="Loading summary…" className="h-40" />{operatorConditions}</>
     return (
-      <div className="px-4 py-4 text-sm text-theme-text-secondary">
-        {query.error instanceof Error
-          ? `The CloudNativePG summary could not be loaded: ${query.error.message}`
-          : 'This Cluster is not in the CloudNativePG workspace for your identity.'}{' '}
-        Spec & status still shows everything the object reports.
-      </div>
+      <>
+        <div className="px-4 py-4 text-sm text-theme-text-secondary">
+          {query.error instanceof Error
+            ? `The CloudNativePG summary could not be loaded: ${query.error.message}`
+            : 'The CloudNativePG workspace summary could not be read.'}{' '}
+          {context === 'expanded' ? 'Configuration shows the declared settings; Operator conditions are below. YAML holds the full object.' : 'Spec & status still shows the object’s fields.'}
+        </div>
+        {operatorConditions}
+      </>
     )
   }
-  const go = onNavigate ? (ref: CNPGRef) => onNavigate(refToSelectedResource(ref)) : undefined
+  const goRef = onNavigate ? (ref: ResourceRef) => onNavigate(refToSelectedResource(ref)) : undefined
+  // On the Cluster's own page this is a tab change, applied like a tab click;
+  // anywhere else (the drawer, another page) it is a push to the full page
+  // with a return label.
+  const go = (path: string) => {
+    const inPlace = context === 'expanded' ? cnpgWithinDetail(location.pathname, location.search, path) : null
+    if (inPlace) navigate(inPlace, { replace: true, state: location.state })
+    else navigate(path, { state: { returnLabel: currentPageLabel(), returnCtx: connection.context } })
+  }
   return (
-    <CNPGClusterSummary
-      row={row}
-      onNavigate={go}
-      actions={
-        context === 'drawer'
-          ? [
-              {
-                label: 'Open cluster',
-                primary: true,
-                onClick: () =>
-                  navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined), {
-                    state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
-                  }),
-              },
-              {
-                label: 'Logs',
-                onClick: () =>
-                  navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined, 'logs'), {
-                    state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
-                  }),
-              },
-              {
-                label: 'Protection',
-                onClick: () =>
-                  navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined, 'protection'), {
-                    state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
-                  }),
-              },
-            ]
-          : undefined
-      }
-    />
+    <div>
+      <CNPGClusterSummary
+        row={row}
+        framed={context === 'expanded'}
+        onNavigate={goRef}
+        lead={
+          <>
+            <RefreshFailedNotice queries={[runtime, ha]} />
+            {context === 'drawer' && <CNPGOperatorBanner namespaces={[namespace]} />}
+            <CNPGMaintenanceBanner namespace={namespace} name={name} maintenance={ha.data?.maintenance} />
+            {row.cluster?.spec?.bootstrap?.recovery && (
+              <CNPGRestoreProgress
+                namespace={namespace}
+                name={name}
+                nextSteps={{
+                  backup: row.cluster ? restoreBackupDeclared(row.cluster) : undefined,
+                  onOpen: (step) => {
+                    if (step === 'connect') {
+                      const p = new URLSearchParams(location.search)
+                      p.set(CNPG_CONNECT_PARAM, cnpgConnectParamValue(namespace, name, context === 'drawer' ? 'drawer' : 'page'))
+                      navigate({ search: p.toString() }, { replace: true, state: location.state })
+                      return
+                    }
+                    const protection = cnpgClusterFullPath(namespace, name, connection.context || undefined, 'backups')
+                    go(step === 'validate' ? `${protection}&validate=1` : step === 'backup' ? `${protection}&protectionSetup=1` : protection)
+                  },
+                }}
+              />
+            )}
+          </>
+        }
+        onSelectDimension={(id) => go(cnpgDimensionPath(namespace, name, connection.context || undefined, id))}
+        dimensionLinkLabel={cnpgDimensionTabLabel}
+        onOpenOperator={() => navigate(cnpgScreenPath('operator'), { state: { returnLabel: currentPageLabel(), returnCtx: connection.context } })}
+        initialProblemsExpanded={context === 'expanded' && new URLSearchParams(location.search).get('problems') === 'all'}
+        dimensions={dimensions}
+        operationalFacts={<BaseBackupFact runtime={runtime.data} />}
+        actions={
+          context === 'drawer'
+            ? [
+                {
+                  label: 'Open cluster',
+                  primary: true,
+                  onClick: () =>
+                    navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined), {
+                      state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                    }),
+                },
+                {
+                  label: 'Logs',
+                  onClick: () =>
+                    navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined, 'logs'), {
+                      state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                    }),
+                },
+                {
+                  label: 'Backups',
+                  onClick: () =>
+                    navigate(cnpgClusterFullPath(namespace, name, connection.context || undefined, 'backups'), {
+                      state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                    }),
+                },
+              ]
+            : undefined
+        }
+      />
+      {operatorConditions}
+    </div>
   )
 }
 
-type ObjectSummary = (props: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: CNPGNavigate }) => ReactNode
+type ObjectSummary = (props: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: NavigateToRef }) => ReactNode
+
+function ScheduledBackupSummaryHost(props: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: NavigateToRef }) {
+  const ns = props.resource?.metadata?.namespace ?? ''
+  const name = props.resource?.metadata?.name ?? ''
+  const caps = useCNPGScheduleCapabilities(ns, name)
+  return <CNPGScheduledBackupSummary {...props} schedulePreview={caps.data?.facts.preview} />
+}
+
+// The publisher may live in another namespace than the subscriber: that
+// namespace's Clusters, Publications and Poolers are read too.
+function useLogicalWorkspace(ws: CNPGWorkspaceResponse | null, subscriptions: any[]) {
+  const hostNs = [...new Set(subscriptions.map((s) => cnpgSubscriptionHostNamespace(s, ws?.objects.clusters ?? [])).filter((n): n is string => !!n))]
+  const extra = ws?.namespaces === null ? [] : hostNs.filter((n) => !(ws?.namespaces ?? []).includes(n))
+  const other = useCNPGWorkspace(extra, { enabled: !!ws && extra.length > 0 })
+  const merged = (key: 'clusters' | 'publications' | 'poolers') => [...(ws?.objects[key] ?? []), ...(other.data?.installed ? other.data.objects[key] ?? [] : [])]
+  const publicationsUnavailable = (ns: string) =>
+    ws?.namespaces === null || ws?.namespaces?.includes(ns)
+      ? relationUnavailable(ws, 'publications', ns, 'Publications')
+      : relationUnavailable(other.data?.installed ? other.data : null, 'publications', ns, 'Publications')
+  return { clusters: merged('clusters'), publications: merged('publications'), poolers: merged('poolers'), publicationsUnavailable }
+}
+
+function LogicalPathSlot({ path, children }: { path: CNPGLogicalPath; children: (slot: ReturnType<typeof cnpgLogicalSlotFact>, notice: ReactNode) => ReactNode }) {
+  const { observed, query } = useCNPGPublisherSlots(path.publisher)
+  return <>{children(cnpgLogicalSlotFact(path, observed), <RefreshFailedNotice queries={[query]} />)}</>
+}
+
+function SubscriptionSummaryHost(props: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: NavigateToRef }) {
+  const lw = useLogicalWorkspace(props.workspace, [props.resource])
+  const path = props.workspace ? cnpgLogicalPaths([props.resource], lw.clusters, lw.publications, lw.poolers, lw.publicationsUnavailable)[0] : undefined
+  if (!path) return <CNPGSubscriptionSummary {...props} />
+  return <LogicalPathSlot path={path}>{(slot, notice) => <CNPGSubscriptionSummary {...props} logicalPath={{ path, slot, notice }} />}</LogicalPathSlot>
+}
+
+function PublicationSummaryHost(props: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: NavigateToRef }) {
+  // Subscribers are the Subscriptions in view; the publisher's own runtime
+  // answers for every slot.
+  const pubCluster = props.resource?.spec?.cluster?.name
+  const ns = props.resource?.metadata?.namespace ?? ''
+  const runtime = useCNPGRuntime(ns, pubCluster ?? '', !!pubCluster)
+  const all = useCNPGWorkspace([], { enabled: !!props.workspace })
+  const ws = all.data?.installed ? all.data : props.workspace
+  const paths = ws
+    ? cnpgLogicalPaths(ws.objects.subscriptions ?? [], ws.objects.clusters ?? [], ws.objects.publications ?? [], ws.objects.poolers ?? []).filter(
+        (p) => p.publication.object?.namespace === ns && p.publication.object?.name === props.resource?.metadata?.name,
+      )
+    : []
+  const observed = cnpgPublisherSlotsFrom(runtime.data, runtime.error, runtime.isRefetchError)
+  const notice = <RefreshFailedNotice queries={[runtime]} />
+  return <CNPGPublicationSummary {...props} subscribers={paths.map((path) => ({ path, slot: cnpgLogicalSlotFact(path, observed), notice }))} />
+}
 
 const OBJECT_SUMMARIES: Record<string, ObjectSummary> = {
   Backup: CNPGBackupSummary,
-  ScheduledBackup: CNPGScheduledBackupSummary,
+  ScheduledBackup: ScheduledBackupSummaryHost,
   Pooler: CNPGPoolerSummary,
   Database: CNPGDatabaseSummary,
-  Publication: CNPGPublicationSummary,
-  Subscription: CNPGSubscriptionSummary,
+  Publication: PublicationSummaryHost,
+  Subscription: SubscriptionSummaryHost,
+  DatabaseRole: CNPGDatabaseRoleSummary,
   ImageCatalog: CNPGImageCatalogSummary,
   ClusterImageCatalog: CNPGImageCatalogSummary,
 }
@@ -109,10 +254,19 @@ function ObjectSummaryHost({ ctx, Summary }: { ctx: SummaryContext; Summary: Obj
   const { query } = useCNPGFleet(clusterScoped ? [] : [ctx.namespace])
   if (query.isLoading) return <PaneLoader label="Loading summary…" className="h-40" />
   const workspace = query.data?.installed ? query.data : null
-  const go = ctx.onNavigate ? (ref: CNPGRef) => ctx.onNavigate?.(refToSelectedResource(ref)) : undefined
+  const go = ctx.onNavigate ? (ref: ResourceRef) => ctx.onNavigate?.(refToSelectedResource(ref)) : undefined
   return <Summary resource={ctx.resource} workspace={workspace} onNavigate={go} />
 }
 
+function PoolerSummaryHost({ ctx }: { ctx: SummaryContext }) {
+  const { query } = useCNPGFleet([ctx.namespace])
+  const { live, queries } = useCNPGPoolerLive(ctx.namespace, ctx.name)
+  if (query.isLoading) return <PaneLoader label="Loading summary…" className="h-40" />
+  const workspace = query.data?.installed ? query.data : null
+  const go = ctx.onNavigate ? (ref: ResourceRef) => ctx.onNavigate?.(refToSelectedResource(ref)) : undefined
+  return <CNPGPoolerSummary resource={ctx.resource} workspace={workspace} onNavigate={go} live={live} lead={<RefreshFailedNotice queries={queries} />} />
+}
+
 // The object's own apiVersion decides: Velero also ships a Backup kind.
 function groupOf(ctx: SummaryContext): string | undefined {
   const apiVersion = ctx.resource?.apiVersion
@@ -130,6 +284,7 @@ function renderSummaryFor(ctx: SummaryContext): ReactNode {
   }
   if (group !== CNPG_GROUP) return null
   if (kind === 'Cluster') return <ClusterSummaryHost {...ctx} />
+  if (kind === 'Pooler') return <PoolerSummaryHost ctx={ctx} />
   const Summary = OBJECT_SUMMARIES[kind]
   return Summary ? <ObjectSummaryHost ctx={ctx} Summary={Summary} /> : null
 }
@@ -139,5 +294,24 @@ function renderSummaryFor(ctx: SummaryContext): ReactNode {
  * without one, which keeps the default Overview.
  */
 export function renderCNPGSummary(ctx: SummaryContext): ReactNode {
-  return renderSummaryFor(ctx)
+  const summary = renderSummaryFor(ctx)
+  return summary ? <IssueLinks>{summary}</IssueLinks> : null
+}
+
+// "See in Issues →" on every CNPG problem: the Issues page narrowed to the
+// problem's subject (it has no link to a single issue). Omitted where the host
+// takes Issues over, since its page does not read the subject.
+function IssueLinks({ children }: { children: ReactNode }) {
+  const navigate = useCNPGNavigate()
+  const [searchParams] = useSearchParams()
+  const issuesTakenOver = !!useNavCustomization().fleetTakeoverHref?.('issues')
+  return (
+    <OpenIssueContext.Provider
+      value={issuesTakenOver ? undefined : (p) =>
+        navigate(issuesPathForSubject(p.subject, searchParams.get('namespaces')))
+      }
+    >
+      {children}
+    </OpenIssueContext.Provider>
+  )
 }

package/src/components/cnpg/CNPGTrends.denied.test.tsx

@@ -0,0 +1,33 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../api/cnpg-history', async (orig) => ({
+  ...(await orig<typeof import('../../api/cnpg-history')>()),
+  useCNPGClusterHistory: () => ({ data: { source: 'none', reason: 'Radar is not connected to Prometheus' }, isLoading: false, error: null }),
+}))
+
+const { CNPGTrends } = await import('./CNPGTrends')
+
+const render = (samplingDenied?: string) =>
+  renderToStaticMarkup(
+    <MemoryRouter>
+      <CNPGTrends namespace="db" name="pg" samples={[]} samplingDenied={samplingDenied} />
+    </MemoryRouter>,
+  )
+
+describe('CNPGTrends without Prometheus', () => {
+  it('does not wait for samples that can never arrive when the proxy is denied', () => {
+    const html = render('get pods/proxy in db')
+    expect(html).toContain('History needs Prometheus')
+    expect(html).toContain('In-page samples need get pods/proxy in db too.')
+    expect(html).not.toContain('Collecting samples')
+    expect(html).not.toContain('since this page opened')
+    expect(html).not.toContain('Drag across a chart')
+    expect(html).toContain('History needs Prometheus. Radar is not connected to Prometheus.')
+  })
+  it('samples in the page when the proxy is allowed', () => {
+    const html = render()
+    expect(html).toContain('Collecting samples')
+  })
+})

package/src/components/cnpg/CNPGTrends.missing.test.tsx

@@ -0,0 +1,69 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+const lag = (series: string[], state = 'ok') => ({
+  id: 'replicationLag',
+  title: 'Replay lag per standby',
+  unit: 'seconds',
+  source: 'cnpg_pg_replication_lag',
+  seriesBy: 'pod',
+  state,
+  reason: state === 'empty' ? 'no instance was a standby in this range' : undefined,
+  series: series.map((pod) => ({
+    labels: { pod },
+    dataPoints: [
+      { timestamp: 60, value: 0 },
+      { timestamp: 120, value: 0 },
+    ],
+  })),
+  steps: 2,
+  covered: 2,
+})
+
+let chart = lag(['pg-2'])
+vi.mock('../../api/cnpg-history', async (orig) => ({
+  ...(await orig<typeof import('../../api/cnpg-history')>()),
+  useCNPGClusterHistory: () => ({
+    data: {
+      source: 'prometheus',
+      state: 'ok',
+      range: '1h',
+      start: '1970-01-01T00:01:00Z',
+      end: '1970-01-01T00:02:00Z',
+      stepSeconds: 60,
+      sampledAt: '',
+      cluster: { namespace: 'db', name: 'pg', uid: 'u' },
+      charts: [chart],
+    },
+    isLoading: false,
+    error: null,
+  }),
+}))
+
+const { CNPGTrends } = await import('./CNPGTrends')
+
+const render = (standbys?: string[]) =>
+  renderToStaticMarkup(
+    <MemoryRouter>
+      <CNPGTrends namespace="db" name="pg" samples={[]} standbys={standbys} instancePods={['pg-1', 'pg-2', 'pg-3']} />
+    </MemoryRouter>,
+  )
+
+describe('replay-lag history with a standby that does not report', () => {
+  it('names the standby instead of drawing only the calm one', () => {
+    chart = lag(['pg-2'])
+    expect(render(['pg-1', 'pg-2'])).toContain('No line for pg-1: Prometheus has no samples from it in this range.')
+  })
+  it('says nothing when every standby has a line, or when the standbys are unknown', () => {
+    chart = lag(['pg-2'])
+    expect(render(['pg-2'])).not.toContain('No line for')
+    expect(render()).not.toContain('No line for')
+  })
+  it('replaces "no instance was a standby" when standbys exist but none reported', () => {
+    chart = lag([], 'empty')
+    const html = render(['pg-1', 'pg-2'])
+    expect(html).toContain('No line for pg-1, pg-2: Prometheus has no samples from them in this range.')
+    expect(html).not.toContain('no instance was a standby')
+  })
+})

package/src/components/cnpg/CNPGTrends.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { historyGaps, sampleGaps, unchartedInstances } from './CNPGTrends'
+
+const s = (points: [number, number | null][], label = 'a') => ({ labels: { pod: label }, dataPoints: points.map(([timestamp, value]) => ({ timestamp, value })) })
+
+describe('historyGaps', () => {
+  it('hatches steps no series covers and says a leading run predates the series', () => {
+    const gaps = historyGaps([s([[120, 1], [150, 2]]), s([[240, 1]], 'b')], 60, 240, 30)
+    expect(gaps).toEqual([
+      { start: 60, end: 105, label: expect.stringContaining('before this series existed') },
+      { start: 165, end: 225, label: expect.stringContaining('not scraped') },
+    ])
+  })
+
+  it('reports nothing when every step has a sample', () => {
+    expect(historyGaps([s([[0, 1], [30, 0], [60, 3]])], 0, 60, 30)).toEqual([])
+  })
+})
+
+describe('sampleGaps', () => {
+  it('spans from the last sample before a null run to the first after it', () => {
+    const gaps = sampleGaps([s([[0, 1], [5, null], [10, null], [15, 4]])])
+    expect(gaps).toHaveLength(1)
+    expect(gaps[0]).toMatchObject({ start: 0, end: 15 })
+  })
+})
+
+
+describe('unchartedInstances', () => {
+  it('names the expected instances a chart has no line for', () => {
+    expect(unchartedInstances(['pg-1', 'pg-2'], ['pg-2'])).toEqual(['pg-1'])
+    expect(unchartedInstances(['pg-1'], ['pg-1'])).toEqual([])
+  })
+  it('claims nothing when the expected set is unknown', () => {
+    expect(unchartedInstances(undefined, [])).toEqual([])
+    expect(unchartedInstances([], ['pg-1'])).toEqual([])
+  })
+})