@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,282 @@
+import { Server, HardDrive, Globe, Tag, Activity, ExternalLink } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { MetricsChart } from '../../ui/MetricsChart'
+import { formatMemoryString } from '../../../utils/format'
+import type { MetricsDataPoint } from '../../../types/core'
+
+interface NodeRendererProps {
+  data: any
+  relationships?: { pods?: any[] }
+  onViewPods?: () => void
+  metrics?: { usage?: { cpu: string; memory: string }; timestamp?: string }
+  metricsHistory?: { dataPoints?: MetricsDataPoint[]; collectionError?: string }
+  hideMetricsServer?: boolean
+}
+
+// Helper to handle undefined values
+function formatMemory(value: string | undefined): string {
+  if (!value) return '-'
+  return formatMemoryString(value)
+}
+
+// Format storage values the same way as memory
+function formatStorage(value: string | undefined): string {
+  return formatMemory(value)
+}
+
+// Extract problems from node status and spec
+function getNodeProblems(data: any): string[] {
+  const problems: string[] = []
+  const conditions = data.status?.conditions || []
+  const spec = data.spec || {}
+
+  // Check if unschedulable
+  if (spec.unschedulable) {
+    problems.push('Node is cordoned (unschedulable)')
+  }
+
+  for (const cond of conditions) {
+    // NotReady is a problem when status is not True
+    if (cond.type === 'Ready' && cond.status !== 'True') {
+      problems.push(`Node is NotReady${cond.message ? ': ' + cond.message : ''}`)
+    }
+
+    // These conditions are problems when True
+    if (cond.status === 'True') {
+      if (cond.type === 'DiskPressure') {
+        problems.push(`Disk pressure${cond.message ? ': ' + cond.message : ''}`)
+      }
+      if (cond.type === 'MemoryPressure') {
+        problems.push(`Memory pressure${cond.message ? ': ' + cond.message : ''}`)
+      }
+      if (cond.type === 'PIDPressure') {
+        problems.push(`PID pressure${cond.message ? ': ' + cond.message : ''}`)
+      }
+      if (cond.type === 'NetworkUnavailable') {
+        problems.push(`Network unavailable${cond.message ? ': ' + cond.message : ''}`)
+      }
+    }
+  }
+
+  return problems
+}
+
+export function NodeRenderer({ data, relationships, onViewPods, metrics, metricsHistory, hideMetricsServer }: NodeRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const metadata = data.metadata || {}
+  const labels = metadata.labels || {}
+  const nodeInfo = status.nodeInfo || {}
+  const capacity = status.capacity || {}
+  const allocatable = status.allocatable || {}
+  const addresses = status.addresses || []
+  const taints = spec.taints || []
+
+  // Check for problems
+  const problems = getNodeProblems(data)
+  const hasProblems = problems.length > 0
+
+  // Extract platform info from labels
+  const instanceType = labels['node.kubernetes.io/instance-type']
+  const zone = labels['topology.kubernetes.io/zone']
+  const region = labels['topology.kubernetes.io/region']
+  const nodePool = labels['cloud.google.com/gke-nodepool'] || labels['eks.amazonaws.com/nodegroup']
+  const machineFamily = labels['cloud.google.com/machine-family']
+  const hasPlatformInfo = instanceType || zone || region || nodePool || machineFamily
+
+  return (
+    <>
+      {/* Problems alert - shown at top when there are issues */}
+      {hasProblems && (
+        <AlertBanner variant="error" title="Issues Detected" items={problems} />
+      )}
+
+      {/* Node Info */}
+      <Section title="Node Info" icon={Server}>
+        <PropertyList>
+          <Property label="OS" value={nodeInfo.osImage} />
+          <Property label="Architecture" value={nodeInfo.architecture} />
+          <Property label="Kernel" value={nodeInfo.kernelVersion} />
+          <Property label="Container Runtime" value={nodeInfo.containerRuntimeVersion} />
+          <Property label="Kubelet" value={nodeInfo.kubeletVersion} />
+          <Property label="Kube-Proxy" value={nodeInfo.kubeProxyVersion} />
+        </PropertyList>
+      </Section>
+
+      {/* Capacity */}
+      <Section title="Capacity" icon={HardDrive}>
+        <div className="space-y-1">
+          <div className="grid grid-cols-4 gap-2 text-xs text-theme-text-tertiary font-medium mb-2">
+            <span>Resource</span>
+            <span>Capacity</span>
+            <span>Allocatable</span>
+            <span>In Use</span>
+          </div>
+          <div className="grid grid-cols-4 gap-2 text-sm">
+            <span className="text-theme-text-secondary">CPU</span>
+            <span className="text-theme-text-primary">{capacity.cpu || '-'}</span>
+            <span className="text-theme-text-primary">{allocatable.cpu || '-'}</span>
+            <span className="text-theme-text-primary font-medium">{metrics?.usage?.cpu || '-'}</span>
+          </div>
+          <div className="grid grid-cols-4 gap-2 text-sm">
+            <span className="text-theme-text-secondary">Memory</span>
+            <span className="text-theme-text-primary">{formatMemory(capacity.memory)}</span>
+            <span className="text-theme-text-primary">{formatMemory(allocatable.memory)}</span>
+            <span className="text-theme-text-primary font-medium">{metrics?.usage?.memory ? formatMemory(metrics.usage.memory) : '-'}</span>
+          </div>
+          <div className="grid grid-cols-4 gap-2 text-sm">
+            <span className="text-theme-text-secondary">Pods</span>
+            <span className="text-theme-text-primary">{capacity.pods || '-'}</span>
+            <span className="text-theme-text-primary">{allocatable.pods || '-'}</span>
+            <span className="text-theme-text-primary font-medium">{relationships?.pods?.length ?? '-'}</span>
+          </div>
+          <div className="grid grid-cols-4 gap-2 text-sm">
+            <span className="text-theme-text-secondary">Ephemeral Storage</span>
+            <span className="text-theme-text-primary">{formatStorage(capacity['ephemeral-storage'])}</span>
+            <span className="text-theme-text-primary">{formatStorage(allocatable['ephemeral-storage'])}</span>
+            <span className="text-theme-text-primary">-</span>
+          </div>
+        </div>
+        {onViewPods && (
+          <div className="mt-3 pt-3 border-t border-theme-border">
+            <button
+              onClick={onViewPods}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-400 hover:text-blue-300 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded transition-colors"
+            >
+              <ExternalLink className="w-3 h-3" />
+              View Pods
+            </button>
+          </div>
+        )}
+      </Section>
+
+      {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
+      {!hideMetricsServer && (metrics?.usage || metricsHistory?.dataPoints?.length || metricsHistory?.collectionError) && (
+        <Section title="Resource Usage" icon={Activity} defaultExpanded>
+          {metricsHistory?.collectionError && !metricsHistory?.dataPoints?.length && (
+            <div className="mb-3 rounded-lg border border-yellow-500/30 bg-yellow-500/5 px-3 py-2 text-xs text-yellow-400">
+              <span className="font-medium">Metrics collection error:</span>{' '}
+              <span className="break-all">{metricsHistory.collectionError}</span>
+            </div>
+          )}
+          {metricsHistory?.dataPoints && metricsHistory.dataPoints.length > 0 ? (
+            <div className="space-y-4">
+              {/* CPU Usage with Chart */}
+              <div className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="text-xs text-theme-text-tertiary mb-1 flex items-center justify-between">
+                  <span>CPU</span>
+                  <span className="text-theme-text-quaternary">
+                    {allocatable.cpu || capacity.cpu || '?'} allocatable
+                  </span>
+                </div>
+                <MetricsChart
+                  dataPoints={metricsHistory.dataPoints}
+                  type="cpu"
+                  height={60}
+                  showAxis={true}
+                />
+              </div>
+
+              {/* Memory Usage with Chart */}
+              <div className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="text-xs text-theme-text-tertiary mb-1 flex items-center justify-between">
+                  <span>Memory</span>
+                  <span className="text-theme-text-quaternary">
+                    {formatMemory(allocatable.memory) || formatMemory(capacity.memory) || '?'} allocatable
+                  </span>
+                </div>
+                <MetricsChart
+                  dataPoints={metricsHistory.dataPoints}
+                  type="memory"
+                  height={60}
+                  showAxis={true}
+                />
+              </div>
+            </div>
+          ) : metrics?.usage ? (
+            /* Fallback to simple display if no history yet */
+            <div className="space-y-3">
+              <div className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-theme-text-primary">CPU</span>
+                </div>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-lg font-medium text-blue-400">{metrics.usage.cpu}</span>
+                  <span className="text-sm text-theme-text-tertiary">
+                    / {allocatable.cpu || capacity.cpu || '?'} allocatable
+                  </span>
+                </div>
+              </div>
+              <div className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-theme-text-primary">Memory</span>
+                </div>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-lg font-medium text-purple-400">{formatMemory(metrics.usage.memory)}</span>
+                  <span className="text-sm text-theme-text-tertiary">
+                    / {formatMemory(allocatable.memory) || formatMemory(capacity.memory) || '?'} allocatable
+                  </span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="text-xs text-theme-text-tertiary">Collecting metrics data...</div>
+          )}
+          {metrics?.timestamp && (
+            <div className="mt-2 text-xs text-theme-text-tertiary">
+              Last updated: {new Date(metrics.timestamp).toLocaleTimeString()}
+            </div>
+          )}
+        </Section>
+      )}
+
+      {/* Addresses */}
+      {addresses.length > 0 && (
+        <Section title="Addresses" icon={Globe}>
+          <PropertyList>
+            {addresses.map((addr: any) => (
+              <Property key={`${addr.type}-${addr.address}`} label={addr.type} value={addr.address} />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Platform Info */}
+      {hasPlatformInfo && (
+        <Section title="Platform" icon={Tag}>
+          <PropertyList>
+            <Property label="Instance Type" value={instanceType} />
+            <Property label="Zone" value={zone} />
+            <Property label="Region" value={region} />
+            <Property label="Node Pool" value={nodePool} />
+            <Property label="Machine Family" value={machineFamily} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Taints */}
+      {taints.length > 0 && (
+        <Section title={`Taints (${taints.length})`} defaultExpanded={taints.length <= 5}>
+          <div className="space-y-1">
+            {taints.map((taint: any, i: number) => (
+              <div key={`${taint.key}-${taint.effect}-${i}`} className="text-sm">
+                <span className={clsx(
+                  'px-2 py-0.5 rounded text-xs',
+                  taint.effect === 'NoSchedule' ? 'bg-yellow-500/20 text-yellow-400' :
+                  taint.effect === 'NoExecute' ? 'bg-red-500/20 text-red-400' :
+                  'bg-blue-500/20 text-blue-400'
+                )}>
+                  {taint.key}{taint.value ? `=${taint.value}` : ''}:{taint.effect}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,153 @@
+import { Package, AlertTriangle, CheckCircle2 } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { formatBytes } from '../../../utils/format'
+import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
+import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+
+interface OCIRepositoryRendererProps {
+  data: any
+}
+
+export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = (status.conditions || []) as FluxCondition[]
+  const artifact = status.artifact || {}
+
+  // Convert to unified GitOps status
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+
+  // Problem detection
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (gitOpsStatus.suspended) {
+    problems.push({ color: 'yellow', message: 'OCIRepository is suspended' })
+  }
+
+  if (gitOpsStatus.health === 'Degraded' && gitOpsStatus.message) {
+    problems.push({ color: 'red', message: gitOpsStatus.message })
+  }
+
+  // Extract repository info
+  const url = spec.url || ''
+  const ref = spec.ref || {}
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {problems.map((problem, i) => (
+        <div
+          key={i}
+          className={clsx(
+            'mb-4 p-3 border rounded-lg',
+            problem.color === 'red'
+              ? 'bg-red-500/10 border-red-500/30'
+              : 'bg-yellow-500/10 border-yellow-500/30'
+          )}
+        >
+          <div className="flex items-start gap-2">
+            <AlertTriangle
+              className={clsx(
+                'w-4 h-4 mt-0.5 shrink-0',
+                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+              )}
+            />
+            <div className="flex-1 min-w-0">
+              <div
+                className={clsx(
+                  'text-sm font-medium',
+                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+                )}
+              >
+                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
+              </div>
+              <div
+                className={clsx(
+                  'text-xs mt-1',
+                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
+                )}
+              >
+                {problem.message}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {/* Status section */}
+      <Section title="Status">
+        <div className="space-y-3">
+          <GitOpsStatusBadge status={gitOpsStatus} showHealth={false} />
+          {spec.interval && (
+            <SyncCountdown
+              interval={spec.interval}
+              lastSyncTime={status.lastHandledReconcileAt}
+              suspended={gitOpsStatus.suspended}
+            />
+          )}
+        </div>
+      </Section>
+
+      {/* Source section */}
+      <Section title="Source" icon={Package}>
+        <PropertyList>
+          <Property label="URL" value={url} />
+          {ref.tag && <Property label="Tag" value={ref.tag} />}
+          {ref.semver && <Property label="Semver" value={ref.semver} />}
+          {ref.digest && <Property label="Digest" value={ref.digest} />}
+          {spec.provider && <Property label="Provider" value={spec.provider} />}
+          {spec.secretRef?.name && (
+            <Property label="Secret" value={spec.secretRef.name} />
+          )}
+          {spec.serviceAccountName && (
+            <Property label="Service Account" value={spec.serviceAccountName} />
+          )}
+          {spec.insecure && <Property label="Insecure" value="Yes" />}
+        </PropertyList>
+      </Section>
+
+      {/* Artifact section */}
+      {artifact.revision && (
+        <Section title="Latest Artifact" icon={CheckCircle2}>
+          <PropertyList>
+            <Property label="Revision" value={artifact.revision} />
+            <Property label="Digest" value={artifact.digest} />
+            <Property
+              label="Last Updated"
+              value={artifact.lastUpdateTime ? formatAge(artifact.lastUpdateTime) : '-'}
+            />
+            {artifact.size && (
+              <Property label="Size" value={formatBytes(artifact.size)} />
+            )}
+            {artifact.metadata && Object.keys(artifact.metadata).length > 0 && (
+              <Property
+                label="Metadata"
+                value={Object.entries(artifact.metadata).map(([k, v]) => `${k}=${v}`).join(', ')}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Additional Info */}
+      {status.observedGeneration !== undefined && (
+        <Section title="Additional Info" defaultExpanded={false}>
+          <PropertyList>
+            <Property label="Observed Generation" value={status.observedGeneration} />
+            {status.lastHandledReconcileAt && (
+              <Property
+                label="Last Reconciled"
+                value={formatAge(status.lastHandledReconcileAt)}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions section */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,108 @@
+import { ShoppingCart, AlertTriangle, Globe, Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+
+function getOrderStateBadge(state: string): { color: string; text: string } {
+  switch (state?.toLowerCase()) {
+    case 'valid':
+      return { text: 'Valid', color: 'bg-green-500/20 text-green-400' }
+    case 'ready':
+      return { text: 'Ready', color: 'bg-blue-500/20 text-blue-400' }
+    case 'pending':
+      return { text: 'Pending', color: 'bg-yellow-500/20 text-yellow-400' }
+    case 'invalid':
+      return { text: 'Invalid', color: 'bg-red-500/20 text-red-400' }
+    case 'expired':
+      return { text: 'Expired', color: 'bg-red-500/20 text-red-400' }
+    case 'errored':
+      return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
+    default:
+      return { text: state || 'Unknown', color: 'bg-gray-500/20 text-gray-400' }
+  }
+}
+
+export function OrderRenderer({ data }: { data: any }) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const state = status.state || ''
+  const dnsNames = spec.dnsNames || []
+  const issuerRef = spec.issuerRef || {}
+  const authorizations = status.authorizations || []
+
+  const isError = state === 'invalid' || state === 'expired' || state === 'errored'
+
+  return (
+    <>
+      {/* Problem detection alert */}
+      {isError && (
+        <div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium text-red-400">Order {state.charAt(0).toUpperCase() + state.slice(1)}</div>
+              {status.reason && (
+                <div className="text-xs text-red-300/80 mt-1">{status.reason}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Status */}
+      <Section title="Status" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="State"
+            value={
+              <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', getOrderStateBadge(state).color)}>
+                {getOrderStateBadge(state).text}
+              </span>
+            }
+          />
+          {status.url && <Property label="ACME URL" value={status.url} />}
+        </PropertyList>
+      </Section>
+
+      {/* Domains */}
+      {dnsNames.length > 0 && (
+        <Section title="Domains" icon={Globe}>
+          <div className="flex flex-wrap gap-1.5">
+            {dnsNames.map((name: string) => (
+              <span key={name} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary font-medium">
+                {name}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Issuer */}
+      {issuerRef.name && (
+        <Section title="Issuer" icon={Shield}>
+          <PropertyList>
+            <Property label="Name" value={issuerRef.name} />
+            <Property label="Kind" value={issuerRef.kind || 'ClusterIssuer'} />
+            {issuerRef.group && <Property label="Group" value={issuerRef.group} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Authorizations */}
+      {authorizations.length > 0 && (
+        <Section title={`Authorizations (${authorizations.length})`} icon={ShoppingCart}>
+          <div className="space-y-1">
+            {authorizations.map((auth: any, i: number) => (
+              <div key={i} className="text-xs text-theme-text-secondary bg-theme-elevated/30 rounded p-2">
+                {auth.url || `Authorization ${i + 1}`}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,98 @@
+import { HardDrive } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface PVCRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+const accessModeShorthand: Record<string, string> = {
+  ReadWriteOnce: 'RWO',
+  ReadOnlyMany: 'ROX',
+  ReadWriteMany: 'RWX',
+  ReadWriteOncePod: 'RWOP',
+}
+
+function formatAccessModes(modes: string[] | undefined): string | undefined {
+  if (!modes || modes.length === 0) return undefined
+  return modes.map(m => accessModeShorthand[m] || m).join(', ')
+}
+
+export function PVCRenderer({ data, onNavigate }: PVCRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const annotations = data.metadata?.annotations || {}
+  const phase = status.phase
+
+  // Problem detection
+  const isLost = phase === 'Lost'
+  const isPending = phase === 'Pending'
+  const hasProblems = isLost || isPending
+
+  // Provisioner info from annotations
+  const provisioner = annotations['volume.kubernetes.io/storage-provisioner']
+  const selectedNode = annotations['volume.kubernetes.io/selected-node']
+  const bindCompleted = annotations['pv.kubernetes.io/bind-completed']
+  const hasProvisionerInfo = provisioner || selectedNode || bindCompleted
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {hasProblems && isLost && (
+        <AlertBanner
+          variant="error"
+          title="Issues Detected"
+          message="PVC has lost its bound volume"
+        />
+      )}
+
+      {hasProblems && isPending && (
+        <AlertBanner
+          variant="warning"
+          title="Issues Detected"
+          message="PVC is waiting to be bound to a volume"
+        />
+      )}
+
+      <Section title="Status" icon={HardDrive}>
+        <PropertyList>
+          <Property
+            label="Phase"
+            value={
+              <span className={clsx(
+                phase === 'Bound' && 'text-green-400',
+                phase === 'Pending' && 'text-yellow-400',
+                phase === 'Lost' && 'text-red-400',
+              )}>
+                {phase}
+              </span>
+            }
+          />
+          <Property label="Capacity" value={status.capacity?.storage} />
+          <Property label="Requested" value={spec.resources?.requests?.storage} />
+          <Property label="Storage Class" value={
+            spec.storageClassName ? <ResourceLink name={spec.storageClassName} kind="storageclasses" namespace="" onNavigate={onNavigate} /> : undefined
+          } />
+          <Property label="Access Modes" value={formatAccessModes(spec.accessModes)} />
+          <Property label="Volume Mode" value={spec.volumeMode} />
+          <Property label="Volume Name" value={
+            spec.volumeName ? <ResourceLink name={spec.volumeName} kind="persistentvolumes" namespace="" onNavigate={onNavigate} /> : undefined
+          } />
+        </PropertyList>
+      </Section>
+
+      {hasProvisionerInfo && (
+        <Section title="Provisioner Info">
+          <PropertyList>
+            <Property label="Provisioner" value={provisioner} />
+            <Property label="Selected Node" value={selectedNode} />
+            <Property label="Bind Completed" value={bindCompleted} />
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}