@skyhook-io/radar-app 1.10.0 → 1.12.2

package/src/components/resources/renderers/KyvernoPolicyCoverage.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { PolicyCoverageSection } from '@skyhook-io/k8s-ui/components/resources/renderers/PolicyCoverageSection'
+import type { PolicyCoverageSubject, ResourceRef } from '@skyhook-io/k8s-ui'
+import { usePolicyCoverage } from '../../../api/policy'
+
+/** Mirrors maxPolicyCoverageSubjectsHard in internal/server/policy_handlers.go —
+ *  asking for more than the server will send just returns the same list. */
+const COVERAGE_MAX_SUBJECTS = 5000
+
+/**
+ * Host wrapper for the policy coverage section — the inverse lookup that answers
+ * "which resources does this policy pass and fail".
+ *
+ * The package renderers take it as a slot rather than fetching it themselves, so
+ * a library consumer that does not wire this endpoint keeps the original policy
+ * drawer and nothing breaks.
+ */
+export function KyvernoPolicyCoverage({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const name = data?.metadata?.name ?? ''
+  // A namespaced Kyverno Policy reports as "namespace/name"; the server tries
+  // both shapes, so the namespace is passed through whenever the policy has one.
+  const namespace = data?.metadata?.namespace ?? ''
+  // The server bounds each rule's subject list so an ordinary drawer open stays
+  // small. Asking for the rest raises that bound once, up to the server's own
+  // ceiling — past which the response says what it could not send.
+  const [limit, setLimit] = useState<number | undefined>(undefined)
+
+  // The header's namespace filter is applied SERVER-side from session state, so
+  // the same URL returns a different body once it changes and nothing in the
+  // request distinguishes the two. Without it in the cache key, a policy opened
+  // under "All namespaces" keeps serving that body after the filter narrows —
+  // the view then shows other people's namespaces under your scope, and which
+  // behaviour you get depends on where you navigated from.
+  const viewFilter = useLocation().search
+  const query = usePolicyCoverage(name, namespace || undefined, !!name, limit, viewFilter)
+
+  return (
+    <PolicyCoverageSection
+      resource={data}
+      data={query.data ?? null}
+      loading={query.isLoading}
+      error={query.error as Error | null}
+      onLoadMore={limit ? undefined : () => setLimit(COVERAGE_MAX_SUBJECTS)}
+      loadingMore={query.isFetching}
+      onSelectSubject={
+        onNavigate
+          ? (subject: PolicyCoverageSubject) =>
+              onNavigate({
+                kind: subject.kind,
+                namespace: subject.namespace ?? '',
+                name: subject.name,
+                group: subject.group,
+              })
+          : undefined
+      }
+    />
+  )
+}

package/src/components/resources/renderers/KyvernoPolicyQueued.render.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderToString } from 'react-dom/server'
+
+// The denial is the state under test, so the fetch is stubbed rather than run.
+const forbidden = Object.assign(new Error('forbidden'), { status: 403 })
+let queuedResult: { data?: unknown; error?: unknown } = {}
+
+vi.mock('../../../api/policy', () => ({
+  usePolicyQueued: () => queuedResult,
+}))
+vi.mock('../../../api/client', () => ({
+  isForbiddenError: (e: any) => e?.status === 403,
+}))
+
+const { KyvernoPolicyQueued } = await import('./KyvernoPolicyQueued')
+
+const generating = {
+  kind: 'ClusterPolicy',
+  metadata: { name: 'gen-companion' },
+  spec: { rules: [{ name: 'g', generate: {} }] },
+}
+const validating = {
+  kind: 'ClusterPolicy',
+  metadata: { name: 'require-labels' },
+  spec: { rules: [{ name: 'v', validate: {} }] },
+}
+
+/**
+ * A denial here is cluster-static, so disclosing it everywhere would be noise on
+ * the majority of policies that only validate. Staying silent about it on a
+ * policy that DOES queue is worse: a stuck backlog then looks exactly like a
+ * healthy policy with nothing pending, on the page someone checks to find out.
+ */
+describe('KyvernoPolicyQueued — a denial you cannot see', () => {
+  it('says it cannot check when the policy actually queues work', () => {
+    queuedResult = { error: forbidden }
+    const html = renderToString(<KyvernoPolicyQueued data={generating} />)
+    expect(html).toContain('permission')
+    expect(html).toContain('Queued Work')
+  })
+
+  it('stays silent for a policy that never queues anything', () => {
+    queuedResult = { error: forbidden }
+    expect(renderToString(<KyvernoPolicyQueued data={validating} />)).toBe('')
+  })
+
+  it('stays silent when there is genuinely nothing queued', () => {
+    queuedResult = { data: { requests: 0 } }
+    expect(renderToString(<KyvernoPolicyQueued data={generating} />)).toBe('')
+  })
+
+  // A fault is not a denial: it is neither permanent nor beyond acting on, so it
+  // is loud regardless of what the policy does.
+  it('reports a genuine fault on any policy', () => {
+    queuedResult = { error: new Error('could not read queued work') }
+    const html = renderToString(<KyvernoPolicyQueued data={validating} />)
+    expect(html).toContain('could not read queued work')
+  })
+})

package/src/components/resources/renderers/KyvernoPolicyQueued.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest'
+import { policyQueuesWork, queueBanner, requestBelongsTo } from './KyvernoPolicyQueued'
+
+/**
+ * Kyverno permits a namespaced Policy and a ClusterPolicy to share a name, and
+ * records the first qualified and the second bare. Accepting the bare form as a
+ * fallback for a namespaced policy shows it someone else's backlog — the same
+ * collision the coverage lookup refuses, reintroduced here once already.
+ */
+describe('requestBelongsTo', () => {
+  const req = (policy: string) => ({ spec: { policy } })
+
+  it('matches a cluster-scoped policy on the bare name only', () => {
+    expect(requestBelongsTo(req('require-labels'), 'require-labels', '')).toBe(true)
+    expect(requestBelongsTo(req('team-a/require-labels'), 'require-labels', '')).toBe(false)
+  })
+
+  it('matches a namespaced policy on the qualified name only', () => {
+    expect(requestBelongsTo(req('team-a/require-labels'), 'require-labels', 'team-a')).toBe(true)
+    // The bug: this is a ClusterPolicy's request and must not appear here.
+    expect(requestBelongsTo(req('require-labels'), 'require-labels', 'team-a')).toBe(false)
+  })
+
+  it('does not match another namespace', () => {
+    expect(requestBelongsTo(req('team-b/require-labels'), 'require-labels', 'team-a')).toBe(false)
+  })
+
+  it('matches nothing when either side is missing', () => {
+    expect(requestBelongsTo({}, 'require-labels', '')).toBe(false)
+    expect(requestBelongsTo(req('require-labels'), '', '')).toBe(false)
+  })
+})
+
+/**
+ * The banner is the only thing on this page that makes a claim rather than a
+ * count, so the claim has to be the one the numbers support.
+ */
+describe('queueBanner', () => {
+  it('says work stopped only when something has actually sat still', () => {
+    const b = queueBanner(3, 12, '12m')
+    expect(b?.title).toBe('Queued work has not moved for 12m')
+    expect(b?.message).toContain('cannot keep up')
+  })
+
+  // The bug: this branch fires when NOTHING is older than the stall threshold,
+  // which is the case most likely to be a burst draining normally. The body has
+  // to agree with the headline — diagnosing a stalled controller underneath a
+  // headline that only reports a size puts the claim straight back.
+  it('does not tell you a moving backlog is not being processed', () => {
+    const b = queueBanner(30, 1, '1m')
+    expect(b?.title).toBe('30 requests are queued')
+    expect(b?.title).not.toContain('not being processed')
+    expect(b?.message).toContain('may be a burst still draining')
+    expect(b?.message).not.toContain('cannot keep up')
+    expect(b?.message).not.toContain('grows rather than drains')
+  })
+
+  it('stays quiet for a queue doing what a queue does', () => {
+    expect(queueBanner(3, 1, '1m')).toBeNull()
+    expect(queueBanner(0, 0, '')).toBeNull()
+  })
+
+  it('prefers the measured stall over the size when both apply', () => {
+    expect(queueBanner(40, 30, '30m')?.title).toContain('has not moved')
+  })
+})
+
+/**
+ * A denial is only worth disclosing where it can cost something. Silence on a
+ * policy that queues nothing keeps the page clean; silence on one that DOES
+ * queue hides a backlog behind a page that looks healthy.
+ */
+describe('policyQueuesWork', () => {
+  it('is true for a policy that generates resources', () => {
+    expect(policyQueuesWork({ spec: { rules: [{ name: 'g', generate: {} }] } })).toBe(true)
+    expect(policyQueuesWork({ kind: 'GeneratingPolicy', spec: {} })).toBe(true)
+  })
+
+  it('is true for a policy that mutates resources which already exist', () => {
+    expect(policyQueuesWork({ spec: { rules: [{ mutate: { targets: [{ kind: 'Pod' }] } }] } })).toBe(true)
+    expect(policyQueuesWork({ spec: { evaluation: { mutateExisting: { enabled: true } } } })).toBe(true)
+  })
+
+  // The common case, and the reason a blanket note would be noise.
+  it('is false for a validate-only policy', () => {
+    expect(policyQueuesWork({ spec: { rules: [{ name: 'v', validate: {} }] } })).toBe(false)
+    expect(policyQueuesWork({ kind: 'ValidatingPolicy', spec: {} })).toBe(false)
+  })
+
+  // A mutate rule with no targets runs at admission only — nothing is queued.
+  it('is false for admission-time mutation', () => {
+    expect(policyQueuesWork({ spec: { rules: [{ mutate: { patchStrategicMerge: {} } }] } })).toBe(false)
+  })
+
+  it('handles a policy with no spec at all', () => {
+    expect(policyQueuesWork({})).toBe(false)
+    expect(policyQueuesWork(undefined)).toBe(false)
+  })
+})

package/src/components/resources/renderers/KyvernoPolicyQueued.tsx

@@ -0,0 +1,184 @@
+import { Workflow } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '@skyhook-io/k8s-ui'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import { HEALTH_BADGE_COLORS } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { formatAge } from '@skyhook-io/k8s-ui/components/resources/resource-utils'
+import { isForbiddenError } from '../../../api/client'
+import { isKyvernoMutateExistingEnabled } from '@skyhook-io/k8s-ui/components/resources/resource-utils-kyverno-modern'
+import { usePolicyQueued } from '../../../api/policy'
+
+/** A request sitting this long is not mid-flight. Kyverno retries on every
+ *  reconcile, so past this point a backlog grows rather than drains. */
+const STALLED_MINUTES = 5
+
+/** Enough at once to be worth raising even while it is still moving. */
+const BACKLOG_SIZE = 25
+
+/**
+ * The whole banner, or null when a queue is doing what a queue does. Headline
+ * and body are decided together — split across two places, the body went on
+ * diagnosing a stalled controller under a headline that had stopped claiming one.
+ *
+ * Only the first case has measured that the work stopped. The second says how
+ * much is waiting and nothing more: everything in it is younger than the stall
+ * threshold, so it is as likely to be a burst draining normally, and diagnosing
+ * a controller from that is a claim the evidence argues against.
+ */
+export function queueBanner(
+  pending: number,
+  stalledMinutes: number,
+  oldestAge: string,
+): { title: string; message: string } | null {
+  if (stalledMinutes >= STALLED_MINUTES) {
+    return {
+      title: `Queued work has not moved for ${oldestAge}`,
+      message:
+        'Requests build up when the background controller cannot keep up or cannot reach what it needs. They are retried on every reconcile, so a backlog grows rather than drains.',
+    }
+  }
+  if (pending >= BACKLOG_SIZE) {
+    return {
+      title: `${pending} requests are queued`,
+      message: `Nothing here has been waiting longer than ${STALLED_MINUTES} minutes, so this may be a burst still draining. Worth watching: if the count holds or the oldest keeps ageing, the controller is not keeping up.`,
+    }
+  }
+  return null
+}
+
+/**
+ * Whether this policy can queue background work at all.
+ *
+ * Decides whether a denial is worth mentioning. A validate-only policy never
+ * queues anything, so "you can't see the queue" there is noise on the majority
+ * of policy pages. A policy that generates, or mutates resources that already
+ * exist, does queue — and for those a denial hides a backlog that looks exactly
+ * like a healthy policy with nothing pending.
+ */
+export function policyQueuesWork(data: any): boolean {
+  if (data?.kind === 'GeneratingPolicy') return true
+  if (isKyvernoMutateExistingEnabled(data)) return true
+  return (data?.spec?.rules ?? []).some(
+    (r: any) => !!r?.generate || Array.isArray(r?.mutate?.targets),
+  )
+}
+
+/**
+ * Whether a queued request belongs to this policy.
+ *
+ * Exactly one form matches, never both. A namespaced Policy is recorded as
+ * `namespace/name` and a cluster-scoped one bare, and Kyverno permits the two
+ * to share a name — so accepting the bare form as a fallback hands a namespaced
+ * policy the backlog of a ClusterPolicy it has nothing to do with. The coverage
+ * lookup refuses the same fallback for the same reason.
+ */
+export function requestBelongsTo(request: any, name: string, namespace: string): boolean {
+  const policy = request?.spec?.policy
+  if (!policy || !name) return false
+  return policy === (namespace ? `${namespace}/${name}` : name)
+}
+
+/**
+ * What this policy has queued and not finished.
+ *
+ * A generate or mutate-existing rule does its work through queued requests, and
+ * the way that fails in practice is a pile-up rather than one bad request:
+ * upstream reports describe thousands stuck in Pending, never cleaned up, taken
+ * up again on every reconcile. That is a count, and a count belongs next to the
+ * policy — the requests have their own page, but nobody watches it.
+ *
+ * Silent when the policy has queued nothing, so it never adds an empty section
+ * to the majority of policies that only validate.
+ */
+export function KyvernoPolicyQueued({ data }: { data: any }) {
+  const name = data?.metadata?.name ?? ''
+  const namespace = data?.metadata?.namespace ?? ''
+
+  // Server-side, because the answer's scope is not the subject's: Kyverno keeps
+  // these in its own namespace, and the generic resource list would have
+  // answered for whatever namespaces the reader happens to be viewing.
+  const { data: queued, error } = usePolicyQueued(name, namespace, !!name)
+
+  const total = queued?.requests ?? 0
+  if (total === 0) {
+    // An empty list and an unreadable one are not the same answer. A denial is
+    // cluster-static, so disclosing it on every policy page would be noise on the
+    // majority that only validate and never queue anything — but staying silent
+    // about it on a policy that DOES queue hides a backlog behind a page that
+    // looks like a healthy one with nothing pending. So it is disclosed exactly
+    // where it can cost something.
+    if (!error) return null
+    if (isForbiddenError(error) && !policyQueuesWork(data)) return null
+    return (
+      <Section title="Queued Work" icon={Workflow}>
+        <LookupFailureNote errors={[error]} what="what this policy has queued" />
+      </Section>
+    )
+  }
+
+  const byState = queued?.byState ?? {}
+  const pending = byState['Pending'] ?? 0
+  const failed = byState['Failed'] ?? 0
+  const messages = queued?.messages ?? []
+  const oldestPending = queued?.oldestPending
+
+  const stalledMinutes = oldestPending
+    ? Math.floor((Date.now() - new Date(oldestPending).getTime()) / 60000)
+    : 0
+  const banner = queueBanner(pending, stalledMinutes, oldestPending ? formatAge(oldestPending) : '')
+
+  return (
+    <>
+      {banner && (
+        <AlertBanner variant="warning" title={banner.title} message={banner.message} />
+      )}
+      <Section title="Queued Work" icon={Workflow} defaultExpanded={pending > 0 || failed > 0}>
+        <PropertyList>
+          <Property label="Requests" value={String(total)} />
+          {Object.entries(byState).map(([state, n]) => (
+            <Property
+              key={state}
+              label={state}
+              value={
+                <span
+                  className={clsx(
+                    'badge',
+                    HEALTH_BADGE_COLORS[
+                      (state === 'Failed'
+                        ? 'unhealthy'
+                        : state === 'Pending'
+                          ? 'degraded'
+                          : state === 'Completed'
+                            ? 'healthy'
+                            : 'unknown') as keyof typeof HEALTH_BADGE_COLORS
+                    ],
+                  )}
+                >
+                  {n}
+                </span>
+              }
+            />
+          ))}
+          {oldestPending && (
+            <Property label="Oldest Pending" value={`${formatAge(oldestPending)} ago`} />
+          )}
+        </PropertyList>
+        {messages.length > 0 && (
+          <div className="mt-2 pt-2 border-t border-theme-border space-y-1">
+            {/* Kyverno writes why it could not complete a request into
+                status.message, and it is the only diagnosis this object
+                carries. A count without it says something is wrong and leaves
+                you to go and find out what. */}
+            {messages.map((m, i) => (
+              <div key={i} className="text-xs text-warning-text">{m}</div>
+            ))}
+          </div>
+        )}
+        <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
+          These are deleted seconds after they complete, so this counts what is in flight right now
+          rather than everything this policy has ever done.
+        </div>
+      </Section>
+    </>
+  )
+}

package/src/components/resources/renderers/RolloutRenderer.tsx

@@ -1 +1,24 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/RolloutRenderer'
+import { RolloutRenderer as BaseRolloutRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/RolloutRenderer'
+import { useRolloutAction, useRolloutCapabilities, type RolloutAction } from '../../../api/client'
+
+interface RolloutRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function RolloutRenderer({ data, onNavigate }: RolloutRendererProps) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const { data: capabilities } = useRolloutCapabilities(namespace, name)
+  const action = useRolloutAction()
+
+  return (
+    <BaseRolloutRenderer
+      data={data}
+      onNavigate={onNavigate}
+      capabilities={capabilities}
+      onAction={(next: RolloutAction) => action.mutate({ action: next, namespace, name })}
+      pendingAction={action.isPending ? action.variables?.action ?? null : null}
+    />
+  )
+}

package/src/components/resources/renderers/VeleroBSLRenderer.tsx

@@ -1 +1,44 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBSLRenderer'
+import { VeleroBSLRenderer as BaseVeleroBSLRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBSLRenderer'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useVeleroStoredBackups } from '../../../api/policy'
+
+/**
+ * Host wrapper adding the reverse lookup the package renderer cannot do: which
+ * Backups this storage location holds.
+ *
+ * Without it the page states a phase and stops. "Unavailable" is a fact about a
+ * bucket; what an operator came to find out is what it costs them, and that is
+ * the list of backups they cannot restore from until it recovers — every one of
+ * which Velero still reports as Completed.
+ */
+export function VeleroBSLRenderer({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const stored = useVeleroStoredBackups(namespace, name, !!namespace && !!name)
+
+  return (
+    <BaseVeleroBSLRenderer
+      data={data}
+      // Undefined while unresolved: an empty list would say this location holds
+      // nothing, which is a different answer from not having looked yet.
+      storedBackups={stored.isLoading || stored.error ? undefined : (stored.data?.backups ?? [])}
+      storedTotal={stored.data?.stored}
+      restorableTotal={stored.data?.restorable}
+      expiredTotal={stored.data?.expired}
+      listTruncated={stored.data?.truncated}
+      lookupNote={
+        stored.error ? (
+          <LookupFailureNote errors={[stored.error]} what="which backups are stored here" />
+        ) : undefined
+      }
+      onNavigate={onNavigate}
+    />
+  )
+}

package/src/components/resources/renderers/VeleroBackupRenderer.tsx

@@ -1 +1,75 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBackupRenderer'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import { VeleroBackupRenderer as BaseVeleroBackupRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroBackupRenderer'
+import { resolveBackupStorageLocation } from '@skyhook-io/k8s-ui/components/resources/resource-utils-velero'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../../api/client'
+import { useVeleroRunMessages } from '../../../api/policy'
+
+/**
+ * Host wrapper adding the two things a Backup cannot answer from its own status:
+ * whether the storage location holding it is reachable, and what the errors and
+ * warnings it counted actually say.
+ *
+ * The backup's own status says Completed and goes on saying it after the bucket
+ * behind it goes Unavailable. This is the page someone opens to decide whether
+ * they can restore to this point, so the answer belongs here and not one screen
+ * away.
+ *
+ * Namespace is explicit — storage locations live alongside the backups that name
+ * them, in Velero's own namespace. Omitting it would inherit the reader's
+ * namespace view filter, which is a browsing preference and not the scope of
+ * this question.
+ */
+export function VeleroBackupRenderer({ data, onNavigate }: { data: any; onNavigate?: (ref: ResourceRef) => void }) {
+  const messages = useRunMessages('backups', data)
+  const namespace = data?.metadata?.namespace ?? ''
+
+  const locations = useResources<any>('backupstoragelocations', namespace, 'velero.io', {
+    enabled: !!namespace,
+  })
+
+  // Everything below is gated on the lookup having answered. A location we have
+  // not read is not a healthy one, and neither is a name we have not resolved:
+  // an unset spec.storageLocation means whichever location carries spec.default,
+  // so resolving it against a list that has not loaded produces the literal
+  // "default", which is wrong on any install that renamed it — and wrong
+  // permanently when the list errors rather than for a moment.
+  const answered = !locations.isLoading && !locations.error && locations.data !== undefined
+  const resolved = answered ? resolveBackupStorageLocation(data, locations.data) : undefined
+
+  const match = answered
+    ? (locations.data ?? []).find((l: any) => l?.metadata?.name === resolved)
+    : undefined
+  const phase = match?.status?.phase
+
+  // The location the backup names is gone. Velero restores from the location
+  // recorded on the backup, so this is not restorable — and it is invisible
+  // otherwise, because a location that does not exist has no phase to report.
+  const missing = answered && !!resolved && match === undefined
+
+  return (
+    <BaseVeleroBackupRenderer
+      data={data}
+      storageLocationPhase={phase}
+      storageLocationName={resolved}
+      storageLocationMissing={missing}
+      messages={messages}
+      onNavigate={onNavigate}
+    />
+  )
+}
+
+// The messages behind the counts. Nothing is fetched until the operator asks:
+// reading them makes Velero create a DownloadRequest and pulls an object out of
+// storage, which is not work to do on every drawer open.
+function useRunMessages(kind: 'backups' | 'restores', data: any) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const fetcher = useVeleroRunMessages(kind, namespace, name)
+  return {
+    messages: fetcher.data,
+    loading: fetcher.isPending,
+    lookupNote: fetcher.error ? <LookupFailureNote errors={[fetcher.error]} what="the messages behind these counts" /> : undefined,
+    onFetch: namespace && name ? () => fetcher.mutate() : undefined,
+  }
+}

package/src/components/resources/renderers/VeleroRestoreRenderer.tsx

@@ -1 +1,35 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroRestoreRenderer'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import { VeleroRestoreRenderer as BaseVeleroRestoreRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/VeleroRestoreRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useVeleroRunMessages } from '../../../api/policy'
+
+/**
+ * Host wrapper adding the messages behind the run's error and warning counts.
+ *
+ * The counts are on the Restore; the text is not. It lives in a results file in
+ * object storage that only Velero's controller can hand out a link to — so the
+ * page showed a number an operator could worry about but not act on. A stuck
+ * restore is the more urgent of the two kinds, because someone is waiting on
+ * their data.
+ *
+ * Fetched on click, not on open: it creates a DownloadRequest and pulls an
+ * object out of storage. Same bargain as the network trace's probes.
+ */
+export function VeleroRestoreRenderer({ data, onNavigate }: { data: any; onNavigate?: (ref: ResourceRef) => void }) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const fetcher = useVeleroRunMessages('restores', namespace, name)
+
+  return (
+    <BaseVeleroRestoreRenderer
+      data={data}
+      onNavigate={onNavigate}
+      messages={{
+        messages: fetcher.data,
+        loading: fetcher.isPending,
+        lookupNote: fetcher.error ? <LookupFailureNote errors={[fetcher.error]} what="the messages behind these counts" /> : undefined,
+        onFetch: namespace && name ? () => fetcher.mutate() : undefined,
+      }}
+    />
+  )
+}

package/src/components/resources/renderers/index.ts

@@ -11,6 +11,7 @@ export { CronWorkflowRenderer } from './CronWorkflowRenderer'
 export { HPARenderer } from './HPARenderer'
 export { NodeRenderer } from './NodeRenderer'
 export { PVCRenderer } from './PVCRenderer'
+export { KyvernoPolicyCoverage } from './KyvernoPolicyCoverage'
 export { RolloutRenderer } from './RolloutRenderer'
 export { CertificateRenderer } from './CertificateRenderer'
 export { WorkflowRenderer } from './WorkflowRenderer'

package/src/components/rightsizing/RightsizingScanView.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { AlertTriangle, DollarSign, ExternalLink, Gauge, Loader2, RefreshCw } from 'lucide-react'
+import { AlertTriangle, Coins, ExternalLink, Gauge, Loader2, RefreshCw } from 'lucide-react'
 import {
   Collapse,
   CollapseChevron,
@@ -194,7 +194,7 @@ export function RightsizingScanView({ namespaces }: RightsizingScanViewProps) {
     <div className="flex-1 min-h-0 overflow-y-auto">
       <div className="mx-auto flex w-full max-w-[1920px] flex-col gap-4 px-6 py-6">
         <PageHeader
-          icon={DollarSign}
+          icon={Coins}
           title="Cost Insights"
           description="Understand current allocation and find CPU and memory requests worth tuning."
         />