Joseph.Rawlings
16cd5f05de
- Updated serverplaceholder.blade.php to enhance loading skeletons for server details. - Added navigation breadcrumbs to statistics, subdomain, and system views for better user experience. - Improved loading indicators for CPU, network, memory, and disk charts in statistics.blade.php. - Refined storage.blade.php layout with section dividers and improved drive display, including bus type indicators and quota usage. - Enhanced VNC and Xterm popups with a new header design, loading animations, and reconnect functionality. - Added error handling for VNC and Xterm connections to inform users when unable to connect.
578 lines
42 KiB
PHP
578 lines
42 KiB
PHP
<x-proxmox::layout :server="$server" view="system" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<div class="space-y-6">
|
|
<div class="flex items-center gap-1.5 text-xs text-base/50 mb-2">
|
|
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate class="hover:text-primary transition-colors">Overview</a>
|
|
<x-ri-arrow-right-s-line class="size-3" />
|
|
<span class="text-base/70">System</span>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h2 class="text-xl font-semibold break-words">System Configuration</h2>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-settings-3-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
System Configuration
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Configure low-level system settings including firmware type, CPU model, machine type, and virtualization features. These settings affect how the virtual machine hardware is presented to the guest operating system.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Firmware & Machine:</span> Select the chipset architecture (Q35 or i440fx) and firmware type (SeaBIOS or OVMF/UEFI).
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">CPU & Virtualization:</span> Configure the CPU model and enable/disable hardware virtualization features like KVM.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
Changes to these settings typically require a VM restart to take effect.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60">Manage firmware, CPU, SMBIOS, and trusted module devices exposed to this VPS.</p>
|
|
</div>
|
|
|
|
<div class="grid gap-6 xl:grid-cols-2">
|
|
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h3 class="text-lg font-semibold break-words">Firmware & Machine</h3>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-cpu-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
Firmware & Machine
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Configure the virtual machine's chipset architecture and firmware type. These settings determine the hardware interface presented to the guest operating system.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Machine Type:</span> Q35 offers PCIe and UEFI-friendly layout, while i440fx mirrors legacy Intel chipsets for maximum compatibility.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">BIOS/Firmware:</span> SeaBIOS for legacy installs, OVMF for UEFI-capable operating systems. UEFI is required for secure boot and modern Windows installations.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">ACPI:</span> Required for power management and graceful shutdown in most modern operating systems.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60 mt-1">Select the chipset, firmware, and power-management features available to the guest.</p>
|
|
</div>
|
|
@if($this->firmwareMachineSynced)
|
|
<span class="text-xs font-semibold text-success">Synced</span>
|
|
@else
|
|
<span class="text-xs font-semibold text-warning">Unsynced</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="text-sm font-semibold text-base/80">Machine Type</label>
|
|
<select wire:model.live="machineType"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors">
|
|
<option value="">Default (node)</option>
|
|
@foreach($suggestedMachines as $machine)
|
|
<option value="{{ $machine['value'] }}">{{ $machine['label'] }}</option>
|
|
@endforeach
|
|
@if(count($availableMachines))
|
|
<optgroup label="All detected machine types">
|
|
@foreach($availableMachines as $machine)
|
|
<option value="{{ $machine['value'] }}">{{ $machine['label'] }}</option>
|
|
@endforeach
|
|
</optgroup>
|
|
@endif
|
|
</select>
|
|
<p class="text-xs text-base/50">Q35 offers PCIe and UEFI-friendly layout, while i440fx mirrors legacy Intel chipsets.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="text-sm font-semibold text-base/80">BIOS / Firmware</label>
|
|
<select wire:model.live="biosType"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors">
|
|
@foreach($availableBiosOptions as $bios)
|
|
<option value="{{ $bios['value'] }}">{{ $bios['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
<p class="text-xs text-base/50">Choose SeaBIOS for legacy installs or OVMF for UEFI-capable operating systems.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="text-sm font-semibold text-base/80">SMBIOS Settings</label>
|
|
<textarea wire:model.live="smbiosSettings"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm min-h-[90px] focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
|
|
placeholder="Example: uuid={{ $server->uuid ?? 'auto' }},manufacturer=Virtnet.bond"></textarea>
|
|
<p class="text-xs text-base/50">Provide SMBIOS key/value pairs (comma separated) to expose to the guest.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<div class="border-t border-neutral/30 pt-3"></div>
|
|
<label class="inline-flex items-start gap-2 text-sm font-medium text-base/70">
|
|
<input type="checkbox" wire:model.live="acpiEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-0.5">
|
|
<div class="flex flex-col gap-0.5">
|
|
<span>Enable ACPI support</span>
|
|
<p class="text-xs text-base/50 font-normal">ACPI (Advanced Configuration and Power Interface) enables power management, device configuration, and graceful shutdown. Required for most modern operating systems.</p>
|
|
</div>
|
|
</label>
|
|
<label class="inline-flex items-start gap-2 text-sm font-medium text-base/70">
|
|
<input type="checkbox" wire:model.live="kvmEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-0.5">
|
|
<div class="flex flex-col gap-0.5">
|
|
<span>Enable KVM virtualization</span>
|
|
<p class="text-xs text-base/50 font-normal">KVM (Kernel-based Virtual Machine) uses hardware-assisted virtualization on the host CPU for improved performance. Disable only if you need software emulation compatibility.</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h3 class="text-lg font-semibold break-words">CPU & Virtualization</h3>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-cpu-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
CPU & Virtualization
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Configure the virtual CPU model and hardware-assisted virtualization features. These settings affect CPU performance and compatibility with the guest operating system.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">CPU Type:</span> Select a specific CPU model or use "host" to expose all host CPU features. "host" offers best performance but may reduce portability.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">KVM:</span> Hardware-assisted virtualization using the host CPU. Disable only if you need software emulation compatibility.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">CPU Flags:</span> Additional CPU feature flags can be enabled or disabled to fine-tune compatibility and performance.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60 mt-1">Tune the virtual CPU model and host feature flags exposed to the guest OS.</p>
|
|
</div>
|
|
@if($this->cpuVirtualizationSynced)
|
|
<span class="text-xs font-semibold text-success">Synced</span>
|
|
@else
|
|
<span class="text-xs font-semibold text-warning">Unsynced</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="text-sm font-semibold text-base/80">CPU Type</label>
|
|
<select wire:model.live="cpuType"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors">
|
|
@foreach($availableCpuTypes as $cpu)
|
|
<option value="{{ $cpu['value'] }}">{{ $cpu['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
<p class="text-xs text-base/50">KVM64 is the default for most guests.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="text-sm font-semibold text-base/80">CPU Flags</label>
|
|
<div class="border-t border-neutral/20 pt-3"></div>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
@foreach($flagOptions as $flag => $label)
|
|
<label class="flex items-center gap-2 rounded-md border border-neutral/60 px-3 py-2 text-sm text-base/70">
|
|
<input type="checkbox" value="{{ $flag }}" wire:model.live="selectedCpuFlags"
|
|
class="rounded border-neutral text-secondary focus:ring-secondary">
|
|
<span>{{ $label }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
<p class="text-xs text-base/50">Toggle one or more flags to enable those CPU capabilities for this VPS.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs font-semibold text-base/60 mb-2">Warning: These flags may not be supported by all CPUs.</p>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
|
|
|
|
|
|
<span class="text-xs text-base/50">Some combinations may not be supported by all CPUs. Not all flags are compatible with each other. Please check the documentation for more information about the flags and their compatibility. This documentation is available at <a href="https://qemu-project.gitlab.io/qemu/system/qemu-cpu-models.html" target="_blank" class="text-secondary hover:underline">https://qemu-project.gitlab.io/qemu/system/qemu-cpu-models.html</a>.</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Divider -->
|
|
<div class="border-t border-neutral/20"></div>
|
|
|
|
<div class="grid gap-6 xl:grid-cols-2">
|
|
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h3 class="text-lg font-semibold break-words">EFI Disks</h3>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-hard-drive-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
EFI Disks
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
EFI (Extensible Firmware Interface) disks provide non-volatile storage for UEFI firmware variables. These are required for UEFI-based virtual machines to store boot configuration and Secure Boot keys.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Purpose:</span> UEFI guests require an EFI storage chip to store firmware variables, boot entries, and Secure Boot configuration.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Storage:</span> EFI disks are automatically provisioned on cephpool storage with a fixed 4MB size in raw format. Each entry maps to an efidisk slot in the QEMU configuration.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Preenroll Keys:</span> When enabled, Secure Boot keys are pre-enrolled during EFI disk creation, enabling Secure Boot by default for UEFI guests.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60 mt-1">UEFI guests require an EFI storage chip. Each entry maps to an efidisk slot.</p>
|
|
</div>
|
|
@if($this->efiDisksSynced)
|
|
<span class="text-xs font-semibold text-success">Synced</span>
|
|
@else
|
|
<span class="text-xs font-semibold text-warning">Unsynced</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
@forelse($efiDisks as $slot => $definition)
|
|
<div class="border border-neutral rounded-md px-3 py-2 flex flex-col gap-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<p class="text-sm font-semibold">{{ strtoupper($slot) }}</p>
|
|
<button wire:click="removeDevice('{{ $slot }}')" type="button"
|
|
class="text-xs font-semibold text-error hover:text-error/80">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-base/60 break-all">{{ $definition }}</p>
|
|
</div>
|
|
@empty
|
|
<div class="flex flex-col items-center justify-center py-8 text-center">
|
|
<div class="flex items-center justify-center w-12 h-12 rounded-2xl bg-base/5 mb-3">
|
|
<x-ri-hard-drive-line class="size-6 text-base/20" />
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-base/70 mb-1">No EFI disks attached</h3>
|
|
<p class="text-xs text-base/50 max-w-xs">EFI disks store UEFI firmware variables and Secure Boot keys. Add one if your guest requires UEFI boot.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
@if(empty($efiDisks))
|
|
<div class="border border-neutral/60 rounded-md p-3 space-y-2">
|
|
<h4 class="text-sm font-semibold">Add EFI Disk</h4>
|
|
<div class="grid gap-2">
|
|
<p class="text-xs text-base/50">EFI disks are provisioned automatically on cephpool with a fixed 4M size in raw format.</p>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="inline-flex items-center gap-2 text-xs font-semibold text-base/60">
|
|
<input type="checkbox" wire:model="newEfiPreenroll"
|
|
class="rounded border-neutral text-secondary focus:ring-secondary">
|
|
Preenroll keys
|
|
</label>
|
|
<p class="text-xs text-base/50">Pre-enroll Secure Boot keys during EFI disk creation. Enables Secure Boot by default. Useful for UEFI guests requiring Secure Boot support.</p>
|
|
</div>
|
|
<x-button.secondary wire:click="addEfiDisk" wire:loading.attr="disabled" class="w-full sm:w-auto">
|
|
<x-loading target="addEfiDisk" />
|
|
Add EFI Disk
|
|
</x-button.secondary>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h3 class="text-lg font-semibold break-words">TPM Devices</h3>
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
|
<x-ri-question-line class="size-4" />
|
|
</button>
|
|
<!-- Modal Backdrop -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
|
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
<div class="flex items-center gap-3 mb-4 pr-8">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
|
<x-ri-shield-check-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
TPM Devices
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
TPM (Trusted Platform Module) devices provide hardware-based security features for virtual machines. They enable secure boot, BitLocker encryption, and other security features that require TPM functionality.
|
|
</p>
|
|
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Purpose:</span> Virtual TPM devices expose TPM functionality to the guest OS, enabling features like Secure Boot, BitLocker disk encryption, and Windows Device Guard.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Storage:</span> TPM devices are provisioned on cephpool storage with a fixed 4MB state file that stores the TPM's persistent state and keys.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Versions:</span> TPM v2.0 is recommended for modern operating systems and provides better security features. TPM v1.2 is available for legacy compatibility.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60 mt-1">Expose virtual TPM state chips for secure boot or BitLocker workloads.</p>
|
|
</div>
|
|
@if($this->tpmDevicesSynced)
|
|
<span class="text-xs font-semibold text-success">Synced</span>
|
|
@else
|
|
<span class="text-xs font-semibold text-warning">Unsynced</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
@forelse($tpmDevices as $slot => $definition)
|
|
<div class="border border-neutral rounded-md px-3 py-2 flex flex-col gap-1">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<p class="text-sm font-semibold">{{ strtoupper($slot) }}</p>
|
|
<button wire:click="removeDevice('{{ $slot }}')" type="button"
|
|
wire:confirm="Are you sure you want to remove this TPM device?"
|
|
class="text-xs font-semibold text-error hover:text-error/80">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-base/60 break-all">{{ $definition }}</p>
|
|
</div>
|
|
@empty
|
|
<div class="flex flex-col items-center justify-center py-8 text-center">
|
|
<div class="flex items-center justify-center w-12 h-12 rounded-2xl bg-base/5 mb-3">
|
|
<x-ri-shield-check-line class="size-6 text-base/20" />
|
|
</div>
|
|
<h3 class="text-sm font-semibold text-base/70 mb-1">No TPM devices configured</h3>
|
|
<p class="text-xs text-base/50 max-w-xs">TPM provides hardware-based security for Secure Boot, BitLocker, and other features requiring trusted platform modules.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
@if(empty($tpmDevices))
|
|
<div class="border border-neutral/60 rounded-md p-3 space-y-2">
|
|
<h4 class="text-sm font-semibold">Add TPM Device</h4>
|
|
<div class="grid gap-2">
|
|
<p class="text-xs text-base/50">TPM devices are provisioned on cephpool with a fixed 4M state file.</p>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-xs font-semibold text-base/60">Version</label>
|
|
<select wire:model="newTpmVersion"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors">
|
|
<option value="v1.2">v1.2</option>
|
|
<option value="v2.0">v2.0</option>
|
|
</select>
|
|
</div>
|
|
<x-button.secondary wire:click="addTpmDevice" wire:loading.attr="disabled" class="w-full sm:w-auto">
|
|
<x-loading target="addTpmDevice" />
|
|
Add TPM Device
|
|
</x-button.secondary>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 overflow-x-auto">
|
|
<x-button.secondary wire:click="loadSystemConfiguration" wire:loading.attr="disabled">
|
|
<x-loading target="loadSystemConfiguration" />
|
|
Refresh
|
|
</x-button.secondary>
|
|
<x-button.secondary wire:click="resetSystemSettings" :disabled="!$this->hasChanges">
|
|
Reset
|
|
</x-button.secondary>
|
|
<x-button.primary wire:click="saveSystemSettings" wire:loading.attr="disabled" :disabled="!$this->hasChanges">
|
|
<x-loading target="saveSystemSettings" />
|
|
Save Settings
|
|
</x-button.primary>
|
|
</div>
|
|
</div>
|
|
</x-proxmox::layout>
|
|
|