@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/CNPGDetailPage.tsx

@@ -1,52 +1,38 @@
 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 { useQueryClient } from '@tanstack/react-query'
+import { refetchCNPGDetail } from './refresh'
+import { useLocation, useSearchParams } from 'react-router-dom'
+import { Activity, Database, Gauge, HardDrive, Network, Settings2, ShieldCheck, Unplug } from 'lucide-react'
+import { CNPG_GROUP, refToSelectedResource, Tooltip, Badge, type WorkloadExtraTab } from '@skyhook-io/k8s-ui'
 import type { SelectedResource } from '../../types'
 import { useConnection } from '../../context/ConnectionContext'
-import { useContexts } from '../../api/client'
+import { useContexts, useRadarFeature } 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'
+import { CNPGPerformance } from './CNPGPerformance'
+import { CNPGReplicationTab } from './CNPGReplicationTab'
+import { CNPGBackupsTab, CNPGClusterServing, CNPGStorageTab, CNPGTabMark } from './CNPGClusterTabs'
+import { CNPGConfiguration } from './CNPGConfiguration'
+import type { CNPGChartGroup } from './CNPGTrends'
+import { CNPG_DETAIL_KINDS, CNPG_SCREENS, cnpgDetailKindFor, cnpgDetailPath, cnpgScreenPath, cnpgViewNamedForKind, type CNPGDetailTarget } from './routes'
+import { CNPG_CLUSTER_TAB_ORDER, cnpgDimensionTab } from './paths'
+import { currentPageLabel } from '../../utils/page-links'
+import { CNPGOperatorBanner } from './CNPGOperatorBanner'
+import { ScreenEmptyState } from '../workspace/layout'
+import { useCNPGNavigate } from './useCNPGNavigate'
 
+// Set by drill-downs; Esc then goes back to that page instead of the home view.
 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.
+ * Resources sidebar keeps the workspace destination highlighted 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.
@@ -61,9 +47,12 @@ export function CNPGDetailPage({
   onOpenResource: (resource: SelectedResource) => void
 }) {
   const location = useLocation()
-  const navigate = useNavigate()
+  const navigate = useCNPGNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
   const { connection } = useConnection()
+  const queryClient = useQueryClient()
+  const { plural, group, namespace, name } = target
+  const refresh = useCallback(() => refetchCNPGDetail(queryClient, { plural, group, namespace, name }), [queryClient, plural, group, namespace, name])
   const activeContext = connection.context
   const pinnedContext = searchParams.get('ctx')
 
@@ -95,27 +84,95 @@ export function CNPGDetailPage({
     [navigate, activeContext, onOpenResource],
   )
 
+  // The extra tabs require the advertised runtime contracts.
+  const cnpgWorkspace = useRadarFeature('cnpgWorkspace').support === 'supported'
+  const isCluster = target.plural === 'clusters' && target.group === CNPG_GROUP && cnpgWorkspace
+  // A tab change on this page, applied like a tab click: the previous tab's
+  // own params (section, chart group, instance) are dropped unless named.
+  const goTab = useCallback(
+    (tab: string, extra: Record<string, string> = {}) => {
+      const params = new URLSearchParams(searchParams)
+      for (const k of ['section', 'charts', 'instance', 'pod', 'container', 'since', 'until']) params.delete(k)
+      params.set('tab', tab)
+      for (const [k, v] of Object.entries(extra)) params.set(k, v)
+      setSearchParams(params, { replace: true, state: location.state })
+    },
+    [searchParams, setSearchParams, location.state],
+  )
+  const openHistory = useCallback((charts: CNPGChartGroup) => goTab('performance', { section: 'history', charts }), [goTab])
   const extraTabs = useMemo<WorkloadExtraTab[] | undefined>(() => {
-    if (target.plural !== 'clusters') return undefined
+    if (target.plural !== 'clusters' || target.group !== CNPG_GROUP) return undefined
+    const ns = target.namespace
+    const name = target.name
+    const activity: WorkloadExtraTab = {
+      id: 'activity',
+      label: 'Activity',
+      icon: <Activity className="h-4 w-4" />,
+      replaces: 'timeline',
+      render: () => <CNPGClusterActivity namespace={ns} name={name} onNavigate={openRelated} />,
+    }
+    if (!cnpgWorkspace) return [activity]
     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: 'replication',
+        label: 'Replication',
+        badge: <CNPGTabMark namespace={ns} name={name} id="replication" />,
+        icon: <Network className="h-4 w-4" />,
+        render: () => (
+          <CNPGReplicationTab
+            namespace={ns}
+            name={name}
+            onOpenLogs={(pod) => goTab('logs', { pod })}
+            onOpenHistory={() => openHistory('replication')}
+            onNavigate={(ref) => openRelated(refToSelectedResource(ref))}
+          />
+        ),
       },
       {
-        id: 'activity',
-        label: 'Activity',
-        icon: <Activity className="h-4 w-4" />,
-        replaces: 'timeline',
+        id: 'storage',
+        label: 'Storage',
+        badge: <CNPGTabMark namespace={ns} name={name} id="storage" />,
+        icon: <HardDrive className="h-4 w-4" />,
+        render: () => <CNPGStorageTab namespace={ns} name={name} onOpenHistory={() => openHistory('storage')} onOpenReplication={() => goTab('replication')} />,
+      },
+      {
+        id: 'performance',
+        label: 'Performance',
+        icon: <Gauge className="h-4 w-4" />,
+        render: () => (
+          <CNPGPerformance
+            namespace={ns}
+            name={name}
+            onOpenInterval={(tab, since, until) => {
+              const params = new URLSearchParams(searchParams)
+              params.delete('pod')
+              params.set('tab', tab)
+              params.set('since', since)
+              params.set('until', until)
+              setSearchParams(params, { state: location.state })
+            }}
+          />
+        ),
+      },
+      {
+        id: 'backups',
+        label: 'Backups',
+        badge: <CNPGTabMark namespace={ns} name={name} id="protection" />,
+        icon: <ShieldCheck className="h-4 w-4" />,
         render: () => (
-          <CNPGClusterActivity namespace={target.namespace} name={target.name} onNavigate={openRelated} />
+          <CNPGBackupsTab
+            namespace={ns}
+            name={name}
+            onInspect={onOpenResource}
+            onOpenYaml={() => goTab('yaml')}
+            onOpenLogs={(pod, container) => goTab('logs', { pod, container })}
+            onOpenOperator={() => navigate(cnpgScreenPath('operator'), { state: { returnLabel: currentPageLabel(), returnCtx: activeContext } satisfies ReturnState })}
+          />
         ),
       },
+      activity,
     ]
-  }, [target.plural, target.namespace, target.name, onOpenResource, openRelated])
+  }, [cnpgWorkspace, target.plural, target.group, target.namespace, target.name, goTab, openHistory, onOpenResource, openRelated, navigate, activeContext, searchParams, setSearchParams, location.state])
 
   if (pinnedContext && activeContext && pinnedContext !== activeContext) {
     return <NotInContext target={target} pinnedContext={pinnedContext} activeContext={activeContext} homeLabel={home.label} homePath={home.path} />
@@ -123,61 +180,65 @@ export function CNPGDetailPage({
 
   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">
+  // Where the object lives, on its title line: workspace / view /. The way
+  // back to the previous page is the browser's Back, or Esc.
+  const titlePrefix = (
+    <div className="flex min-w-0 items-center gap-x-2 text-sm">
+      <nav aria-label="Location" className="flex shrink-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
+        <span>CloudNativePG</span>
+        <span>/</span>
+        <button type="button" onClick={() => navigate(home.path)} className="hover:text-theme-text-primary hover:underline">
+          {home.label}
         </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>
   )
+  const namespaceNote = outsideFilter ? (
+    <Tooltip content="Your namespace filter leaves this namespace out; an object you open stays open." position="bottom">
+      <span className="whitespace-nowrap text-xs text-theme-text-tertiary">· outside your namespace filter</span>
+    </Tooltip>
+  ) : undefined
 
   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}
-      />
+      {/* Above the title line, before any status the page shows. */}
+      {target.plural === 'clusters' && <CNPGOperatorBanner namespaces={[target.namespace]} className="mx-6 mt-3 shrink-0" />}
+      <div className="flex min-h-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
+          titlePrefix={titlePrefix}
+          inlineBadges
+          namespaceNote={namespaceNote}
+          hideKindBadge={cnpgViewNamedForKind(target.plural)}
+          onNavigateToResource={openRelated}
+          onRefresh={cnpgWorkspace ? refresh : undefined}
+          extraTabs={extraTabs}
+          tabOrder={isCluster ? CNPG_CLUSTER_TAB_ORDER : undefined}
+          renderStatusBadge={isCluster ? (resource) => (
+            <Tooltip content={resource?.status?.phase ? `status.phase, reported by CloudNativePG: ${resource.status.phase}` : 'CloudNativePG has not reported status.phase'}>
+              <Badge severity="neutral">
+                <span className="mr-1 font-normal text-theme-text-tertiary">Phase</span>
+                {resource?.status?.phase ? resource.status.phase : 'Not reported'}
+              </Badge>
+            </Tooltip>
+          ) : undefined}
+          statusNote={isCluster ? <CNPGClusterServing namespace={target.namespace} name={target.name} onSelect={() => goTab(cnpgDimensionTab('serving'))} /> : undefined}
+          specTab={
+            isCluster
+              ? { label: 'Configuration', icon: <Settings2 className="h-4 w-4" />, render: () => <CNPGConfiguration namespace={target.namespace} name={target.name} onNavigate={openRelated} onSelectTab={goTab} /> }
+              : undefined
+          }
+        />
+      </div>
     </div>
   )
 }
@@ -195,13 +256,13 @@ function NotInContext({
   homeLabel: string
   homePath: string
 }) {
-  const navigate = useNavigate()
+  const navigate = useCNPGNavigate()
   const { data: contexts } = useContexts()
   const { requestSwitch, confirmDialog } = useContextSwitchFlow()
   const pinned = contexts?.find((c) => c.name === pinnedContext)
   return (
     <>
-      <EmptyState
+      <ScreenEmptyState
         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.`}
@@ -215,9 +276,9 @@ function NotInContext({
             <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"
+              className="btn-secondary px-3 py-1.5 text-sm"
             >
-              Go to {homeLabel === 'Overview' ? 'CloudNativePG Overview' : homeLabel}
+              Go to CloudNativePG {homeLabel}
             </button>
           </div>
         }

package/src/components/cnpg/CNPGDrawerTrail.tsx

@@ -2,7 +2,7 @@ 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'
+import { decodeDrawerTrail, encodeDrawerTrail, sameSelectedResource } from '../../utils/drawer-trail'
 
 const KIND_BY_PLURAL: Record<string, string> = Object.fromEntries(
   Object.values(CNPG_KIND_BY_KEY).map((k) => [k.plural, k.kind]),
@@ -19,7 +19,7 @@ export function CNPGDrawerTrailBack({ resource }: { resource: SelectedResource }
   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
+  if (trail.length < 2 || !sameSelectedResource(trail[trail.length - 1], resource)) return null
   const prev = trail[trail.length - 2]
   const back = () => {
     const params = new URLSearchParams(searchParams)

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

@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { CNPGInvestigationAction } from './CNPGClusterTabs'
+const state = vi.hoisted(() => ({ row: undefined as any, dimensions: undefined as any }))
+vi.mock('./useCNPGClusterAssessment', () => ({ useCNPGClusterAssessment: () => state }))
+it('labels investigation for any CNPG problem or degraded dimension including a healthy controller phase', () => {
+  const render = vi.fn((ctx) => <button>{ctx.health === 'problem' ? 'Investigate' : 'Sparkle'}</button>)
+  const draw = () => renderToStaticMarkup(<CNPGInvestigationAction namespace="db" name="payments" render={render} context={{ kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'db', name: 'payments', health: 'healthy' }} />)
+  state.row = { problems: [{ severity: 'warning' }], controllerStatus: { level: 'healthy' } }
+  expect(draw()).toContain('Investigate')
+  state.row = { problems: [] }
+  for (const tone of ['degraded', 'unhealthy', 'alert']) { state.dimensions = [{ tone }]; expect(draw()).toContain('Investigate') }
+  state.dimensions = [{ tone: 'healthy' }]; expect(draw()).toContain('Sparkle')
+  state.dimensions = [{ tone: 'unknown' }]; draw()
+  expect(render).toHaveBeenLastCalledWith(expect.objectContaining({ health: 'unknown' }))
+  state.row = undefined; state.dimensions = undefined; draw()
+  expect(render).toHaveBeenLastCalledWith(expect.objectContaining({ health: 'unknown', name: 'payments' }))
+})
+
+it('honors the requested any-problem rule for posture and degraded protection without altering fleet attention', () => {
+  const render = vi.fn(() => null)
+  state.row = { attention: false, problems: [{ id: 'audit:cnpgNoDeclarativeBackup', severity: 'posture' }] }
+  state.dimensions = [{ tone: 'healthy' }]
+  renderToStaticMarkup(<CNPGInvestigationAction namespace="db" name="payments" render={render} context={{ kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'db', name: 'payments', health: 'healthy' }} />)
+  expect(render).toHaveBeenLastCalledWith(expect.objectContaining({ health: 'problem' }))
+  expect(state.row.attention).toBe(false)
+  state.row = { attention: false, problems: [] }; state.dimensions = [{ tone: 'degraded' }]
+  renderToStaticMarkup(<CNPGInvestigationAction namespace="db" name="payments" render={render} context={{ kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'db', name: 'payments', health: 'healthy' }} />)
+  expect(render).toHaveBeenLastCalledWith(expect.objectContaining({ health: 'problem' }))
+})

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

@@ -0,0 +1,34 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { buildCNPGFleet, CNPG_WORKSPACE_KEYS, type CNPGWorkspaceResponse } from '@skyhook-io/k8s-ui'
+import { CNPGOperator, ConfigBlock } from './CNPGOperator'
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => vi.fn() }))
+const operator = vi.hoisted(() => ({ partial: false }))
+vi.mock('../../api/cnpg', () => ({ useCNPGOperator: () => ({ data: { coverage: { deployments: { state: operator.partial ? 'partial' : 'full' }, services: { state: operator.partial ? 'partial' : 'full' } }, components: operator.partial ? [] : [{ role: 'operator', namespace: 'operator', deployment: 'cnpg', readyReplicas: 1, replicas: 1 }], config: [], diagnosis: [] }, isRefetchError: true, error: new Error('Operator timeout'), dataUpdatedAt: Date.now() - 240_000 }) }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+it('labels retained operator data after a failed refresh', () => {
+  const data: CNPGWorkspaceResponse = { installed: true, context: 'test', namespaces: null, coverage: Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' }])), objects: {}, issues: [], audit: [], backupsOmitted: 0 }
+  const html = renderToStaticMarkup(<CNPGOperator data={data} fleet={buildCNPGFleet(data)} namespaces={[]} searchParams={new URLSearchParams()} onSetParams={() => {}} onInspect={() => {}} inspected={null} onClearNamespaces={() => {}} />)
+  expect(html).toContain('CloudNativePG operator')
+  expect(html).toContain('Last refresh failed: Operator timeout')
+  expect(html).toContain('4m ago')
+})
+
+it('renders a known-absent ConfigMap as text and does not claim default settings', () => {
+  const html = renderToStaticMarkup(<ConfigBlock config={{ kind: 'ConfigMap', namespace: 'operator', name: 'missing-settings', purpose: 'operator', readable: true, exists: false }} onInspect={vi.fn()} />)
+  expect(html).toContain('This referenced ConfigMap does not exist; settings from other sources are not shown here')
+  expect(html).not.toContain('<button')
+  expect(html).not.toContain('defaults')
+})
+
+it('states unread operator health once and keeps a short component empty line', () => {
+  operator.partial = true
+  const data: CNPGWorkspaceResponse = { installed: true, context: 'test', namespaces: null, coverage: Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' }])), objects: {}, issues: [], audit: [], backupsOmitted: 0 }
+  const html = renderToStaticMarkup(<CNPGOperator data={data} fleet={buildCNPGFleet(data)} namespaces={[]} searchParams={new URLSearchParams()} onSetParams={() => {}} onInspect={() => {}} inspected={null} onClearNamespaces={() => {}} />)
+  expect(html.match(/Operator health cannot be assessed with your access/g)).toHaveLength(1)
+  expect(html).toContain('Deployments not read in some namespaces')
+  expect(html).toContain('No operator or plugin Deployments found')
+  expect(html).not.toContain('No operator Deployment was found')
+  expect(html).not.toContain('Some workloads are not readable')
+  operator.partial = false
+})

package/src/components/cnpg/CNPGOperator.tsx

@@ -1,19 +1,11 @@
 import { useMemo } from 'react'
-import { Badge, getCNPGImageCatalogEntries, isApiGroup, PaneLoader, Tooltip } from '@skyhook-io/k8s-ui'
+import { Badge, FoldSection, getCNPGImageCatalogEntries, isApiGroup, PaneLoader, StatusDot, Tooltip, toneTextClass, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+import { parse } from 'yaml'
 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'
+import { CNPGOperatorDiagnosisSection } from './CNPGOperatorDiagnosis'
+import { cnpgOperatorState, cnpgRestartHistory } from './operatorStatus'
+import { CNPGWorkspaceHeader, CoverageNotice, coverageEmpty, worstCoverage, cnpgResource, type CNPGScreenProps } from './shared'
+import { Mono, Notice, RefreshFailedNotice, ScreenBody, SectionTable, Sub } from '../workspace/layout'
 
 interface CatalogRow {
   key: string
@@ -28,7 +20,53 @@ 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>
+  const history = cnpgRestartHistory(c)
+  return (
+    <>
+      <Badge severity={ok ? 'success' : c.readyReplicas === 0 ? 'error' : 'warning'} size="sm">{c.readyReplicas}/{c.replicas} ready</Badge>
+      {history ? (
+        <Sub>
+          <span className={history.recent ? toneTextClass('degraded') : undefined}>{history.text}</span>
+        </Sub>
+      ) : c.pods ? (
+        <Sub>no restarts</Sub>
+      ) : c.podCoverage && c.podCoverage.state !== 'ok' ? (
+        <Sub>restarts not read{c.podCoverage.reason ? `: ${c.podCoverage.reason}` : ''}</Sub>
+      ) : null}
+    </>
+  )
+}
+
+function CurrentState({ op, clusters }: { op: NonNullable<ReturnType<typeof useCNPGOperator>['data']>; clusters: CNPGFleetRow[] }) {
+  const { concerns, confirmed, unread } = cnpgOperatorState(op, Date.now(), clusters)
+  return (
+    <section className="rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      <h3 className="text-sm font-semibold text-theme-text-primary">Current state</h3>
+      {concerns.length > 0 && (
+        <ul className="mt-1.5 space-y-1">
+          {concerns.map((c) => (
+            <li key={c.text} className="flex items-start gap-2 text-sm">
+              <span className="flex h-5 shrink-0 items-center"><StatusDot tone={c.tone} /></span>
+              <span className={c.tone === 'neutral' ? 'text-theme-text-secondary' : toneTextClass(c.tone)}>{c.text}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      {confirmed.length > 0 && (
+        <p className="mt-1.5 text-sm text-theme-text-secondary">
+          {concerns.length === 0 ? 'No concerns in what Radar read: ' : 'Otherwise: '}
+          {confirmed.join(', ')}.
+        </p>
+      )}
+      {unread.length > 0 && (
+        <ul className="mt-1.5 space-y-0.5">
+          {unread.map((u) => (
+            <li key={u} className="text-xs text-theme-text-tertiary">{u}</li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
 }
 
 export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenProps) {
@@ -59,29 +97,23 @@ export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenPr
 
   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."
+        subtitle="Operator and plugin workloads, whether the operator is leading, watching and reachable, image catalogs and operator configuration."
       />
       <ScreenBody>
-        <CoverageNotice fleet={fleet} data={data} />
+        <CoverageNotice fleet={fleet} data={data} kinds={['clusters', 'imageCatalogs', 'clusterImageCatalogs']} />
+        <RefreshFailedNotice queries={[operator]} />
         {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>
-            )}
+            <CurrentState op={op} clusters={fleet.rows} />
             <SectionTable
               title="Operator and plugins"
               columns={[
@@ -104,10 +136,10 @@ export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenPr
                     </Tooltip>
                   ),
                 },
-                { header: 'Ready', width: '14%', cell: readiness },
+                { header: 'Ready', width: '24%', cell: readiness },
                 {
                   header: 'Workload',
-                  width: '42%',
+                  width: '32%',
                   cell: (c) =>
                     c.deployment ? (
                       <>Deployment <Mono>{c.deployment}</Mono><Sub>{c.namespace}</Sub></>
@@ -126,6 +158,7 @@ export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenPr
               inspected={inspected}
               empty="No operator or plugin Deployments found in the namespaces you can read."
             />
+            {op.diagnosis && <CNPGOperatorDiagnosisSection diagnosis={op.diagnosis} fleet={fleet} />}
           </>
         )}
 
@@ -191,12 +224,12 @@ export function CNPGOperator({ data, fleet, onInspect, inspected }: CNPGScreenPr
   )
 }
 
-function ConfigBlock({ config, onInspect }: { config: CNPGOperatorConfig; onInspect: CNPGScreenProps['onInspect'] }) {
+export 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>
+      {config.exists === false ? <span className="font-mono text-sm text-theme-text-primary">{config.name}</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>
@@ -206,9 +239,24 @@ function ConfigBlock({ config, onInspect }: { config: CNPGOperatorConfig; onInsp
   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>
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-secondary">This referenced ConfigMap does not exist; settings from other sources are not shown here.</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 if (config.purpose === 'monitoring') {
+    const queries = config.data?.queries ?? ''
+    let count: number | null = null
+    try {
+      const parsed = parse(queries)
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) count = Object.keys(parsed).length
+    } catch { /* The raw configuration remains inspectable when it cannot be parsed. */ }
+    body = <div className="px-4 py-2.5 text-sm text-theme-text-secondary">
+      <p>{count === null ? 'Query count unavailable' : `${count} ${count === 1 ? 'query' : 'queries'}`} · ConfigMap {config.name}</p>
+      <FoldSection title="Query definitions" summary="Show SQL and settings" attention={false}>
+        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-normal font-mono text-xs [overflow-wrap:anywhere]">{queries.slice(0, 8000)}</pre>
+        {queries.length > 8000 && <p className="mt-1 text-xs text-theme-text-tertiary">Preview truncated to 8,000 of {queries.length.toLocaleString()} characters.</p>}
+        <button type="button" onClick={open} className="mt-2 text-xs text-accent-text hover:underline">Inspect ConfigMap {config.name} →</button>
+      </FoldSection>
+    </div>
   } else {
     const entries = Object.entries(config.data ?? {})
     body =

package/src/components/cnpg/CNPGOperatorBanner.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx'
+import { AlertBanner } from '@skyhook-io/k8s-ui'
+import { useCNPGOperatorStatus } from '../../api/cnpg'
+import { cnpgScreenPath } from './routes'
+import { cnpgOperatorBannerModel } from './operatorStatus'
+import { useCNPGNavigate } from './useCNPGNavigate'
+
+/**
+ * Shown above CNPG status while the operator that watches these namespaces is
+ * observed not leading, or its admission webhook rejects writes: the phase and
+ * ready counts below are then what the operator last wrote.
+ */
+export function CNPGOperatorBanner({ namespaces, className }: { namespaces: string[]; className?: string }) {
+  const navigate = useCNPGNavigate()
+  const q = useCNPGOperatorStatus(namespaces)
+  const model = cnpgOperatorBannerModel(q.data?.namespaces, namespaces)
+  if (!model) return null
+  const { stale, rejects } = model
+  const title = stale
+    ? 'The CloudNativePG operator is not reconciling: status below may be stale'
+    : 'CloudNativePG writes are being rejected'
+  const scope = stale && stale.namespaces.length < new Set(namespaces).size ? `Clusters in ${stale.namespaces.join(', ')}.` : ''
+  // Tighter than the default banner, never smaller: the title, icon, colours
+  // and every reason stay; the link moves onto the title line. A host that
+  // passes no className keeps the default bottom margin.
+  return (
+    <AlertBanner
+      variant="warning"
+      title={title}
+      message={[scope, ...(stale?.reasons ?? []), rejects ?? ''].filter(Boolean).join(' ') || undefined}
+      action={
+        <button type="button" onClick={() => navigate(cnpgScreenPath('operator'))} className="text-xs font-medium text-accent-text hover:underline">
+          Open Operator →
+        </button>
+      }
+      className={clsx('px-3 py-2', className ?? 'mb-4')}
+    />
+  )
+}