@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,136 @@
+import { Cpu } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getScaledObjectStatus,
+  getScaledObjectTarget,
+  getScaledObjectReplicas,
+  getScaledObjectTriggers,
+  getScaledObjectHpaName,
+  getScaledObjectLastActiveTime,
+  getScaledObjectPollingInterval,
+  getScaledObjectCooldownPeriod,
+} from '../resource-utils-keda'
+
+interface KedaScaledObjectRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const soStatus = getScaledObjectStatus(data)
+  const triggers = getScaledObjectTriggers(data)
+  const fallback = data.spec?.fallback
+
+  // Problem detection
+  const isPaused = soStatus.text === 'Paused'
+  const isFallback = soStatus.text === 'Fallback'
+  const isNotReady = soStatus.level === 'unhealthy'
+
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const fallbackCond = conditions.find((c: any) => c.type === 'Fallback')
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {isFallback && (
+        <AlertBanner
+          variant="error"
+          title="Fallback Active"
+          message={fallbackCond?.message || 'KEDA is using fallback replicas because triggers are failing.'}
+        />
+      )}
+      {isNotReady && !isFallback && (
+        <AlertBanner
+          variant="error"
+          title="ScaledObject Not Ready"
+          message={readyCond?.message || 'The ScaledObject is not in a ready state.'}
+        />
+      )}
+      {isPaused && (
+        <AlertBanner
+          variant="warning"
+          title="Scaling Paused"
+          message="Autoscaling is paused via annotation."
+        />
+      )}
+
+      {/* Scaling section */}
+      <Section title="Scaling" icon={Cpu}>
+        <PropertyList>
+          <Property label="Target" value={(() => {
+            const target = data.spec?.scaleTargetRef
+            if (target?.name) {
+              return (
+                <ResourceLink
+                  name={target.name}
+                  kind={(target.kind || 'Deployment').toLowerCase() + 's'}
+                  namespace={data.metadata?.namespace || ''}
+                  label={getScaledObjectTarget(data)}
+                  onNavigate={onNavigate}
+                />
+              )
+            }
+            return getScaledObjectTarget(data)
+          })()} />
+          <Property label="Replicas" value={getScaledObjectReplicas(data)} />
+          <Property label="Polling Interval" value={`${getScaledObjectPollingInterval(data)}s`} />
+          <Property label="Cooldown Period" value={`${getScaledObjectCooldownPeriod(data)}s`} />
+          <Property label="Generated HPA" value={(() => {
+            const hpaName = getScaledObjectHpaName(data)
+            if (hpaName && hpaName !== '-') {
+              return <ResourceLink name={hpaName} kind="horizontalpodautoscalers" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+            }
+            return hpaName
+          })()} />
+          <Property label="Last Active" value={getScaledObjectLastActiveTime(data)} />
+        </PropertyList>
+        {fallback && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Fallback</div>
+            <PropertyList>
+              <Property label="Failure Threshold" value={String(fallback.failureThreshold ?? '-')} />
+              <Property label="Replicas" value={String(fallback.replicas ?? '-')} />
+            </PropertyList>
+          </div>
+        )}
+      </Section>
+
+      {/* Triggers section */}
+      {triggers.length > 0 && (
+        <Section title={`Triggers (${triggers.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {triggers.map((trigger, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{trigger.type}</span>
+                  {trigger.name && (
+                    <span className="text-theme-text-tertiary">({trigger.name})</span>
+                  )}
+                  {trigger.authenticationRef && (
+                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      auth: {trigger.authenticationRef.name}
+                    </span>
+                  )}
+                </div>
+                {trigger.metadata && Object.keys(trigger.metadata).length > 0 && (
+                  <div className="mt-1 flex flex-wrap gap-1">
+                    {Object.entries(trigger.metadata).map(([k, v]) => (
+                      <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {k}: {v}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,151 @@
+import { KeyRound, Server, Cloud, Shield } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import {
+  getTriggerAuthSecretRefs,
+  getTriggerAuthEnvVars,
+} from '../resource-utils-keda'
+
+interface KedaTriggerAuthRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function KedaTriggerAuthRenderer({ data, onNavigate }: KedaTriggerAuthRendererProps) {
+  const spec = data.spec || {}
+  const conditions = data.status?.conditions || []
+
+  const secretRefs = getTriggerAuthSecretRefs(data)
+  const envVars = getTriggerAuthEnvVars(data)
+  const vault = spec.hashiCorpVault
+  const azureKeyVault = spec.azureKeyVault
+  const awsSecretManager = spec.awsSecretManager
+  const podIdentity = spec.podIdentity
+
+  return (
+    <>
+      {/* Pod Identity */}
+      {podIdentity && (
+        <Section title="Pod Identity" icon={Shield}>
+          <PropertyList>
+            <Property label="Provider" value={podIdentity.provider || '-'} />
+            {podIdentity.identityId && (
+              <Property label="Identity ID" value={podIdentity.identityId} />
+            )}
+            {podIdentity.identityOwner && (
+              <Property label="Identity Owner" value={podIdentity.identityOwner} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Secret References */}
+      {secretRefs.length > 0 && (
+        <Section title={`Secret References (${secretRefs.length})`} icon={KeyRound} defaultExpanded>
+          <div className="space-y-2">
+            {secretRefs.map((ref, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                  <span className="text-theme-text-primary font-medium">{ref.parameter}</span>
+                  <span className="text-theme-text-secondary">
+                    Secret: <ResourceLink name={ref.name} kind="secrets" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} /> / {ref.key}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Environment Variables */}
+      {envVars.length > 0 && (
+        <Section title={`Environment Variables (${envVars.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {envVars.map((env, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                  <span className="text-theme-text-primary font-medium">{env.parameter}</span>
+                  <span className="text-theme-text-secondary">Env: {env.name}</span>
+                  {env.containerName && (
+                    <span className="text-theme-text-tertiary">Container: {env.containerName}</span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* HashiCorp Vault */}
+      {vault && (
+        <Section title="HashiCorp Vault" icon={Server}>
+          <PropertyList>
+            <Property label="Address" value={vault.address || '-'} />
+            {vault.authentication && (
+              <Property label="Authentication" value={vault.authentication} />
+            )}
+            {vault.role && <Property label="Role" value={vault.role} />}
+            {vault.mount && <Property label="Mount" value={vault.mount} />}
+          </PropertyList>
+          {vault.secrets && vault.secrets.length > 0 && (
+            <div className="mt-2 space-y-1">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
+              {vault.secrets.map((s: any, i: number) => (
+                <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{s.parameter}</span>
+                  <span className="text-theme-text-secondary ml-2">{s.path} / {s.key}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </Section>
+      )}
+
+      {/* Azure Key Vault */}
+      {azureKeyVault && (
+        <Section title="Azure Key Vault" icon={Cloud}>
+          <PropertyList>
+            <Property label="Vault URI" value={azureKeyVault.vaultUri || '-'} />
+            {azureKeyVault.credentials?.clientId && (
+              <Property label="Client ID" value={azureKeyVault.credentials.clientId} />
+            )}
+          </PropertyList>
+          {azureKeyVault.secrets && azureKeyVault.secrets.length > 0 && (
+            <div className="mt-2 space-y-1">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
+              {azureKeyVault.secrets.map((s: any, i: number) => (
+                <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{s.parameter}</span>
+                  <span className="text-theme-text-secondary ml-2">{s.name}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </Section>
+      )}
+
+      {/* AWS Secrets Manager */}
+      {awsSecretManager && (
+        <Section title="AWS Secrets Manager" icon={Cloud}>
+          <PropertyList>
+            {awsSecretManager.region && (
+              <Property label="Region" value={awsSecretManager.region} />
+            )}
+          </PropertyList>
+          {awsSecretManager.secrets && awsSecretManager.secrets.length > 0 && (
+            <div className="mt-2 space-y-1">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Secrets</div>
+              {awsSecretManager.secrets.map((s: any, i: number) => (
+                <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                  <span className="text-theme-text-primary font-medium">{s.parameter}</span>
+                  <span className="text-theme-text-secondary ml-2">{s.name}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </Section>
+      )}
+
+      {conditions.length > 0 && <ConditionsSection conditions={conditions} />}
+    </>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { Settings, Container } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { getKnativeConditionStatus } from '../resource-utils-knative'
+
+interface KnativeConfigurationRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function KnativeConfigurationRenderer({ data, onNavigate }: KnativeConfigurationRendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+
+  const latestCreated = data.status?.latestCreatedRevisionName
+  const latestReady = data.status?.latestReadyRevisionName
+  const containers = data.spec?.template?.spec?.containers || []
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Configuration" />
+
+      <Section title="Overview" icon={Settings} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Latest Created" value={latestCreated ? (
+            <ResourceLink
+              name={latestCreated}
+              kind="revisions"
+              namespace={ns}
+              onNavigate={onNavigate}
+            />
+          ) : '-'} />
+          <Property label="Latest Ready" value={latestReady ? (
+            <ResourceLink
+              name={latestReady}
+              kind="revisions"
+              namespace={ns}
+              onNavigate={onNavigate}
+            />
+          ) : '-'} />
+        </PropertyList>
+      </Section>
+
+      {containers.length > 0 && (
+        <Section title="Template" icon={Container} defaultExpanded>
+          <div className="space-y-2">
+            {containers.map((c: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div className="font-medium text-theme-text-primary">{c.name || 'container'}</div>
+                <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
+                {c.ports && c.ports.length > 0 && (
+                  <div className="text-xs text-theme-text-tertiary mt-1">
+                    Ports: {c.ports.map((p: any) => `${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}

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

@@ -0,0 +1,309 @@
+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 { getKnativeConditionStatus } from '../resource-utils-knative'
+
+interface RendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+// ============================================================================
+// Broker
+// ============================================================================
+
+export function BrokerRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const address = data.status?.address?.url
+  const delivery = data.spec?.delivery
+  const brokerClass = data.metadata?.annotations?.['eventing.knative.dev/broker.class']
+  const configRef = data.spec?.config
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Broker" />
+
+      <Section title="Overview" icon={Radio} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Address" value={address ? (
+            <span className="text-theme-text-primary break-all">{address}</span>
+          ) : undefined} />
+          <Property label="Class" value={brokerClass} />
+          {configRef && (
+            <Property label="Config" value={`${configRef.kind}/${configRef.name}`} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {delivery && (
+        <Section title="Delivery" defaultExpanded>
+          <PropertyList>
+            {delivery.deadLetterSink?.ref && (
+              <Property label="Dead Letter" value={
+                <ResourceLink
+                  name={delivery.deadLetterSink.ref.name}
+                  kind={delivery.deadLetterSink.ref.kind?.toLowerCase() + 's'}
+                  namespace={delivery.deadLetterSink.ref.namespace || ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {delivery.deadLetterSink?.uri && (
+              <Property label="Dead Letter URI" value={delivery.deadLetterSink.uri} />
+            )}
+            <Property label="Retry" value={delivery.retry != null ? String(delivery.retry) : undefined} />
+            <Property label="Backoff Policy" value={delivery.backoffPolicy} />
+            <Property label="Backoff Delay" value={delivery.backoffDelay} />
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// Trigger
+// ============================================================================
+
+export function TriggerRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+  const brokerName = spec.broker || 'default'
+  const subscriberRef = spec.subscriber?.ref
+  const subscriberUri = spec.subscriber?.uri
+  const filterAttrs = spec.filter?.attributes || {}
+  const filterEntries = Object.entries(filterAttrs)
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Trigger" />
+
+      <Section title="Overview" icon={Filter} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Broker" value={
+            <ResourceLink
+              name={brokerName}
+              kind="brokers"
+              namespace={ns}
+              onNavigate={onNavigate}
+            />
+          } />
+          <Property label="Subscriber" value={
+            subscriberRef ? (
+              <ResourceLink
+                name={subscriberRef.name}
+                kind={(subscriberRef.kind?.toLowerCase() || 'services') + (subscriberRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                namespace={subscriberRef.namespace || ns}
+                onNavigate={onNavigate}
+              />
+            ) : subscriberUri ? (
+              <span className="text-theme-text-primary break-all">{subscriberUri}</span>
+            ) : '-'
+          } />
+        </PropertyList>
+      </Section>
+
+      {filterEntries.length > 0 && (
+        <Section title={`Filter (${filterEntries.length} attributes)`} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {filterEntries.map(([key, val]) => (
+              <span key={key} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+                {key}={String(val)}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// EventType
+// ============================================================================
+
+export function EventTypeRenderer({ data }: RendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+
+  return (
+    <>
+      <Section title="Overview" icon={FileType} defaultExpanded>
+        <PropertyList>
+          <Property label="Type" value={spec.type} />
+          <Property label="Source" value={spec.source} />
+          <Property label="Schema" value={spec.schema} />
+          <Property label="Description" value={spec.description} />
+          <Property label="Broker" value={spec.reference?.name || spec.broker} />
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={status.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// Channel
+// ============================================================================
+
+export function ChannelRenderer({ data }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const address = data.status?.address?.url
+  const subscribers = data.status?.subscribers || []
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Channel" />
+
+      <Section title="Overview" icon={Inbox} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          <Property label="Address" value={address ? (
+            <span className="text-theme-text-primary break-all">{address}</span>
+          ) : undefined} />
+        </PropertyList>
+      </Section>
+
+      {subscribers.length > 0 && (
+        <Section title={`Subscribers (${subscribers.length})`} defaultExpanded>
+          <div className="space-y-1.5">
+            {subscribers.map((sub: any, i: number) => (
+              <div key={i} className="text-sm text-theme-text-secondary">
+                {sub.subscriberURI || sub.replyURI || `Subscriber ${i + 1}`}
+                {sub.ready === 'True' && (
+                  <span className="ml-2 px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded text-[10px]">ready</span>
+                )}
+                {sub.ready === 'False' && (
+                  <span className="ml-2 px-1.5 py-0.5 bg-red-500/20 text-red-400 rounded text-[10px]">not ready</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}
+
+// ============================================================================
+// InMemoryChannel
+// ============================================================================
+
+export function InMemoryChannelRenderer({ data, onNavigate }: RendererProps) {
+  // InMemoryChannel has the same shape as Channel
+  return <ChannelRenderer data={data} onNavigate={onNavigate} />
+}
+
+// ============================================================================
+// Subscription
+// ============================================================================
+
+export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
+  const status = getKnativeConditionStatus(data)
+  const ns = data.metadata?.namespace || ''
+  const spec = data.spec || {}
+
+  const channelRef = spec.channel
+  const subscriberRef = spec.subscriber?.ref
+  const subscriberUri = spec.subscriber?.uri
+  const replyRef = spec.reply?.ref
+  const replyUri = spec.reply?.uri
+  const delivery = spec.delivery
+
+  return (
+    <>
+      <KnativeNotReadyBanner status={status} data={data} resourceType="Subscription" />
+
+      <Section title="Overview" icon={ArrowRightLeft} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={
+            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+              {status.text}
+            </span>
+          } />
+          {channelRef && (
+            <Property label="Channel" value={
+              <ResourceLink
+                name={channelRef.name}
+                kind={(channelRef.kind?.toLowerCase() || 'channels') + (channelRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                namespace={ns}
+                onNavigate={onNavigate}
+              />
+            } />
+          )}
+          <Property label="Subscriber" value={
+            subscriberRef ? (
+              <ResourceLink
+                name={subscriberRef.name}
+                kind={(subscriberRef.kind?.toLowerCase() || 'services') + (subscriberRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                namespace={subscriberRef.namespace || ns}
+                onNavigate={onNavigate}
+              />
+            ) : subscriberUri ? (
+              <span className="text-theme-text-primary break-all">{subscriberUri}</span>
+            ) : '-'
+          } />
+          <Property label="Reply" value={
+            replyRef ? (
+              <ResourceLink
+                name={replyRef.name}
+                kind={(replyRef.kind?.toLowerCase() || 'channels') + (replyRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                namespace={replyRef.namespace || ns}
+                onNavigate={onNavigate}
+              />
+            ) : replyUri ? (
+              <span className="text-theme-text-primary break-all">{replyUri}</span>
+            ) : undefined
+          } />
+        </PropertyList>
+      </Section>
+
+      {delivery?.deadLetterSink && (
+        <Section title="Dead Letter" defaultExpanded>
+          <PropertyList>
+            {delivery.deadLetterSink.ref && (
+              <Property label="Sink" value={
+                <ResourceLink
+                  name={delivery.deadLetterSink.ref.name}
+                  kind={(delivery.deadLetterSink.ref.kind?.toLowerCase() || 'services') + 's'}
+                  namespace={delivery.deadLetterSink.ref.namespace || ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {delivery.deadLetterSink.uri && (
+              <Property label="URI" value={delivery.deadLetterSink.uri} />
+            )}
+            <Property label="Retry" value={delivery.retry != null ? String(delivery.retry) : undefined} />
+            <Property label="Backoff Policy" value={delivery.backoffPolicy} />
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data.status?.conditions || []} />
+    </>
+  )
+}