Joseph.Rawlings
a7cb561053
- Implemented page load animations using Alpine.js for smoother transitions in various views including firewall, help, index, network, overview, reinstall, server, statistics, storage, subdomain, and system. - Added opacity and translate effects to elements for improved visual feedback during loading. - Enhanced hover effects on cards and buttons for better user interaction. - Adjusted transition timings and delays for a more cohesive user experience.
563 lines
41 KiB
PHP
563 lines
41 KiB
PHP
<x-proxmox::layout :server="$server" view="system" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<div class="space-y-6" x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)">
|
|
<div class="flex flex-col gap-2"
|
|
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'"
|
|
style="transition: all 0.4s ease-out;">
|
|
<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-gray-600 dark:text-gray-400 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-[60] 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.away="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] 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-gray-200 dark:border-gray-800 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-gray-200 dark:border-gray-800 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-gray-500 dark:text-gray-400">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-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4 transition-all duration-300 hover:shadow-md"
|
|
:class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
style="transition: all 0.4s ease-out 0.1s;">
|
|
<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-gray-600 dark:text-gray-400 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-[60] 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.away="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] 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-gray-200 dark:border-gray-800 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-gray-200 dark:border-gray-800 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-gray-500 dark:text-gray-400 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-secondary">
|
|
<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-secondary">
|
|
@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-secondary"
|
|
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">
|
|
<label class="inline-flex items-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
<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-gray-600 dark:text-gray-400">
|
|
<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-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm 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-gray-600 dark:text-gray-400 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-[60] 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.away="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] 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-gray-200 dark:border-gray-800 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-gray-200 dark:border-gray-800 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-gray-500 dark:text-gray-400 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-secondary">
|
|
@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="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-gray-600 dark:text-gray-400">
|
|
<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-gray-500 dark:text-gray-400 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>
|
|
|
|
<div class="grid gap-6 xl:grid-cols-2">
|
|
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm 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-gray-600 dark:text-gray-400 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-[60] 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.away="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] 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-gray-200 dark:border-gray-800 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-gray-200 dark:border-gray-800 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-gray-500 dark:text-gray-400 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-gray-500 dark:text-gray-400 break-all">{{ $definition }}</p>
|
|
</div>
|
|
@empty
|
|
<div class="text-xs text-base/50 border border-dashed border-neutral rounded-md px-3 py-4 text-center">
|
|
No EFI disks attached.
|
|
</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-gray-500 dark:text-gray-400">
|
|
<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-proxmox::ui.button wire:click="addEfiDisk" wire:loading.attr="disabled" class="w-full sm:w-auto" variant="secondary">
|
|
<x-loading target="addEfiDisk" />
|
|
Add EFI Disk
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm 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-gray-600 dark:text-gray-400 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-[60] 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.away="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[60] 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-gray-200 dark:border-gray-800 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-gray-200 dark:border-gray-800 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-gray-500 dark:text-gray-400 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"
|
|
class="text-xs font-semibold text-error hover:text-error/80">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 break-all">{{ $definition }}</p>
|
|
</div>
|
|
@empty
|
|
<div class="text-xs text-base/50 border border-dashed border-neutral rounded-md px-3 py-4 text-center">
|
|
No TPM devices configured.
|
|
</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-gray-500 dark:text-gray-400">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-secondary">
|
|
<option value="v1.2">v1.2</option>
|
|
<option value="v2.0">v2.0</option>
|
|
</select>
|
|
</div>
|
|
<x-proxmox::ui.button wire:click="addTpmDevice" wire:loading.attr="disabled" class="w-full sm:w-auto" variant="secondary">
|
|
<x-loading target="addTpmDevice" />
|
|
Add TPM Device
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 overflow-x-auto">
|
|
<x-proxmox::ui.button wire:click="loadSystemConfiguration" wire:loading.attr="disabled" variant="secondary">
|
|
<x-loading target="loadSystemConfiguration" />
|
|
Refresh
|
|
</x-proxmox::ui.button>
|
|
<x-proxmox::ui.button wire:click="resetSystemSettings" :disabled="!$this->hasChanges" variant="secondary">
|
|
Reset
|
|
</x-proxmox::ui.button>
|
|
<x-proxmox::ui.button wire:click="saveSystemSettings" wire:loading.attr="disabled" :disabled="!$this->hasChanges" variant="primary">
|
|
<x-loading target="saveSystemSettings" />
|
|
Save Settings
|
|
</x-proxmox::ui.button>
|
|
</div>
|
|
</div>
|
|
</x-proxmox::layout>
|
|
|