Skip to content

Commit 553eae6

Browse files
michelroegl-brunnermichelroegl-brunner
committed
docs: add LXC Backups section to help modal
1 parent c2ca88f commit 553eae6

File tree

1 file changed

+141
-2
lines changed

1 file changed

+141
-2
lines changed

‎src/app/_components/HelpModal.tsx‎

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useState } from 'react';
44
import { Button } from './ui/button';
5-
import { HelpCircle, Server, Settings, RefreshCw, Clock, Package, HardDrive, FolderOpen, Search, Download, Lock, GitBranch } from 'lucide-react';
5+
import { HelpCircle, Server, Settings, RefreshCw, Clock, Package, HardDrive, FolderOpen, Search, Download, Lock, GitBranch, Archive } from 'lucide-react';
66
import { useRegisterModal } from './modal/ModalStackProvider';
77

88
interface HelpModalProps {
@@ -11,7 +11,7 @@ interface HelpModalProps {
1111
initialSection?: string;
1212
}
1313

14-
type HelpSection = 'server-settings' | 'general-settings' | 'auth-settings' | 'sync-button' | 'auto-sync' | 'available-scripts' | 'downloaded-scripts' | 'installed-scripts' | 'lxc-settings' | 'update-system' | 'repositories';
14+
type HelpSection = 'server-settings' | 'general-settings' | 'auth-settings' | 'sync-button' | 'auto-sync' | 'available-scripts' | 'downloaded-scripts' | 'installed-scripts' | 'lxc-settings' | 'update-system' | 'repositories' | 'backups';
1515

1616
export function HelpModal({ isOpen, onClose, initialSection = 'server-settings' }: HelpModalProps) {
1717
useRegisterModal(isOpen, { id: 'help-modal', allowEscape: true, onClose });
@@ -30,6 +30,7 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
3030
{ id: 'downloaded-scripts' as HelpSection, label: 'Downloaded Scripts', icon: HardDrive },
3131
{ id: 'installed-scripts' as HelpSection, label: 'Installed Scripts', icon: FolderOpen },
3232
{ id: 'lxc-settings' as HelpSection, label: 'LXC Settings', icon: Settings },
33+
{ id: 'backups' as HelpSection, label: 'LXC Backups', icon: Archive },
3334
{ id: 'update-system' as HelpSection, label: 'Update System', icon: Download },
3435
];
3536

@@ -925,6 +926,144 @@ export function HelpModal({ isOpen, onClose, initialSection = 'server-settings'
925926
</div>
926927
);
927928

929+
case 'backups':
930+
return (
931+
<div className="space-y-6">
932+
<div>
933+
<h3 className="text-xl font-semibold text-foreground mb-4">LXC Backups</h3>
934+
<p className="text-muted-foreground mb-6">
935+
Create backups of your LXC containers before updates or on-demand. Backups are created using Proxmox VE&apos;s built-in backup system and can be stored on any backup-capable storage.
936+
</p>
937+
</div>
938+
939+
<div className="space-y-4">
940+
<div className="p-4 border border-border rounded-lg bg-primary/10 border-primary/20">
941+
<h4 className="font-medium text-foreground mb-2">Overview</h4>
942+
<p className="text-sm text-muted-foreground mb-3">
943+
The backup feature allows you to create snapshots of your LXC containers before performing updates or at any time. Backups are created using the <code className="bg-muted px-1 rounded">vzdump</code> command via SSH and stored on your configured Proxmox storage.
944+
</p>
945+
<ul className="text-sm text-muted-foreground space-y-1">
946+
<li>• <strong>Pre-Update Backups:</strong> Automatically create backups before updating containers</li>
947+
<li>• <strong>Standalone Backups:</strong> Create backups on-demand from the Actions menu</li>
948+
<li>• <strong>Storage Selection:</strong> Choose from available backup-capable storages</li>
949+
<li>• <strong>Real-Time Progress:</strong> View backup progress in the terminal output</li>
950+
</ul>
951+
</div>
952+
953+
<div className="p-4 border border-border rounded-lg">
954+
<h4 className="font-medium text-foreground mb-2">Backup Before Update</h4>
955+
<p className="text-sm text-muted-foreground mb-3">
956+
When updating an LXC container, you can choose to create a backup first:
957+
</p>
958+
<ol className="text-sm text-muted-foreground space-y-2 list-decimal list-inside">
959+
<li>Click the &quot;Update&quot; button for an installed script</li>
960+
<li>Confirm that you want to update the container</li>
961+
<li>Choose whether to create a backup before updating</li>
962+
<li>If yes, select a backup-capable storage from the list</li>
963+
<li>The backup will be created, then the update will proceed automatically</li>
964+
</ol>
965+
<div className="mt-3 p-3 bg-info/10 rounded-md">
966+
<h5 className="font-medium text-info-foreground mb-2">Backup Failure Handling</h5>
967+
<p className="text-xs text-info/80">
968+
If a backup fails, you&apos;ll be warned but can still choose to proceed with the update. This ensures updates aren&apos;t blocked by backup issues.
969+
</p>
970+
</div>
971+
</div>
972+
973+
<div className="p-4 border border-border rounded-lg">
974+
<h4 className="font-medium text-foreground mb-2">Standalone Backup</h4>
975+
<p className="text-sm text-muted-foreground mb-3">
976+
Create a backup at any time without updating:
977+
</p>
978+
<ol className="text-sm text-muted-foreground space-y-2 list-decimal list-inside">
979+
<li>Open the Actions dropdown menu for an installed script</li>
980+
<li>Click &quot;Backup&quot;</li>
981+
<li>Select a backup-capable storage from the list</li>
982+
<li>Watch the backup progress in the terminal output</li>
983+
</ol>
984+
<p className="text-xs text-muted-foreground mt-2">
985+
<strong>Note:</strong> Standalone backups are only available for SSH-enabled scripts with valid container IDs.
986+
</p>
987+
</div>
988+
989+
<div className="p-4 border border-border rounded-lg">
990+
<h4 className="font-medium text-foreground mb-2">Storage Selection</h4>
991+
<p className="text-sm text-muted-foreground mb-3">
992+
The system automatically discovers backup-capable storages from your Proxmox servers:
993+
</p>
994+
<ul className="text-sm text-muted-foreground space-y-2">
995+
<li>• <strong>Automatic Discovery:</strong> Storages are fetched from <code className="bg-muted px-1 rounded">/etc/pve/storage.cfg</code> on each server</li>
996+
<li>• <strong>Backup-Capable Only:</strong> Only storages with &quot;backup&quot; in their content are shown</li>
997+
<li>• <strong>Cached Results:</strong> Storage lists are cached for 1 hour to improve performance</li>
998+
<li>• <strong>Manual Refresh:</strong> Use the &quot;Fetch Storages&quot; button to refresh the list if needed</li>
999+
</ul>
1000+
<div className="mt-3 p-3 bg-muted/30 rounded-md">
1001+
<h5 className="font-medium text-foreground mb-1">Storage Types</h5>
1002+
<ul className="text-xs text-muted-foreground space-y-1">
1003+
<li>• <strong>Local:</strong> Backups stored on the Proxmox host</li>
1004+
<li>• <strong>Storage:</strong> Network-attached storage (NFS, CIFS, etc.)</li>
1005+
<li>• <strong>PBS:</strong> Proxmox Backup Server storage</li>
1006+
</ul>
1007+
</div>
1008+
</div>
1009+
1010+
<div className="p-4 border border-border rounded-lg">
1011+
<h4 className="font-medium text-foreground mb-2">Viewing Available Storages</h4>
1012+
<p className="text-sm text-muted-foreground mb-3">
1013+
You can view all storages for a server, including which ones support backups:
1014+
</p>
1015+
<ol className="text-sm text-muted-foreground space-y-2 list-decimal list-inside">
1016+
<li>Go to the Server Settings section</li>
1017+
<li>Find the server you want to check</li>
1018+
<li>Click the &quot;View Storages&quot; button (database icon)</li>
1019+
<li>See all storages with backup-capable ones highlighted</li>
1020+
</ol>
1021+
<p className="text-xs text-muted-foreground mt-2">
1022+
This helps you identify which storages are available for backups before starting a backup operation.
1023+
</p>
1024+
</div>
1025+
1026+
<div className="p-4 border border-border rounded-lg">
1027+
<h4 className="font-medium text-foreground mb-2">Backup Process</h4>
1028+
<p className="text-sm text-muted-foreground mb-3">
1029+
When a backup is initiated, the following happens:
1030+
</p>
1031+
<ul className="text-sm text-muted-foreground space-y-2">
1032+
<li>• <strong>SSH Connection:</strong> Connects to the Proxmox server via SSH</li>
1033+
<li>• <strong>Command Execution:</strong> Runs <code className="bg-muted px-1 rounded">vzdump &lt;CTID&gt; --storage &lt;STORAGE&gt; --mode snapshot</code></li>
1034+
<li>• <strong>Real-Time Output:</strong> Backup progress is streamed to the terminal</li>
1035+
<li>• <strong>Completion:</strong> Backup completes and shows success/failure status</li>
1036+
<li>• <strong>Sequential Execution:</strong> If part of update flow, update proceeds after backup completes</li>
1037+
</ul>
1038+
</div>
1039+
1040+
<div className="p-4 border border-border rounded-lg bg-warning/10 border-warning/20">
1041+
<h4 className="font-medium text-warning-foreground mb-2">⚠️ Important Notes</h4>
1042+
<ul className="text-sm text-warning/80 space-y-2">
1043+
<li>• <strong>Storage Requirements:</strong> Ensure you have sufficient storage space for backups</li>
1044+
<li>• <strong>Backup Duration:</strong> Backup time depends on container size and storage speed</li>
1045+
<li>• <strong>Snapshot Mode:</strong> Backups use snapshot mode, which requires sufficient disk space</li>
1046+
<li>• <strong>SSH Access:</strong> Backups require valid SSH credentials configured for the server</li>
1047+
<li>• <strong>Container State:</strong> Containers can be running or stopped during backup</li>
1048+
</ul>
1049+
</div>
1050+
1051+
<div className="p-4 border border-border rounded-lg">
1052+
<h4 className="font-medium text-foreground mb-2">Backup Storage Cache</h4>
1053+
<p className="text-sm text-muted-foreground mb-3">
1054+
Storage information is cached to improve performance:
1055+
</p>
1056+
<ul className="text-sm text-muted-foreground space-y-1">
1057+
<li>• <strong>Cache Duration:</strong> Storage lists are cached for 1 hour</li>
1058+
<li>• <strong>Automatic Refresh:</strong> Cache expires and refreshes automatically</li>
1059+
<li>• <strong>Manual Refresh:</strong> Use &quot;Fetch Storages&quot; button to force refresh</li>
1060+
<li>• <strong>Per-Server Cache:</strong> Each server has its own cached storage list</li>
1061+
</ul>
1062+
</div>
1063+
</div>
1064+
</div>
1065+
);
1066+
9281067
default:
9291068
return null;
9301069
}

0 commit comments

Comments
 (0)