@skyhook-io/k8s-ui 1.17.0 → 1.18.0

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

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

package/src/components/resources/renderers/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,6 +1,7 @@
 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
@@ -16,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 (
     <>
@@ -50,11 +54,34 @@ export function IngressRenderer({ data, onNavigate }: IngressRendererProps) {
           {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">
@@ -87,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/KedaScaledObjectRenderer.tsx

@@ -1,6 +1,7 @@
 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,
@@ -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`} />

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}
       />
     )

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

@@ -1,13 +1,13 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { Network, ShieldCheck, Server, Globe } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
-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
 }
 
 // ============================================================================
@@ -166,9 +166,8 @@ export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
           <Property label="Protocol" value={protocolType} />
           {objectRef && (
             <Property label="Target" value={
-              <ResourceLink
-                name={objectRef.name}
-                kind={kindToPlural(objectRef.kind || 'Deployment')}
+              <KnativeReferenceLink
+                reference={objectRef}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -213,9 +212,8 @@ export function DomainMappingRenderer({ data, onNavigate }: RendererProps) {
           ) : undefined} />
           {ref && (
             <Property label="Target" value={
-              <ResourceLink
-                name={ref.name}
-                kind={kindToPlural(ref.kind || 'Service')}
+              <KnativeReferenceLink
+                reference={ref}
                 namespace={ns}
                 onNavigate={onNavigate}
               />

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

@@ -0,0 +1,14 @@
+import { ResourceLink } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types/core'
+import { getKnativeReference } from '../resource-utils-knative'
+
+export function KnativeReferenceLink({ reference, namespace, onNavigate }: {
+  reference: any
+  namespace: string
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const resolved = getKnativeReference(reference, namespace)
+  return resolved
+    ? <ResourceLink {...resolved} onNavigate={onNavigate} />
+    : <span className="text-theme-text-primary">{reference?.name || '-'}</span>
+}