@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,193 @@
+import { Cpu } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface VPARendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function formatResource(value: string | undefined): string {
+  if (!value) return '-'
+  return value
+}
+
+export function VPARenderer({ data, onNavigate }: VPARendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const targetRef = spec.targetRef || {}
+  const updatePolicy = spec.updatePolicy || {}
+  const resourcePolicy = spec.resourcePolicy || {}
+  const containerPolicies = resourcePolicy.containerPolicies || []
+  const recommendations = status.recommendation?.containerRecommendations || []
+  const conditions = status.conditions || []
+
+  const updateMode = updatePolicy.updateMode || 'Auto'
+  const isOff = updateMode === 'Off'
+
+  // Problem detection
+  const hasRecommendation = conditions.some((c: any) => c.type === 'RecommendationProvided' && c.status === 'True')
+  const noRecommendation = conditions.some((c: any) => c.type === 'RecommendationProvided' && c.status === 'False')
+  const configUnsupported = conditions.some((c: any) => c.type === 'ConfigUnsupported' && c.status === 'True')
+  const lowConfidence = conditions.some((c: any) => c.type === 'LowConfidence' && c.status === 'True')
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {configUnsupported && (
+        <AlertBanner
+          variant="error"
+          title="Configuration Unsupported"
+          message={conditions.find((c: any) => c.type === 'ConfigUnsupported')?.message}
+        />
+      )}
+
+      {noRecommendation && !configUnsupported && (
+        <AlertBanner
+          variant="warning"
+          title="No Recommendations"
+          message={conditions.find((c: any) => c.type === 'RecommendationProvided')?.message || 'VPA has not produced recommendations yet — insufficient metrics data'}
+        />
+      )}
+
+      {lowConfidence && hasRecommendation && (
+        <AlertBanner
+          variant="info"
+          title="Low Confidence"
+          message="Recommendations are based on limited data — consider waiting for more metrics"
+        />
+      )}
+
+      {/* Target & Mode */}
+      <Section title="Configuration" icon={Cpu}>
+        <PropertyList>
+          <Property label="Target" value={
+            targetRef.name ? (
+              <ResourceLink
+                name={targetRef.name}
+                kind={(targetRef.kind || 'Deployment').toLowerCase() + 's'}
+                namespace={data.metadata?.namespace || ''}
+                label={`${targetRef.kind}/${targetRef.name}`}
+                onNavigate={onNavigate}
+              />
+            ) : undefined
+          } />
+          <Property label="Update Mode" value={
+            <span className={clsx(
+              updateMode === 'Auto' && 'text-green-400',
+              updateMode === 'Recreate' && 'text-yellow-400',
+              updateMode === 'Initial' && 'text-blue-400',
+              updateMode === 'Off' && 'text-theme-text-tertiary',
+            )}>
+              {updateMode}
+            </span>
+          } />
+          {isOff && (
+            <Property label="" value={
+              <span className="text-xs text-theme-text-tertiary">Recommendation-only mode — no automatic updates</span>
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Recommendations */}
+      {recommendations.length > 0 && (
+        <Section title="Recommendations" defaultExpanded>
+          <div className="space-y-3">
+            {recommendations.map((rec: any) => (
+              <div key={rec.containerName} className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="text-sm font-medium text-theme-text-primary mb-2">{rec.containerName}</div>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-xs">
+                    <thead>
+                      <tr className="text-theme-text-tertiary">
+                        <th className="text-left py-1 pr-3 font-medium w-24"></th>
+                        <th className="text-right py-1 px-2 font-medium">CPU</th>
+                        <th className="text-right py-1 px-2 font-medium">Memory</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td className="py-1 pr-3 text-theme-text-secondary">Target</td>
+                        <td className="text-right py-1 px-2 text-green-400 font-medium">{formatResource(rec.target?.cpu)}</td>
+                        <td className="text-right py-1 px-2 text-green-400 font-medium">{formatResource(rec.target?.memory)}</td>
+                      </tr>
+                      <tr>
+                        <td className="py-1 pr-3 text-theme-text-secondary">Lower Bound</td>
+                        <td className="text-right py-1 px-2 text-theme-text-secondary">{formatResource(rec.lowerBound?.cpu)}</td>
+                        <td className="text-right py-1 px-2 text-theme-text-secondary">{formatResource(rec.lowerBound?.memory)}</td>
+                      </tr>
+                      <tr>
+                        <td className="py-1 pr-3 text-theme-text-secondary">Upper Bound</td>
+                        <td className="text-right py-1 px-2 text-theme-text-secondary">{formatResource(rec.upperBound?.cpu)}</td>
+                        <td className="text-right py-1 px-2 text-theme-text-secondary">{formatResource(rec.upperBound?.memory)}</td>
+                      </tr>
+                      {rec.uncappedTarget && (
+                        <tr>
+                          <td className="py-1 pr-3 text-theme-text-tertiary">Uncapped</td>
+                          <td className="text-right py-1 px-2 text-theme-text-tertiary">{formatResource(rec.uncappedTarget?.cpu)}</td>
+                          <td className="text-right py-1 px-2 text-theme-text-tertiary">{formatResource(rec.uncappedTarget?.memory)}</td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Resource Policy */}
+      {containerPolicies.length > 0 && (
+        <Section title="Resource Policy" defaultExpanded>
+          <div className="space-y-3">
+            {containerPolicies.map((policy: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm font-medium text-theme-text-primary">{policy.containerName || '*'}</span>
+                  {policy.mode && (
+                    <span className={clsx(
+                      'px-1.5 py-0.5 rounded text-[10px] font-medium',
+                      policy.mode === 'Off' ? 'bg-theme-hover text-theme-text-tertiary' : 'bg-blue-500/20 text-blue-400'
+                    )}>
+                      {policy.mode}
+                    </span>
+                  )}
+                </div>
+                <PropertyList>
+                  {policy.minAllowed && (
+                    <Property label="Min Allowed" value={
+                      <span className="text-xs">
+                        {policy.minAllowed.cpu && `CPU: ${policy.minAllowed.cpu}`}
+                        {policy.minAllowed.cpu && policy.minAllowed.memory && ' · '}
+                        {policy.minAllowed.memory && `Mem: ${policy.minAllowed.memory}`}
+                      </span>
+                    } />
+                  )}
+                  {policy.maxAllowed && (
+                    <Property label="Max Allowed" value={
+                      <span className="text-xs">
+                        {policy.maxAllowed.cpu && `CPU: ${policy.maxAllowed.cpu}`}
+                        {policy.maxAllowed.cpu && policy.maxAllowed.memory && ' · '}
+                        {policy.maxAllowed.memory && `Mem: ${policy.maxAllowed.memory}`}
+                      </span>
+                    } />
+                  )}
+                  {policy.controlledResources && (
+                    <Property label="Controlled" value={policy.controlledResources.join(', ')} />
+                  )}
+                  {policy.controlledValues && (
+                    <Property label="Controlled Values" value={policy.controlledValues} />
+                  )}
+                </PropertyList>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,73 @@
+import { HardDrive, Clock } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import {
+  getBSLStatus,
+  getBSLProvider,
+  getBSLBucket,
+  getBSLPrefix,
+  getBSLRegion,
+  getBSLDefault,
+  getBSLAccessMode,
+  getBSLLastValidation,
+  getBSLLastSynced,
+} from '../resource-utils-velero'
+
+interface VeleroBSLRendererProps {
+  data: any
+}
+
+export function VeleroBSLRenderer({ data }: VeleroBSLRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const bslStatus = getBSLStatus(data)
+  const config = data.spec?.config || {}
+
+  return (
+    <>
+      {/* Status section */}
+      <Section title="Status" icon={Clock} defaultExpanded>
+        <PropertyList>
+          <Property label="Phase" value={
+            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', bslStatus.color)}>
+              {bslStatus.text}
+            </span>
+          } />
+          <Property label="Last Validation" value={getBSLLastValidation(data)} />
+          <Property label="Last Synced" value={getBSLLastSynced(data)} />
+          {status.lastSyncedRevision && (
+            <Property label="Last Synced Revision" value={
+              <span className="text-sm font-mono text-theme-text-secondary break-all">{status.lastSyncedRevision}</span>
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Provider section */}
+      <Section title="Provider" icon={HardDrive} defaultExpanded>
+        <PropertyList>
+          <Property label="Provider" value={getBSLProvider(data)} />
+          <Property label="Bucket" value={getBSLBucket(data)} />
+          <Property label="Prefix" value={getBSLPrefix(data)} />
+          <Property label="Region" value={getBSLRegion(data)} />
+          <Property label="Access Mode" value={getBSLAccessMode(data)} />
+          <Property label="Default" value={getBSLDefault(data) ? 'Yes' : 'No'} />
+        </PropertyList>
+        {Object.keys(config).length > 0 && (
+          <div className="mt-2 pt-2 border-t border-theme-border">
+            <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Config</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(config).map(([k, v]) => (
+                <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                  {k}: {String(v)}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,193 @@
+import { Archive, Clock, HardDrive, Filter } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getBackupStatus,
+  getBackupStorageLocation,
+  getBackupIncludedNamespaces,
+  getBackupExcludedNamespaces,
+  getBackupIncludedResources,
+  getBackupExcludedResources,
+  getBackupDuration,
+  getBackupItemCount,
+  getBackupExpiry,
+  getBackupErrors,
+  getBackupWarnings,
+  getBackupValidationErrors,
+  getBackupTTL,
+  getBackupSnapshotVolumes,
+  getBackupDefaultVolumesToFsBackup,
+  getBackupVolumeSnapshotLocations,
+} from '../resource-utils-velero'
+import { formatAge } from '../resource-utils'
+
+interface VeleroBackupRendererProps {
+  data: any
+}
+
+export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const backupStatus = getBackupStatus(data)
+  const errors = getBackupErrors(data)
+  const warnings = getBackupWarnings(data)
+  const validationErrors = getBackupValidationErrors(data)
+  const includedNamespaces = getBackupIncludedNamespaces(data)
+  const excludedNamespaces = getBackupExcludedNamespaces(data)
+  const includedResources = getBackupIncludedResources(data)
+  const excludedResources = getBackupExcludedResources(data)
+  const vslLocations = getBackupVolumeSnapshotLocations(data)
+
+  const isFailed = backupStatus.level === 'unhealthy'
+  const isPartiallyFailed = backupStatus.text === 'PartiallyFailed'
+  const isInProgress = backupStatus.text === 'InProgress' || backupStatus.text === 'Uploading'
+
+  // Progress data
+  const progress = status.progress
+  const itemsBacked = progress?.itemsBackedUp ?? 0
+  const totalItems = progress?.totalItems ?? 0
+  const progressPercent = totalItems > 0 ? Math.round((itemsBacked / totalItems) * 100) : 0
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {(isFailed || isPartiallyFailed) && (
+        <AlertBanner
+          variant="error"
+          title={isFailed ? 'Backup Failed' : 'Backup Partially Failed'}
+          message={`${errors} error(s) occurred during backup.`}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
+        />
+      )}
+      {warnings > 0 && !isFailed && (
+        <AlertBanner
+          variant="warning"
+          title={`${warnings} Warning(s)`}
+          message={`Backup completed with ${warnings} warning(s).`}
+        />
+      )}
+
+      {/* Status section */}
+      <Section title="Status" icon={Archive} defaultExpanded>
+        <PropertyList>
+          <Property label="Phase" value={
+            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', backupStatus.color)}>
+              {backupStatus.text}
+            </span>
+          } />
+          {status.startTimestamp && (
+            <Property label="Started" value={formatAge(status.startTimestamp) + ' ago'} />
+          )}
+          {status.completionTimestamp && (
+            <Property label="Completed" value={formatAge(status.completionTimestamp) + ' ago'} />
+          )}
+          <Property label="Duration" value={getBackupDuration(data)} />
+          <Property label="Expiration" value={getBackupExpiry(data)} />
+          {errors > 0 && <Property label="Errors" value={String(errors)} />}
+          {warnings > 0 && <Property label="Warnings" value={String(warnings)} />}
+        </PropertyList>
+      </Section>
+
+      {/* Progress section (if in progress) */}
+      {isInProgress && progress && (
+        <Section title="Progress" defaultExpanded>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-theme-text-secondary">Items backed up</span>
+              <span className="text-theme-text-primary font-medium">{getBackupItemCount(data)}</span>
+            </div>
+            <div className="w-full bg-theme-elevated rounded-full h-2">
+              <div
+                className="bg-blue-500 h-2 rounded-full transition-all"
+                style={{ width: `${progressPercent}%` }}
+              />
+            </div>
+            <div className="text-xs text-theme-text-tertiary text-right">{progressPercent}%</div>
+          </div>
+        </Section>
+      )}
+
+      {/* Scope section */}
+      {(includedNamespaces.length > 0 || excludedNamespaces.length > 0 || includedResources.length > 0 || excludedResources.length > 0 || data.spec?.labelSelector) && (
+        <Section title="Scope" icon={Filter} defaultExpanded>
+          <PropertyList>
+            {includedNamespaces.length > 0 && (
+              <Property label="Included Namespaces" value={
+                <div className="flex flex-wrap gap-1">
+                  {includedNamespaces.map((ns: string) => (
+                    <span key={ns} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{ns}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {includedNamespaces.length === 0 && (
+              <Property label="Included Namespaces" value="* (all)" />
+            )}
+            {excludedNamespaces.length > 0 && (
+              <Property label="Excluded Namespaces" value={
+                <div className="flex flex-wrap gap-1">
+                  {excludedNamespaces.map((ns: string) => (
+                    <span key={ns} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{ns}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {includedResources.length > 0 && (
+              <Property label="Included Resources" value={
+                <div className="flex flex-wrap gap-1">
+                  {includedResources.map((r: string) => (
+                    <span key={r} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{r}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {excludedResources.length > 0 && (
+              <Property label="Excluded Resources" value={
+                <div className="flex flex-wrap gap-1">
+                  {excludedResources.map((r: string) => (
+                    <span key={r} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{r}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {data.spec?.labelSelector && (
+              <Property label="Label Selector" value={
+                <span className="text-sm font-mono text-theme-text-secondary break-all">
+                  {JSON.stringify(data.spec.labelSelector)}
+                </span>
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Storage section */}
+      <Section title="Storage" icon={HardDrive} defaultExpanded>
+        <PropertyList>
+          <Property label="Storage Location" value={getBackupStorageLocation(data)} />
+          {vslLocations.length > 0 && (
+            <Property label="Volume Snapshot Locations" value={
+              <div className="flex flex-wrap gap-1">
+                {vslLocations.map((loc: string) => (
+                  <span key={loc} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{loc}</span>
+                ))}
+              </div>
+            } />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Options section */}
+      <Section title="Options" icon={Clock}>
+        <PropertyList>
+          <Property label="TTL" value={getBackupTTL(data)} />
+          <Property label="Snapshot Volumes" value={getBackupSnapshotVolumes(data)} />
+          <Property label="Default FS Backup" value={getBackupDefaultVolumesToFsBackup(data)} />
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,161 @@
+import { ArchiveRestore, Filter } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getRestoreStatus,
+  getRestoreBackupName,
+  getRestoreIncludedNamespaces,
+  getRestoreExcludedNamespaces,
+  getRestoreIncludedResources,
+  getRestoreExcludedResources,
+  getRestoreDuration,
+  getRestoreErrors,
+  getRestoreWarnings,
+  getRestorePVs,
+  getRestoreExistingResourcePolicy,
+} from '../resource-utils-velero'
+import { formatAge } from '../resource-utils'
+
+interface VeleroRestoreRendererProps {
+  data: any
+}
+
+export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const restoreStatus = getRestoreStatus(data)
+  const errors = getRestoreErrors(data)
+  const warnings = getRestoreWarnings(data)
+  const includedNamespaces = getRestoreIncludedNamespaces(data)
+  const excludedNamespaces = getRestoreExcludedNamespaces(data)
+  const includedResources = getRestoreIncludedResources(data)
+  const excludedResources = getRestoreExcludedResources(data)
+
+  const isFailed = restoreStatus.level === 'unhealthy'
+  const isPartiallyFailed = restoreStatus.text === 'PartiallyFailed'
+  const isInProgress = restoreStatus.text === 'InProgress'
+
+  // Progress data
+  const progress = status.progress
+  const itemsRestored = progress?.itemsRestored ?? 0
+  const totalItems = progress?.totalItems ?? 0
+  const progressPercent = totalItems > 0 ? Math.round((itemsRestored / totalItems) * 100) : 0
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {(isFailed || isPartiallyFailed) && (
+        <AlertBanner
+          variant="error"
+          title={isFailed ? 'Restore Failed' : 'Restore Partially Failed'}
+          message={`${errors} error(s) occurred during restore.`}
+        />
+      )}
+      {warnings > 0 && !isFailed && (
+        <AlertBanner
+          variant="warning"
+          title={`${warnings} Warning(s)`}
+          message={`Restore completed with ${warnings} warning(s).`}
+        />
+      )}
+
+      {/* Status section */}
+      <Section title="Status" icon={ArchiveRestore} defaultExpanded>
+        <PropertyList>
+          <Property label="Phase" value={
+            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', restoreStatus.color)}>
+              {restoreStatus.text}
+            </span>
+          } />
+          <Property label="Backup" value={getRestoreBackupName(data)} />
+          {status.startTimestamp && (
+            <Property label="Started" value={formatAge(status.startTimestamp) + ' ago'} />
+          )}
+          {status.completionTimestamp && (
+            <Property label="Completed" value={formatAge(status.completionTimestamp) + ' ago'} />
+          )}
+          <Property label="Duration" value={getRestoreDuration(data)} />
+          {errors > 0 && <Property label="Errors" value={String(errors)} />}
+          {warnings > 0 && <Property label="Warnings" value={String(warnings)} />}
+        </PropertyList>
+      </Section>
+
+      {/* Progress section (if in progress) */}
+      {isInProgress && progress && (
+        <Section title="Progress" defaultExpanded>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-theme-text-secondary">Items restored</span>
+              <span className="text-theme-text-primary font-medium">{itemsRestored}/{totalItems}</span>
+            </div>
+            <div className="w-full bg-theme-elevated rounded-full h-2">
+              <div
+                className="bg-blue-500 h-2 rounded-full transition-all"
+                style={{ width: `${progressPercent}%` }}
+              />
+            </div>
+            <div className="text-xs text-theme-text-tertiary text-right">{progressPercent}%</div>
+          </div>
+        </Section>
+      )}
+
+      {/* Scope section */}
+      {(includedNamespaces.length > 0 || excludedNamespaces.length > 0 || includedResources.length > 0 || excludedResources.length > 0) && (
+        <Section title="Scope" icon={Filter} defaultExpanded>
+          <PropertyList>
+            {includedNamespaces.length > 0 && (
+              <Property label="Included Namespaces" value={
+                <div className="flex flex-wrap gap-1">
+                  {includedNamespaces.map((ns: string) => (
+                    <span key={ns} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{ns}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {includedNamespaces.length === 0 && (
+              <Property label="Included Namespaces" value="* (all)" />
+            )}
+            {excludedNamespaces.length > 0 && (
+              <Property label="Excluded Namespaces" value={
+                <div className="flex flex-wrap gap-1">
+                  {excludedNamespaces.map((ns: string) => (
+                    <span key={ns} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{ns}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {includedResources.length > 0 && (
+              <Property label="Included Resources" value={
+                <div className="flex flex-wrap gap-1">
+                  {includedResources.map((r: string) => (
+                    <span key={r} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{r}</span>
+                  ))}
+                </div>
+              } />
+            )}
+            {excludedResources.length > 0 && (
+              <Property label="Excluded Resources" value={
+                <div className="flex flex-wrap gap-1">
+                  {excludedResources.map((r: string) => (
+                    <span key={r} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{r}</span>
+                  ))}
+                </div>
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Options section */}
+      <Section title="Options">
+        <PropertyList>
+          <Property label="Restore PVs" value={getRestorePVs(data)} />
+          <Property label="Existing Resource Policy" value={getRestoreExistingResourcePolicy(data)} />
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}