@skyhook-io/k8s-ui 1.6.1 → 1.6.2

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

@@ -1,7 +1,15 @@
 import { useState, useEffect } from 'react'
-import { Server, ExternalLink, Scale, Minus, Plus, Loader2 } from 'lucide-react'
+import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
+import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
+import type { RBACSubjectResponse, RBACPolicyRule } from '../../../types'
+import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
+import {
+  rbacVerbBadgeClass,
+  rbacResourceBadgeClass,
+  rbacApiGroupBadgeClass,
+} from '../../../utils/rbac-badges'
 
 interface WorkloadRendererProps {
   kind: string
@@ -11,6 +19,14 @@ interface WorkloadRendererProps {
   onScale?: (replicas: number) => Promise<void>
   isScalePending?: boolean
   onRequestRefresh?: () => void
+  /**
+   * RBAC reverse-lookup for the workload's pod-template ServiceAccount.
+   * Undefined means the host didn't wire the fetch (Permissions section is
+   * omitted). Null means the fetch failed.
+   */
+  rbacData?: RBACSubjectResponse | null
+  rbacLoading?: boolean
+  rbacError?: Error | null
 }
 
 // Check if the workload is actively progressing (scaling, rolling update)
@@ -86,7 +102,7 @@ function getWorkloadProgress(status: any, spec: any, kind: string): string | nul
   return null
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, onRequestRefresh }: WorkloadRendererProps) {
+export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -304,6 +320,177 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
       </Section>
 
       <ConditionsSection conditions={status.conditions} />
+
+      {/* Permissions — same shape as PodPermissionsSection but framed for a
+       *  workload (Pods this workload spawns inherit the SA). Placed below
+       *  the diagnostic-signal sections because it answers an incident/audit
+       *  question, not a daily-browsing one. Only renders when the host
+       *  wired the RBAC fetch. */}
+      {rbacData !== undefined && (
+        <WorkloadPermissionsSection
+          saName={spec.template?.spec?.serviceAccountName || 'default'}
+          namespace={metadata.namespace || ''}
+          rbacData={rbacData}
+          loading={!!rbacLoading}
+          error={rbacError ?? null}
+          onNavigate={onNavigate}
+        />
+      )}
     </>
   )
 }
+
+// ============================================================================
+// WORKLOAD PERMISSIONS SECTION
+// ============================================================================
+// Mirror of PodPermissionsSection but framed at the workload level: "Pods
+// this workload spawns inherit these permissions". A compromise of any
+// replica gives the attacker the same SA. Detection criteria match Pod's —
+// verb wildcards, escalation verbs (escalate/bind/impersonate), cluster-
+// admin, cluster-wide create pods. Resource-only wildcards do NOT trigger
+// (would fire on every authenticated SA via inherited `view`).
+
+// Blast-radius detection and scoring is shared with Pod / ServiceAccount
+// renderers — see utils/rbac-blast-radius.ts.
+
+interface WorkloadPermissionsSectionProps {
+  saName: string
+  namespace: string
+  rbacData: RBACSubjectResponse | null
+  loading: boolean
+  error: Error | null
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function WorkloadPermissionsSection({
+  saName,
+  namespace,
+  rbacData,
+  loading,
+  error,
+  onNavigate,
+}: WorkloadPermissionsSectionProps) {
+  const title = `Permissions via ServiceAccount: ${saName}`
+  if (loading) {
+    return (
+      <Section title={title} icon={Shield}>
+        <div className="text-sm text-theme-text-secondary">Loading RBAC graph…</div>
+      </Section>
+    )
+  }
+  if (error) {
+    return (
+      <Section title={title} icon={Shield}>
+        <div className="text-sm text-red-400">Could not load permissions: {error.message}</div>
+      </Section>
+    )
+  }
+  if (!rbacData) return null
+
+  const blast = detectBlastRadius(rbacData)
+  const sorted = [...(rbacData.flat ?? [])].sort(
+    (a, b) => rulePermissivenessScore(b) - rulePermissivenessScore(a),
+  )
+  const preview = sorted.slice(0, 5)
+  const more = Math.max(0, sorted.length - preview.length)
+  const directCount = rbacData.direct?.length ?? 0
+  const inheritedCount = (rbacData.inheritedFromGroups ?? []).reduce((n, g) => n + g.bindings.length, 0)
+  const ruleCount = rbacData.flat?.length ?? 0
+
+  // Default collapsed unless the Pod's permissions are genuinely risky —
+  // workload-detail pages are most-often opened for "is this rolling out
+  // OK / why is it crashing", not "audit the SA". Auto-expanding only on
+  // blast-radius hits keeps the noisy case quiet without burying real
+  // alarms.
+  const hasBlastRadius = blast.length > 0
+  return (
+    <Section title={title} icon={Shield} defaultExpanded={hasBlastRadius}>
+      {blast.length > 0 && (
+        <AlertBanner variant="warning" title="Blast radius">
+          <div className="text-xs">
+            Every Pod this workload spawns inherits the ServiceAccount's
+            permissions. Compromising any replica gives an attacker:
+          </div>
+          <ul className="mt-1.5 text-xs space-y-1">
+            {blast.map((r, i) => (
+              <li key={i}>
+                <span className="text-theme-text-secondary">
+                  {r.binding.binding.kind} <span className="font-medium">{r.binding.binding.name}</span>
+                </span>{' '}
+                <span className="text-theme-text-tertiary">{r.reason}</span>
+              </li>
+            ))}
+          </ul>
+        </AlertBanner>
+      )}
+
+      <div className="text-xs text-theme-text-tertiary mb-3">
+        {directCount} direct binding{directCount === 1 ? '' : 's'} ·{' '}
+        {inheritedCount} inherited via group{inheritedCount === 1 ? '' : 's'} ·{' '}
+        {ruleCount} distinct rule{ruleCount === 1 ? '' : 's'}
+        {rbacData.truncated && <span className="text-orange-400"> (truncated)</span>}
+      </div>
+
+      {preview.length === 0 ? (
+        <div className="text-sm text-theme-text-secondary">
+          This ServiceAccount has no effective permissions in the cluster.
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {preview.map((r, i) => (
+            <WorkloadRulePreviewLine key={i} rule={r} />
+          ))}
+          {more > 0 && (
+            <div className="text-xs text-theme-text-tertiary">
+              +{more} more rule{more === 1 ? '' : 's'} — open the ServiceAccount
+              for full provenance.
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="mt-3 text-xs">
+        <ResourceLink
+          name={saName}
+          kind="serviceaccounts"
+          namespace={namespace}
+          label="View full permissions →"
+          onNavigate={onNavigate}
+        />
+      </div>
+    </Section>
+  )
+}
+
+function WorkloadRulePreviewLine({ rule }: { rule: RBACPolicyRule }) {
+  const verbs = rule.verbs ?? []
+  const resources = rule.resources ?? []
+  const nonResourceURLs = rule.nonResourceURLs ?? []
+  const groups = rule.apiGroups ?? []
+  const isNonResource = resources.length === 0 && nonResourceURLs.length > 0
+  return (
+    <div className="flex items-center gap-1 flex-wrap text-xs">
+      {verbs.map((v) => (
+        <span key={v} className={clsx('badge', rbacVerbBadgeClass(v))}>{v}</span>
+      ))}
+      <span className="text-theme-text-secondary">on</span>
+      {isNonResource ? (
+        nonResourceURLs.map((u) => (
+          <span key={u} className="badge font-mono bg-theme-elevated text-theme-text-secondary">{u}</span>
+        ))
+      ) : (
+        resources.map((r) => (
+          <span key={r} className={clsx('badge', rbacResourceBadgeClass)}>{r === '*' ? '*' : r}</span>
+        ))
+      )}
+      {!isNonResource && groups.length > 0 && groups.some((g) => g !== '') && (
+        <>
+          <span className="text-theme-text-secondary">in</span>
+          {groups.map((g) => (
+            <span key={g} className={clsx('badge', rbacApiGroupBadgeClass)}>{g === '' ? 'core' : g}</span>
+          ))}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,153 @@
+import { clsx } from 'clsx'
+import { FileCode2, Layers, KeyRound, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface XRDRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function XRDRenderer({ data, onNavigate }: XRDRendererProps) {
+  const spec = data?.spec ?? {}
+  const conditions: any[] = data?.status?.conditions ?? []
+  const established = conditions.find((c: any) => c.type === 'Established')
+  const offered = conditions.find((c: any) => c.type === 'Offered')
+  const group = spec.group ?? ''
+  const names = spec.names ?? {}
+  const claimNames = spec.claimNames
+  const versions: any[] = spec.versions ?? []
+  const scope = spec.scope // v2 only
+  const connectionSecretKeys: string[] = spec.connectionSecretKeys ?? []
+  const defaultCompositionRef = spec.defaultCompositionRef
+  const enforcedCompositionRef = spec.enforcedCompositionRef
+  const defaultCompositeDeletePolicy = spec.defaultCompositeDeletePolicy
+
+  return (
+    <>
+      {established?.status === 'False' && (
+        <AlertBanner
+          variant="error"
+          title="XRD Not Established"
+          message={established.message || established.reason || 'The XRD has not produced a CRD. Check schema validity.'}
+        />
+      )}
+      {offered?.status === 'False' && claimNames && (
+        <AlertBanner
+          variant="warning"
+          title="Claim Not Offered"
+          message={offered.message || offered.reason || 'Claim CRD has not been produced from the claimNames spec.'}
+        />
+      )}
+
+      <Section title="Generated CR" icon={FileCode2} defaultExpanded>
+        <PropertyList>
+          {names.kind && (
+            <Property label="Kind" value={<span className="font-mono">{names.kind}</span>} />
+          )}
+          {names.plural && (
+            <Property label="Plural" value={<span className="font-mono">{names.plural}</span>} />
+          )}
+          {names.singular && (
+            <Property label="Singular" value={<span className="font-mono">{names.singular}</span>} />
+          )}
+          {names.listKind && (
+            <Property label="List Kind" value={<span className="font-mono">{names.listKind}</span>} />
+          )}
+          <Property label="Group" value={<span className="font-mono break-all">{group}</span>} />
+          {scope && (
+            <Property
+              label="Scope"
+              value={
+                <span className={clsx('badge-sm', scope === 'Cluster' ? 'status-violet' : 'status-neutral')}>
+                  {scope}
+                </span>
+              }
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      {claimNames && (
+        <Section title="Claim (v1)" icon={Layers} defaultExpanded>
+          <PropertyList>
+            {claimNames.kind && (
+              <Property label="Kind" value={<span className="font-mono">{claimNames.kind}</span>} />
+            )}
+            {claimNames.plural && (
+              <Property label="Plural" value={<span className="font-mono">{claimNames.plural}</span>} />
+            )}
+            {claimNames.singular && (
+              <Property label="Singular" value={<span className="font-mono">{claimNames.singular}</span>} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {versions.length > 0 && (
+        <Section title={`Versions (${versions.length})`} icon={FileCode2} defaultExpanded>
+          <div className="space-y-1">
+            {versions.map((v: any, i: number) => (
+              <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
+                <span className="font-mono text-theme-text-primary">{v.name}</span>
+                {v.served && <span className="badge-sm status-healthy">served</span>}
+                {v.referenceable && <span className="badge-sm status-neutral">referenceable</span>}
+                {v.deprecated && <span className="badge-sm status-alert">deprecated</span>}
+                {v.deprecationWarning && (
+                  <span className="text-theme-text-tertiary text-xs break-all">{v.deprecationWarning}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {(defaultCompositionRef?.name || enforcedCompositionRef?.name) && (
+        <Section title="Composition" icon={Settings} defaultExpanded>
+          <PropertyList>
+            {defaultCompositionRef?.name && (
+              <Property
+                label="Default"
+                value={
+                  <ResourceLink
+                    name={defaultCompositionRef.name}
+                    kind="compositions"
+                    namespace=""
+                    onNavigate={onNavigate}
+                  />
+                }
+              />
+            )}
+            {enforcedCompositionRef?.name && (
+              <Property
+                label="Enforced"
+                value={
+                  <ResourceLink
+                    name={enforcedCompositionRef.name}
+                    kind="compositions"
+                    namespace=""
+                    onNavigate={onNavigate}
+                  />
+                }
+              />
+            )}
+            {defaultCompositeDeletePolicy && (
+              <Property label="Default Delete Policy" value={defaultCompositeDeletePolicy} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {connectionSecretKeys.length > 0 && (
+        <Section title={`Connection Secret Keys (${connectionSecretKeys.length})`} icon={KeyRound} defaultExpanded={false}>
+          <div className="flex flex-wrap gap-1">
+            {connectionSecretKeys.map((k: string) => (
+              <span key={k} className="badge-sm status-neutral font-mono">{k}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,146 @@
+// Crossplane cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getCrossplaneStatus,
+  getCrossplaneStatusReason,
+  getProviderStatus,
+  getProviderConfigStatus,
+  getProviderConfigCredentialsSource,
+  getProviderPackage,
+  getProviderCurrentRevision,
+  getProviderConfigRef,
+  getExternalName,
+  getCompositionRef,
+  getCrossplaneResourceRefs,
+  getCompositionCompositeTypeRef,
+  getCompositionMode,
+  getCompositionFunctionCount,
+  getXRDClaimNames,
+  getXRDKind,
+} from '../resource-utils-crossplane'
+
+function StatusBadge({ resource, getStatus }: { resource: any; getStatus: (r: any) => { text: string; color: string } }) {
+  const status = getStatus(resource)
+  const reason = getCrossplaneStatusReason(resource)
+  const badge = (
+    <span className={clsx('badge', status.color)}>
+      {status.text}
+    </span>
+  )
+  return reason ? <Tooltip content={reason}>{badge}</Tooltip> : badge
+}
+
+export function ManagedResourceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusBadge resource={resource} getStatus={getCrossplaneStatus} />
+    case 'external': {
+      const name = getExternalName(resource)
+      if (!name) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return (
+        <Tooltip content={name}>
+          <span className="text-sm text-theme-text-secondary font-mono truncate block">{name}</span>
+        </Tooltip>
+      )
+    }
+    case 'provider': {
+      const ref = getProviderConfigRef(resource)
+      if (!ref) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return <span className="text-sm text-theme-text-secondary">{ref.name}</span>
+    }
+    case 'kind':
+      return <span className="text-sm text-theme-text-secondary">{resource.kind || '-'}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CompositeResourceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusBadge resource={resource} getStatus={getCrossplaneStatus} />
+    case 'composition': {
+      const ref = getCompositionRef(resource)
+      if (!ref) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return (
+        <Tooltip content={ref.name}>
+          <span className="text-sm text-theme-text-secondary truncate block">{ref.name}</span>
+        </Tooltip>
+      )
+    }
+    case 'composed': {
+      const refs = getCrossplaneResourceRefs(resource)
+      return <span className="text-sm text-theme-text-secondary">{refs.length > 0 ? refs.length : '-'}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CrossplaneProviderCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusBadge resource={resource} getStatus={getProviderStatus} />
+    case 'package': {
+      const pkg = getProviderPackage(resource)
+      return (
+        <Tooltip content={pkg}>
+          <span className="text-sm text-theme-text-secondary font-mono truncate block">{pkg}</span>
+        </Tooltip>
+      )
+    }
+    case 'revision': {
+      const rev = getProviderCurrentRevision(resource)
+      if (!rev) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return (
+        <Tooltip content={rev}>
+          <span className="text-sm text-theme-text-tertiary font-mono truncate block">{rev}</span>
+        </Tooltip>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CrossplaneProviderConfigCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusBadge resource={resource} getStatus={getProviderConfigStatus} />
+    case 'credentials':
+      return <span className="text-sm text-theme-text-secondary">{getProviderConfigCredentialsSource(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function XRDCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'kind':
+      return <span className="text-sm text-theme-text-secondary font-mono">{getXRDKind(resource)}</span>
+    case 'claim': {
+      const cn = getXRDClaimNames(resource)
+      if (!cn.kind) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return <span className="text-sm text-theme-text-secondary font-mono">{cn.kind}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CompositionCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'composite':
+      return <span className="text-sm text-theme-text-secondary font-mono">{getCompositionCompositeTypeRef(resource)}</span>
+    case 'mode':
+      return <span className="text-sm text-theme-text-secondary">{getCompositionMode(resource)}</span>
+    case 'functions': {
+      const count = getCompositionFunctionCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -22,6 +22,7 @@ import {
   getFluxHelmReleaseVersion,
   getFluxHelmReleaseStatus,
   getFluxHelmReleaseRevision,
+  getFluxHelmReleaseMessage,
   getFluxAlertProvider,
   getFluxAlertEventCount,
   getFluxAlertStatus,
@@ -202,6 +203,17 @@ export function FluxHelmReleaseCell({ resource, column }: { resource: any; colum
         </span>
       )
     }
+    case 'message': {
+      const message = getFluxHelmReleaseMessage(resource)
+      if (!message) {
+        return <span className="text-sm text-theme-text-tertiary">-</span>
+      }
+      return (
+        <Tooltip content={message}>
+          <span className="text-sm text-theme-text-secondary truncate block">{message}</span>
+        </Tooltip>
+      )
+    }
     case 'revision': {
       const revision = getFluxHelmReleaseRevision(resource)
       return (

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

@@ -9,6 +9,13 @@ export * from './ClusterComplianceReportRenderer'
 export * from './ClusterExternalSecretRenderer'
 export * from './ClusterIssuerRenderer'
 export * from './cnpg-cells'
+export * from './crossplane-cells'
+export * from './ManagedResourceRenderer'
+export * from './CompositeRenderer'
+export * from './CrossplanePackageRenderer'
+export * from './CrossplaneProviderConfigRenderer'
+export * from './CompositionRenderer'
+export * from './XRDRenderer'
 export * from './CNPGBackupRenderer'
 export * from './CNPGClusterRenderer'
 export * from './CNPGPoolerRenderer'
@@ -86,6 +93,7 @@ export * from './SealedSecretRenderer'
 export * from './SecretRenderer'
 export * from './SecretStoreRenderer'
 export * from './ServiceAccountRenderer'
+export * from './NamespaceRenderer'
 export * from './ServiceRenderer'
 export * from './ServiceMonitorRenderer'
 export * from './SimpleRouteRenderer'