@skyhook-io/k8s-ui 1.17.0 → 1.17.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}
       />
     )

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>
+}

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

@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { describe, expect, it, vi } from 'vitest'
+import { PingSourceRenderer } from './KnativeSourceRenderer'
+import { DomainMappingRenderer } from './KnativeNetworkingRenderer'
+import { initNavigationMap, resetNavigationMap } from '../../../utils/navigation'
+
+describe('Knative reference links', () => {
+  it('keep the sink reference API group instead of resolving to the core Kind', async () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    initNavigationMap([
+      { group: '', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: false, verbs: ['get'] },
+      { group: 'serving.knative.dev', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: true, verbs: ['get'] },
+      { group: 'relationships.radar.test', version: 'v1', kind: 'Service', name: 'virtualservices', namespaced: true, isCrd: true, verbs: ['get'] },
+    ])
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const onNavigate = vi.fn()
+    const clickSink = async (sinkRef: Record<string, string>) => {
+      await act(async () => root.render(<PingSourceRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team', name: 'ping' },
+        spec: { schedule: '* * * * *', sink: { ref: sinkRef } },
+      }} />))
+      const link = [...container.querySelectorAll('button')].find(button => button.textContent === sinkRef.name)
+      expect(link).toBeDefined()
+      await act(async () => link!.click())
+    }
+    try {
+      await clickSink({ apiVersion: 'serving.knative.dev/v1', kind: 'Service', name: 'knative-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', namespace: 'team', name: 'knative-backend' }))
+      await clickSink({ group: 'serving.knative.dev', kind: 'Service', name: 'group-only-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', name: 'group-only-backend' }))
+      await clickSink({ apiVersion: 'relationships.radar.test/v1', kind: 'Service', name: 'custom-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'virtualservices', group: 'relationships.radar.test', name: 'custom-backend' }))
+      await clickSink({ apiVersion: 'v1', kind: 'Service', name: 'core-backend' })
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', name: 'core-backend' }))
+      expect(onNavigate.mock.lastCall?.[0].group ?? '').toBe('')
+
+      await act(async () => root.render(<PingSourceRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team' }, spec: { sink: { ref: { kind: 'Service', name: 'unknown-group' } } },
+      }} />))
+      expect(container.textContent).toContain('unknown-group')
+      expect([...container.querySelectorAll('button')].some(button => button.textContent === 'unknown-group')).toBe(false)
+
+      await act(async () => root.render(<DomainMappingRenderer onNavigate={onNavigate} data={{
+        metadata: { namespace: 'team', name: 'example.com' },
+        spec: { ref: { apiVersion: 'serving.knative.dev/v1', kind: 'Service', name: 'mapped-backend' } },
+      }} />))
+      const target = [...container.querySelectorAll('button')].find(button => button.textContent === 'mapped-backend')
+      expect(target).toBeDefined()
+      await act(async () => target!.click())
+      expect(onNavigate).toHaveBeenLastCalledWith(expect.objectContaining({ kind: 'services', group: 'serving.knative.dev', name: 'mapped-backend' }))
+    } finally {
+      await act(async () => root.unmount())
+      resetNavigationMap()
+      Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: false })
+    }
+  })
+})

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

@@ -1,12 +1,12 @@
+import { KnativeReferenceLink } from './KnativeReferenceLink'
 import { Clock, Server, Container, Link2 } 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 SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavigate?: RendererProps['onNavigate'] }) {
@@ -15,10 +15,9 @@ function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavig
   if (sink.ref) {
     return (
       <Property label="Sink" value={
-        <ResourceLink
-          name={sink.ref.name}
-          kind={kindToPlural(sink.ref.kind || 'Service')}
-          namespace={sink.ref.namespace || ns}
+        <KnativeReferenceLink
+          reference={sink.ref}
+          namespace={ns}
           onNavigate={onNavigate}
         />
       } />
@@ -194,10 +193,9 @@ export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Subject API" value={subjectRef.apiVersion} />
               {subjectRef.name && (
                 <Property label="Subject" value={
-                  <ResourceLink
-                    name={subjectRef.name}
-                    kind={kindToPlural(subjectRef.kind || 'Deployment')}
-                    namespace={subjectRef.namespace || ns}
+                  <KnativeReferenceLink
+                    reference={subjectRef}
+                    namespace={ns}
                     onNavigate={onNavigate}
                   />
                 } />

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

@@ -11,7 +11,7 @@ import {
   isCrossplanePaused,
   getComposingXRRef,
 } from '../resource-utils-crossplane'
-import { kindToPlural } from '../../../utils/navigation'
+import { kindToPluralWithGroup } from '../../../utils/navigation'
 
 interface ManagedResourceRendererProps {
   data: any
@@ -82,7 +82,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
               value={
                 <ResourceLink
                   name={composingXR.name}
-                  kind={kindToPlural(composingXR.kind)}
+                  kind={kindToPluralWithGroup(composingXR.kind, extractApiGroup(composingXR.apiVersion))}
                   namespace={namespace}
                   group={extractApiGroup(composingXR.apiVersion) || undefined}
                   onNavigate={onNavigate}

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

@@ -2,16 +2,17 @@ import { Info } from 'lucide-react'
 import { Tooltip } from '../../ui/Tooltip'
 
 interface MetricsUnavailableNoticeProps {
+  noUsageYet?: boolean
   rawError?: string
   diagnosis?: string
 }
 
-export function MetricsUnavailableNotice({ rawError, diagnosis }: MetricsUnavailableNoticeProps) {
+export function MetricsUnavailableNotice({ rawError, diagnosis, noUsageYet }: MetricsUnavailableNoticeProps) {
   return (
     <div className="card-inner-lg text-xs text-theme-text-tertiary">
       <div className="flex items-center gap-1.5">
         <span className="min-w-0 leading-5">
-          Metrics unavailable. Radar cannot read metrics.k8s.io.
+          {noUsageYet ? 'No usage yet: this Pod is not running' : 'Metrics unavailable. Radar cannot read metrics.k8s.io.'}
         </span>
         {rawError && (
           <Tooltip

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

@@ -450,3 +450,35 @@ describe('PodRenderer on a Radar without variable sources', () => {
     expect(html).not.toContain('could not be loaded')
   })
 })
+
+describe('PodRenderer pending Pods, including non-CNPG workloads', () => {
+  const pending = { apiVersion: 'v1', kind: 'Pod', metadata: { name: 'nginx-join', namespace: 'default' }, spec: { containers: [{ name: 'nginx', image: 'nginx' }], initContainers: [{ name: 'setup', image: 'busybox' }] }, status: { phase: 'Pending' } }
+  const render = (data: any, metricsHistory: any = { containers: [], metricsAPIReachable: true }) => renderToString(<PodRenderer data={data} onCopy={() => {}} copied={null} metricsUnavailable metricsHistory={metricsHistory} />)
+  it('shows no usage yet only with a successful metrics API collection', () => {
+    expect(render(pending)).toContain('No usage yet: this Pod is not running')
+    expect(render(pending)).not.toContain('Radar cannot read metrics.k8s.io')
+    expect(render(pending, { containers: [], metricsAPIReachable: false })).toContain('Radar cannot read metrics.k8s.io')
+    expect(render(pending, { containers: [], collectionError: 'forbidden' })).toContain('forbidden')
+    expect(render({ ...pending, status: { phase: 'Running' } })).toContain('Radar cannot read metrics.k8s.io')
+    expect(render({ ...pending, status: { phase: 'Pending', initContainerStatuses: [{ name: 'setup', state: { running: {} } }] } })).not.toContain('No usage yet')
+  })
+  it('shows unstarted regular and init containers neutrally', () => {
+    const html = render(pending)
+    expect(html.match(/Not started/g)).toHaveLength(2)
+    expect(html).not.toContain('Not Ready')
+    expect(html).not.toMatch(/>unknown</)
+  })
+  it.each(['ContainerCreating', 'PodInitializing', 'ImagePullBackOff', 'CrashLoopBackOff'])('tones reported waiting reason %s appropriately', (reason) => {
+    const html = render({ ...pending, status: { phase: 'Pending', containerStatuses: [{ name: 'nginx', state: { waiting: { reason } } }] } })
+    const bad = ['ImagePullBackOff', 'CrashLoopBackOff'].includes(reason)
+    expect(html).toContain(bad ? 'bg-red-100' : 'bg-theme-hover/50')
+    if (bad) expect(html).toContain(reason)
+  })
+})
+
+it('shows reported running-but-unready nginx readiness as degraded', () => {
+  const data = { ...pod, status: { phase: 'Running', containerStatuses: [{ name: pod.spec.containers[0].name, ready: false, state: { running: {} } }] } }
+  const html = renderToString(<PodRenderer data={data} onCopy={() => {}} copied={null} />)
+  expect(html).toMatch(/bg-amber-100[^>]*>Not Ready</)
+  expect(html).toMatch(/>running</)
+})

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

@@ -5,7 +5,7 @@ import { PolicySection } from './PolicySection'
 import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
-import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
+import { getResourceStatusColor, SEVERITY_BORDER } from '../../../utils/badge-colors'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -26,6 +26,7 @@ import { Tooltip } from '../../ui/Tooltip'
 import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
 import { getRadarUpgradeRequirement, type RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { MetricsChart } from '../../ui/MetricsChart'
+import { Badge } from '../../ui/Badge'
 import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 import { ContainerEnvironmentSection } from './ContainerEnvironmentSection'
 import { formatRelativeAgeTime } from '../../../utils/format'
@@ -85,7 +86,7 @@ interface PodRendererProps {
   renderPortAction?: (props: { namespace: string; podName: string; port: number; protocol: string; disabled?: boolean }) => ReactNode
   // Metrics data injection
   metrics?: { containers?: any[]; timestamp?: string }
-  metricsHistory?: { containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
+  metricsHistory?: { metricsAPIReachable?: boolean; containers?: any[]; collectionError?: string; metricsUnavailableReason?: string; metricsUnavailableDiagnosis?: string }
   metricsUnavailable?: boolean
   hideMetricsServer?: boolean
   // Filesystem browser render props
@@ -305,6 +306,7 @@ export function PodRenderer({
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
   const initContainers = data.spec?.initContainers || []
+  const podResources = data.spec?.resources
   const initContainerStatuses = data.status?.initContainerStatuses || []
   const hasEnvironmentDeclarations = [...initContainers, ...containers].some(
     (container: any) => container.env?.length > 0 || container.envFrom?.length > 0,
@@ -325,7 +327,9 @@ export function PodRenderer({
   const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
   const hasProblems = podProblems.length > 0 && !operationalIssuesShown
-  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError
+  const notRunning = data.status?.phase === 'Pending' && ![...containerStatuses, ...initContainerStatuses].some((s: any) => s.state?.running)
+  const noUsageYet = notRunning && metricsHistory?.metricsAPIReachable === true && !metricsHistory.collectionError && !metricsHistory.containers?.length && !metrics?.containers?.length
+  const showMetricsUnavailable = !!metricsUnavailable && !metricsHistory?.collectionError && !noUsageYet
   const hasMetricsHistory = !!metricsHistory?.containers?.length
   const currentMetrics = metricsUnavailable ? undefined : metrics
 
@@ -520,10 +524,11 @@ export function PodRenderer({
               } else if (isWaiting) {
                 statusLabel = state?.waiting?.reason || 'Waiting'
               } else {
-                statusLabel = 'Pending'
+                statusLabel = 'Not started'
               }
+              const reportedFailure = isFailed || !!(isWaiting && state?.waiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(state.waiting.reason))
               const statusColor = getResourceStatusColor(
-                isCompleted ? 'succeeded' : isFailed ? 'failed' : isInitRunning ? 'running' : isWaiting ? 'waiting' : 'pending'
+                isCompleted ? 'succeeded' : reportedFailure ? 'failed' : isInitRunning ? 'running' : 'unknown'
               )
 
               // Build command string
@@ -534,10 +539,11 @@ export function PodRenderer({
               return (
                 <div key={container.name} className={clsx(
                   'rounded-lg p-3 border-l-2',
-                  isCompleted ? 'bg-theme-elevated/20 border-green-500/40' :
-                  isFailed ? 'bg-theme-elevated/30 border-red-500/50' :
-                  isInitRunning ? 'bg-theme-elevated/30 border-blue-500/50' :
-                  'bg-theme-elevated/30 border-yellow-500/40'
+                  isCompleted ? 'bg-theme-elevated/20' : 'bg-theme-elevated/30',
+                  isCompleted ? SEVERITY_BORDER.success :
+                  reportedFailure ? 'border-l-semantic-error' :
+                  isInitRunning ? SEVERITY_BORDER.info :
+                  SEVERITY_BORDER.neutral
                 )}>
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-2">
@@ -575,7 +581,7 @@ export function PodRenderer({
                       </div>
                     )}
                     {/* Waiting reason detail */}
-                    {isWaiting && state?.waiting?.reason && state.waiting.reason !== 'PodInitializing' && (
+                    {isWaiting && state?.waiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(state.waiting.reason) && (
                       <div className="text-red-400 flex items-center gap-1">
                         <span className="font-medium">{state.waiting.reason}</span>
                         {state.waiting.message && (
@@ -623,6 +629,20 @@ export function PodRenderer({
 
       <Section title="Containers" icon={HardDrive} defaultExpanded>
         <div className="space-y-3">
+          {/* Pod-level budget (spec.resources) is shared by all containers, so it
+              stays its own row rather than being merged into the container rows. */}
+          {(podResources?.requests || podResources?.limits) && (
+            <div className="rounded-[10px] border border-dashed border-theme-border p-3">
+              <div className="flex items-baseline justify-between gap-2 mb-2">
+                <span className="text-sm font-medium text-theme-text-primary">Pod (aggregate)</span>
+                <span className="text-xs text-theme-text-tertiary">Shared by all containers</span>
+              </div>
+              <div className="text-xs text-theme-text-secondary space-y-1">
+                {podResources.requests && <div>Requests: {formatResources(podResources.requests)}</div>}
+                {podResources.limits && <div>Limits: {formatResources(podResources.limits)}</div>}
+              </div>
+            </div>
+          )}
           {containers.map((container: any) => {
             const status = containerStatuses.find((s: any) => s.name === container.name)
             const state = status?.state
@@ -638,6 +658,7 @@ export function PodRenderer({
             // failure — tone its badges/text sky, not red, so the drawer agrees
             // with the calm "Completed" table badge instead of screaming red.
             const terminatedOk = currentTerminated?.exitCode === 0
+            const reportedFailure = !!((currentTerminated?.exitCode != null && currentTerminated.exitCode !== 0) || (currentWaiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(currentWaiting.reason)))
 
             return (
               <div key={container.name} className="card-inner-lg">
@@ -674,23 +695,12 @@ export function PodRenderer({
                         </button>
                       </Tooltip>
                     )}
-                    <span className={clsx(
-                      'badge',
-                      isReady ? SEVERITY_BADGE_BORDERED.success :
-                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
-                      SEVERITY_BADGE_BORDERED.error
-                    )}>
-                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : 'Not Ready'}
-                    </span>
-                    <span className={clsx(
-                      'badge',
-                      stateKey === 'running' ? SEVERITY_BADGE_BORDERED.success :
-                      stateKey === 'waiting' ? SEVERITY_BADGE_BORDERED.warning :
-                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
-                      SEVERITY_BADGE_BORDERED.error
-                    )}>
+                    <Badge severity={isReady ? 'success' : terminatedOk ? 'info' : reportedFailure ? 'error' : stateKey === 'running' && isReady === false ? 'warning' : 'neutral'}>
+                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : !stateKey || stateKey === 'unknown' ? 'Not started' : 'Not Ready'}
+                    </Badge>
+                    {stateKey !== 'unknown' && <Badge severity={stateKey === 'running' ? 'success' : terminatedOk ? 'info' : reportedFailure ? 'error' : 'neutral'}>
                       {stateKey}
-                    </span>
+                    </Badge>}
                   </div>
                 </div>
                 <div className="text-xs text-theme-text-secondary space-y-1">
@@ -704,7 +714,7 @@ export function PodRenderer({
                     )
                   })()}
                   {/* Show current waiting reason (e.g., CrashLoopBackOff) */}
-                  {currentWaiting?.reason && currentWaiting.reason !== 'ContainerCreating' && (
+                  {currentWaiting?.reason && !['ContainerCreating', 'PodInitializing'].includes(currentWaiting.reason) && (
                     <div className="text-red-400 flex items-center gap-1">
                       <span className="font-medium">{currentWaiting.reason}</span>
                       {currentWaiting.message && (
@@ -831,8 +841,9 @@ export function PodRenderer({
       )}
 
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
-      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable) && (
+      {!hideMetricsServer && !!(currentMetrics?.containers?.length || hasMetricsHistory || metricsHistory?.collectionError || showMetricsUnavailable || noUsageYet) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>
+          {noUsageYet && <MetricsUnavailableNotice noUsageYet />}
           {showMetricsUnavailable && (
             <MetricsUnavailableNotice rawError={metricsHistory?.metricsUnavailableReason} diagnosis={metricsHistory?.metricsUnavailableDiagnosis} />
           )}
@@ -852,7 +863,8 @@ export function PodRenderer({
                 // fall through to them or their chart shows no limit line.
                 const containerSpec = containers.find((c: any) => c.name === historyContainer.name)
                   || initContainers.find((c: any) => c.name === historyContainer.name && c.restartPolicy === 'Always')
-                const limits = containerSpec?.resources?.limits
+                // A container without its own limit is still bounded by the pod-level one.
+                const limits = { ...podResources?.limits, ...containerSpec?.resources?.limits }
                 const requests = containerSpec?.resources?.requests
 
                 // Get historical data points (from history or empty)

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

@@ -6,7 +6,7 @@ import { gatewayBackendResourceRef, gatewayParentResourceRef } from '../../../ut
 
 interface SimpleRouteRendererProps {
   data: any
-  kind: 'TCPRoute' | 'TLSRoute'
+  kind: 'TCPRoute' | 'TLSRoute' | 'UDPRoute'
   onNavigate?: (ref: ResourceRef) => void
 }