@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/resources/renderers/SecretRenderer.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { SecretRenderer } from './SecretRenderer'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const secret = {
+  apiVersion: 'v1',
+  kind: 'Secret',
+  metadata: { name: 'db', namespace: 'shop', resourceVersion: '7' },
+  type: 'Opaque',
+  data: { password: btoa('old') },
+}
+
+let element: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  element = document.createElement('div')
+  document.body.append(element)
+  root = createRoot(element)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  element.remove()
+})
+
+async function render(onSaveSecretValue?: (yaml: string) => Promise<void>) {
+  await act(async () => root.render(<SecretRenderer data={secret} resourceData={secret} onSaveSecretValue={onSaveSecretValue} />))
+}
+
+function button(label: string): HTMLButtonElement {
+  const match = [...document.querySelectorAll('button')].find(b => b.textContent?.trim() === label || b.title === label)
+  if (!match) throw new Error(`no button "${label}"`)
+  return match
+}
+
+async function editAndSave(value: string) {
+  await act(async () => button('Reveal').click())
+  await act(async () => button('Edit value').click())
+  const textarea = element.querySelector('textarea')!
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(textarea, value)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await act(async () => button('Save').click())
+  await act(async () => button('Update').click())
+}
+
+const httpError = (status: number, message: string) => Object.assign(new Error(message), { status })
+
+describe('SecretRenderer value edit', () => {
+  it('keeps the edit open and says why when the Secret changed since it loaded', async () => {
+    await render(vi.fn().mockRejectedValue(httpError(409, 'resource changed after review')))
+    await editAndSave('new')
+    expect(element.textContent).toContain('Not saved')
+    expect(element.textContent).toContain('This Secret changed after it loaded. Once the view reloads it, save again')
+    expect(element.querySelector('textarea')?.value).toBe('new')
+  })
+
+  it('says the Secret is gone when the save finds it deleted', async () => {
+    await render(vi.fn().mockRejectedValue(httpError(404, 'secrets "db" not found')))
+    await editAndSave('new')
+    expect(element.textContent).toContain('Not saved')
+    expect(element.textContent).toContain('This Secret no longer exists in the cluster.')
+  })
+
+  it('shows the server message for any other failure', async () => {
+    await render(vi.fn().mockRejectedValue(httpError(403, 'secrets "db" is forbidden')))
+    await editAndSave('new')
+    expect(element.textContent).toContain('Not saved')
+    expect(element.textContent).toContain('secrets "db" is forbidden')
+  })
+
+  it('closes the editor once the save handler is taken away', async () => {
+    await render(vi.fn().mockResolvedValue(undefined))
+    await act(async () => button('Reveal').click())
+    await act(async () => button('Edit value').click())
+    expect(element.querySelector('textarea')).not.toBeNull()
+    await render(undefined)
+    expect(element.querySelector('textarea')).toBeNull()
+    expect(element.textContent).not.toContain('Save')
+  })
+})

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

@@ -8,6 +8,7 @@ import { ReflectorSummary, ReflectorSection, isReflectorMirror, reflectorEditNot
 import type { SecretCertificateInfo, CertificateInfo, Relationships, ResourceRef } from '../../../types'
 import { pluralize } from '../../../utils/pluralize'
 import { cleanResourceForYaml } from '../../../utils/yaml'
+import { isFetchError } from '../../../types/fetch-error'
 
 interface SecretRendererProps {
   data: any
@@ -31,6 +32,7 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
   const [editingKey, setEditingKey] = useState<string | null>(null)
   const [editValue, setEditValue] = useState('')
   const [showSaveConfirm, setShowSaveConfirm] = useState(false)
+  const [saveError, setSaveError] = useState<{ reason?: string } | null>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const dataKeys = Object.keys(data.data || {})
   const isImmutable = data.immutable === true
@@ -68,12 +70,14 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
   function startEdit(key: string, decoded: string) {
     setEditingKey(key)
     setEditValue(decoded)
+    setSaveError(null)
   }
 
   function cancelEdit() {
     setEditingKey(null)
     setEditValue('')
     setShowSaveConfirm(false)
+    setSaveError(null)
   }
 
   const handleSave = useCallback(async (key: string, newValue: string) => {
@@ -83,14 +87,16 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
     // btoa is byte-only; round-trip through encodeURIComponent/unescape so non-ASCII secret values survive base64 encoding.
     cleaned.data[key] = btoa(unescape(encodeURIComponent(newValue)))
     const yaml = yamlStringify(cleaned, { lineWidth: 0, indent: 2 })
+    setSaveError(null)
     try {
       await onSaveSecretValue(yaml)
       setEditingKey(null)
       setEditValue('')
       setShowSaveConfirm(false)
-    } catch {
-      // Error is handled by the mutation (toast)
+    } catch (error) {
+      // The edit stays open with the value as typed, so it can be saved again.
       setShowSaveConfirm(false)
+      setSaveError(secretSaveErrorMessage(error))
     }
   }, [onSaveSecretValue, resourceData])
 
@@ -171,8 +177,10 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
           {dataKeys.map((key) => {
             const decoded = decodeBase64(data.data[key])
             const isBinary = decoded === '[binary data]'
-            const isEditing = editingKey === key
             const canEdit = onSaveSecretValue && !isImmutable && !isBinary
+            // Without a save handler (the Secret was deleted, say) an open
+            // editor would have a Save button that does nothing.
+            const isEditing = editingKey === key && Boolean(canEdit)
 
             return (
               <div key={key} className="card-inner">
@@ -221,13 +229,21 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
                     <textarea
                       ref={textareaRef}
                       value={editValue}
-                      onChange={(e) => setEditValue(e.target.value)}
+                      onChange={(e) => {
+                        setEditValue(e.target.value)
+                        setSaveError(null)
+                      }}
                       autoCorrect="off"
                       autoCapitalize="off"
                       className="w-full bg-theme-base rounded p-2 text-xs text-theme-text-secondary font-mono border border-blue-500/50 focus:border-blue-500 focus:outline-none resize-none overflow-hidden whitespace-pre-wrap"
                       style={{ minHeight: '60px' }}
                       disabled={isSaving}
                     />
+                    {saveError && (
+                      <div role="alert" className="mt-2">
+                        <AlertBanner variant="error" title="Not saved" message={saveError.reason} />
+                      </div>
+                    )}
                     <div className="flex items-center gap-2 mt-2">
                       <button
                         onClick={() => setShowSaveConfirm(true)}
@@ -267,7 +283,7 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
 
       <ReflectorSection data={data} reflection={relationships?.reflection} onNavigate={onNavigate} />
 
-      {editingKey && (
+      {editingKey && onSaveSecretValue && (
         <ConfirmDialog
           open={showSaveConfirm}
           onClose={() => setShowSaveConfirm(false)}
@@ -284,6 +300,19 @@ export function SecretRenderer({ data, relationships, onNavigate, certificateInf
   )
 }
 
+function secretSaveErrorMessage(error: unknown): { reason?: string } {
+  if (isFetchError(error) && error.status === 404) {
+    return { reason: 'This Secret no longer exists in the cluster.' }
+  }
+  // The view reloads the Secret after a failed save, but that read can trail
+  // the cluster by a moment, so the message can't promise it already shows
+  // the change.
+  if (isFetchError(error) && error.status === 409) {
+    return { reason: 'This Secret changed after it loaded. Once the view reloads it, save again to apply your value to the latest version.' }
+  }
+  return { reason: error instanceof Error && error.message ? error.message : undefined }
+}
+
 function CertificateInfoSection({ cert, index, total }: { cert: CertificateInfo; index: number; total: number }) {
   const expiryTextColor = cert.expired || cert.daysLeft <= 7
     ? 'text-red-400'

package/src/components/resources/renderers/ServiceRenderer.test.tsx

@@ -0,0 +1,43 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it } from 'vitest'
+import { ServiceRenderer } from './ServiceRenderer'
+
+const data = { metadata: { name: 'web', namespace: 'team' }, spec: { selector: { app: 'web' } } }
+const props = { data, onCopy: () => {}, copied: null }
+const slice = (name: string, ready = true) => ({
+  metadata: { name },
+  addressType: 'IPv4',
+  endpoints: [{ addresses: ['10.0.0.1'], conditions: { ready } }],
+})
+
+it('renders supplied slices for a selector Service when the host enables the inventory', () => {
+  const html = renderToStaticMarkup(<ServiceRenderer {...props} endpointSlicesEnabled endpointSlices={[slice('published', false)]} />)
+  expect(html).toContain('EndpointSlices')
+  expect(html).toContain('published')
+  expect(html).toContain('0/1')
+  expect(html).not.toContain('Showing the first')
+})
+
+it('keeps the section hidden for selector Services unless the host enables it', () => {
+  expect(renderToStaticMarkup(<ServiceRenderer {...props} endpointSlices={[slice('published')]} />)).not.toContain('EndpointSlices')
+  const selectorless = { ...data, spec: {} }
+  expect(renderToStaticMarkup(<ServiceRenderer {...props} data={selectorless} endpointSlices={[slice('manual')]} />)).toContain('manual')
+})
+
+it('separates unavailable, loading and ready-empty inventory', () => {
+  const error = renderToStaticMarkup(<ServiceRenderer {...props} endpointSlicesEnabled endpointSlices={[]} endpointSlicesError="Read denied" />)
+  expect(error).toContain('EndpointSlice inventory unavailable')
+  expect(error).toContain('Read denied')
+  expect(error).not.toContain('No EndpointSlices found')
+  expect(renderToStaticMarkup(<ServiceRenderer {...props} endpointSlicesEnabled endpointSlicesLoading />)).toContain('Loading EndpointSlices')
+  expect(renderToStaticMarkup(<ServiceRenderer {...props} endpointSlicesEnabled endpointSlices={[]} />)).toContain('No EndpointSlices found')
+})
+
+it('says when the inventory was cut off', () => {
+  const html = renderToStaticMarkup(<ServiceRenderer {...props} endpointSlicesEnabled endpointSlicesTruncated endpointSlices={[slice('a'), slice('b')]} />)
+  expect(html).toContain('Showing the first 2 EndpointSlices.')
+})
+
+it('does not show slice inventory for ExternalName even when supplied', () => {
+  expect(renderToStaticMarkup(<ServiceRenderer {...props} data={{ ...data, spec: { type: 'ExternalName', externalName: 'example.org' } }} endpointSlicesEnabled endpointSlices={[]} />)).not.toContain('EndpointSlices')
+})

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

@@ -18,6 +18,9 @@ interface ServiceRendererProps {
   copied: string | null
   endpointSlices?: any[]
   endpointSlicesLoading?: boolean
+  endpointSlicesEnabled?: boolean
+  endpointSlicesError?: string
+  endpointSlicesTruncated?: boolean
   onNavigate?: (ref: ResourceRef) => void
   renderPortAction?: (props: ServicePortRenderProps) => ReactNode
   renderPortPanel?: (props: ServicePortRenderProps) => ReactNode
@@ -38,7 +41,7 @@ function endpointSliceReadyClass(ready: number, total: number): string {
   return 'status-unhealthy'
 }
 
-export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction, renderPortPanel }: ServiceRendererProps) {
+export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, endpointSlicesEnabled, endpointSlicesError, endpointSlicesTruncated, onNavigate, renderPortAction, renderPortPanel }: ServiceRendererProps) {
   const spec = data.spec || {}
   const ports = spec.ports || []
   const lbIngress = data.status?.loadBalancer?.ingress || []
@@ -111,10 +114,12 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
         </Section>
       )}
 
-      {hasNoSelector && !isExternalName && (
-        <Section title="EndpointSlices" icon={Radio}>
+      {!isExternalName && (hasNoSelector || endpointSlicesEnabled) && (
+        <Section title="EndpointSlices" icon={Radio} defaultExpanded>
           {endpointSlicesLoading ? (
             <div className="text-sm text-theme-text-tertiary">Loading EndpointSlices…</div>
+          ) : endpointSlicesError ? (
+            <AlertBanner variant="warning" title="EndpointSlice inventory unavailable" message={endpointSlicesError} />
           ) : endpointSlices && endpointSlices.length > 0 ? (
             <div className="space-y-2">
               {endpointSlices.map((slice: any) => {
@@ -147,6 +152,9 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
                   </button>
                 )
               })}
+              {endpointSlicesTruncated && (
+                <div className="text-xs text-theme-text-tertiary">Showing the first {endpointSlices.length} EndpointSlices.</div>
+              )}
             </div>
           ) : (
             <div className="text-sm text-theme-text-tertiary">No EndpointSlices found for this Service.</div>

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

@@ -2,10 +2,11 @@ import { Globe, ArrowRight, Network } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
+import { gatewayBackendResourceRef, gatewayParentResourceRef } from '../../../utils/gateway-references'
 
 interface SimpleRouteRendererProps {
   data: any
-  kind: 'TCPRoute' | 'TLSRoute'
+  kind: 'TCPRoute' | 'TLSRoute' | 'UDPRoute'
   onNavigate?: (ref: ResourceRef) => void
 }
 
@@ -35,22 +36,8 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
     ? parentStatuses[0].conditions
     : undefined
 
-  function toGatewayRef(ref: any): ResourceRef {
-    return {
-      kind: 'Gateway',
-      namespace: ref.namespace || routeNs,
-      name: ref.name,
-      group: 'gateway.networking.k8s.io',
-    }
-  }
-
-  function toServiceRef(backend: any): ResourceRef {
-    return {
-      kind: 'Service',
-      namespace: backend.namespace || routeNs,
-      name: backend.name,
-    }
-  }
+  const toParentRef = (ref: any) => gatewayParentResourceRef(ref, routeNs)
+  const toBackendRef = (ref: any) => gatewayBackendResourceRef(ref, routeNs)
 
   return (
     <>
@@ -62,8 +49,8 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
             const cond = (p.conditions || []).find((c: any) => c.type === 'Accepted' && c.status === 'False')
             const gwName = p.parentRef?.name || 'unknown'
             return cond?.reason
-              ? `Gateway "${gwName}": ${cond.reason}${cond.message ? ' — ' + cond.message : ''}`
-              : `Gateway "${gwName}" has not accepted this route.`
+              ? `Parent "${gwName}": ${cond.reason}${cond.message ? ' — ' + cond.message : ''}`
+              : `Parent "${gwName}" has not accepted this route.`
           }).join('; ')}
         />
       )}
@@ -95,12 +82,12 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
             />
           )}
           <Property
-            label="Parent Gateways"
+            label="Parents"
             value={
               parentRefs.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {parentRefs.map((ref: any, i: number) => (
-                    <ResourceRefBadge key={`${ref.namespace || ''}-${ref.name}-${i}`} resourceRef={toGatewayRef(ref)} onClick={onNavigate} />
+                    <ResourceRefBadge key={`${ref.namespace || ''}-${ref.name}-${i}`} resourceRef={toParentRef(ref)} onClick={onNavigate} />
                   ))}
                 </div>
               ) : 'None'
@@ -131,7 +118,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
                       const pct = hasWeights ? Math.round(((b.weight ?? 1) / totalWeight) * 100) : null
                       return (
                         <span key={bi} className="flex items-center gap-1">
-                          <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                          <ResourceRefBadge resourceRef={toBackendRef(b)} onClick={onNavigate} />
                           {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
                           {pct !== null && (
                             <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>

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

@@ -1,11 +1,13 @@
 import { Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { kindToPlural } from '../../../utils/navigation'
+import { objectReferenceToResourceRef } from '../../../utils/navigation'
+import type { ResourceRef } from '../../../types'
+import { CORE_RESOURCES } from '../../../utils/api-resources'
 
 interface VPARendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 function formatResource(value: string | undefined): string {
@@ -17,6 +19,16 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
   const spec = data.spec || {}
   const status = data.status || {}
   const targetRef = spec.targetRef || {}
+  const namespace = data.metadata?.namespace
+  const builtin = !targetRef.apiVersion ? CORE_RESOURCES.find(resource => resource.kind === targetRef.kind) : undefined
+  const builtinAPIVersion = builtin
+    ? (builtin.group ? `${builtin.group}/${builtin.version}` : builtin.version)
+    : targetRef.kind === 'ReplicationController' ? 'v1' : undefined
+  const target = objectReferenceToResourceRef({
+    ...targetRef,
+    apiVersion: targetRef.apiVersion || builtinAPIVersion,
+    namespace,
+  })
   const updatePolicy = spec.updatePolicy || {}
   const resourcePolicy = spec.resourcePolicy || {}
   const containerPolicies = resourcePolicy.containerPolicies || []
@@ -63,15 +75,9 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
       <Section title="Configuration" icon={Cpu}>
         <PropertyList>
           <Property label="Target" value={
-            targetRef.name ? (
-              <ResourceLink
-                name={targetRef.name}
-                kind={kindToPlural(targetRef.kind || 'Deployment')}
-                namespace={data.metadata?.namespace || ''}
-                label={`${targetRef.kind}/${targetRef.name}`}
-                onNavigate={onNavigate}
-              />
-            ) : undefined
+            targetRef.name ? (target ? (
+              <ResourceLink {...target} label={`${targetRef.kind}/${targetRef.name}`} onNavigate={onNavigate} />
+            ) : `${targetRef.kind || 'Unknown kind'}/${targetRef.name}`) : undefined
           } />
           <Property label="Update Mode" value={
             <span className={clsx(

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

@@ -9,8 +9,6 @@ import {
   getBSLRegion,
   getBSLDefault,
   getBSLAccessMode,
-  getBSLLastValidation,
-  getBSLLastSynced,
   getBSLMessage,
 } from '../resource-utils-velero'
 import { VeleroPhaseValue } from './velero-cells'
@@ -111,8 +109,8 @@ export function VeleroBSLRenderer({ data, storedBackups, storedTotal, restorable
           <Property label="Phase" value={
             <VeleroPhaseValue status={bslStatus} phase={status.phase || ''} />
           } />
-          <Property label="Last Validation" value={getBSLLastValidation(data)} />
-          <Property label="Last Synced" value={getBSLLastSynced(data)} />
+          <Property label="Last Validation" value={<TimeValue timestamp={data.status?.lastValidationTime} />} />
+          <Property label="Last Synced" value={<TimeValue timestamp={data.status?.lastSyncedTime} />} />
           {status.lastSyncedRevision && (
             <Property label="Last Synced Revision" value={
               <span className="text-sm font-mono text-theme-text-secondary break-all">{status.lastSyncedRevision}</span>
@@ -235,18 +233,18 @@ export function VeleroBSLRenderer({ data, storedBackups, storedTotal, restorable
                       recovers. */}
                   {bslStatus.level === 'healthy' ? (
                     <>
-                      Most recent restorable point: <TimeValue timestamp={newest} /> ago
+                      Most recent restorable point: <TimeValue timestamp={newest} />
                     </>
                   ) : bslStatus.level === 'unhealthy' ? (
                     <>
                       Most recent point held here, once this location is reachable again:{' '}
-                      <TimeValue timestamp={newest} /> ago
+                      <TimeValue timestamp={newest} />
                     </>
                   ) : (
                     // Unknown: do not imply it is unreachable, and do not call it
                     // restorable either. Say what the timestamp is.
                     <>
-                      Most recent point held here: <TimeValue timestamp={newest} /> ago
+                      Most recent point held here: <TimeValue timestamp={newest} />
                     </>
                   )}
                 </div>

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

@@ -26,7 +26,7 @@ import {
 } from '../resource-utils-velero'
 import { VeleroPhaseValue } from './velero-cells'
 import { veleroPhaseLabel } from '../resource-utils-velero'
-import { formatAge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface VeleroBackupRendererProps {
   data: any
@@ -140,10 +140,10 @@ export function VeleroBackupRenderer({ data, storageLocationPhase, storageLocati
             <Property label="Queue Position" value={String(queuePosition)} />
           )}
           {status.startTimestamp && (
-            <Property label="Started" value={formatAge(status.startTimestamp) + ' ago'} />
+            <Property label="Started" value={<TimeValue timestamp={status.startTimestamp} />} />
           )}
           {status.completionTimestamp && (
-            <Property label="Completed" value={formatAge(status.completionTimestamp) + ' ago'} />
+            <Property label="Completed" value={<TimeValue timestamp={status.completionTimestamp} />} />
           )}
           <Property label="Duration" value={getBackupDuration(data)} />
           <Property label="Expiration" value={getBackupExpiry(data)} />

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

@@ -6,10 +6,10 @@ import {
   getBackupRepositoryVolumeNamespace,
   getBackupRepositoryLocation,
   getBackupRepositoryMaintenanceFrequency,
-  getBackupRepositoryLastMaintenance,
   getBackupRepositoryMessage,
 } from '../resource-utils-velero'
 import { VeleroPhaseValue } from './velero-cells'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface VeleroBackupRepositoryRendererProps {
   data: any
@@ -52,7 +52,7 @@ export function VeleroBackupRepositoryRenderer({ data, onNavigate }: VeleroBacku
               last run is far older than its frequency is the shape of a
               controller that has stopped. The two are shown together so that
               comparison does not need a second screen. */}
-          <Property label="Last Maintenance" value={getBackupRepositoryLastMaintenance(data)} />
+          <Property label="Last Maintenance" value={<TimeValue timestamp={data.status?.lastMaintenanceTime} />} />
           <Property label="Maintenance Frequency" value={getBackupRepositoryMaintenanceFrequency(data)} />
         </PropertyList>
       </Section>

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

@@ -22,8 +22,8 @@ import {
 } from '../resource-utils-velero'
 import { VeleroPhaseValue } from './velero-cells'
 import { veleroPhaseLabel } from '../resource-utils-velero'
-import { formatAge } from '../resource-utils'
 import { VeleroRunMessages, type VeleroRunMessagesFetch } from './VeleroRunMessages'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface VeleroRestoreRendererProps {
   data: any
@@ -125,10 +125,10 @@ export function VeleroRestoreRenderer({ data, messages, onNavigate }: VeleroRest
             />
           } />
           {status.startTimestamp && (
-            <Property label="Started" value={formatAge(status.startTimestamp) + ' ago'} />
+            <Property label="Started" value={<TimeValue timestamp={status.startTimestamp} />} />
           )}
           {status.completionTimestamp && (
-            <Property label="Completed" value={formatAge(status.completionTimestamp) + ' ago'} />
+            <Property label="Completed" value={<TimeValue timestamp={status.completionTimestamp} />} />
           )}
           <Property label="Duration" value={getRestoreDuration(data)} />
           <Property label="Errors" value={

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

@@ -3,13 +3,13 @@ import { Section, PropertyList, Property, ConditionsSection, AlertBanner, Resour
 import {
   getScheduleStatus,
   getScheduleCron,
-  getScheduleLastBackup,
   getSchedulePaused,
   getScheduleTemplate,
   getScheduleUseOwnerReferences,
   getScheduleValidationErrors,
 } from '../resource-utils-velero'
 import { VeleroPhaseValue } from './velero-cells'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface VeleroScheduleRendererProps {
   data: any
@@ -64,7 +64,7 @@ export function VeleroScheduleRenderer({ data, onNavigate }: VeleroScheduleRende
           <Property label="Cron Schedule" value={
             <span className="font-mono text-sm">{getScheduleCron(data)}</span>
           } />
-          <Property label="Last Backup" value={getScheduleLastBackup(data)} />
+          <Property label="Last Backup" value={<TimeValue timestamp={data.status?.lastBackup} fallback="Never" />} />
           <Property label="Paused" value={isPaused ? 'Yes' : 'No'} />
           <Property label="Use Owner References" value={getScheduleUseOwnerReferences(data) ? 'Yes' : 'No'} />
         </PropertyList>

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

@@ -4,8 +4,8 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_BAR_COLORS, SEVERITY_TEXT_COLORS, SEVERITY_ORDER, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface VulnerabilityReportRendererProps {
   data: any
@@ -161,7 +161,7 @@ export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendere
             } />
           )}
           <Property label="Scanner" value={scanner.name ? `${scanner.name} ${scanner.version || ''}`.trim() : '-'} />
-          <Property label="Scanned" value={report.updateTimestamp ? formatAge(report.updateTimestamp) + ' ago' : '-'} />
+          <Property label="Scanned" value={<TimeValue timestamp={report.updateTimestamp} />} />
         </PropertyList>
       </Section>
 

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

@@ -1,9 +1,10 @@
 import { Play, Clock, CheckCircle, XCircle, Loader2, SkipForward, PauseCircle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatAge, formatDuration } from '../resource-utils'
+import { formatDuration } from '../resource-utils'
 import { buildWorkflowExecutionModel, flattenWorkflowExecution, WorkflowExecutionModel, WorkflowExecutionNode, WorkflowTemplateReference } from '../../../utils/workflow-execution'
 import { SEVERITY_TEXT } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface WorkflowRendererProps {
   data: any
@@ -145,8 +146,8 @@ export function WorkflowRenderer({ data, onNavigate }: WorkflowRendererProps) {
             </span>
           } />
           {duration && <Property label="Duration" value={duration} />}
-          {status.startedAt && <Property label="Started" value={formatAge(status.startedAt)} />}
-          <Property label="Finished" value={status.finishedAt ? formatAge(status.finishedAt) : 'Running...'} />
+          {status.startedAt && <Property label="Started" value={<TimeValue timestamp={status.startedAt} />} />}
+          <Property label="Finished" value={<TimeValue timestamp={status.finishedAt} fallback="Running..." />} />
           {workflowTemplateRef && <Property label="Definition" value={<TemplateRefLink refInfo={workflowTemplateRef} onNavigate={onNavigate} />} />}
           {status.progress && (
             <Property label="Progress" value={status.progress} />

package/src/components/resources/renderers/kyverno-modern-cells.tsx

@@ -71,7 +71,7 @@ export function KyvernoModernPolicyCell({ resource, column }: { resource: any; c
           </span>
         )
       }
-      return <span className="text-sm text-theme-text-secondary">{formatAge(last)} ago</span>
+      return <span className="text-sm text-theme-text-secondary">{formatAge(last)}</span>
     }
     case 'schedule': {
       const schedule = getKyvernoSchedule(resource)

package/src/components/resources/renderers/rollout/ReplicaSetProgression.tsx

@@ -1,10 +1,10 @@
 import { useState, useId } from 'react'
 import { Box } from 'lucide-react'
 import { clsx } from 'clsx'
-import { formatAge } from '../../resource-utils'
 import { Collapse, CollapseChevron, disclosurePanelId } from '../../../ui/Collapse'
 import { revisionRoleBadges } from '../../../shared/ResourceActionsBar'
 import type { WorkloadRevision, WorkloadPodInfo } from '../../../../types'
+import { formatRelativeAgeTime } from '../../../../utils/format'
 
 interface ReplicaSetProgressionProps {
   revisions: WorkloadRevision[]
@@ -90,7 +90,7 @@ export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }
                 ))}
               </div>
               <span className="shrink-0 text-xs tabular-nums text-theme-text-tertiary">{rev.replicas ?? 0} replicas</span>
-              <span className="shrink-0 text-xs text-theme-text-tertiary">{formatAge(rev.createdAt)}</span>
+              <span className="shrink-0 text-xs text-theme-text-tertiary">{formatRelativeAgeTime(rev.createdAt)}</span>
             </button>
             <Collapse open={isOpen} mountLazily id={disclosurePanelId(panelBase, rev.number)}>
               <div className="space-y-0.5 border-t border-theme-border/50 px-2 py-1.5 pl-8">

package/src/components/resources/resource-utils-capi.ts

@@ -73,7 +73,7 @@ export function getClusterStatus(resource: any): StatusBadge {
 }
 
 export function getClusterClass(resource: any): string {
-  return resource.spec?.topology?.class || '-'
+  return resource.spec?.topology?.classRef?.name || resource.spec?.topology?.class || '-'
 }
 
 export function getClusterVersion(resource: any): string {