Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-06-28 04:06:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

update menu help and info

Browse Source
This commit is contained in:
MacRimi 2025-05-04 21:37:33 +02:00
parent 3859e34512
commit 2f2e6ba311
13 changed files with 2615 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
web/app/docs/help-info/backup-commands/page.tsx Normal file
View File

@ -0,0 +1,261 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Archive, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function BackupRestorePage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "VM Backup",
commands: [
{ command: "vzdump <vmid>", description: "Create a backup of a specific VM/CT" },
{ command: "vzdump <vmid> --storage <storage>", description: "Backup VM to specific storage" },
{ command: "vzdump <vmid> --mode snapshot", description: "Create snapshot backup (for VMs)" },
{ command: "vzdump <vmid> --mode suspend", description: "Suspend VM during backup" },
{ command: "vzdump <vmid> --mode stop", description: "Stop VM during backup" },
{ command: "vzdump --all", description: "Backup all VMs and containers" },
{ command: "vzdump --exclude <vmid1>,<vmid2>", description: "Backup all except specified VMs" },
],
},
{
title: "Backup Options",
commands: [
{ command: "vzdump <vmid> --compress zstd", description: "Use zstd compression for backup" },
{ command: "vzdump <vmid> --pigz <threads>", description: "Use pigz with multiple threads" },
{ command: "vzdump <vmid> --notes <text>", description: "Add notes to backup" },
{ command: "vzdump <vmid> --mailto <email>", description: "Send notification email" },
{ command: "vzdump <vmid> --maxfiles <n>", description: "Keep only n backups per VM" },
{ command: "vzdump <vmid> --stdexcludes 0", description: "Don't exclude temporary files" },
{ command: "vzdump <vmid> --quiet 1", description: "Suppress output messages" },
],
},
{
title: "Restore Backups",
commands: [
{ command: "qmrestore <backup-file> <vmid>", description: "Restore VM from backup" },
{ command: "qmrestore <backup-file> <vmid> --storage <storage>", description: "Restore to specific storage" },
{ command: "qmrestore <backup-file> <vmid> --unique", description: "Create a VM with unique ID" },
{ command: "pct restore <vmid> <backup-file>", description: "Restore container from backup" },
{
command: "pct restore <vmid> <backup-file> --storage <storage>",
description: "Restore container to specific storage",
},
{ command: "pct restore <vmid> <backup-file> --rootfs <storage>", description: "Restore to specific rootfs" },
{ command: "pct restore <vmid> <backup-file> --unprivileged 1", description: "Restore as unprivileged CT" },
],
},
{
title: "Backup Management",
commands: [
{ command: "ls -la /var/lib/vz/dump/", description: "List backups in default location" },
{ command: 'find /var/lib/vz/dump/ -name "*.vma*"', description: "Find VM backups" },
{ command: 'find /var/lib/vz/dump/ -name "*.tar*"', description: "Find container backups" },
{ command: "pvesm list <storage>", description: "List backups in specific storage" },
{ command: "rm /var/lib/vz/dump/<backup-file>", description: "Delete a backup file" },
{ command: "cat /etc/vzdump.conf", description: "Show backup configuration" },
],
},
{
title: "Scheduled Backups",
commands: [
{ command: "cat /etc/cron.d/vzdump", description: "Show backup schedule" },
{ command: "nano /etc/vzdump.conf", description: "Edit backup configuration" },
{ command: "systemctl list-timers", description: "List all scheduled tasks" },
{ command: "systemctl status cron", description: "Check cron service status" },
{ command: "grep vzdump /var/log/syslog", description: "Check backup logs in syslog" },
{ command: "tail -f /var/log/vzdump.log", description: "Monitor backup log in real-time" },
],
},
{
title: "Advanced Operations",
commands: [
{ command: "qmrestore <backup> <vmid> --force", description: "Force restore, overwriting existing VM" },
{ command: "vzdump <vmid> --dumpdir <directory>", description: "Specify custom backup directory" },
{ command: "vzdump <vmid> --script <script>", description: "Run hook script during backup" },
{ command: "vzdump <vmid> --exclude-path <path>", description: "Exclude specific paths from backup" },
{ command: "vzdump <vmid> --ionice <priority>", description: "Set I/O priority for backup process" },
{ command: "vzdump <vmid> --lockwait <minutes>", description: "Wait for lock" },
{ command: "qm importdisk <vmid> <backup> <storage>", description: "Import disk from backup" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Archive className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">Backup and Restore Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for backing up and restoring virtual machines and containers in Proxmox VE.
Learn how to create backups, restore from backups, manage backup storage, and schedule automated backups.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">Backup Best Practices</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;vmid&gt;</code> with your VM or
container ID
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;storage&gt;</code> with your
storage name
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;backup-file&gt;</code> with the
path to your backup file
</li>
<li>Schedule regular backups during off-peak hours to minimize impact on production workloads</li>
<li>Store backups on a separate storage device or location for better disaster recovery protection</li>
<li>Test your backups regularly by performing test restores to ensure they are working correctly</li>
<li>
Use <code className="bg-gray-100 px-1 py-0.5 rounded text-black">--maxfiles</code> to implement backup
rotation and prevent storage from filling up
</li>
<li>
Consider using <code className="bg-gray-100 px-1 py-0.5 rounded text-black">--compress zstd</code> for
better compression ratio and performance
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

254
web/app/docs/help-info/gpu-commands/page.tsx Normal file
View File

@ -0,0 +1,254 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Cpu, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function GPUPassthroughPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "Device Identification",
commands: [
{ command: "lspci -nn | grep -i nvidia", description: "List NVIDIA PCI devices" },
{ command: "lspci -nn | grep -i vga", description: "List all VGA compatible devices" },
{ command: "lspci -nn | grep -i amd", description: "List AMD PCI devices" },
{ command: "lspci -nnk | grep -A3 VGA", description: "List VGA devices with kernel drivers" },
{ command: "lspci -v -s <PCI_ID>", description: "Show detailed info for specific PCI device" },
],
},
{
title: "VFIO Configuration",
commands: [
{ command: "dmesg | grep -i vfio", description: "Check VFIO module messages" },
{ command: "cat /etc/modprobe.d/vfio.conf", description: "Review VFIO passthrough configuration" },
{ command: "ls -la /etc/modprobe.d/", description: "List all modprobe configuration files" },
{ command: "cat /etc/modules", description: "Show modules loaded at boot time" },
{ command: "lsmod | grep vfio", description: "Check if VFIO modules are loaded" },
],
},
{
title: "IOMMU Configuration",
commands: [
{ command: "cat /etc/default/grub", description: "Review GRUB options for IOMMU" },
{ command: "update-grub", description: "Apply GRUB changes" },
{ command: "dmesg | grep -i iommu", description: "Check IOMMU messages in kernel log" },
{ command: "dmesg | grep -e DMAR -e IOMMU", description: "Check DMAR and IOMMU messages" },
{ command: "find /sys/kernel/iommu_groups/ -type l | sort -V", description: "List IOMMU groups" },
],
},
{
title: "System Updates",
commands: [
{ command: "update-initramfs -u", description: "Apply initramfs changes (VFIO)" },
{ command: "update-initramfs -u -k all", description: "Update initramfs for all kernels" },
{ command: "cat /proc/cmdline", description: "Show current kernel boot parameters" },
],
},
{
title: "VM Configuration",
commands: [
{ command: "qm config <vmid> | grep hostpci", description: "Show PCI passthrough config for a VM" },
{
command: "qm set <vmid> -hostpci0 <PCI_ID>,pcie=1,x-vga=1",
description: "Add GPU passthrough to a VM",
},
{ command: "cat /etc/pve/qemu-server/<vmid>.conf", description: "View VM configuration file" },
{
command: "qm set <vmid> -machine q35",
description: "Set VM to use Q35 chipset (recommended for passthrough)",
},
{
command: "qm set <vmid> -bios ovmf",
description: "Set VM to use UEFI/OVMF (required for GPU passthrough)",
},
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Cpu className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">GPU Passthrough Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for configuring and managing GPU passthrough in Proxmox VE. Learn how to
identify GPU devices, configure VFIO and IOMMU, and set up VMs for GPU passthrough.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">GPU Passthrough Tips</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;PCI_ID&gt;</code> with your GPU's
PCI ID (e.g., 01:00.0)
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;vmid&gt;</code> with your VM's ID
</li>
<li>
For IOMMU to work, you need to enable it in BIOS/UEFI (look for settings like "VT-d", "AMD-Vi", or "IOMMU")
</li>
<li>
Common GRUB parameters for IOMMU:
<ul className="list-disc pl-5 mt-1">
<li>
For Intel: <code className="bg-gray-100 px-1 py-0.5 rounded text-black">intel_iommu=on</code>
</li>
<li>
For AMD: <code className="bg-gray-100 px-1 py-0.5 rounded text-black">amd_iommu=on</code>
</li>
<li>
Additional options:{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">
iommu=pt video=efifb:off video=vesa:off
</code>
</li>
</ul>
</li>
<li>
After making changes to GRUB or modprobe configurations, run{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">update-grub</code> and{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">update-initramfs -u</code>, then reboot
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

238
web/app/docs/help-info/network-commands/page.tsx Normal file
View File

@ -0,0 +1,238 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Network, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function NetworkCommandsPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "Network Information",
commands: [
{ command: "ip a", description: "Show network interfaces and IPs" },
{ command: "ip r", description: "Show routing table" },
{ command: "ip -s link", description: "Show traffic statistics per interface" },
{ command: "brctl show", description: "Show configured network bridges" },
{ command: "cat /etc/network/interfaces", description: "Show raw network configuration" },
],
},
{
title: "Network Testing",
commands: [
{ command: "ping <host>", description: "Check connectivity with another host" },
{ command: "traceroute <host>", description: "Trace route to a host" },
{ command: "mtr <host>", description: "Combine ping and traceroute in real-time" },
{ command: "dig <domain>", description: "DNS lookup for a domain" },
{ command: "nslookup <domain>", description: "Alternative DNS lookup" },
],
},
{
title: "Network Configuration",
commands: [
{ command: "ifreload -a", description: "Reload network configuration (ifupdown2)" },
{ command: "ethtool <iface>", description: "Show Ethernet device info" },
{ command: "resolvectl status", description: "Show DNS resolution status" },
{ command: "nmcli device show", description: "Show network device details (if NetworkManager is used)" },
{ command: "ip link set <iface> up", description: "Bring network interface up" },
{ command: "ip link set <iface> down", description: "Bring network interface down" },
],
},
{
title: "Network Monitoring",
commands: [
{ command: "ss -tuln", description: "Show listening ports (TCP/UDP)" },
{ command: "netstat -tuln", description: "Alternative to show listening ports" },
{ command: "lsof -i", description: "List open network files and connections" },
{ command: "tcpdump -i <iface>", description: "Capture packets on interface" },
{ command: "iftop -i <iface>", description: "Monitor bandwidth usage on interface" },
],
},
{
title: "Firewall Management",
commands: [
{ command: "iptables -L -n -v", description: "Show active firewall rules (iptables)" },
{ command: "nft list ruleset", description: "Show nftables rules" },
{ command: "pve-firewall status", description: "Check Proxmox firewall status" },
{ command: "pve-firewall compile", description: "Compile firewall rules for all nodes" },
{ command: "pve-firewall reload", description: "Reload Proxmox firewall rules" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Network className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">Network Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for configuring, monitoring, and troubleshooting network connections in Proxmox
VE. Learn how to view network interfaces, test connectivity, configure network settings, and manage firewall
rules.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">Usage Tips</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;host&gt;</code> with an IP address
or hostname
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;iface&gt;</code> with your network
interface name (e.g., eth0, vmbr0)
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;domain&gt;</code> with a domain
name for DNS lookups
</li>
<li>
Use <code className="bg-gray-100 px-1 py-0.5 rounded text-black">ip a</code> to find the names of your
network interfaces
</li>
<li>
For more detailed packet capture with tcpdump, add filters like{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">tcpdump -i eth0 port 80 -n</code> to capture
HTTP traffic
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

189
web/app/docs/help-info/page.tsx Normal file
View File

@ -0,0 +1,189 @@
import type React from "react"
import Link from "next/link"
import Image from "next/image"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
ArrowRight,
Terminal,
HardDrive,
Network,
Package,
Cpu,
Database,
Archive,
PenToolIcon as Tool,
BookOpenCheck,
Book,
} from "lucide-react"
interface ImageWithCaptionProps {
src: string
alt: string
caption: string
}
function ImageWithCaption({ src, alt, caption }: ImageWithCaptionProps) {
return (
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
<div className="w-full rounded-md overflow-hidden border border-gray-200">
<Image
src={src || "/placeholder.svg"}
alt={alt}
width={768}
height={0}
style={{ height: "auto" }}
className="object-contain w-full"
sizes="(max-width: 768px) 100vw, 768px"
/>
</div>
<span className="mt-2 text-sm text-gray-600">{caption}</span>
</div>
)
}
export default function HelpAndInfoPage() {
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-10">
<div className="flex items-center gap-3 mb-6">
<BookOpenCheck className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">Help and Info Menu</h1>
</div>
<div className="space-y-4 mt-6">
<p className="text-lg text-black">
ProxMenu provides an interactive command reference menu for Proxmox VE through a dialog-based interface.
Select one of the categories below to explore the available commands.
</p>
<p className="text-black">
Each category contains carefully selected commands with descriptions, making it easier to find exactly what
you need when you need it. This eliminates the need to remember complex command syntax or search through
documentation when performing administrative tasks.
</p>
</div>
</div>
<ImageWithCaption
src="https://macrimi.github.io/ProxMenux/help/help-info-menu.png"
alt="Help and Info Menu"
caption="Help and Info Menu"
/>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
<CommandCard
title="Useful System Commands"
description="Basic commands to manage and monitor the Proxmox system"
icon={<Terminal className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/system-commands"
/>
<CommandCard
title="VM and CT Management"
description="Commands to manage virtual machines and containers"
icon={<Cpu className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/vm-ct-commands"
/>
<CommandCard
title="Storage and Disks"
description="Commands to manage storage devices and partitions"
icon={<HardDrive className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/storage-commands"
/>
<CommandCard
title="Network Commands"
description="Commands to configure and monitor the network"
icon={<Network className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/network-commands"
/>
<CommandCard
title="Updates and Packages"
description="Commands to update the system and manage packages"
icon={<Package className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/update-commands"
/>
<CommandCard
title="GPU Passthrough"
description="Commands to configure and manage GPU passthrough"
icon={<Cpu className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/gpu-commands"
/>
<CommandCard
title="ZFS Management"
description="Commands to manage ZFS file systems"
icon={<Database className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/zfs-commands"
/>
<CommandCard
title="Backup and Restore"
description="Commands to perform and manage backups"
icon={<Archive className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/backup-commands"
/>
<CommandCard
title="System CLI Tools"
description="Useful command-line tools for administration"
icon={<Tool className="h-8 w-8 text-blue-500" />}
href="/docs/help-info/tools-commands"
/>
</div>
<div className="mt-16 mb-6">
<div className="flex items-center gap-3 mb-6">
<Book className="h-8 w-8 mr-2 text-blue-500" />
<h2 className="text-2xl font-bold text-black">ProxMenu Guides</h2>
</div>
<p className="text-lg mb-6 text-black">
Check out our guides section for additional resources, tutorials, and documentation to help you get the most
out of Proxmox VE and ProxMenu.
</p>
<div className="flex justify-center">
<Link
href="/guides"
className="inline-flex items-center px-6 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
>
View Guides <ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</div>
</div>
)
}
interface CommandCardProps {
title: string
description: string
icon: React.ReactNode
href: string
}
function CommandCard({ title, description, icon, href }: CommandCardProps) {
return (
<Card className="transition-all duration-300 hover:shadow-md hover:border-blue-300 bg-white text-black border-2 border-gray-200">
<CardHeader>
<div className="flex items-center gap-3">
{icon}
<CardTitle className="text-xl text-black">{title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<CardDescription className="text-base text-gray-600">{description}</CardDescription>
</CardContent>
<CardFooter>
<Link href={href} className="flex items-center text-blue-500 hover:text-blue-700 transition-colors">
View commands <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</CardFooter>
</Card>
)
}

226
web/app/docs/help-info/storage-commands/page.tsx Normal file
View File

@ -0,0 +1,226 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { HardDrive, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function StorageCommandsPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "Disk Information",
commands: [
{ command: "lsblk", description: "List block devices and partitions" },
{ command: "fdisk -l", description: "List disks with detailed info" },
{ command: "blkid", description: "Show UUID and filesystem type of block devices" },
{ command: "ls -lh /dev/disk/by-id/", description: "List disk persistent identifiers" },
{ command: "parted -l", description: "Detailed partition layout with GPT info" },
],
},
{
title: "Storage Usage",
commands: [
{ command: "df -h", description: "Show disk usage by mount point" },
{ command: "du -sh /path", description: "Show size of a directory" },
{ command: "mount | grep ^/dev", description: "Show mounted storage devices" },
{ command: "cat /proc/mounts", description: "Show all active mounts from the kernel" },
],
},
{
title: "LVM Management",
commands: [
{ command: "pvdisplay", description: "Display physical volumes (LVM)" },
{ command: "vgdisplay", description: "Display volume groups (LVM)" },
{ command: "lvdisplay", description: "Display logical volumes (LVM)" },
{ command: "pvs", description: "Concise output of physical volumes" },
{ command: "vgs", description: "Concise output of volume groups" },
{ command: "lvs", description: "Concise output of logical volumes" },
],
},
{
title: "Proxmox Storage",
commands: [
{ command: "cat /etc/pve/storage.cfg", description: "Show Proxmox storage configuration" },
{ command: "pvesm status", description: "Show status of all storage pools" },
{ command: "pvesm list", description: "List all available storage" },
{ command: "pvesm list <storage>", description: "List content of specific storage" },
{ command: "pvesm scan <storage>", description: "Scan storage for new content" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<HardDrive className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">Storage and Disks Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for managing and monitoring storage devices and disk partitions in Proxmox VE.
Learn how to list disks, check storage usage, manage LVM volumes, and configure Proxmox storage.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">Usage Tips</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Use <code className="bg-gray-100 px-1 py-0.5 rounded text-black">lsblk</code> for a quick overview of all
block devices
</li>
<li>
For detailed partition information,{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">fdisk -l</code> provides comprehensive output
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;storage&gt;</code> with your
storage name when using pvesm commands
</li>
<li>
LVM commands (pvs, vgs, lvs) provide more concise output than their display counterparts (pvdisplay,
vgdisplay, lvdisplay)
</li>
<li>
When using <code className="bg-gray-100 px-1 py-0.5 rounded text-black">du -sh /path</code>, replace{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">/path</code> with the directory you want to
check
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

200
web/app/docs/help-info/system-commands/page.tsx Normal file
View File

@ -0,0 +1,200 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Terminal, ArrowLeft, Copy, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function SystemCommandsPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "System Information",
commands: [
{ command: "pveversion", description: "Show Proxmox version" },
{ command: "pveversion -v", description: "Detailed Proxmox version info" },
{ command: "hostnamectl", description: "System hostname and kernel info" },
{ command: "uname -a", description: "Kernel and architecture info" },
{ command: "cat /etc/os-release", description: "OS release details" },
],
},
{
title: "System Status",
commands: [
{ command: "uptime", description: "System uptime" },
{ command: "uptime -p", description: "Pretty uptime format" },
{ command: "free -h", description: "RAM and swap usage" },
{ command: "who -b", description: "Last system boot time" },
{ command: "last -x | grep shutdown", description: "Previous shutdowns" },
],
},
{
title: "Service Management",
commands: [
{ command: "systemctl status pveproxy", description: "Check Proxmox Web UI status" },
{ command: "systemctl restart pveproxy", description: "Restart Web UI proxy" },
{ command: "journalctl -xe", description: "System errors and logs" },
{ command: "dmesg -T | tail -n 50", description: "Last 50 kernel log lines" },
],
},
{
title: "User Information",
commands: [
{ command: "whoami", description: "Current user" },
{ command: "id", description: "Current user UID, GID and groups" },
{ command: "who", description: "Logged-in users" },
{ command: "w", description: "User activity and uptime" },
{ command: "uptime && w", description: "Uptime and who is logged in" },
{ command: "cut -d: -f1,3,4 /etc/passwd", description: "All users with UID and GID" },
{ command: "getent passwd | column -t -s :", description: "Readable user table (UID, shell, etc.)" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Terminal className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">Useful System Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides a collection of essential system commands for managing and monitoring your Proxmox VE
system. Each command is accompanied by a brief description of its function.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

299
web/app/docs/help-info/tools-commands/page.tsx Normal file
View File

@ -0,0 +1,299 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { PenToolIcon as Tool, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function SystemCLIToolsPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "System Monitoring",
commands: [
{ command: "htop", description: "Interactive process viewer with CPU/memory usage" },
{ command: "top", description: "Display Linux processes in real-time" },
{ command: "atop", description: "Advanced system & process monitor" },
{ command: "glances", description: "System monitoring tool with web interface" },
{ command: "nmon", description: "Performance monitoring tool" },
{ command: "iotop", description: "Monitor disk I/O usage by processes" },
{ command: "vmstat 1", description: "Report virtual memory statistics every second" },
],
},
{
title: "Network Tools",
commands: [
{ command: "iftop", description: "Display bandwidth usage on an interface" },
{ command: "nmap <host>", description: "Network exploration and security scanning" },
{ command: "tcpdump -i <interface>", description: "Dump network traffic" },
{ command: "netstat -tuln", description: "Display network connections" },
{ command: "ss -tuln", description: "Another utility to investigate sockets" },
{ command: "mtr <host>", description: "Network diagnostic tool combining ping and traceroute" },
{ command: "iperf3 -s", description: "Run iperf server for bandwidth testing" },
],
},
{
title: "File and Text Tools",
commands: [
{ command: "find / -name <filename>", description: "Find files by name" },
{ command: "grep -r 'pattern' /path", description: "Search for pattern in files" },
{ command: "sed -i 's/old/new/g' file", description: "Replace text in files" },
{ command: "awk '{print $1}' file", description: "Text processing tool" },
{ command: "tail -f /var/log/syslog", description: "Follow log file in real-time" },
{ command: "less /var/log/messages", description: "View file with pagination" },
{ command: "journalctl -f", description: "Follow systemd journal logs" },
],
},
{
title: "Performance Analysis",
commands: [
{ command: "iostat -x 1", description: "Report CPU and I/O statistics" },
{ command: "mpstat -P ALL 1", description: "Report CPU utilization" },
{ command: "perf top", description: "System profiling tool" },
{ command: "strace <command>", description: "Trace system calls and signals" },
{ command: "lsof", description: "List open files" },
{ command: "pstree", description: "Display process tree" },
{ command: "slabtop", description: "Display kernel slab cache information" },
],
},
{
title: "Security Tools",
commands: [
{ command: "fail2ban-client status", description: "Show fail2ban status" },
{ command: "chage -l <username>", description: "Show password expiry information" },
{ command: "lastlog", description: "Show last login of all users" },
{ command: "last", description: "Show listing of last logged in users" },
{ command: "w", description: "Show who is logged on and what they are doing" },
{ command: "lynis audit system", description: "Security auditing tool" },
{ command: "openssl s_client -connect host:port", description: "Test SSL/TLS connections" },
],
},
{
title: "Remote Administration",
commands: [
{ command: "ssh <user>@<host>", description: "Secure shell connection" },
{ command: "scp <file> <user>@<host>:<path>", description: "Secure copy files" },
{ command: "rsync -avz <src> <dest>", description: "Synchronize files/folders" },
{ command: "screen", description: "Terminal multiplexer" },
{ command: "tmux", description: "Terminal multiplexer alternative" },
{ command: "ssh-keygen -t rsa -b 4096", description: "Generate SSH key pair" },
{ command: "ssh-copy-id <user>@<host>", description: "Copy SSH key to server" },
],
},
{
title: "System Configuration",
commands: [
{ command: "systemctl status <service>", description: "Check service status" },
{ command: "journalctl -u <service>", description: "View service logs" },
{ command: "timedatectl", description: "Control system time and date" },
{ command: "hostnamectl", description: "Control system hostname" },
{ command: "localectl", description: "Control system locale and keyboard" },
{ command: "update-alternatives --config <name>", description: "Configure system alternatives" },
{ command: "dpkg-reconfigure <package>", description: "Reconfigure an installed package" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Tool className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">System CLI Tools</h1>
</div>
<div className="space-y-4 mb-6">
<p className="text-lg">
This section provides a collection of useful command-line tools for system administration in Proxmox VE.
These tools help you monitor system performance, troubleshoot issues, manage files, analyze network traffic,
and perform various administrative tasks.
</p>
<div className="p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<p className="text-gray-700">
Many of these tools may have been installed during the post-installation process. For information about
the post-installation setup and basic settings, please refer to the{" "}
<a
href="https://macrimi.github.io/ProxMenux/docs/post-install/basic-settings"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:text-blue-800 underline"
>
Post-Installation Documentation
</a>
.
</p>
</div>
</div>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">CLI Tool Tips</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;host&gt;</code> with a hostname or
IP address
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;interface&gt;</code> with your
network interface (e.g., eth0)
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;filename&gt;</code>,{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;service&gt;</code>, etc. with appropriate
values
</li>
<li>
Many tools have additional options. Use{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">man &lt;command&gt;</code> or{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;command&gt; --help</code> to see all
available options
</li>
<li>
<strong>Installation:</strong> If a tool is not available, you can install it using{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">apt install &lt;package&gt;</code>. Most of
these tools may have been installed during the post-installation process.
</li>
<li>
For tools that continuously update (like top, htop), press <kbd>q</kbd> to quit
</li>
<li>
For screen and tmux sessions, use <kbd>Ctrl</kbd>+<kbd>a</kbd> or <kbd>Ctrl</kbd>+<kbd>b</kbd> as the prefix
key followed by other commands
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

235
web/app/docs/help-info/update-commands/page.tsx Normal file
View File

@ -0,0 +1,235 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Package, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function UpdateCommandsPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "System Updates",
commands: [
{ command: "apt update && apt upgrade -y", description: "Update and upgrade all system packages" },
{ command: "apt dist-upgrade -y", description: "Full system upgrade, including dependencies" },
{ command: "apt update", description: "Update package lists only" },
{ command: "apt upgrade", description: "Upgrade packages only (interactive)" },
{ command: "apt full-upgrade", description: "Upgrade packages with dependency handling (interactive)" },
],
},
{
title: "Proxmox Updates",
commands: [
{ command: "pveupdate", description: "Update Proxmox package lists" },
{ command: "pveupgrade", description: "Show available Proxmox upgrades" },
{ command: "pve-upgrade", description: "Perform Proxmox VE upgrade" },
{ command: "pveceph upgrade", description: "Upgrade Ceph packages (if Ceph is installed)" },
],
},
{
title: "Package Management",
commands: [
{ command: "apt autoremove --purge", description: "Remove unused packages and their config" },
{ command: "apt clean", description: "Clear out the local repository of retrieved package files" },
{ command: "apt autoclean", description: "Clear out only outdated package files" },
{ command: "apt install <package>", description: "Install a specific package" },
{ command: "apt remove <package>", description: "Remove a package" },
{ command: "apt purge <package>", description: "Remove a package and its configuration files" },
],
},
{
title: "Package Information",
commands: [
{ command: "apt list --installed", description: "List all installed packages" },
{ command: "apt search <keyword>", description: "Search for packages by keyword" },
{ command: "apt show <package>", description: "Show detailed information about a package" },
{ command: "dpkg -l", description: "List all installed packages (alternative)" },
{ command: "dpkg -l | grep <keyword>", description: "Search installed packages by keyword" },
{ command: "apt-cache policy <package>", description: "Show package versions and priorities" },
],
},
{
title: "Repository Management",
commands: [
{ command: "cat /etc/apt/sources.list", description: "Show main APT repository sources" },
{ command: "ls -la /etc/apt/sources.list.d/", description: "List additional repository source files" },
{
command: "cat /etc/apt/sources.list.d/pve-enterprise.list",
description: "Show Proxmox Enterprise repo config",
},
{ command: "apt-key list", description: "List repository signing keys" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Package className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">Updates and Packages Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for managing system updates and packages in Proxmox VE. Learn how to update
your system, install and remove packages, search for software, and manage repositories.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">Update Best Practices</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Always run <code className="bg-gray-100 px-1 py-0.5 rounded text-black">apt update</code> before installing
or upgrading packages
</li>
<li>Consider creating a VM snapshot or backup before performing major system upgrades</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;package&gt;</code> with the actual
package name
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;keyword&gt;</code> with your search
term
</li>
<li>
Use <code className="bg-gray-100 px-1 py-0.5 rounded text-black">apt autoremove --purge</code> periodically
to clean up unused packages and free disk space
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

235
web/app/docs/help-info/vm-ct-commands/page.tsx Normal file
View File

@ -0,0 +1,235 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Cpu, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function VMCTCommandsPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "Listing and Information",
commands: [
{ command: "qm list", description: "List all virtual machines" },
{ command: "pct list", description: "List all LXC containers" },
{ command: "qm config <vmid>", description: "Show VM configuration. Use the correct <vmid>" },
{ command: "pct config <ctid>", description: "Show container configuration. Use the correct <ctid>" },
],
},
{
title: "VM Management",
commands: [
{ command: "qm start <vmid>", description: "Start a virtual machine. Use the correct <vmid>" },
{ command: "qm stop <vmid>", description: "Force stop a virtual machine. Use the correct <vmid>" },
{ command: "qm shutdown <vmid>", description: "Gracefully shutdown a virtual machine" },
{ command: "qm reset <vmid>", description: "Reset a virtual machine (hard reboot)" },
{ command: "qm suspend <vmid>", description: "Suspend a virtual machine" },
{ command: "qm resume <vmid>", description: "Resume a suspended virtual machine" },
{ command: "qm destroy <vmid>", description: "Delete a VM (irreversible). Use the correct <vmid>" },
],
},
{
title: "Container Management",
commands: [
{ command: "pct start <ctid>", description: "Start a container. Use the correct <ctid>" },
{ command: "pct stop <ctid>", description: "Force stop a container. Use the correct <ctid>" },
{ command: "pct shutdown <ctid>", description: "Gracefully shutdown a container" },
{ command: "pct restart <ctid>", description: "Restart a container" },
{ command: "pct destroy <ctid>", description: "Delete a CT (irreversible). Use the correct <ctid>" },
],
},
{
title: "Container Operations",
commands: [
{
command: "pct exec <ctid> -- getent passwd | column -t -s :",
description: "Show CT users in table format",
},
{
command: "pct exec <ctid> -- ps aux --sort=-%mem | head",
description: "Top memory processes in CT",
},
{
command: "pct enter <ctid>",
description: "Enter container shell",
},
{
command: "pct push <ctid> <source> <dest>",
description: "Copy file from host to container",
},
{
command: "pct pull <ctid> <source> <dest>",
description: "Copy file from container to host",
},
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Cpu className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">VM and CT Management Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for managing virtual machines (VMs) and containers (CTs) in Proxmox VE. Learn
how to list, start, stop, configure, and perform other operations on your virtualized environments.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">Usage Notes</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;vmid&gt;</code> with the ID of your
virtual machine
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;ctid&gt;</code> with the ID of your
container
</li>
<li>
Use <code className="bg-gray-100 px-1 py-0.5 rounded text-black">qm list</code> or{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">pct list</code> to find the IDs of your VMs and
containers
</li>
<li>Be careful with destroy commands as they permanently delete the VM or container</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

268
web/app/docs/help-info/zfs-commands/page.tsx Normal file
View File

@ -0,0 +1,268 @@
"use client"
import React, { useState } from "react"
import Link from "next/link"
import { Database, ArrowLeft, Copy, Check, Terminal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
export default function ZFSManagementPage() {
const [viewMode, setViewMode] = useState<"table" | "accordion">("table")
// Group commands by category for better organization
const commandGroups = [
{
title: "Pool Information",
commands: [
{ command: "zpool list", description: "List all ZFS pools" },
{ command: "zpool status", description: "Show detailed pool status and health" },
{ command: "zpool status -v", description: "Show verbose pool status with errors" },
{ command: "zpool history", description: "Show command history for all pools" },
{ command: "zpool history <pool>", description: "Show command history for specific pool" },
{ command: "zpool get all <pool>", description: "Show all properties of a pool" },
],
},
{
title: "Dataset Management",
commands: [
{ command: "zfs list", description: "List all ZFS datasets" },
{ command: "zfs list -r <pool>", description: "List all datasets in a pool recursively" },
{ command: "zfs create <pool>/<dataset>", description: "Create a new dataset" },
{ command: "zfs destroy <pool>/<dataset>", description: "Destroy a dataset" },
{ command: "zfs rename <pool>/<dataset> <pool>/<new-name>", description: "Rename a dataset" },
{ command: "zfs get all <pool>/<dataset>", description: "Show all properties of a dataset" },
{ command: "zfs set compression=on <pool>/<dataset>", description: "Enable compression on a dataset" },
],
},
{
title: "Snapshot Management",
commands: [
{ command: "zfs list -t snapshot", description: "List all snapshots" },
{ command: "zfs list -t snapshot -r <pool>", description: "List all snapshots in a pool" },
{ command: "zfs snapshot <pool>/<dataset>@<snapshot-name>", description: "Create a snapshot" },
{ command: "zfs destroy <pool>/<dataset>@<snapshot-name>", description: "Delete a snapshot" },
{ command: "zfs rollback <pool>/<dataset>@<snapshot-name>", description: "Rollback to a snapshot" },
{ command: "zfs hold <tag> <pool>/<dataset>@<snapshot-name>", description: "Place a hold on a snapshot" },
{ command: "zfs release <tag> <pool>/<dataset>@<snapshot-name>", description: "Release a hold on a snapshot" },
],
},
{
title: "Clone and Send/Receive",
commands: [
{
command: "zfs clone <pool>/<dataset>@<snapshot> <pool>/<clone-name>",
description: "Create a clone from a snapshot",
},
{ command: "zfs send <pool>/<dataset>@<snapshot> > backup.zfs", description: "Send a snapshot to a file" },
{ command: "zfs receive <pool>/<dataset> < backup.zfs", description: "Receive a snapshot from a file" },
{
command: "zfs send -i <pool>/<dataset>@<snap1> <pool>/<dataset>@<snap2> > incr.zfs",
description: "Send incremental snapshot",
},
{
command: "zfs send -R <pool>/<dataset>@<snapshot> > full-recursive.zfs",
description: "Send recursive snapshot",
},
],
},
{
title: "Maintenance and Repair",
commands: [
{ command: "zpool scrub <pool>", description: "Start a scrub operation on a pool" },
{ command: "zpool scrub -s <pool>", description: "Stop a running scrub" },
{ command: "zpool clear <pool>", description: "Clear error counts in a pool" },
{ command: "zpool clear <pool> <device>", description: "Clear errors on a specific device" },
{ command: "zpool replace <pool> <old-device> <new-device>", description: "Replace a failed device" },
{ command: "zpool offline <pool> <device>", description: "Take a device offline" },
{ command: "zpool online <pool> <device>", description: "Bring a device online" },
],
},
{
title: "Performance and Monitoring",
commands: [
{ command: "zpool iostat", description: "Show I/O statistics for pools" },
{ command: "zpool iostat -v", description: "Show detailed I/O statistics" },
{ command: "zpool iostat 5", description: "Show I/O statistics every 5 seconds" },
{ command: "arc_summary", description: "Show ARC statistics (if installed)" },
{ command: "zfs get compressratio <pool>/<dataset>", description: "Show compression ratio" },
{ command: "zfs get used,available,referenced <pool>/<dataset>", description: "Show space usage" },
],
},
]
return (
<div className="container mx-auto py-10 px-4 bg-white text-black">
<div className="mb-6">
<Link
href="/docs/help-info"
className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6"
>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Help and Info
</Link>
<div className="flex items-center gap-3 mb-4">
<Database className="h-8 w-8 mr-2 text-blue-500" />
<h1 className="text-3xl font-bold text-black">ZFS Management Commands</h1>
</div>
<p className="text-lg mb-6">
This section provides commands for managing ZFS file systems in Proxmox VE. Learn how to create and manage
pools, datasets, snapshots, and perform maintenance operations on your ZFS storage.
</p>
<div className="flex gap-2 mb-6">
<Button
variant={viewMode === "table" ? "default" : "outline"}
onClick={() => setViewMode("table")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Table View
</Button>
<Button
variant={viewMode === "accordion" ? "default" : "outline"}
onClick={() => setViewMode("accordion")}
className="bg-blue-500 hover:bg-blue-600 text-white"
>
Accordion View
</Button>
</div>
</div>
{viewMode === "table" ? (
<div className="space-y-8">
{commandGroups.map((group, index) => (
<div key={index} className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-black">{group.title}</h2>
<div className="border-2 border-gray-200 rounded-md overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/3 bg-gray-100 text-black font-bold">Command</TableHead>
<TableHead className="w-1/2 bg-gray-100 text-black font-bold">Description</TableHead>
<TableHead className="w-1/6 bg-gray-100 text-black font-bold">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{group.commands.map((cmd, cmdIndex) => (
<TableRow key={cmdIndex} className="border-t border-gray-200">
<TableCell className="font-mono text-black bg-white">{cmd.command}</TableCell>
<TableCell className="text-gray-700 bg-white">{cmd.description}</TableCell>
<TableCell className="bg-white">
<CopyButton text={cmd.command} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
))}
</div>
) : (
<div className="space-y-6">
{commandGroups.map((group, index) => (
<div key={index} className="mb-6">
<h2 className="text-xl font-semibold mb-3 text-black">{group.title}</h2>
<Accordion type="single" collapsible className="border-2 border-gray-200 rounded-md overflow-hidden">
{group.commands.map((cmd, cmdIndex) => (
<AccordionItem
key={cmdIndex}
value={`item-${index}-${cmdIndex}`}
className="border-b border-gray-200"
>
<AccordionTrigger className="px-4 py-3 hover:bg-gray-50 text-black">
<div className="flex items-center">
<Terminal className="h-4 w-4 mr-2 text-blue-500" />
<span className="font-mono">{cmd.command}</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-4 py-3 bg-gray-50">
<div className="space-y-3">
<div className="p-3 bg-white border border-gray-200 rounded-md">
<pre className="font-mono text-black whitespace-pre-wrap select-text">{cmd.command}</pre>
</div>
<div className="flex justify-between items-center">
<p className="text-gray-700">{cmd.description}</p>
<CopyButton text={cmd.command} />
</div>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
)}
<div className="mt-10 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-md">
<h3 className="text-lg font-semibold mb-2 text-black">ZFS Best Practices</h3>
<ul className="list-disc pl-5 space-y-2 text-gray-700">
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;pool&gt;</code> with your ZFS pool
name
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;dataset&gt;</code> with your
dataset name
</li>
<li>
Replace <code className="bg-gray-100 px-1 py-0.5 rounded text-black">&lt;snapshot-name&gt;</code> with a
descriptive name, often including a timestamp (e.g., daily-2023-05-01)
</li>
<li>Run regular scrubs to maintain data integrity (weekly or monthly)</li>
<li>
Keep at least 10-15% of pool space free for optimal performance (ZFS performance degrades significantly when
pools are over 80% full)
</li>
<li>
Use meaningful snapshot names and consider implementing an automated snapshot rotation policy for important
datasets
</li>
<li>
When replacing devices, always use{" "}
<code className="bg-gray-100 px-1 py-0.5 rounded text-black">zpool replace</code> rather than removing and
adding to preserve data redundancy
</li>
</ul>
</div>
</div>
)
}
interface CopyButtonProps {
text: string
}
function CopyButton({ text }: CopyButtonProps) {
const [copied, setCopied] = React.useState(false)
const copyToClipboard = () => {
navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
className="flex items-center gap-1 h-8 bg-white text-blue-500 border-blue-200 hover:bg-blue-50 hover:text-blue-600"
>
{copied ? (
<>
<Check className="h-4 w-4" />
<span>Copied</span>
</>
) : (
<>
<Copy className="h-4 w-4" />
<span>Copy</span>
</>
)}
</Button>
)
}

181
web/app/guides/linux-resources/page.tsx Normal file
View File

@ -0,0 +1,181 @@
import Link from "next/link"
import { BookOpen, ExternalLink, Shield, Activity, Database, FileCode, ArrowLeft } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Footer2 from "@/components/footer2"
export default function LinuxResourcesPage() {
const resourceCategories = [
{
title: "Linux General",
icon: <BookOpen className="h-6 w-6 text-blue-500" />,
resources: [
{
title: "TLDR Pages",
url: "https://tldr.sh/",
description:
"Terminal commands explained briefly with practical examples. Ideal for quickly remembering how to use tar, find, rsync, etc.",
},
{
title: "Explainshell",
url: "https://explainshell.com/",
description:
"Enter a command and this site breaks it down explaining each part. Very useful for learning complex commands.",
},
{
title: "Cheat.sh",
url: "https://cheat.sh/",
description:
"Online service to quickly search commands from browser or terminal (curl cheat.sh/tar). Very powerful and practical.",
},
],
},
{
title: "Security and Administration",
icon: <Shield className="h-6 w-6 text-blue-500" />,
resources: [
{
title: "SSH Hardening Guide",
url: "https://www.ssh.com/academy/ssh/security",
description:
"Advanced guide to secure SSH access. Covers ciphers, versions, authentication, and other recommended practices.",
},
{
title: "Fail2ban Wiki (GitHub)",
url: "https://github.com/fail2ban/fail2ban/wiki",
description: "Official documentation and usage examples for Fail2ban, an essential tool for servers.",
},
],
},
{
title: "Monitoring and Diagnostics",
icon: <Activity className="h-6 w-6 text-blue-500" />,
resources: [
{
title: "nmon Performance Monitor",
url: "http://nmon.sourceforge.net/pmwiki.php",
description: "Advanced system monitoring tool, with documentation on its usage.",
},
{
title: "htop Official",
url: "https://htop.dev/",
description: "Official page of htop, one of the most used tools for viewing processes and resource usage.",
},
],
},
{
title: "ZFS and Storage",
icon: <Database className="h-6 w-6 text-blue-500" />,
resources: [
{
title: "OpenZFS Documentation",
url: "https://openzfs.github.io/openzfs-docs/",
description:
"Official and modern guide on ZFS, ideal for administrators using Proxmox with this file system.",
},
{
title: "ZFS Cheatsheet (DigitalOcean)",
url: "https://www.digitalocean.com/community/tutorials/how-to-use-zfs-on-ubuntu-20-04",
description: "Clear and simple explanation of basic ZFS usage in Linux.",
},
],
},
{
title: "Extra: General Cheatsheets",
icon: <FileCode className="h-6 w-6 text-blue-500" />,
resources: [
{
title: "OverAPI.com",
url: "https://overapi.com/linux",
description: "Collection of interactive cheatsheets on multiple technologies, including Linux commands.",
},
{
title: "DevHints.io Linux",
url: "https://devhints.io/bash",
description:
"Bash shortcuts and basic scripting, useful for automating tasks in Proxmox and other environments.",
},
],
},
]
return (
<div className="min-h-screen bg-white text-gray-900">
<div className="container mx-auto px-4 py-16" style={{ maxWidth: "980px" }}>
<div className="mb-8">
<Link href="/guides" className="flex items-center text-blue-500 hover:text-blue-700 transition-colors mb-6">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Guides
</Link>
<h1 className="text-4xl font-bold mb-4 text-black">Linux Resources</h1>
<p className="text-lg mb-8 text-gray-700">
A collection of useful resources for learning Linux commands, security practices, monitoring tools, and
more. These resources complement the commands available in ProxMenu and will help you deepen your knowledge
of Linux system administration.
</p>
</div>
<div className="space-y-10 mb-16">
{resourceCategories.map((category, index) => (
<div key={index} className="mb-8">
<div className="flex items-center gap-3 mb-4">
{category.icon}
<h2 className="text-2xl font-bold text-black">{category.title}</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{category.resources.map((resource, resourceIndex) => (
<ResourceCard key={resourceIndex} resource={resource} />
))}
</div>
</div>
))}
</div>
</div>
<Footer2 />
</div>
)
}
interface ResourceProps {
resource: {
title: string
url: string
description: string
}
}
function ResourceCard({ resource }: ResourceProps) {
return (
<Card className="transition-all duration-300 hover:shadow-md hover:border-blue-300 bg-white text-black border-2 border-gray-200">
<CardHeader className="pb-2">
<CardTitle className="text-xl text-black flex items-center justify-between">
{resource.title}
<a
href={resource.url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-700"
aria-label={`Visit ${resource.title} (opens in a new window)`}
>
<ExternalLink className="h-5 w-5" />
</a>
</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="text-base text-gray-600">{resource.description}</CardDescription>
<div className="mt-4">
<a
href={resource.url}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-blue-500 hover:text-blue-700 flex items-center"
>
Visit resource <ExternalLink className="ml-1 h-3 w-3" />
</a>
</div>
</CardContent>
</Card>
)
}

14
web/app/guides/page.tsx
View File

@ -110,6 +110,20 @@ export default function GuidesPage() {
Proxmox VE Helper-Scripts is a set of tools for simplifying the installation of applications and the management of Proxmox VE, maintained by the community. Proxmox VE Helper-Scripts is a set of tools for simplifying the installation of applications and the management of Proxmox VE, maintained by the community.
</p> </p>
</a> </a>
<Link
href="/guides/linux-resources"
className="block p-6 bg-teal-600 rounded-lg shadow-md hover:bg-teal-700 transition-colors"
>
<div className="flex items-center gap-3 mb-2">
<BookOpen className="h-6 w-6 text-white" />
<h2 className="text-2xl font-semibold text-white">Linux Resources</h2>
</div>
<p className="text-gray-200">
A collection of useful resources for learning Linux commands, security practices, monitoring tools, and
more.
</p>
</Link>
</div> </div>
{/* PBS Documentation */} {/* PBS Documentation */}

15
web/components/DocSidebar.tsx
View File

@ -35,6 +35,21 @@ export const sidebarItems: MenuItem[] = [
{ title: "Optional", href: "/docs/post-install/optional" }, { title: "Optional", href: "/docs/post-install/optional" },
], ],
}, },
{
title: "Help and Info",
submenu: [
{ title: "Overview", href: "/docs/help-info" },
{ title: "Useful System Commands", href: "/docs/help-info/system-commands" },
{ title: "VM and CT Management", href: "/docs/help-info/vm-ct-commands" },
{ title: "Storage and Disks", href: "/docs/help-info/storage-commands" },
{ title: "Network Commands", href: "/docs/help-info/network-commands" },
{ title: "Updates and Packages", href: "/docs/help-info/update-commands" },
{ title: "GPU Passthrough", href: "/docs/help-info/gpu-commands" },
{ title: "ZFS Management", href: "/docs/help-info/zfs-commands" },
{ title: "Backup and Restore", href: "/docs/help-info/backup-commands" },
{ title: "System CLI Tools", href: "/docs/help-info/tools-commands" },
],
},
{ {
title: "GPUs and Coral", title: "GPUs and Coral",
submenu: [ submenu: [