@skyhook-io/k8s-ui 1.16.3 → 1.17.0

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>

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

@@ -1,9 +1,10 @@
 import { Globe, Shield, Clock } from 'lucide-react'
+import type { ResourceRef } from '../../../types'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 
 interface IngressRendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
@@ -42,7 +43,10 @@ export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
 
       <Section title="Ingress" icon={Globe}>
         <PropertyList>
-          <Property label="Class" value={spec.ingressClassName || data.metadata?.annotations?.['kubernetes.io/ingress.class']} />
+          <Property label="Class" value={spec.ingressClassName
+            ? <ResourceLink name={spec.ingressClassName} kind="ingressclasses" group="networking.k8s.io" onNavigate={onNavigate} />
+            : data.metadata?.annotations?.['kubernetes.io/ingress.class']
+          } />
           {lbIngress.length > 0 && (
             <Property label="Address" value={lbIngress[0].ip || lbIngress[0].hostname} />
           )}

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import { CAPACITY_TYPE_BADGE, BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { formatRelativeAgeTime } from '../../../utils/format'
 import {
   getNodeClaimStatus,
   getNodeClaimInstanceType,
@@ -14,19 +15,6 @@ import {
   getNodeClaimExpireAfter,
 } from '../resource-utils-karpenter'
 
-function formatRelativeTime(isoString: string): string {
-  const date = new Date(isoString)
-  if (isNaN(date.getTime())) return ''
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
-  if (seconds < 60) return `${seconds}s ago`
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  return `${days}d ago`
-}
-
 interface KarpenterNodeClaimRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
@@ -205,7 +193,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
                 </span>
                 {transitionTime && (
                   <span className="text-xs text-theme-text-tertiary shrink-0">
-                    {formatRelativeTime(transitionTime)}
+                    {formatRelativeAgeTime(transitionTime, '')}
                   </span>
                 )}
               </div>

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

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { KedaTriggerAuthRenderer } from './KedaTriggerAuthRenderer'
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+const spec = {
+  secretTargetRef: [{ parameter: 'token', name: 'direct', key: 'token' }],
+  gcpSecretManager: {
+    credentials: {
+      clientSecret: {
+        valueFrom: { secretKeyRef: { name: 'iam', key: 'credentials.json' } },
+      },
+    },
+  },
+}
+
+it('links the actual nested GCP credential Secret in the authentication namespace', async () => {
+  const element = document.createElement('div')
+  const root = createRoot(element)
+  const onNavigate = vi.fn()
+  try {
+    await act(async () =>
+      root.render(
+        <KedaTriggerAuthRenderer
+          data={{
+            kind: 'TriggerAuthentication',
+            metadata: { namespace: 'app' },
+            spec,
+          }}
+          onNavigate={onNavigate}
+        />,
+      ),
+    )
+    const button = [...element.querySelectorAll('button')].find(b => b.textContent === 'iam')
+    expect(button).toBeDefined()
+    await act(async () => button!.click())
+    expect(onNavigate).toHaveBeenCalledWith({
+      kind: 'secrets',
+      group: '',
+      namespace: 'app',
+      name: 'iam',
+    })
+    expect(element.textContent).toContain('credentials.json')
+  } finally {
+    await act(async () => root.unmount())
+  }
+})
+
+it('retains cluster-auth names without inventing an operator credential namespace', () => {
+  const html = renderToStaticMarkup(
+    <KedaTriggerAuthRenderer
+      data={{
+        kind: 'ClusterTriggerAuthentication',
+        metadata: { name: 'cluster' },
+        spec,
+      }}
+      onNavigate={() => {}}
+    />,
+  )
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+  expect(doc.body.textContent).toContain('iam')
+  expect(doc.body.textContent).toContain('direct')
+  expect([...doc.querySelectorAll('button')].some(b => b.textContent === 'iam' || b.textContent === 'direct')).toBe(
+    false,
+  )
+})
+
+it('does not accept the previously invented shallow GCP reference shape', () => {
+  const html = renderToStaticMarkup(
+    <KedaTriggerAuthRenderer
+      data={{
+        kind: 'TriggerAuthentication',
+        metadata: { namespace: 'app' },
+        spec: {
+          gcpSecretManager: {
+            credentials: { clientSecret: { name: 'fictional' } },
+          },
+        },
+      }}
+    />,
+  )
+  expect(html).not.toContain('fictional')
+})

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

@@ -1,13 +1,13 @@
 import { Cpu, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
+import { TimeValue } from '../../ui/ScheduleValue'
 import {
   getScaledObjectStatus,
   getScaledObjectTarget,
   getScaledObjectReplicas,
   getScaledObjectTriggers,
   getScaledObjectHpaName,
-  getScaledObjectLastActiveTime,
   getScaledObjectPollingInterval,
   getScaledObjectCooldownPeriod,
 } from '../resource-utils-keda'
@@ -97,7 +97,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
             }
             return hpaName
           })()} />
-          <Property label="Last Active" value={getScaledObjectLastActiveTime(data)} />
+          <Property label="Last Active" value={<TimeValue timestamp={data.status?.lastActiveTime} />} />
         </PropertyList>
         {fallback && (
           <div className="mt-2 pt-2 border-t border-theme-border">

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

@@ -21,6 +21,8 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
   const awsSecretManager = spec.awsSecretManager
   const gcpSecretManager = spec.gcpSecretManager
   const podIdentity = spec.podIdentity
+  const credentialRef = gcpSecretManager?.credentials?.clientSecret?.valueFrom?.secretKeyRef
+  const namespace = data.metadata?.namespace
 
   return (
     <>
@@ -48,7 +50,7 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
                 <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                   <span className="text-theme-text-primary font-medium">{ref.parameter}</span>
                   <span className="text-theme-text-secondary">
-                    Secret: <ResourceLink name={ref.name} kind="secrets" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} /> / {ref.key}
+                    Secret: {namespace ? <ResourceLink name={ref.name} kind="secrets" group="" namespace={namespace} onNavigate={onNavigate} /> : ref.name} / {ref.key}
                   </span>
                 </div>
               </div>
@@ -150,9 +152,10 @@ export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRen
       {gcpSecretManager && (
         <Section title="GCP Secret Manager" icon={Cloud}>
           <PropertyList>
-            {gcpSecretManager.credentials?.clientSecret?.name && (
-              <Property label="Credentials Secret" value={gcpSecretManager.credentials.clientSecret.name} />
+            {credentialRef?.name && (
+              <Property label="Credentials Secret" value={namespace ? <ResourceLink name={credentialRef.name} kind="secrets" group="" namespace={namespace} onNavigate={onNavigate} /> : credentialRef.name} />
             )}
+            {credentialRef?.key && <Property label="Credentials Key" value={credentialRef.key} />}
           </PropertyList>
           {gcpSecretManager.secrets && gcpSecretManager.secrets.length > 0 && (
             <div className="mt-2 space-y-1">

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

@@ -1,8 +1,8 @@
 import { Layers, FolderTree, GitBranch } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
-import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, ManagedResourcesList, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, parseFluxInventory, type FluxCondition } from '../../../types/gitops'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 interface KustomizationRendererProps {
   data: any
@@ -175,7 +175,7 @@ export function KustomizationRenderer({ data, onNavigate }: KustomizationRendere
             {status.lastHandledReconcileAt && (
               <Property
                 label="Last Reconciled"
-                value={formatAge(status.lastHandledReconcileAt)}
+                value={<TimeValue timestamp={status.lastHandledReconcileAt} />}
               />
             )}
           </PropertyList>

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

@@ -2,8 +2,9 @@ import { Globe, RefreshCw } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { HEALTH_BADGE_COLORS } from '../../../utils/badge-colors'
-import { formatAge, healthColors } from '../resource-utils'
+import { healthColors } from '../resource-utils'
 import type { StatusBadge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
 
 type Nav = (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 
@@ -66,7 +67,7 @@ export function KyvernoGlobalContextRenderer({ data, onNavigate }: { data: any;
               </span>
             }
           />
-          {refresh.at && <Property label="Last Refreshed" value={`${formatAge(refresh.at)} ago`} />}
+          {refresh.at && <Property label="Last Refreshed" value={<TimeValue timestamp={refresh.at} />} />}
           {api?.refreshInterval && <Property label="Interval" value={api.refreshInterval} />}
           {api?.retryLimit != null && <Property label="Retry Limit" value={String(api.retryLimit)} />}
         </PropertyList>

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

@@ -3,7 +3,8 @@ import { clsx } from 'clsx'
 import { ListChecks, Workflow, Boxes, FileWarning } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { HEALTH_BADGE_COLORS, SEVERITY_BADGE } from '../../../utils/badge-colors'
-import { formatAge } from '../resource-utils'
+import { TimeValue } from '../../ui/ScheduleValue'
+import { formatRelativeAgeTime } from '../../../utils/format'
 import {
   getKyvernoRequestType,
   getKyvernoRequestTriggers,
@@ -155,7 +156,7 @@ export function KyvernoUpdateRequestRenderer({ data, onNavigate }: { data: any;
             }
           />
           {data?.metadata?.creationTimestamp && (
-            <Property label="Queued" value={`${formatAge(data.metadata.creationTimestamp)} ago`} />
+            <Property label="Queued" value={<TimeValue timestamp={data.metadata.creationTimestamp} />} />
           )}
         </PropertyList>
         {message && state.level !== 'unhealthy' && (
@@ -290,7 +291,7 @@ export function KyvernoEphemeralReportRenderer({ data, onNavigate }: { data: any
                     </span>
                   )}
                   {at && (
-                    <span className="ml-auto shrink-0 text-theme-text-tertiary">{formatAge(at)} ago</span>
+                    <span className="ml-auto shrink-0 text-theme-text-tertiary">{formatRelativeAgeTime(at)}</span>
                   )}
                 </div>
               )

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

@@ -1,24 +1,12 @@
 import { Timer } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface LeaseRendererProps {
   data: any
 }
 
-function formatRelativeTime(timestamp: string): string {
-  const diff = Date.now() - new Date(timestamp).getTime()
-  if (diff < 0) return 'just now'
-  const seconds = Math.floor(diff / 1000)
-  if (seconds < 60) return `${seconds}s ago`
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  return `${days}d ago`
-}
-
 export function LeaseRenderer({ data }: LeaseRendererProps) {
   const spec = data.spec || {}
 
@@ -68,7 +56,7 @@ export function LeaseRenderer({ data }: LeaseRendererProps) {
             value={
               spec.acquireTime ? (
                 <span title={new Date(spec.acquireTime).toLocaleString()}>
-                  {formatRelativeTime(spec.acquireTime)}
+                  {formatRelativeAgeTime(spec.acquireTime)}
                 </span>
               ) : undefined
             }
@@ -81,7 +69,7 @@ export function LeaseRenderer({ data }: LeaseRendererProps) {
                   className={clsx(renewColor)}
                   title={new Date(renewTime).toLocaleString()}
                 >
-                  {formatRelativeTime(renewTime)}
+                  {formatRelativeAgeTime(renewTime)}
                 </span>
               ) : undefined
             }

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

@@ -1,5 +1,7 @@
-import { describe, expect, it } from 'vitest'
-import { quotaUsageRatio } from './NamespaceRenderer'
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { NamespaceRenderer, quotaUsageRatio } from './NamespaceRenderer'
 
 describe('quotaUsageRatio', () => {
   // status.used is computed with quantity arithmetic, so a used pod count of
@@ -28,3 +30,68 @@ describe('quotaUsageRatio', () => {
     expect(quotaUsageRatio('pods', '5', 'garbage')).toBeNull()
   })
 })
+
+describe('namespace deletion diagnostics', () => {
+  afterEach(() => vi.useRealTimers())
+
+  it('shows controller blockers, namespace finalizers and time since deletion began', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-10-10T12:00:00Z'))
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      metadata: {
+        creationTimestamp: '2023-01-01T00:00:00Z',
+        deletionTimestamp: '2026-10-10T10:00:00Z',
+        finalizers: ['metadata.example.com/not-the-namespace-finalizer'],
+      },
+      spec: { finalizers: ['kubernetes'] },
+      status: { phase: 'Terminating', conditions: [
+        { type: 'NamespaceContentRemaining', status: 'True', reason: 'SomeResourcesRemain', message: 'Some resources are remaining: configmaps. has 1 resource instances' },
+        { type: 'NamespaceFinalizersRemaining', status: 'True', reason: 'SomeFinalizersRemain', message: 'Some content has finalizers remaining: example.com/hold in 1 resource instances' },
+        { type: 'NamespaceDeletionDiscoveryFailure', status: 'False', reason: 'ResourcesDiscovered', message: 'All resources successfully discovered' },
+      ] },
+    } }))
+    expect(html).toContain('Terminating for')
+    expect(html).toContain('>2h<')
+    expect(html).toContain('Namespace finalizers')
+    expect(html).toContain('kubernetes')
+    expect(html).not.toContain('metadata.example.com/not-the-namespace-finalizer')
+    expect(html).toContain('Conditions (3) · 2 failing')
+    expect(html).toContain('SomeResourcesRemain')
+    expect(html).toContain('configmaps. has 1 resource instances')
+    expect(html).toContain('example.com/hold in 1 resource instances')
+  })
+
+  it('omits deletion duration, finalizers and empty conditions for an active namespace', () => {
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      metadata: { creationTimestamp: '2023-01-01T00:00:00Z' },
+      spec: { finalizers: ['kubernetes'] },
+      status: { phase: 'Active' },
+    } }))
+    expect(html).toContain('Active')
+    expect(html).not.toContain('Terminating for')
+    expect(html).not.toContain('Conditions (')
+    expect(html).not.toContain('Namespace finalizers')
+  })
+
+  it('does not substitute creation age when a terminating namespace lacks a deletion timestamp', () => {
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      metadata: { creationTimestamp: '2023-01-01T00:00:00Z' },
+      status: { phase: 'Terminating', conditions: [] },
+    } }))
+    expect(html).toContain('Terminating')
+    expect(html).not.toContain('Terminating for')
+    expect(html).not.toContain('Conditions (')
+    expect(html).not.toContain('Namespace finalizers')
+  })
+
+  it('retains conditions with unknown status without calling them failures', () => {
+    const html = renderToString(createElement(NamespaceRenderer, { data: {
+      status: { phase: 'Active', conditions: [
+        { type: 'NamespaceDeletionDiscoveryFailure', status: 'Unknown', reason: 'DiscoveryPending', message: 'Waiting for discovery' },
+      ] },
+    } }))
+    expect(html).toContain('Conditions (1)')
+    expect(html).toContain('Waiting for discovery')
+    expect(html).not.toContain('failing')
+  })
+})

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

@@ -1,7 +1,8 @@
 import { Shield, Box, Users, Gauge } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ResourceLink, ConditionsSection } from '../../ui/drawer-components'
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
+import { formatAge } from '../resource-utils'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
 import { RBACErrorSection } from './RBACErrorSection'
 import { NamespaceLimitRangesSection } from './LimitRangeRenderer'
@@ -70,12 +71,16 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quot
               )}>{phase}</span>
             ) : undefined
           } />
+          {metadata.deletionTimestamp && <Property label="Terminating for" value={formatAge(metadata.deletionTimestamp)} />}
+          {metadata.deletionTimestamp && data.spec?.finalizers?.length > 0 && <Property label="Namespace finalizers" value={data.spec.finalizers.join(', ')} />}
           {istioInjection && <Property label="Istio injection" value={istioInjection} />}
           {linkerdInjection && <Property label="Linkerd injection" value={linkerdInjection} />}
           {managedBy && <Property label="Managed by" value={managedBy} />}
         </PropertyList>
       </Section>
 
+      <ConditionsSection conditions={status.conditions} defaultExpanded />
+
       {/* ResourceQuota usage — only when host wired the fetch. */}
       {(quotaError || (quotaData != null && quotaData.length > 0)) && (
         <NamespaceQuotaSection quotas={quotaData ?? []} error={quotaError ?? null} />