@skyhook-io/k8s-ui 1.4.2 → 1.4.3

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

@@ -0,0 +1,240 @@
+import { useState } from 'react'
+import { Server, Globe, Network, Layers, Download, CheckCircle, AlertCircle } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
+import { formatAge } from '../resource-utils'
+import { getClusterStatus, getClusterClass, getClusterVersion, getClusterEndpoint, getProviderFromInfraKind, parseCAPIConditionMessage } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+  apiBase?: string
+}
+
+export function CAPIClusterRenderer({ data, onNavigate, apiBase = '' }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const clusterStatus = getClusterStatus(data)
+  const isFailed = clusterStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready' || c.type === 'Available')
+
+  const phase = status.phase || 'Unknown'
+  const endpoint = getClusterEndpoint(data)
+  const className = getClusterClass(data)
+  const version = getClusterVersion(data)
+  const topology = spec.topology || {}
+
+  // v1beta2 replica fields
+  const cpReady = status.controlPlane?.readyReplicas ?? status.controlPlane?.replicas
+  const cpDesired = status.controlPlane?.desiredReplicas ?? spec.topology?.controlPlane?.replicas
+  const wReady = status.workers?.readyReplicas ?? status.workers?.replicas
+  const wDesired = status.workers?.desiredReplicas
+
+  // Refs
+  const controlPlaneRef = spec.controlPlaneRef || {}
+  const infrastructureRef = spec.infrastructureRef || {}
+
+  const ns = data.metadata?.namespace || ''
+  const name = data.metadata?.name || ''
+
+  const [downloadState, setDownloadState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+  const [downloadError, setDownloadError] = useState('')
+  const [connectState, setConnectState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+  const [connectError, setConnectError] = useState('')
+
+  const handleConnectToCluster = async () => {
+    setConnectState('loading')
+    setConnectError('')
+    try {
+      const res = await fetch(`${apiBase}/api/capi/clusters/${encodeURIComponent(ns)}/${encodeURIComponent(name)}/connect`, { method: 'POST' })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: res.statusText }))
+        throw new Error(body.error || `HTTP ${res.status}`)
+      }
+      await res.json()
+      setConnectState('success')
+      // The page will reload as the context switch triggers a reconnect
+      setTimeout(() => window.location.reload(), 1500)
+    } catch (err: any) {
+      setConnectError(err.message || 'Failed to connect to workload cluster')
+      setConnectState('error')
+      setTimeout(() => setConnectState('idle'), 5000)
+    }
+  }
+
+  const handleDownloadKubeconfig = async () => {
+    setDownloadState('loading')
+    setDownloadError('')
+    try {
+      const res = await fetch(`${apiBase}/api/capi/clusters/${encodeURIComponent(ns)}/${encodeURIComponent(name)}/kubeconfig`)
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: res.statusText }))
+        throw new Error(body.error || `HTTP ${res.status}`)
+      }
+      const blob = await res.blob()
+      const url = URL.createObjectURL(blob)
+      try {
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `${name}-kubeconfig.yaml`
+        a.click()
+      } finally {
+        URL.revokeObjectURL(url)
+      }
+      setDownloadState('success')
+      setTimeout(() => setDownloadState('idle'), 3000)
+    } catch (err: any) {
+      setDownloadError(err.message || 'Failed to download kubeconfig')
+      setDownloadState('error')
+      setTimeout(() => setDownloadState('idle'), 5000)
+    }
+  }
+
+  return (
+    <>
+      {spec.paused && (
+        <AlertBanner
+          variant="warning"
+          title="Cluster Paused"
+          message="Reconciliation is paused. Infrastructure and machine changes will not be applied until resumed."
+        />
+      )}
+
+      {isFailed && (() => {
+        const msg = readyCond?.message || `Cluster is in ${phase} state.`
+        const items = parseCAPIConditionMessage(msg)
+        return <AlertBanner variant="error" title="Cluster Not Ready" items={items || undefined} message={items ? undefined : msg} />
+      })()}
+
+      {/* Overview */}
+      <Section title="Overview" icon={Globe}>
+        <PropertyList>
+          <Property label="Phase" value={phase} />
+          <Property label="Version" value={version} />
+          {infrastructureRef.kind && <Property label="Provider" value={getProviderFromInfraKind(infrastructureRef.kind)} />}
+          {className !== '-' && <Property label="Cluster Class" value={className} />}
+          {endpoint !== '-' && <Property label="Control Plane Endpoint" value={endpoint} />}
+          {readyCond?.lastTransitionTime && (
+            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Kubeconfig Actions */}
+      <div className="px-3 py-2 flex items-center gap-2">
+        <button
+          onClick={handleConnectToCluster}
+          disabled={connectState === 'loading' || connectState === 'success'}
+          className="btn-brand flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md"
+        >
+          {connectState === 'loading' && <Globe className="w-3.5 h-3.5 animate-pulse" />}
+          {connectState === 'success' && <CheckCircle className="w-3.5 h-3.5" />}
+          {connectState === 'error' && <AlertCircle className="w-3.5 h-3.5" />}
+          {connectState === 'idle' && <Globe className="w-3.5 h-3.5" />}
+          {connectState === 'loading' ? 'Connecting...' : connectState === 'success' ? 'Connected — reloading...' : 'Connect to Cluster'}
+        </button>
+        <button
+          onClick={handleDownloadKubeconfig}
+          disabled={downloadState === 'loading'}
+          className="btn-brand-muted flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md"
+        >
+          {downloadState === 'loading' ? <Download className="w-3.5 h-3.5 animate-pulse" /> : <Download className="w-3.5 h-3.5" />}
+          {downloadState === 'loading' ? 'Downloading...' : downloadState === 'success' ? 'Downloaded' : 'Download'}
+        </button>
+      </div>
+      {connectState === 'error' && connectError && (
+        <p className="text-xs text-red-500 px-3 pb-2">{connectError}</p>
+      )}
+      {downloadState === 'error' && downloadError && (
+        <p className="text-xs text-red-500 px-3 pb-2">{downloadError}</p>
+      )}
+
+      {/* Replicas */}
+      {(cpDesired != null || wDesired != null) && (
+        <Section title="Replicas" icon={Server}>
+          <PropertyList>
+            {cpDesired != null && (
+              <Property label="Control Plane" value={`${cpReady ?? 0}/${cpDesired} ready`} />
+            )}
+            {wDesired != null && (
+              <Property label="Workers" value={`${wReady ?? 0}/${wDesired} ready`} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* References */}
+      <Section title="References" icon={Network}>
+        <PropertyList>
+          {controlPlaneRef.kind && (
+            <Property
+              label="Control Plane"
+              value={
+                <ResourceLink
+                  name={controlPlaneRef.name}
+                  kind={kindToPlural(controlPlaneRef.kind)}
+                  namespace={controlPlaneRef.namespace || data.metadata?.namespace}
+                  group={controlPlaneRef.apiVersion?.split('/')?.[0]}
+                  label={`${controlPlaneRef.kind}/${controlPlaneRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          {infrastructureRef.kind && (
+            <Property label="Infrastructure" value={
+              <ResourceLink
+                name={infrastructureRef.name}
+                kind={kindToPlural(infrastructureRef.kind)}
+                namespace={infrastructureRef.namespace || data.metadata?.namespace}
+                group={infrastructureRef.apiVersion?.split('/')?.[0]}
+                label={`${infrastructureRef.kind}/${infrastructureRef.name}`}
+                onNavigate={onNavigate}
+              />
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Topology (ClusterClass-based) */}
+      {topology.class && (
+        <Section title="Topology" icon={Layers}>
+          <PropertyList>
+            <Property label="Class" value={topology.class} />
+            {topology.version && <Property label="Version" value={topology.version} />}
+            {topology.controlPlane?.replicas != null && (
+              <Property label="CP Replicas" value={String(topology.controlPlane.replicas)} />
+            )}
+          </PropertyList>
+          {topology.workers?.machineDeployments?.length > 0 && (
+            <div className="mt-2">
+              <div className="text-xs font-medium text-theme-text-secondary mb-1">Worker MachineDeployments</div>
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="text-theme-text-tertiary">
+                    <th className="text-left font-medium py-1">Class</th>
+                    <th className="text-left font-medium py-1">Name</th>
+                    <th className="text-left font-medium py-1">Replicas</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {topology.workers.machineDeployments.map((md: any, i: number) => (
+                    <tr key={i} className="border-t border-theme-border">
+                      <td className="py-1 text-theme-text-secondary">{md.class}</td>
+                      <td className="py-1 text-theme-text-secondary">{md.name || '-'}</td>
+                      <td className="py-1 text-theme-text-secondary">{md.replicas ?? '-'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,97 @@
+import { Settings, FileText } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+
+interface Props {
+  data: any
+}
+
+export function CAPIKubeadmConfigRenderer({ data }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const clusterConfig = spec.clusterConfiguration || {}
+  const files = spec.files || []
+  const preKubeadmCommands = spec.preKubeadmCommands || []
+  const postKubeadmCommands = spec.postKubeadmCommands || []
+  const certSANs = clusterConfig.certSANs || []
+
+  return (
+    <>
+      <Section title="Overview" icon={Settings}>
+        <PropertyList>
+          {status.ready != null && <Property label="Ready" value={status.ready ? 'Yes' : 'No'} />}
+          {status.dataSecretName && <Property label="Data Secret" value={status.dataSecretName} />}
+        </PropertyList>
+      </Section>
+
+      {certSANs.length > 0 && (
+        <Section title="Cert SANs" icon={Settings}>
+          <div className="flex flex-wrap gap-1">
+            {certSANs.map((san: string, i: number) => (
+              <span key={i} className="badge badge-sm bg-theme-surface text-theme-text-secondary border-theme-border">{san}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* API Server Extra Args */}
+      {clusterConfig.apiServer?.extraArgs && Object.keys(clusterConfig.apiServer.extraArgs).length > 0 && (
+        <Section title="API Server Extra Args" icon={Settings} defaultExpanded={false}>
+          <PropertyList>
+            {Object.entries(clusterConfig.apiServer.extraArgs).map(([key, value]) => (
+              <Property key={key} label={key} value={String(value)} />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Files */}
+      {files.length > 0 && (
+        <Section title="Files" icon={FileText} defaultExpanded={false}>
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary">
+                <th className="text-left font-medium py-1">Path</th>
+                <th className="text-left font-medium py-1">Owner</th>
+                <th className="text-left font-medium py-1">Permissions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {files.map((f: any, i: number) => (
+                <tr key={i} className="border-t border-theme-border">
+                  <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{f.path}</td>
+                  <td className="py-1 text-theme-text-secondary">{f.owner || '-'}</td>
+                  <td className="py-1 text-theme-text-secondary">{f.permissions || '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      )}
+
+      {/* Commands */}
+      {preKubeadmCommands.length > 0 && (
+        <Section title="Pre-Kubeadm Commands" icon={Settings} defaultExpanded={false}>
+          <div className="text-xs font-mono text-theme-text-secondary space-y-0.5">
+            {preKubeadmCommands.map((cmd: string, i: number) => (
+              <div key={i} className="truncate">{cmd}</div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {postKubeadmCommands.length > 0 && (
+        <Section title="Post-Kubeadm Commands" icon={Settings} defaultExpanded={false}>
+          <div className="text-xs font-mono text-theme-text-secondary space-y-0.5">
+            {postKubeadmCommands.map((cmd: string, i: number) => (
+              <div key={i} className="truncate">{cmd}</div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,124 @@
+import { Server, Shield, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
+import { formatAge } from '../resource-utils'
+import { getKCPStatus, getKCPVersion, getKCPInitialized, getMachineClusterName } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const kcpStatus = getKCPStatus(data)
+  const isFailed = kcpStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const clusterName = getMachineClusterName(data)
+  const version = getKCPVersion(data)
+  const initialized = getKCPInitialized(data)
+  const desired = spec.replicas ?? 0
+  const ready = status.readyReplicas ?? 0
+  const available = status.availableReplicas ?? status.readyReplicas ?? 0
+  const upToDate = status.upToDateReplicas ?? status.updatedReplicas ?? 0
+  const updateStrategy = spec.rolloutStrategy || spec.upgradeAfter ? 'RollingUpdate' : undefined
+  const machineTemplate = spec.machineTemplate || {}
+  const infraRef = machineTemplate.infrastructureRef || {}
+  const lastRemediation = status.lastRemediation
+  const kubeadmConfigSpec = spec.kubeadmConfigSpec || {}
+
+  return (
+    <>
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="Control Plane Not Ready"
+          message={readyCond?.message || 'KubeadmControlPlane is not ready.'}
+        />
+      )}
+
+      {/* Overview */}
+      <Section title="Overview" icon={Shield}>
+        <PropertyList>
+          <Property label="Cluster" value={clusterName} />
+          <Property label="Version" value={version} />
+          <Property label="Initialized" value={initialized ? 'Yes' : 'No'} />
+          {updateStrategy && <Property label="Update Strategy" value={updateStrategy} />}
+          {readyCond?.lastTransitionTime && (
+            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Replicas */}
+      <Section title="Replicas" icon={Server}>
+        <PropertyList>
+          <Property label="Desired" value={String(desired)} />
+          <Property label="Ready" value={String(ready)} />
+          <Property label="Available" value={String(available)} />
+          <Property label="Up-to-date" value={String(upToDate)} />
+        </PropertyList>
+      </Section>
+
+      {/* Machine Template */}
+      {infraRef.kind && (
+        <Section title="Machine Template" icon={Settings}>
+          <PropertyList>
+            <Property label="Infrastructure" value={
+              <ResourceLink
+                name={infraRef.name}
+                kind={kindToPlural(infraRef.kind)}
+                namespace={infraRef.namespace || data.metadata?.namespace}
+                group={infraRef.apiVersion?.split('/')?.[0]}
+                label={`${infraRef.kind}/${infraRef.name}`}
+                onNavigate={onNavigate}
+              />
+            } />
+            {machineTemplate.nodeDrainTimeout && (
+              <Property label="Node Drain Timeout" value={machineTemplate.nodeDrainTimeout} />
+            )}
+            {machineTemplate.nodeVolumeDetachTimeout && (
+              <Property label="Volume Detach Timeout" value={machineTemplate.nodeVolumeDetachTimeout} />
+            )}
+            {machineTemplate.nodeDeletionTimeout && (
+              <Property label="Deletion Timeout" value={machineTemplate.nodeDeletionTimeout} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* KubeadmConfig Spec highlights */}
+      {(kubeadmConfigSpec.clusterConfiguration?.certSANs?.length > 0 || kubeadmConfigSpec.clusterConfiguration?.apiServer) && (
+        <Section title="Kubeadm Config" icon={Settings}>
+          <PropertyList>
+            {kubeadmConfigSpec.clusterConfiguration?.certSANs && (
+              <Property label="Cert SANs" value={kubeadmConfigSpec.clusterConfiguration.certSANs.join(', ')} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Remediation */}
+      {lastRemediation && (
+        <Section title="Last Remediation" icon={Shield}>
+          <PropertyList>
+            <Property label="Machine" value={lastRemediation.machine || '-'} />
+            <Property label="Retry Count" value={String(lastRemediation.retryCount ?? 0)} />
+            {lastRemediation.timestamp && <Property label="Time" value={lastRemediation.timestamp} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Owned Machines hint */}
+      <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
+        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/control-plane-name={data.metadata?.name}</code>
+      </div>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,128 @@
+import { Server, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
+import { formatAge } from '../resource-utils'
+import { getMachineDeploymentStatus, getMachineDeploymentVersion, getMachineClusterName } from '../resource-utils-capi'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.v1beta2?.conditions || status.conditions || []
+
+  const mdStatus = getMachineDeploymentStatus(data)
+  const isFailed = mdStatus.level === 'unhealthy'
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+
+  const phase = status.phase || 'Unknown'
+  const clusterName = getMachineClusterName(data)
+  const version = getMachineDeploymentVersion(data)
+  const desired = spec.replicas ?? 0
+  const ready = status.readyReplicas ?? 0
+  const available = status.availableReplicas ?? 0
+  const upToDate = status.upToDateReplicas ?? status.updatedReplicas ?? 0
+  const strategy = spec.strategy || {}
+  const paused = spec.paused || false
+  const infraRef = spec.template?.spec?.infrastructureRef || {}
+  const bootstrapRef = spec.template?.spec?.bootstrap?.configRef || {}
+
+  return (
+    <>
+      {paused && (
+        <AlertBanner
+          variant="warning"
+          title="MachineDeployment Paused"
+          message="Reconciliation is paused. Changes will not be applied until resumed."
+        />
+      )}
+
+      {isFailed && (
+        <AlertBanner
+          variant="error"
+          title="MachineDeployment Not Ready"
+          message={readyCond?.message || `MachineDeployment is in ${phase} state.`}
+        />
+      )}
+
+      {/* Overview */}
+      <Section title="Overview" icon={Server}>
+        <PropertyList>
+          <Property label="Phase" value={phase} />
+          <Property label="Cluster" value={clusterName} />
+          <Property label="Version" value={version} />
+          {readyCond?.lastTransitionTime && (
+            <Property label="Since" value={formatAge(readyCond.lastTransitionTime)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Replicas */}
+      <Section title="Replicas" icon={Server}>
+        <PropertyList>
+          <Property label="Desired" value={String(desired)} />
+          <Property label="Ready" value={String(ready)} />
+          <Property label="Available" value={String(available)} />
+          <Property label="Up-to-date" value={String(upToDate)} />
+        </PropertyList>
+      </Section>
+
+      {/* Strategy */}
+      {strategy.type && (
+        <Section title="Strategy" icon={Settings}>
+          <PropertyList>
+            <Property label="Type" value={strategy.type} />
+            {strategy.rollingUpdate?.maxSurge != null && (
+              <Property label="Max Surge" value={String(strategy.rollingUpdate.maxSurge)} />
+            )}
+            {strategy.rollingUpdate?.maxUnavailable != null && (
+              <Property label="Max Unavailable" value={String(strategy.rollingUpdate.maxUnavailable)} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Template References */}
+      {(infraRef.kind || bootstrapRef.kind) && (
+        <Section title="Machine Template" icon={Settings}>
+          <PropertyList>
+            {infraRef.kind && (
+              <Property label="Infrastructure" value={
+                <ResourceLink
+                  name={infraRef.name}
+                  kind={kindToPlural(infraRef.kind)}
+                  namespace={infraRef.namespace || data.metadata?.namespace}
+                  group={infraRef.apiVersion?.split('/')?.[0]}
+                  label={`${infraRef.kind}/${infraRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {bootstrapRef.kind && (
+              <Property label="Bootstrap" value={
+                <ResourceLink
+                  name={bootstrapRef.name}
+                  kind={kindToPlural(bootstrapRef.kind)}
+                  namespace={bootstrapRef.namespace || data.metadata?.namespace}
+                  group={bootstrapRef.apiVersion?.split('/')?.[0]}
+                  label={`${bootstrapRef.kind}/${bootstrapRef.name}`}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Owned Machines hint */}
+      <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
+        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/deployment-name={data.metadata?.name}</code>
+      </div>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { Settings } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+
+interface Props {
+  data: any
+}
+
+export function CAPIMachineDrainRuleRenderer({ data }: Props) {
+  const spec = data.spec || {}
+  const conditions = data.status?.v1beta2?.conditions || data.status?.conditions || []
+
+  const machines = spec.machines || []
+  const drain = spec.drain || {}
+
+  return (
+    <>
+      <Section title="Drain Configuration" icon={Settings}>
+        <PropertyList>
+          {drain.behavior && <Property label="Behavior" value={drain.behavior} />}
+          {drain.order != null && <Property label="Order" value={String(drain.order)} />}
+        </PropertyList>
+      </Section>
+
+      {machines.length > 0 && (
+        <Section title="Machine Selectors" icon={Settings}>
+          {machines.map((m: any, i: number) => (
+            <div key={i} className="text-xs text-theme-text-secondary mb-1">
+              {m.clusterName && <span>Cluster: {m.clusterName} </span>}
+              {m.namespace && <span>NS: {m.namespace} </span>}
+            </div>
+          ))}
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}