@skyhook-io/k8s-ui 1.17.0 → 1.18.0

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

@@ -23,6 +23,7 @@ import {
   getCNPGWALArchivingFailure,
   getCNPGLastBackupFailure,
   classifyCNPGClusterPhase,
+  cnpgBlockedPhaseExplanation,
   getCNPGClusterAvailability,
   CNPG_BARMAN_OBJECTSTORE_GROUP,
 } from '../resource-utils-cnpg'
@@ -100,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
@@ -113,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
@@ -343,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. */}
@@ -364,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

@@ -11,7 +11,7 @@ import {
   getCNPGScheduledBackupIsImmediate,
   getCNPGBackupPlugin,
   getCNPGScheduledBackupOwnerRef,
-  CNPG_BARMAN_OBJECTSTORE_GROUP,
+  CNPG_BARMAN_PLUGIN_NAME,
 } from '../resource-utils-cnpg'
 
 interface CNPGScheduledBackupRendererProps {
@@ -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/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/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.test.tsx

@@ -0,0 +1,31 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { CronJobRenderer } from './CronJobRenderer'
+import { getCronJobStatus } from '../resource-utils'
+
+describe('CronJob scheduling and execution evidence', () => {
+  it('does not turn a missing recorded completion into an execution failure', () => {
+    const html = renderToStaticMarkup(<CronJobRenderer data={{
+      spec: { schedule: '0 * * * *', timeZone: 'UTC', startingDeadlineSeconds: 0 },
+      status: { lastScheduleTime: '2026-01-02T12:00:00Z', lastSuccessfulTime: '2026-01-02T11:00:00Z' },
+    }} />)
+    expect(html).toContain('Latest completion not verified')
+    expect(html).not.toContain('Recent Jobs Failing')
+    expect(html).toContain('>UTC<')
+    expect(html).toContain('>0s<')
+  })
+
+  it('shows suspension without claiming an old Job recovered', () => {
+    const html = renderToStaticMarkup(<CronJobRenderer data={{
+      spec: { schedule: '* * * * *', suspend: true },
+      status: { lastScheduleTime: '2026-01-02T12:00:00Z' },
+    }} />)
+    expect(html).toContain('CronJob Suspended')
+    expect(html).not.toContain('Latest completion not verified')
+    expect(html).toContain('Controller local time (zone not reported)')
+  })
+
+  it('does not grade enabled configuration as successful scheduling', () => {
+    expect(getCronJobStatus({ spec: { schedule: '* * * * *' }, status: {} })).toMatchObject({ text: 'Enabled', level: 'neutral' })
+  })
+})

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

@@ -5,7 +5,23 @@ import { TimeValue } from '../../ui/ScheduleValue'
 import { formatRelativeAgeTime } from '../../../utils/format'
 
 interface CronJobRendererProps {
-  data: any
+  data: {
+    metadata?: { namespace?: string }
+    spec?: {
+      schedule?: string
+      timeZone?: string
+      suspend?: boolean
+      concurrencyPolicy?: string
+      startingDeadlineSeconds?: number
+      successfulJobsHistoryLimit?: number
+      failedJobsHistoryLimit?: number
+    }
+    status?: {
+      lastScheduleTime?: string
+      lastSuccessfulTime?: string
+      active?: { name: string; namespace?: string }[]
+    }
+  }
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
@@ -13,21 +29,13 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
 
-  // Check for issues or notable states
   const isSuspended = spec.suspend === true
   const hasNeverRun = !status.lastScheduleTime
 
-  // "Recent failures" means the latest scheduled run didn't reach success.
-  // Only meaningful once nothing is running — while a job is active the most
-  // recent run is simply still in flight, not failing. With concurrencyPolicy
-  // Allow an older failed run can overlap a new active one; CronJob status only
-  // carries aggregate timestamps, so we accept missing that rare case here (the
-  // failed Job still surfaces in the job list / topology) rather than reviving
-  // the false positive that fired on every normal in-flight run.
   const activeJobs = status.active?.length || 0
   const lastSchedule = status.lastScheduleTime ? new Date(status.lastScheduleTime).getTime() : 0
   const lastSuccess = status.lastSuccessfulTime ? new Date(status.lastSuccessfulTime).getTime() : 0
-  const recentFailures = activeJobs === 0 && lastSchedule > 0 && lastSchedule > lastSuccess
+  const completionUnverified = activeJobs === 0 && lastSchedule > 0 && lastSchedule > lastSuccess
 
   return (
     <>
@@ -46,23 +54,23 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
         <AlertBanner
           variant="info"
           title="Never Scheduled"
-          message="This CronJob has never run. Check the schedule and starting deadline settings."
+          message="Kubernetes has not recorded a scheduled run. Check the schedule and controller Events."
         />
       )}
 
-      {/* Recent failures warning */}
-      {recentFailures && !isSuspended && (
+      {completionUnverified && !isSuspended && (
         <AlertBanner
-          variant="error"
-          title="Recent Jobs Failing"
-          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatRelativeAgeTime(status.lastSuccessfulTime, 'never')}. Check job history and pod logs.</>}
+          variant="info"
+          title="Latest completion not verified"
+          message={<>No successful completion is recorded after the latest scheduled run. Last success: {formatRelativeAgeTime(status.lastSuccessfulTime, 'never')}. Inspect the Job history to check the execution outcome.</>}
         />
       )}
 
       <Section title="Schedule" icon={Clock}>
         <PropertyList>
           <Property label="Schedule" value={spec.schedule} />
-          <Property label="Human" value={cronToHuman(spec.schedule)} />
+          <Property label="Human" value={cronToHuman(spec.schedule ?? '')} />
+          <Property label="Time Zone" value={spec.timeZone ?? 'Controller local time (zone not reported)'} />
           <Property label="Suspend" value={spec.suspend ? 'Yes' : 'No'} />
           <Property label="Last Schedule" value={<TimeValue timestamp={status.lastScheduleTime} fallback="Never" />} />
           <Property label="Last Success" value={<TimeValue timestamp={status.lastSuccessfulTime} fallback="Never" />} />
@@ -73,16 +81,16 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
       <Section title="Configuration">
         <PropertyList>
           <Property label="Concurrency" value={spec.concurrencyPolicy || 'Allow'} />
-          <Property label="Starting Deadline" value={spec.startingDeadlineSeconds ? `${spec.startingDeadlineSeconds}s` : 'None'} />
+          <Property label="Starting Deadline" value={spec.startingDeadlineSeconds != null ? `${spec.startingDeadlineSeconds}s` : 'None'} />
           <Property label="Success History" value={spec.successfulJobsHistoryLimit ?? 3} />
           <Property label="Failed History" value={spec.failedJobsHistoryLimit ?? 1} />
         </PropertyList>
       </Section>
 
-      {status.active?.length > 0 && (
+      {status.active && status.active.length > 0 && (
         <Section title="Active Jobs">
           <div className="space-y-1">
-            {status.active.map((job: any) => (
+            {status.active.map((job) => (
               <div key={job.name} className="text-sm">
                 <ResourceLink name={job.name} kind="jobs" namespace={job.namespace || data.metadata?.namespace || ''} onNavigate={onNavigate} />
               </div>

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

@@ -1,8 +1,9 @@
 // @vitest-environment jsdom
 import { act } from 'react'
 import { createRoot } from 'react-dom/client'
-import { expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { EndpointSliceRenderer } from './EndpointSliceRenderer'
+import { initNavigationMap, resetNavigationMap } from '../../../utils/navigation'
 
 vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
 
@@ -22,3 +23,40 @@ it('navigates to the labeled Service as a core-group resource', async () => {
   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}`
 }
@@ -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/FluxHelmReleaseRenderer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 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'
@@ -5,12 +6,21 @@ import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
 import { TimeValue } from '../../ui/ScheduleValue'
 
+export interface FluxValuesReference {
+  kind?: 'ConfigMap' | 'Secret'
+  name: string
+  optional?: boolean
+  valuesKey?: string
+  targetPath?: string
+}
+
 interface FluxHelmReleaseRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  renderValuesReference?: (reference: FluxValuesReference) => ReactNode
 }
 
-export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRendererProps) {
+export function FluxHelmReleaseRenderer({ data, onNavigate, renderValuesReference }: FluxHelmReleaseRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = (status.conditions || []) as FluxCondition[]
@@ -59,7 +69,7 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
   }
 
   // Values info
-  const valuesFrom = spec.valuesFrom || []
+  const valuesFrom: FluxValuesReference[] = spec.valuesFrom || []
   const values = spec.values || {}
   const valueKeys = Object.keys(values)
 
@@ -149,15 +159,18 @@ export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRen
                 Values From
               </div>
               <div className="space-y-1">
-                {valuesFrom.map((ref: any, idx: number) => (
+                {valuesFrom.map((ref, idx) => (
                   <div key={idx} className="card-inner text-sm flex items-center gap-2 flex-wrap">
                     <span className="badge-sm status-neutral">{ref.kind || 'ConfigMap'}</span>
-                    <ResourceLink
-                      name={ref.name}
-                      kind={ref.kind === 'Secret' ? 'secrets' : 'configmaps'}
-                      namespace={data.metadata?.namespace || ''}
-                      onNavigate={onNavigate}
-                    />
+                    {ref.optional && <span className="badge-sm status-neutral">Optional</span>}
+                    {renderValuesReference ? renderValuesReference(ref) : (
+                      <ResourceLink
+                        name={ref.name}
+                        kind={ref.kind === 'Secret' ? 'secrets' : 'configmaps'}
+                        namespace={data.metadata?.namespace || ''}
+                        onNavigate={onNavigate}
+                      />
+                    )}
                     {ref.valuesKey && (
                       <span className="text-theme-text-tertiary text-xs">
                         key: {ref.valuesKey}