@skyhook-io/k8s-ui 1.17.0 → 1.17.1

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