@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -1,8 +1,8 @@
 import { Activity, Boxes, Server } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner, ConditionsSection } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { canaryStepTemplateRefs } from './RolloutRenderer'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ExperimentRendererProps {
   data: any
@@ -72,7 +72,7 @@ export function ExperimentRenderer({ data, onNavigate }: ExperimentRendererProps
           <Property label="Phase" value={<span className={clsx('badge', phaseClass(phase))}>{phase}</span>} />
           <Property label="Duration" value={spec.duration} />
           <Property label="Message" value={status.message} />
-          <Property label="Available At" value={status.availableAt ? formatAge(status.availableAt) : undefined} />
+          <Property label="Available At" value={status.availableAt ? <TimeValue timestamp={status.availableAt} /> : undefined} />
           {ownerRollout && (
             <Property
               label="Rollout"

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

@@ -3,10 +3,10 @@ import { KeyRound } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
-import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
 import { pluralize } from '../../../utils/pluralize'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface ExposedSecretReportRendererProps {
   data: any
@@ -45,7 +45,7 @@ export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendere
           <Property label="Container" value={containerName} />
           <Property label="Image" value={image} />
           <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/ExternalSecretRenderer.tsx

@@ -1,10 +1,10 @@
 import { KeyRound, RefreshCw, CloudCog } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
+import { TimeValue } from '../../ui/ScheduleValue'
 import {
   getExternalSecretStatus,
   getExternalSecretStore,
   getExternalSecretRefreshInterval,
-  getExternalSecretLastSync,
   getExternalSecretTargetName,
   getExternalSecretTargetCreationPolicy,
   getExternalSecretTargetDeletionPolicy,
@@ -47,7 +47,7 @@ export function ExternalSecretRenderer({ data, onNavigate }: ExternalSecretRende
       <Section title="Sync Status" icon={RefreshCw} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={esStatus.text} />
-          <Property label="Last Sync" value={getExternalSecretLastSync(data)} />
+          <Property label="Last Sync" value={<TimeValue timestamp={data.status?.refreshTime} />} />
           <Property label="Refresh Interval" value={getExternalSecretRefreshInterval(data)} />
           <Property label="Target Secret" value={(() => {
             const targetName = getExternalSecretTargetName(data)

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

@@ -1,9 +1,9 @@
 import { Package, Settings, CheckCircle2, History, FileCode2, GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface FluxHelmReleaseRendererProps {
   data: any
@@ -249,13 +249,13 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
             {lastRelease.firstDeployed && (
               <Property
                 label="First Deployed"
-                value={formatAge(lastRelease.firstDeployed)}
+                value={<TimeValue timestamp={lastRelease.firstDeployed} />}
               />
             )}
             {lastRelease.lastDeployed && (
               <Property
                 label="Last Deployed"
-                value={formatAge(lastRelease.lastDeployed)}
+                value={<TimeValue timestamp={lastRelease.lastDeployed} />}
               />
             )}
           </PropertyList>
@@ -319,7 +319,7 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -2,6 +2,7 @@ import { Globe, ArrowRight, Network, Filter } 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 GRPCRouteRendererProps {
   data: any
@@ -32,22 +33,8 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
     ? 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 (
     <>
@@ -59,8 +46,8 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
             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('; ')}
         />
       )}
@@ -90,12 +77,12 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
             }
           />
           <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'
@@ -129,7 +116,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                     <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       <span className="italic text-theme-text-tertiary">all</span>
                       <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                      <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                      <ResourceRefBadge resourceRef={toBackendRef(backendRefs[0])} onClick={onNavigate} />
                       {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
                     </div>
                   )}
@@ -141,7 +128,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                         return (
                           <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
                             <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                            <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>}
                           </div>
@@ -176,7 +163,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                       {matchIdx === 0 && backendRefs.length === 1 && (
                         <>
                           <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                          <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                          <ResourceRefBadge resourceRef={toBackendRef(backendRefs[0])} onClick={onNavigate} />
                           {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
                         </>
                       )}
@@ -189,7 +176,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                       return (
                         <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
                           <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                          <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>}
                         </div>

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

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { HTTPRouteRenderer } from './HTTPRouteRenderer'
+import { GRPCRouteRenderer } from './GRPCRouteRenderer'
+import { SimpleRouteRenderer } from './SimpleRouteRenderer'
+
+const backend = { name: 'custom-backend', kind: 'Widget', group: 'relationships.radar.test', namespace: 'backends' }
+const parent = { name: 'mesh-parent', kind: 'Service', group: '', namespace: 'mesh' }
+
+function routeData(kind: string) {
+  return {
+    metadata: { name: 'route', namespace: 'app' },
+    status: { parents: [{ parentRef: parent, conditions: [{ type: 'Accepted', status: 'False', reason: 'Rejected' }] }] },
+    spec: {
+      parentRefs: [parent],
+      rules: [{
+        backendRefs: [backend, { name: 'default-service', port: 8080 }],
+        ...(kind === 'HTTPRoute' ? { filters: [{ type: 'RequestMirror', requestMirror: { backendRef: { ...backend, name: 'mirror' } } }] } : {}),
+      }],
+    },
+  }
+}
+
+describe('Gateway route reference navigation', () => {
+  it.each(['HTTPRoute', 'GRPCRoute', 'TCPRoute', 'TLSRoute'] as const)('preserves backend and parent identities in %s', async kind => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const data = routeData(kind)
+    const click = async (name: string) => {
+      const button = [...container.querySelectorAll('button')].find(button => button.textContent?.includes(name))
+      expect(button, `button ${name}`).toBeDefined()
+      await act(async () => button!.click())
+    }
+    try {
+      await act(async () => root.render(
+        kind === 'HTTPRoute' ? <HTTPRouteRenderer data={data} onNavigate={onNavigate} />
+          : kind === 'GRPCRoute' ? <GRPCRouteRenderer data={data} onNavigate={onNavigate} />
+          : <SimpleRouteRenderer kind={kind} data={data} onNavigate={onNavigate} />,
+      ))
+      expect(container.textContent).toContain('Parents')
+      expect(container.textContent).toContain('Parent "mesh-parent"')
+      expect(container.textContent).not.toContain('Gateway "mesh-parent"')
+
+      await click('custom-backend')
+      expect(onNavigate).toHaveBeenLastCalledWith(backend)
+      await click('default-service')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'Service', group: '', namespace: 'app', name: 'default-service' })
+      await click('mesh-parent')
+      expect(onNavigate).toHaveBeenLastCalledWith(parent)
+      if (kind === 'HTTPRoute') {
+        await click('mirror')
+        expect(onNavigate).toHaveBeenLastCalledWith({ ...backend, name: 'mirror' })
+      }
+    } finally {
+      await act(async () => root.unmount())
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -1,9 +1,9 @@
 import { GitBranch, FolderGit, CheckCircle2 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface GitRepositoryRendererProps {
   data: any
@@ -87,7 +87,7 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
             <Property label="Digest" value={artifact.digest} />
             <Property
               label="Last Updated"
-              value={artifact.lastUpdateTime ? formatAge(artifact.lastUpdateTime) : '-'}
+              value={<TimeValue timestamp={artifact.lastUpdateTime} />}
             />
             {artifact.size && (
               <Property label="Size" value={formatBytes(artifact.size)} />
@@ -104,7 +104,7 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -1,16 +1,17 @@
 import type { ReactNode } from 'react'
 import { Activity, Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, ResourceLink, type ConditionTone } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, ResourceLink, LabelSelectorDisplay, type ConditionTone } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
-import { kindToPlural } from '../../../utils/navigation'
-import { formatAge } from '../resource-utils'
+import { objectReferenceToResourceRef, apiVersionToGroup } from '../../../utils/navigation'
+import type { ResourceRef } from '../../../types'
+import { TimeValue } from '../../ui/ScheduleValue'
 import { HPADiagnosisSummary } from '../HPADiagnosisSummary'
 import type { HPADiagnosis } from '../../../types'
 
 interface HPARendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
   hpaDiagnosis?: HPADiagnosis
   /** Optional host-provided section rendered after Conditions — used to inject Prometheus-backed charts. */
   extraSections?: ReactNode
@@ -37,6 +38,11 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
   const status = data.status || {}
   const spec = data.spec || {}
   const metrics = status.currentMetrics || []
+  const namespace = data.metadata?.namespace
+  const targetRef = spec.scaleTargetRef || {}
+  const target = objectReferenceToResourceRef({ ...targetRef, namespace })
+  const hasDiagnosisMetrics = !!hpaDiagnosis?.metrics?.length
+  const objectMetrics = (spec.metrics || []).filter((metric: any) => metric.type === 'Object' && metric.object)
 
   return (
     <>
@@ -49,32 +55,26 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
       <Section title="Scaling" icon={Cpu}>
         <PropertyList>
           <Property label="Target" value={
-            spec.scaleTargetRef?.name ? (
-              <ResourceLink
-                name={spec.scaleTargetRef.name}
-                kind={kindToPlural(spec.scaleTargetRef.kind || 'Deployment')}
-                namespace={data.metadata?.namespace || ''}
-                label={`${spec.scaleTargetRef.kind}/${spec.scaleTargetRef.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="Current" value={status.currentReplicas} />
           <Property label="Desired" value={status.desiredReplicas} />
           <Property label="Min" value={spec.minReplicas ?? 1} />
           <Property label="Max" value={spec.maxReplicas} />
-          {status.lastScaleTime && <Property label="Last Scale" value={formatAge(status.lastScaleTime)} />}
+          {status.lastScaleTime && <Property label="Last Scale" value={<TimeValue timestamp={status.lastScaleTime} />} />}
         </PropertyList>
       </Section>
 
       {hpaDiagnosis?.metrics && hpaDiagnosis.metrics.length > 0 && (
         <Section title="Metrics" defaultExpanded>
           <div className="space-y-2">
-            {hpaDiagnosis.metrics.map((metric) => (
-              <div key={`${metric.type}-${metric.name}`} className="card-inner">
+            {hpaDiagnosis.metrics.map((metric, index) => (
+              <div key={`${metric.type}-${metric.name}-${index}`} className="card-inner">
                 <div className="flex flex-wrap items-center justify-between gap-2 text-sm">
                   <div>
-                    <div className="font-medium text-theme-text-primary">{metric.name}</div>
+                    <div className="font-medium text-theme-text-primary break-words">{spec.metrics?.[index]?.type === 'Object' ? spec.metrics[index].object.metric.name : metric.name}</div>
                     <div className="text-xs text-theme-text-tertiary">{metric.type}</div>
                   </div>
                   <div className="flex flex-wrap items-center gap-2 text-xs text-theme-text-secondary">
@@ -85,6 +85,11 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
                     </Badge>
                   </div>
                 </div>
+                {spec.metrics?.[index]?.type === 'Object' && (
+                  <div className="mt-2">
+                    <HPAObjectMetricSource object={spec.metrics[index].object} namespace={namespace} onNavigate={onNavigate} />
+                  </div>
+                )}
               </div>
             ))}
           </div>
@@ -121,9 +126,44 @@ export function HPARenderer({ data, onNavigate, hpaDiagnosis, extraSections }: H
         </Section>
       )}
 
+      {!hasDiagnosisMetrics && objectMetrics.length > 0 && (
+        <Section title="Object metric sources" defaultExpanded>
+          <div className="space-y-3">
+            {objectMetrics.map((metric: any, i: number) => (
+              <div key={`${metric.object.metric.name}-${i}`} className="card-inner">
+                <HPAObjectMetricSource object={metric.object} namespace={namespace} onNavigate={onNavigate} showMetric />
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
       <ConditionsSection conditions={status.conditions} getConditionTone={hpaConditionTone} />
 
       {extraSections}
     </>
   )
 }
+
+function HPAObjectMetricSource({ object, namespace, onNavigate, showMetric = false }: {
+  object: any
+  namespace?: string
+  onNavigate?: (ref: ResourceRef) => void
+  showMetric?: boolean
+}) {
+  const described = object.describedObject || {}
+  const namespaceMetric = described.kind === 'Namespace' && apiVersionToGroup(described.apiVersion) === ''
+  const name = namespaceMetric ? namespace : described.name
+  const source = objectReferenceToResourceRef({ ...described, name, namespace })
+  return (
+    <PropertyList>
+      {showMetric && <Property label="Metric" value={object.metric.name} />}
+      <Property label="Object" value={source ? (
+        <ResourceLink {...source} label={`${described.kind}/${name}`} onNavigate={onNavigate} />
+      ) : described.name ? `${described.kind || 'Unknown kind'}/${described.name}` : undefined} />
+      {source?.group && <Property label="API Group" value={source.group} />}
+      {object.metric.selector && <Property label="Selector" value={<LabelSelectorDisplay selector={object.metric.selector} />} />}
+      {namespaceMetric && <Property label="Scope" value="This HPA's namespace" />}
+    </PropertyList>
+  )
+}

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

@@ -2,6 +2,7 @@ import { Globe, ArrowRight, Network, Filter } 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 HTTPRouteRendererProps {
   data: any
@@ -32,22 +33,8 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
     ? 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 (
     <>
@@ -59,8 +46,8 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
             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('; ')}
         />
       )}
@@ -90,12 +77,12 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
             }
           />
           <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'
@@ -129,7 +116,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                     <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       <span className="italic text-theme-text-tertiary">all</span>
                       <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                      <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                      <ResourceRefBadge resourceRef={toBackendRef(backendRefs[0])} onClick={onNavigate} />
                       {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
                     </div>
                   )}
@@ -141,7 +128,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                         return (
                           <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
                             <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                            <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>}
                           </div>
@@ -176,7 +163,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                       {matchIdx === 0 && backendRefs.length === 1 && (
                         <>
                           <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                          <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                          <ResourceRefBadge resourceRef={toBackendRef(backendRefs[0])} onClick={onNavigate} />
                           {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
                         </>
                       )}
@@ -189,7 +176,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                       return (
                         <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
                           <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
-                          <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>}
                         </div>
@@ -234,7 +221,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                           )}
                           {filter.type === 'RequestMirror' && filter.requestMirror && (
                             <span className="text-theme-text-tertiary">
-                              {filter.requestMirror.backendRef?.name || 'unknown'}
+                              {filter.requestMirror.backendRef && <ResourceRefBadge resourceRef={toBackendRef(filter.requestMirror.backendRef)} onClick={onNavigate} />}
                               {filter.requestMirror.backendRef?.port ? `:${filter.requestMirror.backendRef.port}` : ''}
                             </span>
                           )}

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

@@ -1,10 +1,10 @@
 import { Database, CheckCircle2, Shield } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
-import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface HelmRepositoryRendererProps {
   data: any
@@ -98,7 +98,7 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
             <Property label="Digest" value={artifact.digest} />
             <Property
               label="Last Updated"
-              value={artifact.lastUpdateTime ? formatAge(artifact.lastUpdateTime) : '-'}
+              value={<TimeValue timestamp={artifact.lastUpdateTime} />}
             />
             {artifact.size && (
               <Property label="Size" value={formatBytes(artifact.size)} />
@@ -115,7 +115,7 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { IngressRenderer } from './IngressRenderer'
+import { IngressClassRenderer } from './IngressClassRenderer'
+import { ingressClassParametersResourceRef } from '../../../utils/ingress-class-references'
+
+describe('ingressClassParametersResourceRef', () => {
+  it('defaults to the core group and cluster scope, and requires a namespace for namespaced parameters', () => {
+    expect(ingressClassParametersResourceRef({ kind: 'IngressClassParams', apiGroup: 'elbv2.k8s.aws', name: 'shared' }))
+      .toEqual({ kind: 'IngressClassParams', group: 'elbv2.k8s.aws', namespace: '', name: 'shared' })
+    expect(ingressClassParametersResourceRef({ kind: 'ConfigMap', scope: 'Namespace', namespace: 'controller', name: 'settings' }))
+      .toEqual({ kind: 'ConfigMap', group: '', namespace: 'controller', name: 'settings' })
+    expect(ingressClassParametersResourceRef({ kind: 'ConfigMap', scope: 'Namespace', name: 'settings' })).toBeNull()
+  })
+})
+
+describe('Ingress class navigation', () => {
+  it('links the Ingress class and both parameter scopes, but leaves the legacy annotation as text', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const click = async (name: string) => {
+      const button = [...container.querySelectorAll('button')].find(button => button.textContent === name)
+      expect(button).toBeDefined()
+      await act(async () => button!.click())
+    }
+    try {
+      await act(async () => root.render(<IngressRenderer onNavigate={onNavigate} data={{ metadata: { namespace: 'app', annotations: { 'kubernetes.io/ingress.class': 'old-controller' } }, spec: { ingressClassName: 'public' } }} />))
+      await click('public')
+      expect(onNavigate).toHaveBeenLastCalledWith({ kind: 'ingressclasses', group: 'networking.k8s.io', namespace: '', name: 'public' })
+
+      await act(async () => root.render(<IngressRenderer onNavigate={onNavigate} data={{ metadata: { annotations: { 'kubernetes.io/ingress.class': 'old-controller' } }, spec: {} }} />))
+      expect(container.textContent).toContain('old-controller')
+      expect([...container.querySelectorAll('button')].some(button => button.textContent === 'old-controller')).toBe(false)
+
+      for (const parameters of [
+        { name: 'shared', kind: 'IngressClassParams', apiGroup: 'elbv2.k8s.aws' },
+        { name: 'settings', kind: 'ConfigMap', scope: 'Namespace' as const, namespace: 'controller' },
+      ]) {
+        await act(async () => root.render(<IngressClassRenderer onNavigate={onNavigate} data={{ spec: { controller: 'example.test/ingress', parameters } }} />))
+        await click(parameters.name)
+        expect(onNavigate).toHaveBeenLastCalledWith(ingressClassParametersResourceRef(parameters))
+      }
+    } finally {
+      await act(async () => root.unmount())
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -1,14 +1,18 @@
 import { Globe } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+import { ingressClassParametersResourceRef } from '../../../utils/ingress-class-references'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface IngressClassRendererProps {
   data: any
+  onNavigate?: (ref: ResourceRef) => void
 }
 
-export function IngressClassRenderer({ data }: IngressClassRendererProps) {
+export function IngressClassRenderer({ data, onNavigate }: IngressClassRendererProps) {
   const spec = data.spec || {}
+  const parametersRef = spec.parameters ? ingressClassParametersResourceRef(spec.parameters) : null
   const annotations = data.metadata?.annotations || {}
 
   const isDefault = annotations['ingressclass.kubernetes.io/is-default-class'] === 'true'
@@ -39,7 +43,10 @@ export function IngressClassRenderer({ data }: IngressClassRendererProps) {
           <PropertyList>
             {spec.parameters.apiGroup && <Property label="API Group" value={spec.parameters.apiGroup} />}
             <Property label="Kind" value={spec.parameters.kind} />
-            <Property label="Name" value={spec.parameters.name} />
+            <Property label="Name" value={parametersRef
+              ? <ResourceLink {...parametersRef} onNavigate={onNavigate} />
+              : spec.parameters.name
+            } />
             {spec.parameters.namespace && <Property label="Namespace" value={spec.parameters.namespace} />}
             {spec.parameters.scope && <Property label="Scope" value={spec.parameters.scope} />}
           </PropertyList>