@skyhook-io/k8s-ui 1.3.2 → 1.4.1

package/src/components/resources/ResourcesView.tsx

@@ -20,6 +20,7 @@ import {
   Tag,
   Copy,
   Check,
+  Plus,
 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { ResourceBar } from '../ui/ResourceBar'
@@ -30,6 +31,8 @@ import {
   getPodStatus,
   getPodRestarts,
   getPodProblems,
+  getWorkloadProblems,
+  workloadMatchesProblemCategory,
   getContainerSquareStates,
   getWorkloadImages,
   getWorkloadConditions,
@@ -115,6 +118,8 @@ import {
   getCellFilterValue,
   parseColumnFilters,
   serializeColumnFilters,
+  podMatchesProblemCategory,
+  SEVERITY_DOT_COLOR,
 } from './resource-utils'
 import { SEVERITY_BADGE, EVENT_TYPE_COLORS } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
@@ -139,7 +144,9 @@ import { ResourcesSidebar } from './ResourcesSidebar'
 import type { SelectedKindInfo } from './ResourcesSidebar'
 
 // Pod problem filter options (special multi-select, not a single column value)
-const POD_PROBLEMS = ['CrashLoopBackOff', 'ImagePullBackOff', 'OOMKilled', 'Unschedulable', 'Not Ready', 'High Restarts'] as const
+const POD_PROBLEMS = ['CrashLoopBackOff', 'ImagePullBackOff', 'OOMKilled', 'Unschedulable', 'Not Ready', 'High Restarts', 'Init Failed', 'Exit Code Error', 'Failed', 'Other'] as const
+const WORKLOAD_PROBLEMS = ['Unavailable', 'Rollout Stuck', 'Rollout In Progress'] as const
+const WORKLOAD_KINDS = new Set(['deployments', 'statefulsets', 'daemonsets'])
 
 // Columns to skip for auto-detected filters (high cardinality, text-like, or non-filterable)
 const SKIP_FILTER_COLUMNS = new Set([
@@ -454,6 +461,8 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'namespace', label: 'Namespace', width: 'w-36' },
     { key: 'status', label: 'Status', width: 'w-24' },
     { key: 'instanceType', label: 'Instance Type', width: 'w-32' },
+    { key: 'capacityType', label: 'Capacity', width: 'w-24', tooltip: 'Spot or On-Demand' },
+    { key: 'zone', label: 'Zone', width: 'w-28', hideOnMobile: true },
     { key: 'nodePool', label: 'Node Pool', width: 'w-32' },
     { key: 'nodeName', label: 'Node', width: 'w-40', hideOnMobile: true },
     { key: 'age', label: 'Age', width: 'w-20' },
@@ -1421,6 +1430,8 @@ interface ResourcesViewProps {
   onSelectedKindChange?: (kind: { name: string; kind: string; group: string }) => void
   /** When true, the sidebar is not rendered. Useful when a standalone ResourcesSidebar is used externally. */
   hideSidebar?: boolean
+  /** Callback when the [+] create button is clicked. Receives the currently selected kind info. */
+  onCreateResource?: (kind: { name: string; kind: string; group: string } | null) => void
 }
 
 // Default selected kind
@@ -1492,6 +1503,7 @@ export function ResourcesView({
   onOpenWorkloadLogs,
   onSelectedKindChange,
   hideSidebar = false,
+  onCreateResource,
 }: ResourcesViewProps) {
   const location = useMemo(() => ({ search: locationSearch, pathname: locationPathname }), [locationSearch, locationPathname])
   const initialFilters = getInitialFiltersFromURL()
@@ -2472,27 +2484,8 @@ export function ResourcesView({
   const podMatchesProblemFilter = useCallback((pod: any, filters: string[]): boolean => {
     if (filters.length === 0) return true
     const problems = getPodProblems(pod)
-    const problemMessages = problems.map(p => p.message)
     const restarts = getPodRestarts(pod)
-
-    return filters.some(filter => {
-      switch (filter) {
-        case 'CrashLoopBackOff':
-          return problemMessages.includes('CrashLoopBackOff')
-        case 'ImagePullBackOff':
-          return problemMessages.some(m => m.includes('ImagePull'))
-        case 'OOMKilled':
-          return problemMessages.includes('OOMKilled')
-        case 'Unschedulable':
-          return problemMessages.includes('Unschedulable')
-        case 'Not Ready':
-          return problemMessages.includes('Not Ready') || problemMessages.some(m => m.includes('Probe'))
-        case 'High Restarts':
-          return restarts > 5
-        default:
-          return false
-      }
-    })
+    return filters.some(filter => podMatchesProblemCategory(problems, restarts, filter))
   }, [])
 
 
@@ -2522,9 +2515,17 @@ export function ResourcesView({
       )
     }
 
-    // Apply problem filters (pods only)
-    if (problemFilters.length > 0 && selectedKind.name.toLowerCase() === 'pods') {
-      result = result.filter((r: any) => podMatchesProblemFilter(r, problemFilters))
+    // Apply problem filters
+    if (problemFilters.length > 0) {
+      const kindLower = normalizeKindToPlural(selectedKind.name, selectedKind.group)
+      if (kindLower === 'pods') {
+        result = result.filter((r: any) => podMatchesProblemFilter(r, problemFilters))
+      } else if (WORKLOAD_KINDS.has(kindLower)) {
+        result = result.filter((r: any) => {
+          const problems = getWorkloadProblems(r, kindLower)
+          return problemFilters.some(f => workloadMatchesProblemCategory(problems, f))
+        })
+      }
     }
 
     // Apply inactive ReplicaSet filter (default: hide inactive)
@@ -2798,15 +2799,12 @@ export function ResourcesView({
 
       for (const pod of resources) {
         const podProblems = getPodProblems(pod)
-        const msgs = podProblems.map(p => p.message)
         const restarts = getPodRestarts(pod)
-
-        if (msgs.includes('CrashLoopBackOff')) problemCounts['CrashLoopBackOff']++
-        if (msgs.some(m => m.includes('ImagePull'))) problemCounts['ImagePullBackOff']++
-        if (msgs.includes('OOMKilled')) problemCounts['OOMKilled']++
-        if (msgs.includes('Unschedulable')) problemCounts['Unschedulable']++
-        if (msgs.includes('Not Ready') || msgs.some(m => m.includes('Probe'))) problemCounts['Not Ready']++
-        if (restarts > 5) problemCounts['High Restarts']++
+        for (const category of POD_PROBLEMS) {
+          if (podMatchesProblemCategory(podProblems, restarts, category)) {
+            problemCounts[category]++
+          }
+        }
       }
 
       const activeProblems = POD_PROBLEMS
@@ -2817,6 +2815,28 @@ export function ResourcesView({
       }
     }
 
+    // Workload-specific: compute problem counts
+    if (WORKLOAD_KINDS.has(kindLower)) {
+      const problemCounts: Record<string, number> = {}
+      WORKLOAD_PROBLEMS.forEach(p => problemCounts[p] = 0)
+
+      for (const resource of resources) {
+        const workloadProblems = getWorkloadProblems(resource, kindLower)
+        for (const category of WORKLOAD_PROBLEMS) {
+          if (workloadMatchesProblemCategory(workloadProblems, category)) {
+            problemCounts[category]++
+          }
+        }
+      }
+
+      const activeProblems = WORKLOAD_PROBLEMS
+        .map(p => ({ value: p, count: problemCounts[p] }))
+        .filter(p => p.count > 0)
+      if (activeProblems.length > 0) {
+        problems = activeProblems
+      }
+    }
+
     // Compute available labels for label filtering
     const labelCounts: Record<string, number> = {}
     for (const r of resources) {
@@ -3157,6 +3177,16 @@ export function ResourcesView({
               : <RefreshCw className={clsx('w-4 h-4', refreshPhase === 'spinning' && 'animate-spin')} />
             }
           </button>
+          {onCreateResource && (
+            <Tooltip content={`Create ${selectedKind.kind || 'resource'}`}>
+              <button
+                onClick={() => onCreateResource(selectedKind)}
+                className="p-2 hover:bg-theme-elevated rounded-lg text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+              >
+                <Plus className="w-4 h-4" />
+              </button>
+            </Tooltip>
+          )}
         </div>
 
         {/* Table */}
@@ -4007,12 +4037,21 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
       const status = getPodStatus(resource)
       const problems = getPodProblems(resource)
       return (
-        <div className="flex items-center gap-2">
-          <span className={clsx('badge', status.color)}>
+        <div className="flex items-center gap-2 min-w-0">
+          <span className={clsx('badge truncate', status.color)} title={status.text}>
             {status.text}
           </span>
-          {problems.length > 0 && (
-            <Tooltip content={problems.map(p => p.message).join(', ')}>
+          {problems.length > 1 && (
+            <Tooltip content={
+              <div className="space-y-0.5">
+                {problems.map((p, i) => (
+                  <div key={i} className="flex items-center gap-1.5">
+                    <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                    <span>{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            }>
               <span className="text-red-400">
                 <AlertTriangle className="w-3.5 h-3.5" />
               </span>
@@ -4087,7 +4126,7 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
-function WorkloadCell({ resource, column }: { resource: any; kind: string; column: string }) {
+function WorkloadCell({ resource, column, kind }: { resource: any; kind: string; column: string }) {
   const status = resource.status || {}
   const spec = resource.spec || {}
 
@@ -4096,13 +4135,32 @@ function WorkloadCell({ resource, column }: { resource: any; kind: string; colum
       const desired = spec.replicas ?? 0
       const ready = status.readyReplicas || 0
       const allReady = ready === desired && desired > 0
+      const problems = getWorkloadProblems(resource, kind)
       return (
-        <span className={clsx(
-          'text-sm font-medium',
-          desired === 0 ? 'text-theme-text-secondary' : allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
-        )}>
-          {ready}/{desired}
-        </span>
+        <div className="flex items-center gap-1.5">
+          <span className={clsx(
+            'text-sm font-medium',
+            desired === 0 ? 'text-theme-text-secondary' : allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
+          )}>
+            {ready}/{desired}
+          </span>
+          {problems.length > 0 && (
+            <Tooltip content={
+              <div className="space-y-0.5">
+                {problems.map((p, i) => (
+                  <div key={i} className="flex items-center gap-1.5">
+                    <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                    <span>{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            }>
+              <span className="text-red-400">
+                <AlertTriangle className="w-3.5 h-3.5" />
+              </span>
+            </Tooltip>
+          )}
+        </div>
       )
     }
     case 'upToDate':
@@ -4153,13 +4211,32 @@ function DaemonSetCell({ resource, column }: { resource: any; column: string })
       const desired = status.desiredNumberScheduled || 0
       const ready = status.numberReady || 0
       const allReady = ready === desired && desired > 0
+      const problems = getWorkloadProblems(resource, 'daemonsets')
       return (
-        <span className={clsx(
-          'text-sm font-medium',
-          allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
-        )}>
-          {ready}
-        </span>
+        <div className="flex items-center gap-1.5">
+          <span className={clsx(
+            'text-sm font-medium',
+            allReady ? 'text-green-400' : ready > 0 ? 'text-yellow-400' : 'text-red-400'
+          )}>
+            {ready}
+          </span>
+          {problems.length > 0 && (
+            <Tooltip content={
+              <div className="space-y-0.5">
+                {problems.map((p, i) => (
+                  <div key={i} className="flex items-center gap-1.5">
+                    <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', SEVERITY_DOT_COLOR[p.severity])} />
+                    <span>{p.message}</span>
+                  </div>
+                ))}
+              </div>
+            }>
+              <span className="text-red-400">
+                <AlertTriangle className="w-3.5 h-3.5" />
+              </span>
+            </Tooltip>
+          )}
+        </div>
       )
     }
     case 'upToDate':

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

@@ -1,4 +1,4 @@
-import { GitBranch, FolderTree, Settings, Target, XCircle } from 'lucide-react'
+import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
@@ -16,6 +16,62 @@ interface ArgoApplicationRendererProps {
   isTerminating?: boolean
 }
 
+function SourceProperties({ source }: { source: any }) {
+  if (!source) return null
+  return (
+    <>
+      <Property label="Repository" value={source.repoURL} />
+      {source.path && <Property label="Path" value={source.path} />}
+      {source.targetRevision && (
+        <Property
+          label="Target Revision"
+          value={
+            <span className="flex items-center gap-1">
+              <GitBranch className="w-3.5 h-3.5" />
+              {source.targetRevision}
+            </span>
+          }
+        />
+      )}
+      {source.chart && <Property label="Helm Chart" value={source.chart} />}
+      {source.helm?.valueFiles && source.helm.valueFiles.length > 0 && (
+        <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
+      )}
+      {source.helm?.parameters && source.helm.parameters.length > 0 && (
+        <Property
+          label="Helm Parameters"
+          value={
+            <div className="flex flex-wrap gap-1">
+              {source.helm.parameters.filter(Boolean).map((p: { name: string; value: string }, i: number) => (
+                <span key={i} className="badge-sm bg-theme-elevated text-theme-text-secondary font-mono">
+                  {p.name ?? '?'}={p.value ?? ''}
+                </span>
+              ))}
+            </div>
+          }
+        />
+      )}
+      {source.kustomize?.namePrefix && (
+        <Property label="Kustomize Prefix" value={source.kustomize.namePrefix} />
+      )}
+    </>
+  )
+}
+
+function isSyncResourceFailed(res: any): boolean {
+  return res.status === 'SyncFailed' || res.hookPhase === 'Failed' || res.hookPhase === 'Error'
+}
+
+function getSyncResourceBadgeClass(status: string, hookPhase?: string): string {
+  if (status === 'SyncFailed' || hookPhase === 'Failed' || hookPhase === 'Error') {
+    return 'status-unhealthy'
+  }
+  if (status === 'Synced') return 'status-healthy'
+  if (status === 'Pruned') return 'status-neutral'
+  if (status === 'PruneSkipped') return 'status-degraded'
+  return 'status-unknown'
+}
+
 export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: ArgoApplicationRendererProps) {
   const status = (data.status || {}) as ArgoAppStatus & {
     resources?: ArgoResource[]
@@ -47,8 +103,9 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
     problems.push({ color: 'yellow', message: 'Application is out of sync with git' })
   }
 
-  // Extract source info
-  const source = spec.source || {}
+  // Extract source info — support both spec.source (single) and spec.sources (multi, ArgoCD 2.6+)
+  const sources: any[] = (spec.sources && spec.sources.length > 0) ? spec.sources : (spec.source ? [spec.source] : [])
+  const isMultiSource = Array.isArray(spec.sources) && spec.sources.length > 0
   const destination = spec.destination || {}
   const syncPolicy = spec.syncPolicy || {}
   const operationState = status.operationState
@@ -56,6 +113,12 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
   // Check if sync is in progress
   const isSyncing = operationState?.phase === 'Running'
 
+  // Extract sync result resources for per-resource failure details
+  const syncResultResources: any[] = operationState?.syncResult?.resources || []
+  const failedSyncResources = syncResultResources.filter(isSyncResourceFailed)
+  const otherSyncResources = syncResultResources.filter((r: any) => !isSyncResourceFailed(r))
+  const sortedSyncResources = [...failedSyncResources, ...otherSyncResources]
+
   return (
     <>
       <ProblemAlerts problems={problems} />
@@ -90,31 +153,27 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
         </div>
       </Section>
 
-      {/* Source section */}
-      <Section title="Source" icon={FolderTree}>
-        <PropertyList>
-          <Property label="Repository" value={source.repoURL} />
-          {source.path && <Property label="Path" value={source.path} />}
-          {source.targetRevision && (
-            <Property
-              label="Target Revision"
-              value={
-                <span className="flex items-center gap-1">
-                  <GitBranch className="w-3.5 h-3.5" />
-                  {source.targetRevision}
-                </span>
-              }
-            />
-          )}
-          {source.chart && <Property label="Helm Chart" value={source.chart} />}
-          {source.helm?.valueFiles && source.helm.valueFiles.length > 0 && (
-            <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
-          )}
-          {source.kustomize?.namePrefix && (
-            <Property label="Kustomize Prefix" value={source.kustomize.namePrefix} />
-          )}
-        </PropertyList>
-      </Section>
+      {/* Source section — renders each source for multi-source apps */}
+      {isMultiSource ? (
+        <Section title={`Sources (${sources.length})`} icon={FolderTree}>
+          <div className="space-y-3">
+            {sources.map((src: any, idx: number) => (
+              <div key={idx} className="card-inner">
+                <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">Source {idx + 1}</div>
+                <PropertyList>
+                  <SourceProperties source={src} />
+                </PropertyList>
+              </div>
+            ))}
+          </div>
+        </Section>
+      ) : sources.length > 0 ? (
+        <Section title="Source" icon={FolderTree}>
+          <PropertyList>
+            <SourceProperties source={sources[0]} />
+          </PropertyList>
+        </Section>
+      ) : null}
 
       {/* Destination section */}
       <Section title="Destination" icon={Target}>
@@ -192,9 +251,22 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
             {operationState.message && (
               <Property label="Message" value={operationState.message} />
             )}
+            {operationState.startedAt && (
+              <Property label="Started" value={formatAge(operationState.startedAt)} />
+            )}
             {operationState.finishedAt && (
               <Property label="Finished" value={formatAge(operationState.finishedAt)} />
             )}
+            {operationState.retryCount != null && (
+              <Property
+                label="Retries"
+                value={
+                  syncPolicy.retry?.limit
+                    ? `${operationState.retryCount}/${syncPolicy.retry.limit}`
+                    : String(operationState.retryCount)
+                }
+              />
+            )}
             {operationState.syncResult?.revision && (
               <Property label="Revision" value={operationState.syncResult.revision} />
             )}
@@ -202,6 +274,55 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
         </Section>
       )}
 
+      {/* Sync Result Resources — per-resource sync status with failure details */}
+      {sortedSyncResources.length > 0 && (
+        <Section
+          title={`Sync Result Resources (${sortedSyncResources.length})`}
+          icon={ListChecks}
+          defaultExpanded={failedSyncResources.length > 0}
+        >
+          <div className="space-y-1.5">
+            {sortedSyncResources.map((res: any, idx: number) => {
+              const isFailed = isSyncResourceFailed(res)
+              return (
+                <div
+                  key={`${res.kind}-${res.namespace}-${res.name}-${idx}`}
+                  className={clsx(
+                    'card-inner px-3 py-2',
+                    isFailed && 'border-l-2 border-red-500'
+                  )}
+                >
+                  <div className="flex items-center gap-2 text-sm">
+                    <span className={clsx('badge badge-sm', getSyncResourceBadgeClass(res.status, res.hookPhase))}>
+                      {res.status || res.hookPhase || 'Unknown'}
+                    </span>
+                    <span className="text-theme-text-primary">
+                      {res.kind}/{res.name}
+                    </span>
+                    {res.namespace && (
+                      <span className="text-theme-text-tertiary text-xs">({res.namespace})</span>
+                    )}
+                  </div>
+                  {res.message && (
+                    <div className={clsx(
+                      'text-xs mt-1 break-all',
+                      isFailed ? 'text-red-400' : 'text-theme-text-secondary'
+                    )}>
+                      {res.message}
+                    </div>
+                  )}
+                  {res.hookPhase && res.hookPhase !== res.status && (
+                    <div className="text-xs text-theme-text-tertiary mt-0.5">
+                      Hook: {res.hookPhase}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
       {/* Managed Resources */}
       {managedResources.length > 0 && (
         <ManagedResourcesList
@@ -210,6 +331,47 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
         />
       )}
 
+      {/* Revision History */}
+      {status.history && status.history.length > 0 && (
+        <Section title={`Revision History (${status.history.length})`} icon={History} defaultExpanded={false}>
+          <div className="space-y-2 max-h-48 overflow-y-auto">
+            {status.history
+              .slice(0, 10)
+              .map((entry, idx) => (
+                <div
+                  key={entry.id ?? idx}
+                  className={clsx(
+                    'p-2 rounded text-sm',
+                    idx === 0
+                      ? 'bg-green-500/10 border border-green-500/30'
+                      : 'bg-theme-elevated/30'
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium text-theme-text-primary font-mono text-xs">
+                      {entry.revision
+                        ? entry.revision.length > 12
+                          ? entry.revision.slice(0, 12)
+                          : entry.revision
+                        : '-'}
+                    </span>
+                    {entry.deployedAt && (
+                      <span className="text-xs text-theme-text-tertiary">
+                        {formatAge(entry.deployedAt)}
+                      </span>
+                    )}
+                  </div>
+                  {entry.source?.path && (
+                    <div className="text-xs text-theme-text-secondary mt-0.5 truncate" title={entry.source.path}>
+                      {entry.source.path}
+                    </div>
+                  )}
+                </div>
+              ))}
+          </div>
+        </Section>
+      )}
+
       {/* Revision Info */}
       {(status.sync?.revision || status.reconciledAt) && (
         <Section title="Revision Info" defaultExpanded={false}>

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

@@ -25,6 +25,13 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
   const target = getCNPGBackupTarget(data)
   const clusterName = getCNPGBackupCluster(data)
 
+  // WAL range fields
+  const beginWal = data.status?.beginWal
+  const endWal = data.status?.endWal
+  const beginLSN = data.status?.beginLSN
+  const endLSN = data.status?.endLSN
+  const hasWalRange = beginWal || endWal || beginLSN || endLSN
+
   return (
     <>
       {/* Problem alerts */}
@@ -43,6 +50,9 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
           <Property label="Method" value={getCNPGBackupMethod(data)} />
           <Property label="Duration" value={getCNPGBackupDuration(data)} />
           <Property label="Backup Name" value={getCNPGBackupName(data)} />
+          {data.status?.instanceID?.podName && (
+            <Property label="Instance" value={data.status.instanceID.podName} />
+          )}
         </PropertyList>
         {data.status?.startedAt && (
           <div className="mt-2 pt-2 border-t border-theme-border">
@@ -76,6 +86,18 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
         </PropertyList>
       </Section>
 
+      {/* WAL Range */}
+      {hasWalRange && (
+        <Section title="WAL Range" defaultExpanded>
+          <PropertyList>
+            {beginWal && <Property label="Begin WAL" value={beginWal} />}
+            {endWal && <Property label="End WAL" value={endWal} />}
+            {beginLSN && <Property label="Begin LSN" value={beginLSN} />}
+            {endLSN && <Property label="End LSN" value={endLSN} />}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Target - for PITR backups */}
       {target !== '-' && (
         <Section title="Target" defaultExpanded>