@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -23,11 +23,13 @@ import {
   getCNPGWALArchivingFailure,
   getCNPGLastBackupFailure,
   classifyCNPGClusterPhase,
+  cnpgBlockedPhaseExplanation,
   getCNPGClusterAvailability,
   CNPG_BARMAN_OBJECTSTORE_GROUP,
 } from '../resource-utils-cnpg'
 import { formatAge } from '../resource-utils'
 import { RecoveryTime } from './CNPGShared'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface CNPGClusterRendererProps {
   /** Filled by the host with the Databases, Publications and Subscriptions
@@ -99,6 +101,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
   const isFailover = phaseBucket === 'failing'
   const isSwitchover = phase === 'Switchover in progress'
   const isTerminal = phaseBucket === 'terminal'
+  const blocked = cnpgBlockedPhaseExplanation(phase, data.status?.phaseReason)
   // "The cluster is otherwise serving normally, so nothing else here will look
   // wrong" is a claim about the REST OF THIS DRAWER, so any other banner
   // falsifies it. It can no longer lean on isDegraded now that a
@@ -112,11 +115,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
     <>
       {/* Problem alerts */}
       {isTerminal && (
-        <AlertBanner
-          variant="error"
-          title="Reconciliation has stopped"
-          message={`${phase}. This state does not resolve on its own — the operator has stopped reconciling this cluster and it needs manual intervention.`}
-        />
+        <AlertBanner variant="error" title={blocked.title} message={blocked.message} />
       )}
       {hasSplitBrain && (
         <AlertBanner
@@ -195,7 +194,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
           variant="warning"
           title="Last backup failed"
           message={
-            `The most recent backup attempt failed${lastBackupFailure.lastTransitionTime ? ` ${formatAge(lastBackupFailure.lastTransitionTime)} ago` : ''}.` +
+            `The most recent backup attempt failed${lastBackupFailure.lastTransitionTime ? ` ${formatRelativeAgeTime(lastBackupFailure.lastTransitionTime)}` : ''}.` +
             (lastBackupFailure.message ? ` Operator reported: ${lastBackupFailure.message}` : '')
           }
         />
@@ -342,7 +341,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
       {/* Storage */}
       <Section title="Storage" icon={HardDrive} defaultExpanded>
         <PropertyList>
-          <Property label="Data Size" value={getCNPGClusterStorage(data)} />
+          <Property label="Requested size" value={getCNPGClusterStorage(data)} />
           <Property label="Storage Class" value={getCNPGClusterStorageClass(data)} />
           {/* Requested size and class are spec-side intentions. These are what the
               operator reports about the volumes that actually exist. */}
@@ -363,7 +362,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
           <div className="mt-2 pt-2 border-t border-theme-border">
             <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">WAL Storage</div>
             <PropertyList>
-              {walStorage.size && <Property label="Size" value={walStorage.size} />}
+              {walStorage.size && <Property label="Requested size" value={walStorage.size} />}
               {walStorage.storageClass && <Property label="Storage Class" value={walStorage.storageClass} />}
             </PropertyList>
           </div>

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

@@ -195,6 +195,31 @@ export function CNPGSubscriptionRenderer({
   )
 }
 
+/**
+ * DatabaseRole (CNPG 1.30+) — one PostgreSQL role as its own object. The
+ * Cluster's spec.managed.roles wins for the same name; the operator then
+ * reports this object not applied, and that message renders verbatim above.
+ */
+export function CNPGDatabaseRoleRenderer({ data, onNavigate }: { data: any; onNavigate?: Nav }) {
+  const spec = data?.spec ?? {}
+  const details: Array<{ label: string; value: React.ReactNode }> = [
+    { label: 'Role', value: spec.name ?? '-' },
+    { label: 'Login', value: spec.login === true ? 'Allowed' : 'Not allowed' },
+  ]
+  if (spec.superuser === true) details.push({ label: 'Superuser', value: 'Yes' })
+  if (spec.disablePassword === true) details.push({ label: 'Password', value: 'Disabled' })
+  else if (spec.passwordSecret?.name) details.push({ label: 'Password Secret', value: spec.passwordSecret.name })
+  if (spec.validUntil) details.push({ label: 'Valid Until', value: spec.validUntil })
+  if (Array.isArray(spec.inRoles) && spec.inRoles.length > 0) details.push({ label: 'Member Of', value: spec.inRoles.join(', ') })
+  if (spec.connectionLimit != null && spec.connectionLimit !== -1) details.push({ label: 'Connection Limit', value: String(spec.connectionLimit) })
+  const cc = spec.clientCertificate
+  if (cc && cc.enabled !== false) {
+    const exp = data?.status?.clientCertificate?.expiration
+    details.push({ label: 'Client Certificate', value: `${data?.metadata?.name}-client-cert · ${exp ? `expires ${exp}` : 'expiry not reported'}` })
+  }
+  return <CNPGDeclarativeRenderer data={data} onNavigate={onNavigate} details={details} />
+}
+
 /**
  * ImageCatalog and ClusterImageCatalog — the PostgreSQL images a Cluster may
  * use, pinned per major version.

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

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CNPGScheduledBackupRenderer } from './CNPGScheduledBackupRenderer'
+
+const schedule = (name: string, parameters?: { barmanObjectName?: string; serverName?: string }) => ({
+  apiVersion: 'postgresql.cnpg.io/v1',
+  kind: 'ScheduledBackup',
+  metadata: { name: 'nightly', namespace: 'db' },
+  spec: { cluster: { name: 'pg' }, schedule: '0 0 0 * * *', method: 'plugin', pluginConfiguration: { name, parameters } },
+})
+
+describe('CNPGScheduledBackupRenderer plugin destination', () => {
+  it.each([undefined, { barmanObjectName: 'ignored-store', serverName: 'ignored-server' }, { serverName: 'ignored-server' }])('explains the Cluster destination and ignored parameters: %j', (parameters) => {
+    const out = renderToString(<CNPGScheduledBackupRenderer data={schedule('barman-cloud.cloudnative-pg.io', parameters)} onNavigate={() => {}} />)
+    expect(out).toContain('From the Cluster')
+    expect(out).toContain('barman-cloud plugin')
+    expect(out).not.toContain('Object Store')
+    expect(out).not.toContain('ignored-store')
+    expect(out).not.toContain('ignored-server')
+    expect(out.match(/<button[^>]*>(?:pg|ignored-store|ignored-server)<\/button>/g)).toHaveLength(1)
+    expect(out.includes('Ignored by the barman-cloud plugin')).toBe(!!parameters)
+  })
+
+  it('does not assert a third-party parameter is an ObjectStore destination', () => {
+    const out = renderToString(<CNPGScheduledBackupRenderer data={schedule('other.example.com', { barmanObjectName: 'custom-store' })} />)
+    expect(out).toContain('other.example.com')
+    expect(out).toContain('Unknown: Radar does not model this plugin')
+    expect(out).not.toContain('custom-store')
+    expect(out).not.toContain('Object Store')
+    expect(out).not.toContain('Ignored by')
+  })
+})

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

@@ -1,17 +1,17 @@
 import { Clock, Database } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { CronValue } from '../../ui/ScheduleValue'
+import { TimeValue } from '../../ui/ScheduleValue'
 import {
   getCNPGScheduledBackupCluster,
   getCNPGScheduleCron,
   getCNPGScheduledBackupMethod,
-  getCNPGScheduledBackupLastSchedule,
   getCNPGScheduledBackupNextSchedule,
   getCNPGScheduledBackupIsSuspended,
   getCNPGScheduledBackupIsImmediate,
   getCNPGBackupPlugin,
   getCNPGScheduledBackupOwnerRef,
-  CNPG_BARMAN_OBJECTSTORE_GROUP,
+  CNPG_BARMAN_PLUGIN_NAME,
 } from '../resource-utils-cnpg'
 
 interface CNPGScheduledBackupRendererProps {
@@ -39,7 +39,7 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
       <Section title="Schedule" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Cron Expression" value={<CronValue cron={getCNPGScheduleCron(data)} dialect="seconds" />} />
-          <Property label="Last Schedule" value={getCNPGScheduledBackupLastSchedule(data)} />
+          <Property label="Last Schedule" value={<TimeValue timestamp={data.status?.lastScheduleTime} />} />
           <Property label="Next Schedule" value={getCNPGScheduledBackupNextSchedule(data)} />
           <Property label="Suspended" value={isSuspended ? 'Yes' : 'No'} />
           <Property label="Immediate" value={getCNPGScheduledBackupIsImmediate(data) ? 'Yes' : 'No'} />
@@ -64,24 +64,16 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
             return clusterName
           })()} />
           <Property label="Method" value={getCNPGScheduledBackupMethod(data)} />
-          {/* Under the plugin method the destination lives on an ObjectStore in
-              another API group, so naming it is the only route from here to
-              where these backups will actually land. */}
           {schedulePlugin && <Property label="Plugin" value={schedulePlugin.name} />}
-          {schedulePlugin?.parameters?.barmanObjectName && (
+          {schedulePlugin && (
             <Property
-              label="Object Store"
-              value={
-                <ResourceLink
-                  name={schedulePlugin.parameters.barmanObjectName}
-                  kind="objectstores"
-                  group={CNPG_BARMAN_OBJECTSTORE_GROUP}
-                  namespace={data.metadata?.namespace || ''}
-                  onNavigate={onNavigate}
-                />
-              }
+              label="Destination"
+              value={schedulePlugin.name === CNPG_BARMAN_PLUGIN_NAME ? "From the Cluster's barman-cloud plugin" : 'Unknown: Radar does not model this plugin’s destination'}
             />
           )}
+          {schedulePlugin?.name === CNPG_BARMAN_PLUGIN_NAME && schedulePlugin.parameters && Object.keys(schedulePlugin.parameters).length > 0 && (
+            <Property label="Plugin parameters" value="Ignored by the barman-cloud plugin; the destination comes from the Cluster" />
+          )}
           <Property label="Owner Reference" value={getCNPGScheduledBackupOwnerRef(data)} />
         </PropertyList>
       </Section>

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

@@ -1,4 +1,4 @@
-import { formatAge } from '../resource-utils'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 /**
  * A recovery point, stated absolutely with the interval beside it.
@@ -21,7 +21,7 @@ export function RecoveryTime({ at }: { at: string }) {
       <span>{d.toISOString().replace('T', ' ').replace(/\.\d+Z$/, ' UTC')}</span>
       {/* One interpolation, so the age and its unit stay a single text node
           rather than being split by a renderer comment marker. */}
-      <span className="text-xs text-theme-text-tertiary shrink-0">{`${formatAge(at)} ago`}</span>
+      <span className="text-xs text-theme-text-tertiary shrink-0">{formatRelativeAgeTime(at)}</span>
     </span>
   )
 }

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

@@ -4,10 +4,10 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../../ui/Collapse'
 import { Input } from '../../ui/Input'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ClusterComplianceReportRendererProps {
   data: any
@@ -97,7 +97,7 @@ export function ClusterComplianceReportRenderer({ data }: ClusterComplianceRepor
           {compliance.description && <Property label="Description" value={compliance.description} />}
           {compliance.version && <Property label="Version" value={compliance.version} />}
           {compliance.platform && <Property label="Platform" value={compliance.platform} />}
-          <Property label="Last Updated" value={status.updateTimestamp ? formatAge(status.updateTimestamp) + ' ago' : '-'} />
+          <Property label="Last Updated" value={<TimeValue timestamp={status.updateTimestamp} />} />
         </PropertyList>
       </Section>
 

package/src/components/resources/renderers/CompositeRenderer.navigation.test.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { CompositeRenderer } from './CompositeRenderer'
+import { initNavigationMap, resetNavigationMap } from '../../../utils/navigation'
+
+describe('CompositeRenderer composed-resource links', () => {
+  it('resolves a composed Kind within its own API group, not the core Kind it reuses', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    initNavigationMap([
+      { group: '', version: 'v1', kind: 'Node', name: 'nodes', namespaced: false, isCrd: false, verbs: ['get'] },
+      { group: 'relationships.radar.test', version: 'v1', kind: 'Node', name: 'workerhosts', namespaced: false, isCrd: true, verbs: ['get'] },
+    ])
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    try {
+      await act(async () => root.render(<CompositeRenderer onNavigate={onNavigate} data={{
+        apiVersion: 'platform.example.org/v1alpha1',
+        kind: 'Database',
+        metadata: { name: 'example' },
+        spec: { resourceRefs: [{ apiVersion: 'relationships.radar.test/v1', kind: 'Node', name: 'worker' }] },
+      }} />))
+      const link = [...container.querySelectorAll('button')].find(button => button.textContent === 'worker')
+      expect(link).toBeDefined()
+      await act(async () => link!.click())
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'workerhosts', group: 'relationships.radar.test', name: 'worker' }))
+    } finally {
+      await act(async () => root.unmount())
+      resetNavigationMap()
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -14,7 +14,7 @@ import {
   isCrossplanePaused,
   type CrossplaneResourceRef,
 } from '../resource-utils-crossplane'
-import { kindToPlural } from '../../../utils/navigation'
+import { kindToPluralWithGroup } from '../../../utils/navigation'
 import type { StatusBadge } from '../resource-utils'
 
 /**
@@ -158,7 +158,7 @@ export function CompositeRenderer({ data, onNavigate, composedRefStatuses, compo
               value={
                 <ResourceLink
                   name={boundXR.name}
-                  kind={kindToPlural(boundXR.kind)}
+                  kind={kindToPluralWithGroup(boundXR.kind, groupFromApiVersion(boundXR.apiVersion))}
                   namespace={boundXR.namespace || ''}
                   group={groupFromApiVersion(boundXR.apiVersion) || undefined}
                   onNavigate={onNavigate}
@@ -242,8 +242,8 @@ function ComposedRefRow({
   statusEntry?: ComposedRefStatus
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }) {
-  const kindPlural = kindToPlural(ref_.kind)
   const group = groupFromApiVersion(ref_.apiVersion)
+  const kindPlural = kindToPluralWithGroup(ref_.kind, group)
   return (
     <div className="flex items-center gap-2 py-1 px-2 rounded hover:bg-theme-hover text-sm">
       <Box className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />

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

@@ -4,7 +4,7 @@ import { Layers, GitBranch, FileText, Boxes, ScrollText } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { CodeViewer } from '../../ui/CodeViewer'
-import { kindToPlural } from '../../../utils/navigation'
+import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface CompositionRendererProps {
   data: any
@@ -74,11 +74,11 @@ function CompositionBody({ data, onNavigate, revision }: CompositionRendererProp
           <div className="mt-2 text-xs text-theme-text-secondary">
             Backed by XRD:{' '}
             <ResourceLink
-              name={`${kindToPlural(xrdKind)}.${xrdGroup}`}
+              name={`${kindToPluralWithGroup(xrdKind, xrdGroup)}.${xrdGroup}`}
               kind="compositeresourcedefinitions"
               namespace=""
               onNavigate={onNavigate}
-              label={<span className="font-mono">{kindToPlural(xrdKind)}.{xrdGroup}</span>}
+              label={<span className="font-mono">{kindToPluralWithGroup(xrdKind, xrdGroup)}.{xrdGroup}</span>}
             />
           </div>
         )}

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

@@ -3,9 +3,9 @@ import { ShieldCheck, CheckCircle2, XCircle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure, disclosurePanelId } from '../../ui/Collapse'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER, TrivyAlertBanner } from './trivy-shared'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ConfigAuditReportRendererProps {
   data: any
@@ -115,7 +115,7 @@ export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererPro
       <Section title="Report Overview" icon={ShieldCheck}>
         <PropertyList>
           <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/ContourExactReferenceNavigation.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { ContourHTTPProxyRenderer } from './ContourHTTPProxyRenderer'
+
+async function rendered(element: ReactNode, check: (container: HTMLDivElement) => Promise<void> | void) {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+ const container = document.createElement('div')
+ const root = createRoot(container)
+ try { await act(async () => root.render(element)); await check(container) }
+ finally { await act(async () => root.unmount()); Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false }) }
+}
+async function click(container: HTMLDivElement, text: string) {
+ const button = [...container.querySelectorAll('button')].find(button => button.textContent === text)
+ expect(button, `missing link ${text}`).toBeDefined()
+ await act(async () => button!.click())
+}
+
+describe('exact reference navigation', () => {
+ it.each([['tls/', 'tls'], ['/', 'app']])('resolves Contour TLS secret prefix %s to namespace %s',async(prefix, namespace)=>{
+  const navigate=vi.fn()
+  await rendered(<ContourHTTPProxyRenderer data={{metadata:{namespace:'app'},spec:{virtualhost:{fqdn:'example.test',tls:{secretName:`${prefix}server`,clientValidation:{caSecret:`${prefix}ca`,crlSecret:`${prefix}crl`}}}}}} onNavigate={navigate}/>,async container=>{
+   for(const name of ['server','ca','crl']) {await click(container,`${prefix}${name}`);expect(navigate).toHaveBeenLastCalledWith({kind:'secrets',group:'',namespace,name})}
+  })
+ })
+ it('links valid long Contour Secret names',async()=>{
+  const navigate=vi.fn()
+  const name='a'.repeat(70)
+  await rendered(<ContourHTTPProxyRenderer data={{metadata:{namespace:'app'},spec:{virtualhost:{tls:{secretName:name}}}}} onNavigate={navigate}/>,async container=>{
+   await click(container,name);expect(navigate).toHaveBeenCalledWith({kind:'secrets',group:'',namespace:'app',name})
+  })
+ })
+})

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

@@ -1,6 +1,7 @@
 import { Globe, Route, Layers, Lock } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
 import {
+  getContourSecretReference,
   getHTTPProxyFQDN,
   getHTTPProxyRouteCount,
   getHTTPProxyServiceCount,
@@ -174,16 +175,16 @@ export function ContourHTTPProxyRenderer({ data, onNavigate }: ContourHTTPProxyR
       {tls && (
         <Section title="TLS" icon={Lock} defaultExpanded>
           <PropertyList>
-            {tls.secretName && (
-              <Property label="Secret" value={
-                <ResourceLink
-                  name={tls.secretName}
-                  kind="secrets"
-                  namespace={ns}
-                  onNavigate={onNavigate}
-                />
-              } />
-            )}
+            {[
+              { label: 'Secret', name: tls.secretName },
+              { label: 'Client CA Secret', name: tls.clientValidation?.caSecret },
+              { label: 'Client CRL Secret', name: tls.clientValidation?.crlSecret },
+            ].filter(item => item.name).map(item => {
+              const ref = getContourSecretReference(item.name, ns)
+              return <Property key={item.label} label={item.label} value={ref
+                ? <ResourceLink {...ref} kind="secrets" group="" label={item.name} onNavigate={onNavigate} />
+                : item.name} />
+            })}
             {tls.minimumProtocolVersion && (
               <Property label="Min Protocol" value={tls.minimumProtocolVersion} />
             )}

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

@@ -1,6 +1,8 @@
 import { Clock, Pause } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatAge, cronToHuman } from '../resource-utils'
+import { cronToHuman } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface CronJobRendererProps {
   data: any
@@ -53,7 +55,7 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
         <AlertBanner
           variant="error"
           title="Recent Jobs Failing"
-          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatAge(status.lastSuccessfulTime)}. Check job history and pod logs.</>}
+          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatRelativeAgeTime(status.lastSuccessfulTime, 'never')}. Check job history and pod logs.</>}
         />
       )}
 
@@ -62,8 +64,8 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
           <Property label="Schedule" value={spec.schedule} />
           <Property label="Human" value={cronToHuman(spec.schedule)} />
           <Property label="Suspend" value={spec.suspend ? 'Yes' : 'No'} />
-          <Property label="Last Schedule" value={status.lastScheduleTime ? formatAge(status.lastScheduleTime) : 'Never'} />
-          <Property label="Last Success" value={status.lastSuccessfulTime ? formatAge(status.lastSuccessfulTime) : 'Never'} />
+          <Property label="Last Schedule" value={<TimeValue timestamp={status.lastScheduleTime} fallback="Never" />} />
+          <Property label="Last Success" value={<TimeValue timestamp={status.lastSuccessfulTime} fallback="Never" />} />
           <Property label="Active Jobs" value={status.active?.length || 0} />
         </PropertyList>
       </Section>

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

@@ -1,6 +1,7 @@
 import { Clock, Pause } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink, ConditionsSection } from '../../ui/drawer-components'
-import { formatAge, cronToHuman } from '../resource-utils'
+import { cronToHuman } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface CronWorkflowRendererProps {
   data: any
@@ -45,7 +46,7 @@ export function CronWorkflowRenderer({ data, onNavigate }: CronWorkflowRendererP
           <Property label="Timezone" value={spec.timezone || 'Cluster default'} />
           <Property label="Suspend" value={isSuspended ? 'Yes' : 'No'} />
           <Property label="Concurrency" value={spec.concurrencyPolicy || 'Allow'} />
-          <Property label="Last Scheduled" value={status.lastScheduledTime ? formatAge(status.lastScheduledTime) : 'Never'} />
+          <Property label="Last Scheduled" value={<TimeValue timestamp={status.lastScheduledTime} fallback="Never" />} />
           <Property label="Active Workflows" value={active.length} />
         </PropertyList>
       </Section>

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

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { EndpointSliceRenderer } from './EndpointSliceRenderer'
+import { initNavigationMap, resetNavigationMap } from '../../../utils/navigation'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+it('navigates to the labeled Service as a core-group resource', async () => {
+  const onNavigate = vi.fn()
+  const element = document.createElement('div')
+  const root = createRoot(element)
+  const slice = {
+    apiVersion: 'discovery.k8s.io/v1',
+    kind: 'EndpointSlice',
+    metadata: { name: 'web-abc', namespace: 'team', labels: { 'kubernetes.io/service-name': 'web' } },
+  }
+  await act(async () => { root.render(<EndpointSliceRenderer data={slice} onNavigate={onNavigate} />) })
+  const button = [...element.querySelectorAll('button')].find(b => b.textContent === 'web')
+  expect(button).toBeDefined()
+  await act(async () => { button!.click() })
+  expect(onNavigate).toHaveBeenCalledWith({ kind: 'Service', group: '', namespace: 'team', name: 'web' })
+  await act(async () => root.unmount())
+})
+
+describe('EndpointSliceRenderer target navigation', () => {
+  it('navigates exact target identity, controller-written Pod targets and Node placement', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    initNavigationMap([{ group: 'custom.example.io', version: 'v1', kind: 'Node', name: 'nodes', namespaced: false, isCrd: true, verbs: ['get'] }])
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const click = async (label: string) => {
+      const button = [...container.querySelectorAll('button')].find(button => button.textContent === label)
+      expect(button).toBeDefined()
+      await act(async () => button!.click())
+    }
+    try {
+      await act(async () => root.render(<EndpointSliceRenderer onNavigate={onNavigate} data={{ metadata: { namespace: 'slice-team' }, endpoints: [
+        { addresses: ['10.0.0.1'], nodeName: 'worker', targetRef: { apiVersion: 'custom.example.io/v1', kind: 'Node', namespace: 'irrelevant', name: 'custom-target' } },
+        { addresses: ['10.0.0.2'], targetRef: { apiVersion: 'v1', kind: 'Pod', namespace: 'target-team', name: 'backend' } },
+        { addresses: ['10.0.0.3'], targetRef: { kind: 'Pod', namespace: 'slice-team', name: 'controller-written', uid: 'pod-uid' } },
+        { addresses: ['10.0.0.4'], targetRef: { kind: 'Widget', namespace: 'slice-team', name: 'unknown-api' } },
+      ] }} />))
+      await click('Node custom-target')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'Node', group: 'custom.example.io', namespace: '', name: 'custom-target' })
+      await click('Pod target-team/backend')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'Pod', group: '', namespace: 'target-team', name: 'backend' })
+      await click('Pod slice-team/controller-written')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'Pod', group: '', namespace: 'slice-team', name: 'controller-written' })
+      await click('worker')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'Node', group: '', namespace: '', name: 'worker' })
+      expect([...container.querySelectorAll('button')].some(button => button.textContent?.includes('unknown-api'))).toBe(false)
+      expect(container.textContent).toContain('unknown-api')
+    } finally {
+      await act(async () => root.unmount())
+      resetNavigationMap()
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
+import { objectReferenceToResourceRef } from '../../../utils/navigation'
 
 interface EndpointSliceRendererProps {
   data: any
@@ -17,8 +18,7 @@ function endpointAddressCount(endpoints: any[]): number {
   return endpoints.reduce((total, endpoint) => total + (endpoint.addresses?.length || 0), 0)
 }
 
-function endpointTargetLabel(endpoint: any): string | null {
-  const target = endpoint.targetRef
+function endpointTargetLabel(target: any): string | null {
   if (!target?.kind || !target?.name) return null
   return target.namespace ? `${target.kind} ${target.namespace}/${target.name}` : `${target.kind} ${target.name}`
 }
@@ -47,7 +47,7 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                 <button
                   type="button"
                   className="text-sm text-accent-text hover:underline font-medium"
-                  onClick={() => onNavigate({ kind: 'Service', namespace: metadata.namespace, name: serviceName })}
+                  onClick={() => onNavigate({ kind: 'Service', group: '', namespace: metadata.namespace, name: serviceName })}
                 >
                   {serviceName}
                 </button>
@@ -85,8 +85,8 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
           <div className="space-y-2">
             {endpoints.map((endpoint: any, index: number) => {
               const ready = isEndpointReady(endpoint)
-              const targetLabel = endpointTargetLabel(endpoint)
-              const target = endpoint.targetRef
+              const targetRef = objectReferenceToResourceRef(endpoint.targetRef)
+              const targetLabel = endpointTargetLabel(targetRef || endpoint.targetRef)
               return (
                 <div key={`${endpoint.addresses?.join(',') || 'endpoint'}-${index}`} className="card-inner text-sm space-y-3">
                   <div className="flex items-start justify-between gap-3">
@@ -98,20 +98,15 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                           </Badge>
                         ))}
                       </div>
-                      {targetLabel && (
+                      {targetLabel && (onNavigate && targetRef ? (
                         <button
                           type="button"
                           className="text-xs text-theme-text-secondary hover:text-accent-text"
-                          disabled={!onNavigate}
-                          onClick={() => onNavigate?.({
-                            kind: target.kind,
-                            namespace: target.namespace || metadata.namespace,
-                            name: target.name,
-                          })}
+                          onClick={() => onNavigate(targetRef)}
                         >
                           {targetLabel}
                         </button>
-                      )}
+                      ) : <span className="text-xs text-theme-text-secondary">{targetLabel}</span>)}
                     </div>
                     <div className="flex flex-wrap justify-end gap-1.5 shrink-0">
                       <span className={clsx('badge-sm', ready ? 'status-healthy' : 'status-unhealthy')}>
@@ -127,7 +122,13 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                   </div>
                   {(endpoint.nodeName || endpoint.zone) && (
                     <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-theme-text-tertiary">
-                      {endpoint.nodeName && <span>Node: {endpoint.nodeName}</span>}
+                      {endpoint.nodeName && <span>Node: {onNavigate ? (
+                        <button
+                          type="button"
+                          className="hover:text-accent-text hover:underline"
+                          onClick={() => onNavigate({ kind: 'Node', group: '', namespace: '', name: endpoint.nodeName })}
+                        >{endpoint.nodeName}</button>
+                      ) : endpoint.nodeName}</span>}
                       {endpoint.zone && <span>Zone: {endpoint.zone}</span>}
                     </div>
                   )}

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

@@ -2,9 +2,9 @@ import { AlertTriangle, Info, Clock, Target, Server, Hash } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Badge } from '../../ui/Badge'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import type { NavigateToResource } from '../../../utils/navigation'
 import { apiVersionToGroup, kindToPluralWithGroup } from '../../../utils/navigation'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface EventRendererProps {
   data: any
@@ -118,10 +118,10 @@ export function EventRenderer({ data, onNavigate }: EventRendererProps) {
         <PropertyList>
           {count > 1 && <Property label="Count" value={count} />}
           {firstTimestamp && (
-            <Property label="First Seen" value={formatAge(firstTimestamp)} />
+            <Property label="First Seen" value={<TimeValue timestamp={firstTimestamp} />} />
           )}
           {lastTimestamp && (
-            <Property label="Last Seen" value={formatAge(lastTimestamp)} />
+            <Property label="Last Seen" value={<TimeValue timestamp={lastTimestamp} />} />
           )}
           {firstTimestamp && lastTimestamp && firstTimestamp !== lastTimestamp && (
             <Property label="Duration" value={calculateDuration(firstTimestamp, lastTimestamp)} />