@skyhook-io/k8s-ui 1.16.3 → 1.17.1

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

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { IngressRenderer } from './IngressRenderer'
+
+describe('IngressRenderer default backend', () => {
+  it('shows the default backend and no "not routed" warning', () => {
+    const html = renderToString(
+      <IngressRenderer data={{
+        metadata: { name: 'catch-all', namespace: 'team' },
+        spec: { ingressClassName: 'nginx', defaultBackend: { service: { name: 'fallback', port: { number: 80 } } } },
+      }} />,
+    )
+    expect(html).toContain('Default Backend')
+    expect(html.replace(/<!-- -->/g, '')).toContain('fallback:80')
+    expect(html).not.toContain('Traffic will not be routed')
+  })
+
+  it('still warns when an Ingress routes nowhere', () => {
+    const html = renderToString(<IngressRenderer data={{ metadata: { name: 'empty', namespace: 'team' }, spec: { ingressClassName: 'nginx' } }} />)
+    expect(html).toContain('Traffic will not be routed')
+  })
+
+  it('shows a resource default backend', () => {
+    const html = renderToString(
+      <IngressRenderer data={{
+        metadata: { name: 'static', namespace: 'team' },
+        spec: { ingressClassName: 'nginx', defaultBackend: { resource: { apiGroup: 'k8s.example.com', kind: 'StorageBucket', name: 'static-assets' } } },
+      }} />,
+    )
+    expect(html).toContain('Default Backend')
+    expect(html).toContain('StorageBucket/static-assets')
+  })
+})

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

@@ -1,9 +1,11 @@
 import { Globe, Shield, Clock } from 'lucide-react'
+import type { ResourceRef } from '../../../types'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface IngressRendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
@@ -15,7 +17,10 @@ export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
   // Check for issues
   const hasNoAddress = lbIngress.length === 0
   const hasNoClass = !spec.ingressClassName && !data.metadata?.annotations?.['kubernetes.io/ingress.class']
-  const hasNoRules = rules.length === 0
+  const defaultService = spec.defaultBackend?.service
+  const defaultResource = spec.defaultBackend?.resource
+  // An Ingress with only a default backend still routes everything to it.
+  const hasNoRules = rules.length === 0 && !spec.defaultBackend
 
   return (
     <>
@@ -42,15 +47,41 @@ 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} />
           )}
+          {defaultService?.name && (
+            <Property label="Default Backend" value={
+              <ResourceLink
+                name={defaultService.name}
+                kind="services"
+                namespace={data.metadata?.namespace || ''}
+                label={<span className="text-blue-400">{defaultService.name}:{defaultService.port?.number || defaultService.port?.name}</span>}
+                onNavigate={onNavigate}
+              />
+            } />
+          )}
+          {defaultResource?.name && (
+            <Property label="Default Backend" value={
+              <ResourceLink
+                name={defaultResource.name}
+                kind={kindToPluralWithGroup(defaultResource.kind, defaultResource.apiGroup || '')}
+                group={defaultResource.apiGroup || ''}
+                namespace={data.metadata?.namespace || ''}
+                label={<span className="text-blue-400">{`${defaultResource.kind}/${defaultResource.name}`}</span>}
+                onNavigate={onNavigate}
+              />
+            } />
+          )}
           <Property label="TLS" value={tls.length > 0 ? `${tls.length} certificate(s)` : 'None'} />
         </PropertyList>
       </Section>
 
-      <Section title="Rules" defaultExpanded>
+      {rules.length > 0 && <Section title="Rules" defaultExpanded>
         <div className="space-y-3">
           {rules.map((rule: any, i: number) => (
             <div key={i} className="card-inner-lg">
@@ -83,7 +114,7 @@ export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
             </div>
           ))}
         </div>
-      </Section>
+      </Section>}
 
       {tls.length > 0 && (
         <Section title="TLS" icon={Shield}>

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

@@ -2,6 +2,7 @@ import { Network } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink, KeyValueBadgeList } from '../../ui/drawer-components'
 import {
   getDestinationRuleHost,
+  resolveIstioServiceHost,
   getDestinationRuleSubsets,
   getDestinationRuleTrafficPolicy,
   getDestinationRuleLoadBalancer,
@@ -9,20 +10,18 @@ import {
 
 interface IstioDestinationRuleRendererProps {
   data: any
+  serviceDomain?: string
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function IstioDestinationRuleRenderer({ data, onNavigate }: IstioDestinationRuleRendererProps) {
+export function IstioDestinationRuleRenderer({ data, onNavigate, serviceDomain }: IstioDestinationRuleRendererProps) {
   const host = getDestinationRuleHost(data)
   const subsets = getDestinationRuleSubsets(data)
   const trafficPolicy = getDestinationRuleTrafficPolicy(data)
   const loadBalancer = getDestinationRuleLoadBalancer(data)
   const ns = data.metadata?.namespace || ''
 
-  // Parse host to create service link
-  const hostParts = host.split('.')
-  const svcName = hostParts[0]
-  const svcNs = hostParts.length >= 2 ? hostParts[1] : ns
+  const service = resolveIstioServiceHost(host, ns, serviceDomain)
 
   return (
     <>
@@ -30,15 +29,16 @@ export function IstioDestinationRuleRenderer({ data, onNavigate }: IstioDestinat
       <Section title="Destination" icon={Network} defaultExpanded>
         <PropertyList>
           <Property label="Host" value={
-            host !== '-' ? (
+            service ? (
               <ResourceLink
-                name={svcName}
+                name={service.name}
                 kind="services"
-                namespace={svcNs}
+                group=""
+                namespace={service.namespace}
                 label={host}
                 onNavigate={onNavigate}
               />
-            ) : '-'
+            ) : host
           } />
           <Property label="Load Balancer" value={loadBalancer} />
         </PropertyList>

package/src/components/resources/renderers/IstioExactReferenceNavigation.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 { IstioDestinationRuleRenderer } from './IstioDestinationRuleRenderer'
+
+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([
+  {host:'api.prod.svc.mesh.internal',domain:'mesh.internal',linked:true},
+  {host:'api.prod.svc.cluster.local',domain:undefined,linked:false},
+  {host:'api.prod.svc.external.test',domain:'mesh.internal',linked:false},
+  {host:'api.prod',domain:'mesh.internal',linked:false},
+ ])('links only observed Istio service domains: $host',async ({host,domain,linked})=>{
+  const navigate=vi.fn()
+  await rendered(<IstioDestinationRuleRenderer data={{metadata:{namespace:'app'},spec:{host}}} serviceDomain={domain} onNavigate={navigate}/>,async container=>{
+   const link=[...container.querySelectorAll('button')].find(button=>button.textContent===host)
+   expect(Boolean(link)).toBe(linked)
+   if(link) {await click(container,host);expect(navigate).toHaveBeenCalledWith({kind:'services',group:'',namespace:'prod',name:'api'})}
+  })
+ })
+})

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

@@ -7,6 +7,7 @@ import {
   getVirtualServiceHostsList,
   getVirtualServiceGatewaysList,
   getVirtualServiceHttpRoutes,
+  resolveIstioServiceHost,
   getVirtualServiceTcpRoutes,
   getVirtualServiceTlsRoutes,
   getVirtualServiceRouteCount,
@@ -14,10 +15,11 @@ import {
 
 interface IstioVirtualServiceRendererProps {
   data: any
+  serviceDomain?: string
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualServiceRendererProps) {
+export function IstioVirtualServiceRenderer({ data, onNavigate, serviceDomain }: IstioVirtualServiceRendererProps) {
   const status = getVirtualServiceStatus(data)
   const hosts = getVirtualServiceHostsList(data)
   const gateways = getVirtualServiceGatewaysList(data)
@@ -148,6 +150,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                       {route.route.map((dest: any, di: number) => {
                         const weight = dest.weight ?? (route.route.length === 1 ? 100 : undefined)
                         const destHost = dest.destination?.host || ''
+                        const service = resolveIstioServiceHost(destHost, ns, serviceDomain)
                         const destPort = dest.destination?.port?.number
                         const destSubset = dest.destination?.subset
 
@@ -164,13 +167,7 @@ export function IstioVirtualServiceRenderer({ data, onNavigate }: IstioVirtualSe
                                 <span className="text-theme-text-secondary font-medium">{weight}%</span>
                               </div>
                             )}
-                            <ResourceLink
-                              name={destHost.split('.')[0]}
-                              kind="services"
-                              namespace={destHost.includes('.') ? destHost.split('.')[1] : ns}
-                              label={destHost}
-                              onNavigate={onNavigate}
-                            />
+                            {service ? <ResourceLink name={service.name} kind="services" group="" namespace={service.namespace} label={destHost} onNavigate={onNavigate} /> : <span className="text-theme-text-primary break-all">{destHost}</span>}
                             {destPort && (
                               <span className="text-theme-text-tertiary">:{destPort}</span>
                             )}

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,14 @@
 import { Cpu, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
-import { kindToPlural } from '../../../utils/navigation'
+import { objectReferenceToResourceRef } from '../../../utils/navigation'
+import type { ResourceRef } from '../../../types'
+import { TimeValue } from '../../ui/ScheduleValue'
 import {
   getScaledObjectStatus,
   getScaledObjectTarget,
   getScaledObjectReplicas,
   getScaledObjectTriggers,
   getScaledObjectHpaName,
-  getScaledObjectLastActiveTime,
   getScaledObjectPollingInterval,
   getScaledObjectCooldownPeriod,
 } from '../resource-utils-keda'
@@ -24,7 +25,7 @@ function summarizeScalingPolicies(policies: any[] | undefined, periodSeconds?: n
 
 interface KedaScaledObjectRendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
 }
 
 export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectRendererProps) {
@@ -75,18 +76,19 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
           <Property label="Target" value={(() => {
             const target = data.spec?.scaleTargetRef
             if (target?.name) {
-              return (
-                <ResourceLink
-                  name={target.name}
-                  kind={kindToPlural(target.kind || 'Deployment')}
-                  namespace={data.metadata?.namespace || ''}
-                  label={getScaledObjectTarget(data)}
-                  onNavigate={onNavigate}
-                />
-              )
+              // KEDA documents these defaults for omitted fields; an explicit
+              // target API group still belongs to the declared custom resource.
+              const ref = objectReferenceToResourceRef({
+                ...target,
+                apiVersion: target.apiVersion || 'apps/v1',
+                kind: target.kind || 'Deployment',
+                namespace: data.metadata?.namespace,
+              })
+              return ref ? <ResourceLink {...ref} label={getScaledObjectTarget(data)} onNavigate={onNavigate} /> : getScaledObjectTarget(data)
             }
             return getScaledObjectTarget(data)
           })()} />
+          <Property label="Target API" value={data.spec?.scaleTargetRef?.apiVersion || 'apps/v1'} />
           <Property label="Replicas" value={getScaledObjectReplicas(data)} />
           <Property label="Polling Interval" value={`${getScaledObjectPollingInterval(data)}s`} />
           <Property label="Cooldown Period" value={`${getScaledObjectCooldownPeriod(data)}s`} />
@@ -97,7 +99,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/KnativeEventingRenderer.tsx

@@ -1,12 +1,12 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { Radio, Filter, FileType, Inbox, ArrowRightLeft } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
-import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
 // ============================================================================
@@ -47,10 +47,9 @@ export function BrokerRenderer({ data, onNavigate }: RendererProps) {
           <PropertyList>
             {delivery.deadLetterSink?.ref && (
               <Property label="Dead Letter" value={
-                <ResourceLink
-                  name={delivery.deadLetterSink.ref.name}
-                  kind={kindToPlural(delivery.deadLetterSink.ref.kind || 'Service')}
-                  namespace={delivery.deadLetterSink.ref.namespace || ns}
+                <KnativeReferenceLink
+                  reference={delivery.deadLetterSink.ref}
+                  namespace={ns}
                   onNavigate={onNavigate}
                 />
               } />
@@ -96,19 +95,17 @@ export function TriggerRenderer({ data, onNavigate }: RendererProps) {
             </span>
           } />
           <Property label="Broker" value={
-            <ResourceLink
-              name={brokerName}
-              kind="brokers"
-              namespace={ns}
-              onNavigate={onNavigate}
-            />
+            spec.brokerRef
+              ? (spec.brokerRef.name && spec.brokerRef.namespace
+                ? <ResourceLink name={spec.brokerRef.name} kind="brokers" group="eventing.knative.dev" namespace={spec.brokerRef.namespace} onNavigate={onNavigate} />
+                : <span>{spec.brokerRef.name || '-'}</span>)
+              : <ResourceLink name={brokerName} kind="brokers" group="eventing.knative.dev" namespace={ns} onNavigate={onNavigate} />
           } />
           <Property label="Subscriber" value={
             subscriberRef ? (
-              <ResourceLink
-                name={subscriberRef.name}
-                kind={kindToPlural(subscriberRef.kind || 'Service')}
-                namespace={subscriberRef.namespace || ns}
+              <KnativeReferenceLink
+                reference={subscriberRef}
+                namespace={ns}
                 onNavigate={onNavigate}
               />
             ) : subscriberUri ? (
@@ -247,9 +244,8 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
           } />
           {channelRef && (
             <Property label="Channel" value={
-              <ResourceLink
-                name={channelRef.name}
-                kind={kindToPlural(channelRef.kind || 'Channel')}
+              <KnativeReferenceLink
+                reference={channelRef}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -257,10 +253,9 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
           )}
           <Property label="Subscriber" value={
             subscriberRef ? (
-              <ResourceLink
-                name={subscriberRef.name}
-                kind={kindToPlural(subscriberRef.kind || 'Service')}
-                namespace={subscriberRef.namespace || ns}
+              <KnativeReferenceLink
+                reference={subscriberRef}
+                namespace={ns}
                 onNavigate={onNavigate}
               />
             ) : subscriberUri ? (
@@ -269,10 +264,9 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
           } />
           <Property label="Reply" value={
             replyRef ? (
-              <ResourceLink
-                name={replyRef.name}
-                kind={kindToPlural(replyRef.kind || 'Channel')}
-                namespace={replyRef.namespace || ns}
+              <KnativeReferenceLink
+                reference={replyRef}
+                namespace={ns}
                 onNavigate={onNavigate}
               />
             ) : replyUri ? (
@@ -287,10 +281,9 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
           <PropertyList>
             {delivery.deadLetterSink.ref && (
               <Property label="Sink" value={
-                <ResourceLink
-                  name={delivery.deadLetterSink.ref.name}
-                  kind={kindToPlural(delivery.deadLetterSink.ref.kind || 'Service')}
-                  namespace={delivery.deadLetterSink.ref.namespace || ns}
+                <KnativeReferenceLink
+                  reference={delivery.deadLetterSink.ref}
+                  namespace={ns}
                   onNavigate={onNavigate}
                 />
               } />

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

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { KnativeReferenceLink } from './KnativeReferenceLink'
+import { TriggerRenderer } from './KnativeEventingRenderer'
+
+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('follows the Trigger broker reconciler namespace/name contract',async()=>{
+  const navigate=vi.fn()
+  await rendered(<TriggerRenderer data={{metadata:{namespace:'app'},spec:{brokerRef:{namespace:'events',name:'actual',kind:'Service',apiVersion:'v1'}}}} onNavigate={navigate}/>,async container=>{
+   await click(container,'actual');expect(navigate).toHaveBeenCalledWith({kind:'brokers',group:'eventing.knative.dev',namespace:'events',name:'actual'})
+  })
+ })
+
+ it.each([
+  {apiVersion:'messaging.knative.dev/v1',kind:'InMemoryChannel',name:'events'},
+  {group:'messaging.knative.dev',kind:'InMemoryChannel',name:'events'},
+ ])('uses the actual Knative target group and kind: %j', async reference => {
+  const navigate=vi.fn()
+  await rendered(<KnativeReferenceLink reference={reference} namespace="app" onNavigate={navigate}/>,async container=>{
+   await click(container,'events')
+   expect(navigate).toHaveBeenCalledWith({kind:'inmemorychannels',group:'messaging.knative.dev',namespace:'app',name:'events'})
+  })
+ })
+ it.each([
+  {kind:'Service',name:'events'},
+  {apiVersion:'v1',group:'serving.knative.dev',kind:'Service',name:'events'},
+ ])('leaves incomplete or conflicting Knative identity as text: %j', async reference=>{
+  await rendered(<KnativeReferenceLink reference={reference} namespace="app" onNavigate={vi.fn()}/>,container=>{
+   expect(container.textContent).toContain('events');expect(container.querySelector('button')).toBeNull()
+  })
+ })
+})

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

@@ -1,12 +1,12 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { ListOrdered, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
-import { kindToPlural } from '../../../utils/navigation'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner } from '../../ui/drawer-components'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
 function RefDisplay({ ref: destRef, ns, onNavigate }: { ref: any; ns: string; onNavigate?: RendererProps['onNavigate'] }) {
@@ -14,10 +14,9 @@ function RefDisplay({ ref: destRef, ns, onNavigate }: { ref: any; ns: string; on
 
   if (destRef.ref) {
     return (
-      <ResourceLink
-        name={destRef.ref.name}
-        kind={kindToPlural(destRef.ref.kind || 'Service')}
-        namespace={destRef.ref.namespace || ns}
+      <KnativeReferenceLink
+        reference={destRef.ref}
+        namespace={ns}
         onNavigate={onNavigate}
       />
     )