@skyhook-io/k8s-ui 1.8.5 → 1.8.7

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

@@ -0,0 +1,62 @@
+import { Lock } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
+
+interface TraefikTLSOptionRendererProps {
+  data: any
+}
+
+export function TraefikTLSOptionRenderer({ data }: TraefikTLSOptionRendererProps) {
+  const spec = data.spec || {}
+  const ciphers: string[] = spec.cipherSuites || []
+  const curves: string[] = spec.curvePreferences || []
+  const alpn: string[] = spec.alpnProtocols || []
+  const clientAuth = spec.clientAuth
+
+  return (
+    <>
+      <Section title="TLS Option" icon={Lock} defaultExpanded>
+        <PropertyList>
+          <Property label="Min Version" value={spec.minVersion || 'default (VersionTLS12)'} />
+          {spec.maxVersion && <Property label="Max Version" value={spec.maxVersion} />}
+          {spec.sniStrict !== undefined && <Property label="SNI Strict" value={String(spec.sniStrict)} />}
+          {spec.preferServerCipherSuites !== undefined && (
+            <Property label="Prefer Server Ciphers" value={String(spec.preferServerCipherSuites)} />
+          )}
+          {alpn.length > 0 && <Property label="ALPN Protocols" value={alpn.join(', ')} />}
+        </PropertyList>
+      </Section>
+
+      {ciphers.length > 0 && (
+        <Section title={`Cipher Suites (${ciphers.length})`}>
+          <div className="flex flex-wrap gap-1">
+            {ciphers.map((c, i) => (
+              <Badge key={i} tone="structural" size="sm" className="font-mono">{c}</Badge>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {curves.length > 0 && (
+        <Section title={`Curve Preferences (${curves.length})`}>
+          <div className="flex flex-wrap gap-1">
+            {curves.map((c, i) => (
+              <Badge key={i} tone="structural" size="sm" className="font-mono">{c}</Badge>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {clientAuth && (
+        <Section title="Client Authentication" defaultExpanded>
+          <PropertyList>
+            {clientAuth.clientAuthType && <Property label="Type" value={clientAuth.clientAuthType} />}
+            {Array.isArray(clientAuth.secretNames) && clientAuth.secretNames.length > 0 && (
+              <Property label="CA Secrets" value={clientAuth.secretNames.join(', ')} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -48,7 +48,7 @@ function getPhaseBadgeClass(phase: string): string {
     case 'Succeeded':
       return 'status-healthy'
     case 'Running':
-      return 'status-degraded'
+      return 'status-neutral'
     case 'Failed':
     case 'Error':
       return 'status-unhealthy'

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
 import { Badge, type BadgeSeverity } from '../../ui/Badge'
@@ -165,8 +165,11 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
     }
   }, [spec.replicas, scaledTo])
 
-  // Check for problems and progress
-  const problems = getWorkloadProblems(status, spec, kind)
+  // Check for problems and progress. Suppressed when the dedicated Operational
+  // Issues section is shown — it carries the workload's own issues plus its pods'
+  // (richer, with cause/action), so the workload-status problems would duplicate.
+  const operationalIssuesShown = useOperationalIssuesShown()
+  const problems = operationalIssuesShown ? [] : getWorkloadProblems(status, spec, kind)
   const hasProblems = problems.length > 0
   const progressMessage = getWorkloadProgress(status, spec, kind)
 

package/src/components/resources/renderers/badge-no-handrolled.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { readdirSync, readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+// Ratchet guard for the badge token system (see DESIGN.md "Badges").
+//
+// Hand-rolled chip color strings (`bg-<color>-N/NN text-<color>-N`) bypass the
+// theme and overload hues across intents. The migration to <Badge> is
+// incremental: this test pins the set of renderer files that STILL contain
+// hand-rolled chips. The set may SHRINK (clean a file → remove it here) but must
+// never GROW — a new renderer must use <Badge>/tokens, not literal colors.
+//
+// When this fails because you cleaned a file: delete it from BASELINE.
+// When it fails because you added a chip: use <Badge severity|kind|protocol|tone>
+// instead (DESIGN.md has the decision tree).
+
+const CHIP_RE =
+  /bg-(red|green|blue|yellow|orange|amber|purple|cyan|pink|indigo|emerald|teal|violet|rose|lime|sky)-[0-9]+\/[0-9]+ text-(red|green|blue|yellow|orange|amber|purple|cyan|pink|indigo|emerald|teal|violet|rose|lime|sky)-[0-9]+/
+
+// Renderer files that still contain hand-rolled chips, pending migration.
+// Ratchet: this list only shrinks. Do not add to it.
+const BASELINE = new Set<string>([
+  'AlertRenderer.tsx', 'ArgoApplicationRenderer.tsx', 'CertificateRenderer.tsx',
+  'CertificateRequestRenderer.tsx', 'ChallengeRenderer.tsx', 'CiliumNetworkPolicyRenderer.tsx',
+  'ClusterExternalSecretRenderer.tsx', 'ClusterIssuerRenderer.tsx', 'ClusterNetworkPolicyRenderer.tsx',
+  'cnpg-cells.tsx', 'CNPGClusterRenderer.tsx', 'EventRenderer.tsx', 'GatewayRenderer.tsx',
+  'GenericRenderer.tsx', 'IngressClassRenderer.tsx', 'IstioPeerAuthenticationRenderer.tsx',
+  'IstioServiceEntryRenderer.tsx', 'KarpenterNodeClaimRenderer.tsx', 'knative-cells.tsx',
+  'KnativeEventingRenderer.tsx', 'KnativeRevisionRenderer.tsx', 'kyverno-cells.tsx',
+  'KyvernoPolicyReportRenderer.tsx', 'NetworkPolicyRenderer.tsx', 'NodeRenderer.tsx',
+  'OrderRenderer.tsx', 'PodRenderer.tsx', 'RoleRenderer.tsx', 'RolloutRenderer.tsx',
+  'SealedSecretRenderer.tsx', 'SecretRenderer.tsx', 'SecretStoreRenderer.tsx',
+  'VeleroBackupRenderer.tsx', 'VeleroRestoreRenderer.tsx', 'VeleroScheduleRenderer.tsx',
+  'VPARenderer.tsx', 'VulnerabilityReportRenderer.tsx', 'WebhookConfigRenderer.tsx',
+])
+
+const dir = fileURLToPath(new URL('.', import.meta.url))
+
+function filesWithHandRolledChips(): string[] {
+  return readdirSync(dir)
+    .filter((f) => f.endsWith('.tsx') && !f.endsWith('.test.tsx'))
+    .filter((f) => CHIP_RE.test(readFileSync(`${dir}/${f}`, 'utf8')))
+    .sort()
+}
+
+describe('badge token system — no hand-rolled chip colors', () => {
+  const offenders = filesWithHandRolledChips()
+
+  it('does not introduce hand-rolled chips in new/migrated files (ratchet only shrinks)', () => {
+    const newOffenders = offenders.filter((f) => !BASELINE.has(f))
+    expect(
+      newOffenders,
+      `These renderers use hand-rolled chip colors. Use <Badge severity|kind|protocol|tone> ` +
+        `(see DESIGN.md "Badges"), not literal bg-/text- color strings:\n  ${newOffenders.join('\n  ')}`,
+    ).toEqual([])
+  })
+
+  it('baseline has no stale entries (remove files you have already cleaned)', () => {
+    const stale = [...BASELINE].filter((f) => !offenders.includes(f)).sort()
+    expect(
+      stale,
+      `These files are in BASELINE but no longer contain hand-rolled chips — ` +
+        `delete them from BASELINE in this test:\n  ${stale.join('\n  ')}`,
+    ).toEqual([])
+  })
+})

package/src/components/resources/renderers/contour-cells.tsx

@@ -2,6 +2,7 @@
 
 import { Shield } from 'lucide-react'
 import { Tooltip } from '../../ui/Tooltip'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
 import {
   getHTTPProxyFQDN,
   getHTTPProxyRouteCount,
@@ -36,11 +37,11 @@ export function HTTPProxyCell({ resource, column }: { resource: any; column: str
     }
     case 'status': {
       const { label } = getHTTPProxyStatus(resource)
-      const color = label === 'Valid' ? 'text-green-500'
-        : label === 'Invalid' ? 'text-red-500'
-        : label === 'Orphaned' ? 'text-yellow-500'
-        : 'text-theme-text-secondary'
-      return <span className={`text-sm ${color}`}>{label}</span>
+      const severity: BadgeSeverity = label === 'Valid' ? 'success'
+        : label === 'Invalid' ? 'error'
+        : label === 'Orphaned' ? 'warning'
+        : 'neutral'
+      return <Badge severity={severity}>{label}</Badge>
     }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>

package/src/components/resources/renderers/index.ts

@@ -114,6 +114,10 @@ export * from './WorkflowRenderer'
 export * from './WorkflowTemplateRenderer'
 export * from './WorkloadRenderer'
 export * from './TraefikIngressRouteRenderer'
+export * from './TraefikMiddlewareRenderer'
+export * from './TraefikServiceRenderer'
+export * from './TraefikTLSOptionRenderer'
+export * from './TraefikServersTransportRenderer'
 export * from './traefik-cells'
 export * from './ContourHTTPProxyRenderer'
 export * from './contour-cells'

package/src/components/resources/renderers/istio-cells.tsx

@@ -1,7 +1,7 @@
 // Istio cell components for ResourcesView table
 
 import { clsx } from 'clsx'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
 import {
   getVirtualServiceStatus,
   getVirtualServiceHosts,
@@ -26,17 +26,17 @@ import {
   getAuthorizationPolicyRuleCount,
 } from '../resource-utils-istio'
 
-const modeColors: Record<string, string> = {
-  STRICT: 'bg-green-500/20 text-green-400',
-  PERMISSIVE: 'bg-yellow-500/20 text-yellow-400',
-  DISABLE: 'bg-red-500/20 text-red-400',
+const modeSeverity: Record<string, BadgeSeverity> = {
+  STRICT: 'success',
+  PERMISSIVE: 'warning',
+  DISABLE: 'error',
 }
 
-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',
 }
 
 export function VirtualServiceCell({ resource, column }: { resource: any; column: string }) {
@@ -133,12 +133,9 @@ export function ServiceEntryCell({ resource, column }: { resource: any; column:
     case 'location': {
       const location = getServiceEntryLocation(resource)
       return (
-        <span className={clsx(
-          'badge',
-          location === 'MESH_EXTERNAL' ? 'bg-orange-500/20 text-orange-400' : 'bg-blue-500/20 text-blue-400'
-        )}>
+        <Badge tone={location === 'MESH_EXTERNAL' ? 'accent2' : 'accent1'}>
           {location === 'MESH_EXTERNAL' ? 'External' : 'Internal'}
-        </span>
+        </Badge>
       )
     }
     case 'ports': {
@@ -163,12 +160,9 @@ export function PeerAuthenticationCell({ resource, column }: { resource: any; co
     case 'mode': {
       const mode = getPeerAuthenticationMode(resource)
       return (
-        <span className={clsx(
-          'badge',
-          modeColors[mode] || BADGE_INACTIVE
-        )}>
+        <Badge severity={modeSeverity[mode] ?? 'neutral'}>
           {mode}
-        </span>
+        </Badge>
       )
     }
     case 'selector': {
@@ -193,12 +187,9 @@ export function AuthorizationPolicyCell({ resource, column }: { resource: any; c
     case 'action': {
       const action = getAuthorizationPolicyAction(resource)
       return (
-        <span className={clsx(
-          'badge',
-          actionColors[action] || BADGE_INACTIVE
-        )}>
+        <Badge severity={actionSeverity[action] ?? 'neutral'}>
           {action}
-        </span>
+        </Badge>
       )
     }
     case 'rules': {

package/src/components/resources/resource-utils-argo.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { getArgoApplicationStatus } from './resource-utils-argo'
+
+describe('getArgoApplicationStatus', () => {
+  // A Suspended Argo app is intentionally paused — neutral (sky), matching the
+  // backend rollup (mapArgoHealth) + the GitOps badge, so it doesn't read amber
+  // on the resource table while reading Idle in Applications.
+  it('maps health Suspended to neutral (sky), not degraded', () => {
+    const badge = getArgoApplicationStatus({ status: { health: { status: 'Suspended' }, sync: { status: 'Synced' } } })
+    expect(badge.level).toBe('neutral')
+    expect(badge.text).toBe('Suspended')
+  })
+
+  it('still maps a healthy synced app to healthy', () => {
+    const badge = getArgoApplicationStatus({ status: { health: { status: 'Healthy' }, sync: { status: 'Synced' } } })
+    expect(badge.level).toBe('healthy')
+  })
+
+  it('still maps a degraded app to unhealthy', () => {
+    const badge = getArgoApplicationStatus({ status: { health: { status: 'Degraded' }, sync: { status: 'Synced' } } })
+    expect(badge.level).toBe('unhealthy')
+  })
+})

package/src/components/resources/resource-utils-argo.ts

@@ -22,7 +22,11 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   const annotations = app.metadata?.annotations
   const suspendedByRadar = annotations?.['radarhq.io/suspended-prune'] || annotations?.['skyhook.io/suspended-prune']
   if (health === 'Suspended' || (!hasAutomatedSync && suspendedByRadar)) {
-    return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
+    // Suspended = an operator deliberately paused this app — intentional, not a
+    // degradation. Neutral (sky), matching the backend rollup (mapArgoHealth) so a
+    // suspended app reads the same Idle tone in Applications, the resource table,
+    // and GitOps instead of amber in some surfaces and sky in others.
+    return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
   }
 
   // Operation in progress

package/src/components/resources/resource-utils-cnpg.ts

@@ -283,7 +283,7 @@ export function getCNPGScheduledBackupStatus(resource: any): StatusBadge {
   const isSuspended = resource.spec?.suspend === true
 
   if (isSuspended) {
-    return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
+    return { text: 'Suspended', color: healthColors.neutral, level: 'neutral' }
   }
 
   // If we have a last schedule time, it's active

package/src/components/resources/resource-utils-keda.ts

@@ -29,7 +29,9 @@ export function getScaledObjectStatus(resource: any): StatusBadge {
     conditions.some((c: any) => c.type === 'Paused' && c.status === 'True')
 
   if (isPaused) {
-    return { text: 'Paused', color: healthColors.degraded, level: 'degraded' }
+    // Paused = operator deliberately froze autoscaling — intentional, sky/neutral
+    // (like Idle), not amber.
+    return { text: 'Paused', color: healthColors.neutral, level: 'neutral' }
   }
 
   // Check Fallback condition
@@ -50,7 +52,9 @@ export function getScaledObjectStatus(resource: any): StatusBadge {
     return { text: 'Active', color: healthColors.healthy, level: 'healthy' }
   }
   if (activeCond?.status === 'False') {
-    return { text: 'Idle', color: healthColors.degraded, level: 'degraded' }
+    // Idle is the normal resting state of a scaler with no triggers firing
+    // (like a CronJob waiting for its next run), not a fault.
+    return { text: 'Idle', color: healthColors.neutral, level: 'neutral' }
   }
 
   if (readyCond?.status === 'True') {
@@ -126,20 +130,26 @@ export function getScaledJobStatus(resource: any): StatusBadge {
   const conditions = resource.status?.conditions || []
 
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
-  if (readyCond?.status === 'True') {
-    return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
+  // A non-operational scaler (Ready=False) is unhealthy and must take precedence
+  // over the Idle branch — otherwise a broken-and-idle ScaledJob hides as benign.
+  if (readyCond?.status === 'False') {
+    return { text: readyCond.reason || 'NotReady', color: healthColors.unhealthy, level: 'unhealthy' }
   }
 
+  // Check Active BEFORE falling back to Ready=True: an operational scaler with no
+  // jobs running (Active=False) is intentionally idle → sky, not the green of a
+  // busy one. (Ready=True first would make Idle unreachable.) Mirrors
+  // getScaledObjectStatus.
   const activeCond = conditions.find((c: any) => c.type === 'Active')
   if (activeCond?.status === 'True') {
     return { text: 'Active', color: healthColors.healthy, level: 'healthy' }
   }
   if (activeCond?.status === 'False') {
-    return { text: 'Idle', color: healthColors.degraded, level: 'degraded' }
+    return { text: 'Idle', color: healthColors.neutral, level: 'neutral' }
   }
 
-  if (readyCond?.status === 'False') {
-    return { text: readyCond.reason || 'NotReady', color: healthColors.unhealthy, level: 'unhealthy' }
+  if (readyCond?.status === 'True') {
+    return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
   }
 
   return { text: 'Unknown', color: healthColors.unknown, level: 'unknown' }