259 lines
17 KiB
PHP
259 lines
17 KiB
PHP
<x-proxmox::layout :server="$server" view="display" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
|
|
<div class="flex items-center gap-1.5 text-xs text-base/50 mb-4">
|
|
<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">Display</span>
|
|
</div>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<h2 class="text-xl font-semibold break-words">Display 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-computer-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
Display Configuration
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Configure the virtual graphics adapter and video memory for your virtual machine. These settings affect how the VM displays output and can impact performance in graphical environments.
|
|
</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">Display Adapter:</span> Choose between different VGA adapter types. VirtIO-GPU offers the best performance for modern Linux guests, while standard VGA provides maximum compatibility.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Video Memory:</span> The amount of RAM allocated to the graphics adapter. Higher values can improve performance but reduce available system memory.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Tablet Input:</span> Enables absolute pointer tracking for smoother mouse capture in VNC. Recommended for graphical environments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/60 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-6">
|
|
<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">Display Adapter</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-computer-line class="size-5 text-primary" />
|
|
</div>
|
|
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
|
Display Adapter
|
|
</h6>
|
|
</div>
|
|
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
|
Select the virtual graphics adapter type for your VM. Different adapters offer varying levels of performance and compatibility.
|
|
</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">VirtIO-GPU:</span> Modern, high-performance adapter for Linux guests. Supports hardware acceleration and up to 256MB video memory.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
<span class="font-semibold text-base/90">Standard VGA:</span> Maximum compatibility option. Works with all operating systems but offers lower performance.
|
|
</p>
|
|
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
|
Changes require a VM restart to take effect.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-base/60 mt-1">Choose which VGA adapter the VPS exposes and, when supported, how much video memory it can use.</p>
|
|
</div>
|
|
@if($this->displayAdapterSynced)
|
|
<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="flex flex-col gap-2">
|
|
<label for="display-adapter" class="text-sm font-semibold text-base/80">Display Adapter</label>
|
|
<select
|
|
id="display-adapter"
|
|
wire:model.live="selectedDisplay"
|
|
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
|
|
>
|
|
@foreach($this->displayOptions as $value => $meta)
|
|
<option value="{{ $value }}">{{ $meta['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
@if($this->supportsMemory)
|
|
<div class="flex flex-col gap-2">
|
|
<label for="display-memory" class="text-sm font-semibold text-base/80">Video Memory (MB)</label>
|
|
<div class="flex flex-col gap-3">
|
|
<input
|
|
id="display-memory"
|
|
type="range"
|
|
min="16"
|
|
max="256"
|
|
step="16"
|
|
wire:model.live="displayMemory"
|
|
class="accent-secondary"
|
|
/>
|
|
<div class="flex items-center justify-between text-xs text-base/60">
|
|
<span>16 MB</span>
|
|
<span>256 MB</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-sm font-medium text-base">Selected: {{ $displayMemory ?? '—' }} MB</div>
|
|
<input
|
|
type="number"
|
|
min="16"
|
|
max="256"
|
|
step="16"
|
|
wire:model.live="displayMemory"
|
|
class="w-24 bg-background border border-neutral rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary transition-colors"
|
|
/>
|
|
</div>
|
|
<p class="text-xs text-base/60">VirtIO-GPU supports up to 256 MB. Pick the lowest value your workload requires.</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@error('selectedDisplay')
|
|
<div class="text-sm text-error">{{ $message }}</div>
|
|
@enderror
|
|
@error('displayMemory')
|
|
<div class="text-sm text-error">{{ $message }}</div>
|
|
@enderror
|
|
|
|
<div class="border-t border-neutral/30 pt-4"></div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label class="inline-flex items-start gap-3 bg-background border border-neutral rounded-md px-3 py-3">
|
|
<input type="checkbox" wire:model.live="tabletEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-1">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-sm font-semibold text-base/80">Use tablet for pointer input</span>
|
|
<p class="text-xs text-base/60">Enables absolute pointer tracking (USB tablet) for smoother mouse capture in VNC. Turn off if you prefer relative (PS/2) input.</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="border-t border-neutral/30 pt-4"></div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex flex-wrap gap-3">
|
|
<x-button.primary wire:click="saveDisplaySettings" wire:loading.attr="disabled">
|
|
<x-loading target="saveDisplaySettings" />
|
|
<span wire:loading.remove wire:target="saveDisplaySettings">Save Display Settings</span>
|
|
<span wire:loading wire:target="saveDisplaySettings">Saving...</span>
|
|
</x-button.primary>
|
|
<x-button.secondary wire:click="loadDisplayConfiguration" wire:loading.attr="disabled" class="text-sm font-medium">
|
|
<x-loading target="loadDisplayConfiguration" />
|
|
<span wire:loading.remove wire:target="loadDisplayConfiguration">Refresh</span>
|
|
<span wire:loading wire:target="loadDisplayConfiguration">Refreshing...</span>
|
|
</x-button.secondary>
|
|
</div>
|
|
<p class="text-xs text-base/60">Changes are applied to the VM configuration immediately but require a restart to take effect.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral rounded-lg p-6 flex flex-col gap-4">
|
|
<h3 class="text-lg font-semibold flex items-center gap-2">
|
|
<x-ri-information-line class="size-5 text-base/60" />
|
|
Display Mode Reference
|
|
</h3>
|
|
<div class="space-y-4 text-sm text-base/70">
|
|
@foreach($this->displayOptions as $value => $meta)
|
|
<div wire:key="display-{{ $value }}" class="border border-neutral/40 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold text-base">{{ $meta['label'] }}</span>
|
|
@if($value === $selectedDisplay)
|
|
<span class="text-xs font-semibold text-secondary">Currently selected</span>
|
|
@endif
|
|
</div>
|
|
<p class="text-xs mt-2 text-base/60">{{ $meta['description'] ?? 'Configurable display option.' }}</p>
|
|
@if($meta['supports_memory'])
|
|
<p class="text-xs mt-1 text-base/60">Supports configurable video memory (max 256 MB).</p>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="text-xs text-base/60 border border-info/30 bg-info/10 rounded-md p-3">
|
|
Need a headless mode? Choose <strong>No Display</strong> to detach VGA entirely, or <strong>Serial Console</strong> if you only need serial output.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-proxmox::layout>
|
|
|