@skyhook-io/k8s-ui 1.8.5 → 1.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/resources/get-pod-phase-display.test.ts

@@ -1,5 +1,32 @@
 import { describe, it, expect } from 'vitest'
-import { getPodPhaseDisplay } from './resource-utils'
+import { getPodPhaseDisplay, getPodStatus } from './resource-utils'
+
+describe('getPodStatus', () => {
+  it('keeps a Succeeded pod neutral despite a sidecar that OOMed before completion', () => {
+    const succeededWithOomedSidecar = {
+      status: {
+        phase: 'Succeeded',
+        containerStatuses: [
+          { name: 'main', ready: false, state: { terminated: { reason: 'Completed', exitCode: 0 } } },
+          { name: 'sidecar', ready: false, state: { terminated: { reason: 'OOMKilled', exitCode: 137 } } },
+        ],
+      },
+    }
+    const r = getPodStatus(succeededWithOomedSidecar)
+    expect(r.text).toBe('Completed')
+    expect(r.level).toBe('neutral')
+  })
+
+  it('still flags a crash-looping (non-terminal) pod as unhealthy', () => {
+    const crashing = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [{ name: 'app', ready: false, state: { waiting: { reason: 'CrashLoopBackOff' } } }],
+      },
+    }
+    expect(getPodStatus(crashing).level).toBe('unhealthy')
+  })
+})
 
 const podRunningHealthy = {
   status: {
@@ -192,12 +219,59 @@ describe('getPodPhaseDisplay', () => {
     expect(r.level).toBe('unhealthy')
   })
 
-  it('marks pods with deletionTimestamp as Terminating regardless of phase', () => {
+  it('marks a long-terminating pod as Terminating + degraded (stuck shutdown)', () => {
     const r = getPodPhaseDisplay(podTerminating)
     expect(r.text).toBe('Running — Terminating')
     expect(r.level).toBe('degraded')
   })
 
+  it('keeps a recently-terminating pod neutral (graceful shutdown in progress)', () => {
+    const recent = {
+      metadata: { deletionTimestamp: new Date(Date.now() - 30 * 1000).toISOString() },
+      status: { phase: 'Running', containerStatuses: [{ name: 'app', ready: true, restartCount: 0 }] },
+    }
+    const r = getPodPhaseDisplay(recent)
+    expect(r.text).toBe('Running — Terminating')
+    expect(r.level).toBe('neutral')
+  })
+
+  it('treats a completing pod (container exited 0, not ready) as healthy', () => {
+    const completing = {
+      status: {
+        phase: 'Running',
+        containerStatuses: [
+          { name: 'app', ready: false, restartCount: 0, state: { terminated: { reason: 'Completed', exitCode: 0 } } },
+        ],
+      },
+    }
+    const r = getPodPhaseDisplay(completing)
+    expect(r.text).toBe('Running')
+    expect(r.level).toBe('healthy')
+  })
+
+  it('keeps a Failed pod unhealthy even while it is terminating', () => {
+    const failedTerminating = {
+      metadata: { deletionTimestamp: new Date().toISOString() },
+      status: { phase: 'Failed' },
+    }
+    const r = getPodPhaseDisplay(failedTerminating)
+    expect(r.text).toBe('Failed')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('surfaces a fatal container failure even while the pod is terminating', () => {
+    const terminatingCrash = {
+      metadata: { deletionTimestamp: new Date().toISOString() },
+      status: {
+        phase: 'Running',
+        containerStatuses: [{ name: 'app', ready: false, state: { waiting: { reason: 'CrashLoopBackOff' } } }],
+      },
+    }
+    const r = getPodPhaseDisplay(terminatingCrash)
+    expect(r.text).toBe('Running — CrashLoopBackOff')
+    expect(r.level).toBe('unhealthy')
+  })
+
   it('falls back to Unknown for missing/unknown phase', () => {
     expect(getPodPhaseDisplay({}).level).toBe('unknown')
     expect(getPodPhaseDisplay({}).phase).toBe('Unknown')
@@ -206,10 +280,48 @@ describe('getPodPhaseDisplay', () => {
 
   it('handles Succeeded/Pending/Failed phases', () => {
     expect(getPodPhaseDisplay({ status: { phase: 'Succeeded' } }).level).toBe('neutral')
-    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('degraded')
+    // A freshly-created Pending pod is benign (neutral), not degraded.
+    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('neutral')
     expect(getPodPhaseDisplay({ status: { phase: 'Failed' } }).level).toBe('unhealthy')
   })
 
+  it('flags Unschedulable immediately, but gives plain young Pending a grace window', () => {
+    // The scheduler tried and failed — surface it now, no grace (matches backend).
+    const unsched = {
+      status: { phase: 'Pending', conditions: [{ type: 'PodScheduled', status: 'False', reason: 'Unschedulable' }] },
+    }
+    expect(getPodPhaseDisplay(unsched).text).toBe('Pending — Unschedulable')
+    expect(getPodPhaseDisplay(unsched).level).toBe('degraded')
+
+    // Plain Pending (not yet placed) is benign while young, degraded once stuck.
+    expect(getPodPhaseDisplay({ status: { phase: 'Pending' } }).level).toBe('neutral')
+    const stuckPending = {
+      metadata: { creationTimestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString() },
+      status: { phase: 'Pending' },
+    }
+    expect(getPodPhaseDisplay(stuckPending).level).toBe('degraded')
+  })
+
+  it('flags a failing init container immediately, even on a young Pending pod', () => {
+    const initFail = {
+      metadata: { creationTimestamp: new Date().toISOString() },
+      status: {
+        phase: 'Pending',
+        initContainerStatuses: [{ name: 'init', ready: false, state: { waiting: { reason: 'ImagePullBackOff' } } }],
+      },
+    }
+    const r = getPodPhaseDisplay(initFail)
+    expect(r.text).toBe('Pending — ImagePullBackOff')
+    expect(r.level).toBe('unhealthy')
+  })
+
+  it('flags broadened fatal reasons like InvalidImageName', () => {
+    const bad = {
+      status: { phase: 'Pending', containerStatuses: [{ name: 'app', state: { waiting: { reason: 'InvalidImageName' } } }] },
+    }
+    expect(getPodPhaseDisplay(bad).level).toBe('unhealthy')
+  })
+
   it('flags ErrImagePull as unhealthy', () => {
     const r = getPodPhaseDisplay(podErrImagePull)
     expect(r.text).toBe('Pending — ErrImagePull')

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

@@ -15,17 +15,24 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
   const isSuspended = spec.suspend === true
   const hasNeverRun = !status.lastScheduleTime
 
-  // Calculate time since last success vs last schedule
-  const lastScheduleAge = status.lastScheduleTime ? new Date().getTime() - new Date(status.lastScheduleTime).getTime() : 0
-  const lastSuccessAge = status.lastSuccessfulTime ? new Date().getTime() - new Date(status.lastSuccessfulTime).getTime() : 0
-  const recentFailures = lastScheduleAge > 0 && lastSuccessAge > lastScheduleAge
+  // "Recent failures" means the latest scheduled run didn't reach success.
+  // Only meaningful once nothing is running — while a job is active the most
+  // recent run is simply still in flight, not failing. With concurrencyPolicy
+  // Allow an older failed run can overlap a new active one; CronJob status only
+  // carries aggregate timestamps, so we accept missing that rare case here (the
+  // failed Job still surfaces in the job list / topology) rather than reviving
+  // the false positive that fired on every normal in-flight run.
+  const activeJobs = status.active?.length || 0
+  const lastSchedule = status.lastScheduleTime ? new Date(status.lastScheduleTime).getTime() : 0
+  const lastSuccess = status.lastSuccessfulTime ? new Date(status.lastSuccessfulTime).getTime() : 0
+  const recentFailures = activeJobs === 0 && lastSchedule > 0 && lastSchedule > lastSuccess
 
   return (
     <>
-      {/* Suspended warning */}
+      {/* Suspended is an intentional operator state, not a fault — keep it informational. */}
       {isSuspended && (
         <AlertBanner
-          variant="warning"
+          variant="info"
           icon={Pause}
           title="CronJob Suspended"
           message="No new jobs will be scheduled until this CronJob is resumed."
@@ -42,7 +49,7 @@ export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
       )}
 
       {/* Recent failures warning */}
-      {recentFailures && (
+      {recentFailures && !isSuspended && (
         <AlertBanner
           variant="error"
           title="Recent Jobs Failing"

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

@@ -1,6 +1,7 @@
 import { Radio, Server, Waypoints } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface EndpointSliceRendererProps {
@@ -69,7 +70,7 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                     )}
                   </div>
                   <div className="flex items-center gap-2 shrink-0">
-                    <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{port.protocol || 'TCP'}</span>
+                    <Badge size="sm" protocol={port.protocol || 'TCP'}>{port.protocol || 'TCP'}</Badge>
                     <span className="font-mono text-theme-text-secondary">{port.port ?? '-'}</span>
                   </div>
                 </div>
@@ -92,9 +93,9 @@ export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendere
                     <div className="min-w-0 space-y-1">
                       <div className="flex flex-wrap items-center gap-1.5">
                         {(endpoint.addresses || []).map((address: string) => (
-                          <span key={address} className="badge-sm bg-theme-elevated text-theme-text-primary border border-theme-border font-mono">
+                          <Badge key={address} size="sm" tone="structural" className="font-mono">
                             {address}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                       {targetLabel && (

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

@@ -1,6 +1,6 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface GRPCRouteRendererProps {
@@ -77,7 +77,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
               hostnames.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {hostnames.map((h: string) => (
-                    <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
+                    <Badge key={h} tone="structural">{h}</Badge>
                   ))}
                 </div>
               ) : (
@@ -150,7 +150,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                       {match.method && (
                         <>
                           {match.method.type && match.method.type !== 'Exact' && (
-                            <span className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded text-[10px]">{match.method.type}</span>
+                            <Badge tone="accent1" size="sm">{match.method.type}</Badge>
                           )}
                           {match.method.service && (
                             <span>
@@ -200,9 +200,9 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                     <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       <Filter className="w-3 h-3 text-theme-text-tertiary" />
                       {filters.map((filter: any, filterIdx: number) => (
-                        <span key={filterIdx} className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded">
+                        <Badge key={filterIdx} tone="accent1" size="sm">
                           {filter.type}
-                        </span>
+                        </Badge>
                       ))}
                     </div>
                   </div>
@@ -231,20 +231,14 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
-                      <span className={clsx(
-                        'badge',
-                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-                      )}>
+                      <Badge severity={accepted.status === 'True' ? 'success' : 'error'}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
-                      </span>
+                      </Badge>
                     )}
                     {resolved && (
-                      <span className={clsx(
-                        'badge',
-                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
-                      )}>
+                      <Badge severity={resolved.status === 'True' ? 'success' : 'warning'}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
-                      </span>
+                      </Badge>
                     )}
                   </div>
                   {accepted?.message && accepted.status === 'False' && (

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

@@ -1,7 +1,6 @@
 import { Cpu } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { Badge } from '../../ui/Badge'
 
 interface GatewayClassRendererProps {
   data: any
@@ -35,16 +34,9 @@ export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
           <Property
             label="Accepted"
             value={
-              <span className={clsx(
-                'badge',
-                isAccepted
-                  ? 'bg-green-500/20 text-green-400'
-                  : isNotAccepted
-                    ? 'bg-red-500/20 text-red-400'
-                    : BADGE_INACTIVE
-              )}>
+              <Badge severity={isAccepted ? 'success' : isNotAccepted ? 'error' : 'neutral'}>
                 {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
-              </span>
+              </Badge>
             }
           />
         </PropertyList>

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

@@ -2,14 +2,7 @@ import { Globe, Radio, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
-
-const protocolColors: Record<string, string> = {
-  HTTP: 'bg-blue-500/20 text-blue-400',
-  HTTPS: 'bg-green-500/20 text-green-400',
-  TLS: 'bg-green-500/20 text-green-400',
-  TCP: 'bg-orange-500/20 text-orange-400',
-  UDP: 'bg-purple-500/20 text-purple-400',
-}
+import { Badge } from '../../ui/Badge'
 
 interface GatewayRendererProps {
   data: any
@@ -68,31 +61,17 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
           <Property
             label="Accepted"
             value={
-              <span className={clsx(
-                'badge',
-                isAccepted
-                  ? 'bg-green-500/20 text-green-400'
-                  : isNotAccepted
-                    ? 'bg-red-500/20 text-red-400'
-                    : BADGE_INACTIVE
-              )}>
+              <Badge severity={isAccepted ? 'success' : isNotAccepted ? 'error' : 'neutral'}>
                 {isAccepted ? 'True' : isNotAccepted ? 'False' : 'Unknown'}
-              </span>
+              </Badge>
             }
           />
           <Property
             label="Programmed"
             value={
-              <span className={clsx(
-                'badge',
-                isProgrammed
-                  ? 'bg-green-500/20 text-green-400'
-                  : isNotProgrammed
-                    ? 'bg-red-500/20 text-red-400'
-                    : BADGE_INACTIVE
-              )}>
+              <Badge severity={isProgrammed ? 'success' : isNotProgrammed ? 'error' : 'neutral'}>
                 {isProgrammed ? 'True' : isNotProgrammed ? 'False' : 'Unknown'}
-              </span>
+              </Badge>
             }
           />
         </PropertyList>
@@ -133,23 +112,20 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                   <div className="flex items-center gap-2">
                     {isHTTPS && <Lock className="w-3.5 h-3.5 text-green-400" />}
                     <span className="text-sm font-medium text-theme-text-primary">{listener.name}</span>
-                    <span className={clsx(
-                      'px-1.5 py-0.5 rounded text-[10px] font-medium',
-                      protocolColors[listener.protocol] || BADGE_INACTIVE
-                    )}>
+                    <Badge protocol={listener.protocol} size="sm">
                       {listener.protocol}:{listener.port}
-                    </span>
+                    </Badge>
                   </div>
                   <div className="flex items-center gap-1">
                     {isConflicted && (
-                      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-500/20 text-red-400">
+                      <Badge severity="error" size="sm">
                         Conflicted
-                      </span>
+                      </Badge>
                     )}
                     {hasUnresolvedRefs && (
-                      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-yellow-500/20 text-yellow-400">
+                      <Badge severity="warning" size="sm">
                         Unresolved Refs
-                      </span>
+                      </Badge>
                     )}
                     {listenerAccepted && (
                       <span className={clsx(

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

@@ -1,6 +1,6 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface HTTPRouteRendererProps {
@@ -77,7 +77,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
               hostnames.length > 0 ? (
                 <div className="flex flex-wrap gap-1">
                   {hostnames.map((h: string) => (
-                    <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
+                    <Badge key={h} tone="structural">{h}</Badge>
                   ))}
                 </div>
               ) : (
@@ -148,9 +148,9 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                   {matches.map((match: any, matchIdx: number) => (
                     <div key={matchIdx} className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
                       {match.method && (
-                        <span className="px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded font-medium">
+                        <Badge tone="structural" size="sm">
                           {match.method}
-                        </span>
+                        </Badge>
                       )}
                       {match.path && (
                         <span>
@@ -201,9 +201,9 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                       <Filter className="w-3 h-3 text-theme-text-tertiary" />
                       {filters.map((filter: any, filterIdx: number) => (
                         <span key={filterIdx} className="inline-flex items-center gap-1">
-                          <span className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded">
+                          <Badge tone="accent1" size="sm">
                             {filter.type}
-                          </span>
+                          </Badge>
                           {filter.type === 'RequestHeaderModifier' && filter.requestHeaderModifier && (
                             <span className="text-theme-text-tertiary">
                               {summarizeHeaderModifier(filter.requestHeaderModifier)}
@@ -263,20 +263,14 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
-                      <span className={clsx(
-                        'badge',
-                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-                      )}>
+                      <Badge severity={accepted.status === 'True' ? 'success' : 'error'}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
-                      </span>
+                      </Badge>
                     )}
                     {resolved && (
-                      <span className={clsx(
-                        'badge',
-                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
-                      )}>
+                      <Badge severity={resolved.status === 'True' ? 'success' : 'warning'}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
-                      </span>
+                      </Badge>
                     )}
                   </div>
                   {accepted?.message && accepted.status === 'False' && (

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

@@ -1,6 +1,6 @@
 import { Database, CheckCircle2, Shield } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -58,12 +58,9 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
           <Property
             label="Type"
             value={
-              <span className={clsx(
-                'badge',
-                isOCI ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
-              )}>
+              <Badge tone={isOCI ? 'accent2' : 'accent1'}>
                 {isOCI ? 'OCI' : 'HTTP'}
-              </span>
+              </Badge>
             }
           />
           {spec.provider && <Property label="Provider" value={spec.provider} />}

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

@@ -1,18 +1,17 @@
 import { Shield } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
 import {
   getAuthorizationPolicyAction,
   getAuthorizationPolicyRules,
   getAuthorizationPolicySelector,
 } from '../resource-utils-istio'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
-const actionColors: Record<string, string> = {
-  ALLOW: 'bg-green-500/20 text-green-400',
-  DENY: 'bg-red-500/20 text-red-400',
-  CUSTOM: 'bg-blue-500/20 text-blue-400',
-  AUDIT: 'bg-yellow-500/20 text-yellow-400',
+const actionSeverity: Record<string, BadgeSeverity> = {
+  ALLOW: 'success',
+  DENY: 'error',
+  CUSTOM: 'info',
+  AUDIT: 'warning',
 }
 
 interface IstioAuthorizationPolicyRendererProps {
@@ -51,12 +50,9 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
       <Section title="Authorization Policy" icon={Shield} defaultExpanded>
         <PropertyList>
           <Property label="Action" value={
-            <span className={clsx(
-              'badge',
-              actionColors[action] || BADGE_INACTIVE
-            )}>
+            <Badge severity={actionSeverity[action] ?? 'neutral'}>
               {action}
-            </span>
+            </Badge>
           } />
           <Property label="Scope" value={hasSelector ? 'Workload-scoped' : 'Namespace-wide'} />
           <Property label="Rules" value={String(rules.length)} />
@@ -88,24 +84,24 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
                     {rule.from.map((f: any, fi: number) => (
                       <div key={fi} className="flex flex-wrap gap-1 mb-1">
                         {f.source?.principals?.map((p: string, pi: number) => (
-                          <span key={`p-${pi}`} className="badge-sm bg-blue-500/10 text-blue-400">
+                          <Badge key={`p-${pi}`} tone="structural" size="sm">
                             principal: {p}
-                          </span>
+                          </Badge>
                         ))}
                         {f.source?.namespaces?.map((n: string, ni: number) => (
-                          <span key={`n-${ni}`} className="badge-sm bg-purple-500/10 text-purple-400">
+                          <Badge key={`n-${ni}`} tone="structural" size="sm">
                             namespace: {n}
-                          </span>
+                          </Badge>
                         ))}
                         {f.source?.ipBlocks?.map((ip: string, ipi: number) => (
-                          <span key={`ip-${ipi}`} className="badge-sm bg-orange-500/10 text-orange-400">
+                          <Badge key={`ip-${ipi}`} tone="structural" size="sm">
                             IP: {ip}
-                          </span>
+                          </Badge>
                         ))}
                         {f.source?.requestPrincipals?.map((rp: string, rpi: number) => (
-                          <span key={`rp-${rpi}`} className="badge-sm bg-cyan-500/10 text-cyan-400">
+                          <Badge key={`rp-${rpi}`} tone="structural" size="sm">
                             reqPrincipal: {rp}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                     ))}
@@ -119,24 +115,24 @@ export function IstioAuthorizationPolicyRenderer({ data }: IstioAuthorizationPol
                     {rule.to.map((t: any, ti: number) => (
                       <div key={ti} className="flex flex-wrap gap-1 mb-1">
                         {t.operation?.hosts?.map((h: string, hi: number) => (
-                          <span key={`h-${hi}`} className="badge-sm bg-blue-500/10 text-blue-400">
+                          <Badge key={`h-${hi}`} tone="structural" size="sm">
                             host: {h}
-                          </span>
+                          </Badge>
                         ))}
                         {t.operation?.ports?.map((p: string, pi: number) => (
-                          <span key={`p-${pi}`} className="badge-sm bg-orange-500/10 text-orange-400">
+                          <Badge key={`p-${pi}`} tone="structural" size="sm">
                             port: {p}
-                          </span>
+                          </Badge>
                         ))}
                         {t.operation?.methods?.map((m: string, mi: number) => (
-                          <span key={`m-${mi}`} className="badge-sm bg-green-500/10 text-green-400">
+                          <Badge key={`m-${mi}`} tone="structural" size="sm">
                             method: {m}
-                          </span>
+                          </Badge>
                         ))}
                         {t.operation?.paths?.map((p: string, pi: number) => (
-                          <span key={`path-${pi}`} className="badge-sm bg-purple-500/10 text-purple-400">
+                          <Badge key={`path-${pi}`} tone="structural" size="sm">
                             path: {p}
-                          </span>
+                          </Badge>
                         ))}
                       </div>
                     ))}