Refactor Proxmox server views for improved UI consistency and usability
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
This commit is contained in:
@@ -37,96 +37,36 @@
|
||||
@endphp
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Page Header -->
|
||||
<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">Storage Management</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.away="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-2-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||
Storage Management
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Manage the storage drives attached to your VPS. You can add, remove, and configure drives with different bus types, cache modes, and performance options.
|
||||
</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">Bus Types:</span> SCSI (VirtIO SCSI) offers the best performance with IO thread support. VirtIO Block is also high-performance. IDE and SATA are available for compatibility.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Important:</span> The VM must be stopped to add, remove, or move drives. Total storage cannot exceed your plan allocation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/60">Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives.</p>
|
||||
</div>
|
||||
{{-- Page Header --}}
|
||||
<x-proxmox::ui.section-header
|
||||
title="Storage Management"
|
||||
subtitle="Manage virtual hard disks attached to your VPS. Add, configure, or remove storage drives."
|
||||
icon="ri-hard-drive-2-line"
|
||||
>
|
||||
<x-proxmox::ui.help-modal title="Storage Management" icon="ri-hard-drive-2-line">
|
||||
<x-slot:description>
|
||||
Manage the storage drives attached to your VPS. You can add, remove, and configure drives with different bus types, cache modes, and performance options.
|
||||
</x-slot:description>
|
||||
<x-slot:details>
|
||||
<p><span class="font-semibold text-base/90">Bus Types:</span> SCSI (VirtIO SCSI) offers the best performance with IO thread support. VirtIO Block is also high-performance. IDE and SATA are available for compatibility.</p>
|
||||
<p><span class="font-semibold text-base/90">Important:</span> The VM must be stopped to add, remove, or move drives. Total storage cannot exceed your plan allocation.</p>
|
||||
</x-slot:details>
|
||||
</x-proxmox::ui.help-modal>
|
||||
</x-proxmox::ui.section-header>
|
||||
|
||||
<!-- VM Running Warning -->
|
||||
{{-- VM Running Warning --}}
|
||||
@if($status && $status->status !== 'stopped')
|
||||
<div class="bg-error/10 border border-error/30 rounded-lg p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<x-ri-error-warning-fill class="size-5 text-error flex-shrink-0 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<h3 class="text-sm font-semibold">Server Must Be Powered Off</h3>
|
||||
<p class="text-xs text-base/70 leading-relaxed mt-1">Storage changes can only be made when the server is in a powered off state. Please shut down your server before making any storage modifications.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-proxmox::ui.alert variant="danger" title="Server Must Be Powered Off">
|
||||
Storage changes can only be made when the server is in a powered off state. Please shut down your server before making any storage modifications.
|
||||
</x-proxmox::ui.alert>
|
||||
@endif
|
||||
|
||||
<!-- Storage Over-Provisioned Warning -->
|
||||
{{-- Storage Over-Provisioned Warning --}}
|
||||
@if($totalAllocatedStorage > $maxAllowedStorage && $maxAllowedStorage > 0)
|
||||
<div class="bg-error/10 border border-error/30 rounded-lg p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<x-ri-alarm-warning-fill class="size-5 text-error flex-shrink-0 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<h3 class="text-sm font-semibold">Storage Quota Exceeded</h3>
|
||||
<p class="text-xs text-base/70 leading-relaxed mt-1">
|
||||
<strong>Your server has {{ number_format($totalAllocatedStorage, 1) }} GB of storage configured, but your plan only allows {{ number_format($maxAllowedStorage, 1) }} GB.</strong>
|
||||
The server cannot be started until storage is reduced to within your plan limits. Please delete drives or upgrade your service to allow this configuration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-proxmox::ui.alert variant="danger" title="Storage Quota Exceeded" icon="ri-alarm-warning-fill">
|
||||
<strong>Your server has {{ number_format($totalAllocatedStorage, 1) }} GB of storage configured, but your plan only allows {{ number_format($maxAllowedStorage, 1) }} GB.</strong>
|
||||
The server cannot be started until storage is reduced to within your plan limits. Please delete drives or upgrade your service to allow this configuration.
|
||||
</x-proxmox::ui.alert>
|
||||
@endif
|
||||
|
||||
<!-- Storage Usage Overview -->
|
||||
@@ -178,62 +118,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCSI Controller Configuration -->
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
{{-- SCSI Controller Configuration --}}
|
||||
<x-proxmox::ui.card>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="text-lg font-semibold">SCSI Controller</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.away="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">
|
||||
SCSI Controller Types
|
||||
</h6>
|
||||
</div>
|
||||
<div class="space-y-3 text-sm text-base/90">
|
||||
<p><strong>VirtIO SCSI / VirtIO SCSI Single:</strong> Best performance with paravirtualized drivers. Recommended for Linux and modern Windows.</p>
|
||||
<p><strong>LSI 53C895A / LSI 53C810:</strong> Emulated LSI controllers with wide compatibility.</p>
|
||||
<p><strong>MegaRAID SAS 8708EM2:</strong> Emulated MegaRAID controller.</p>
|
||||
<p><strong>VMware PVSCSI:</strong> VMware paravirtualized controller, useful for VMs migrated from VMware.</p>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-base">SCSI Controller</h3>
|
||||
<x-proxmox::ui.help-modal title="SCSI Controller Types" icon="ri-cpu-line">
|
||||
<x-slot:description>
|
||||
<div class="space-y-3 text-sm text-base/90">
|
||||
<p><strong>VirtIO SCSI / VirtIO SCSI Single:</strong> Best performance with paravirtualized drivers. Recommended for Linux and modern Windows.</p>
|
||||
<p><strong>LSI 53C895A / LSI 53C810:</strong> Emulated LSI controllers with wide compatibility.</p>
|
||||
<p><strong>MegaRAID SAS 8708EM2:</strong> Emulated MegaRAID controller.</p>
|
||||
<p><strong>VMware PVSCSI:</strong> VMware paravirtualized controller, useful for VMs migrated from VMware.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot:description>
|
||||
</x-proxmox::ui.help-modal>
|
||||
</div>
|
||||
<p class="text-sm text-base/60 mt-1">Select the SCSI controller type for SCSI drives.</p>
|
||||
</div>
|
||||
@@ -259,24 +159,26 @@
|
||||
</div>
|
||||
|
||||
@if($vmRunning && !$this->scsiControllerSynced)
|
||||
<div class="flex items-center gap-2 p-3 rounded-lg bg-warning/10 border border-warning/30 text-warning text-sm">
|
||||
<x-ri-alert-line class="size-4 flex-shrink-0" />
|
||||
<span>VM must be stopped to change the SCSI controller type.</span>
|
||||
</div>
|
||||
<x-proxmox::ui.alert variant="warning" class="mt-4">
|
||||
VM must be stopped to change the SCSI controller type.
|
||||
</x-proxmox::ui.alert>
|
||||
@endif
|
||||
</div>
|
||||
</x-proxmox::ui.card>
|
||||
|
||||
<!-- Drives List -->
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg overflow-hidden">
|
||||
<div class="p-5 border-b border-neutral">
|
||||
<h3 class="text-lg font-semibold">Attached Drives</h3>
|
||||
{{-- Drives List --}}
|
||||
<x-proxmox::ui.card :noPadding="true">
|
||||
<div class="p-5 border-b border-neutral/20">
|
||||
<h3 class="text-lg font-semibold text-base">Attached Drives</h3>
|
||||
<p class="text-sm text-base/60 mt-1">Manage the virtual hard disks connected to your VPS.</p>
|
||||
</div>
|
||||
|
||||
@if(count($drives) === 0)
|
||||
<div class="p-8 text-center">
|
||||
<x-ri-hard-drive-2-line class="size-12 mx-auto text-base/30 mb-3" />
|
||||
<p class="text-base/60">No drives attached to this VM.</p>
|
||||
<x-proxmox::ui.empty-state
|
||||
title="No Drives Attached"
|
||||
description="No drives are currently attached to this VM."
|
||||
icon="ri-hard-drive-2-line"
|
||||
class="py-8"
|
||||
>
|
||||
@if($this->remainingStorage > 0 && !$vmRunning)
|
||||
<button wire:click="openAddDriveModal" class="mt-4 text-primary hover:text-primary/80 text-sm font-medium">
|
||||
Add your first drive →
|
||||
@@ -284,7 +186,7 @@
|
||||
@elseif($this->remainingStorage > 0 && $vmRunning)
|
||||
<p class="mt-4 text-base/50 text-sm">Power off server to add drives</p>
|
||||
@endif
|
||||
</div>
|
||||
</x-proxmox::ui.empty-state>
|
||||
@else
|
||||
<div class="divide-y divide-neutral">
|
||||
@foreach($drives as $driveKey => $drive)
|
||||
@@ -381,41 +283,37 @@
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-proxmox::ui.card>
|
||||
|
||||
<!-- Detached/Unused Drives -->
|
||||
{{-- Detached/Unused Drives --}}
|
||||
@if(count($unusedDrives) > 0)
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg overflow-hidden">
|
||||
<div class="p-5 border-b border-neutral">
|
||||
<x-proxmox::ui.card :noPadding="true">
|
||||
<div class="p-5 border-b border-neutral/20">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-eject-line class="size-5 text-warning" />
|
||||
<h3 class="text-lg font-semibold">Detached Drives</h3>
|
||||
<span class="px-2 py-0.5 text-xs font-medium rounded {{ count($unusedDrives) >= 2 ? 'bg-danger/20 text-danger' : 'bg-warning/20 text-warning' }}">{{ count($unusedDrives) }}/2</span>
|
||||
<h3 class="text-lg font-semibold text-base">Detached Drives</h3>
|
||||
<x-proxmox::ui.badge :variant="count($unusedDrives) >= 2 ? 'danger' : 'warning'">
|
||||
{{ count($unusedDrives) }}/2
|
||||
</x-proxmox::ui.badge>
|
||||
</div>
|
||||
<p class="text-sm text-base/60 mt-1">These drives have been detached but their data is preserved. You can reattach them or delete them permanently.</p>
|
||||
</div>
|
||||
</div>
|
||||
@if(count($unusedDrives) >= 2)
|
||||
<div class="mt-3 p-3 rounded-lg bg-danger/10 border border-danger/30">
|
||||
<p class="text-xs text-danger flex items-center gap-2">
|
||||
<x-ri-error-warning-line class="size-4 flex-shrink-0" />
|
||||
Maximum detached drives reached. Please reattach or delete drives before detaching more.
|
||||
</p>
|
||||
</div>
|
||||
<x-proxmox::ui.alert variant="danger" class="mt-3">
|
||||
Maximum detached drives reached. Please reattach or delete drives before detaching more.
|
||||
</x-proxmox::ui.alert>
|
||||
@endif
|
||||
@if($totalAllocatedStorage >= $maxAllowedStorage && $maxAllowedStorage > 0)
|
||||
<div class="mt-3 p-3 rounded-lg bg-danger/10 border border-danger/30">
|
||||
<p class="text-xs text-danger flex items-center gap-2">
|
||||
<x-ri-error-warning-line class="size-4 flex-shrink-0" />
|
||||
Storage quota reached ({{ number_format($totalAllocatedStorage, 1) }} GB / {{ number_format($maxAllowedStorage, 1) }} GB). Reattaching drives is disabled. Please upgrade your service or delete drives to allow this configuration.
|
||||
</p>
|
||||
</div>
|
||||
<x-proxmox::ui.alert variant="danger" class="mt-3">
|
||||
Storage quota reached ({{ number_format($totalAllocatedStorage, 1) }} GB / {{ number_format($maxAllowedStorage, 1) }} GB). Reattaching drives is disabled. Please upgrade your service or delete drives to allow this configuration.
|
||||
</x-proxmox::ui.alert>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-neutral">
|
||||
<div class="divide-y divide-neutral/20">
|
||||
@foreach($unusedDrives as $unusedKey => $unusedDrive)
|
||||
<div class="p-4 hover:bg-background/50 transition-colors">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
||||
@@ -489,7 +387,7 @@
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-proxmox::ui.card>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user